/*
Theme Name: Studio Bloomed
Theme URI:  https://studiobloomed.nl/
Author:     Klok Media
Author URI: https://www.klokmedia.nl/
Template:   Divi
Version:    1.0
License:    GNU General Public License v2 or later
*/


/* =========================
   MENU
========================= */

:root{
  --sb-logo-mobile: 260px;  --sb-logo-min: 260px;  --sb-logo-fluid: 15vw;  --sb-logo-max: 320px;}


.et_pb_menu,
.et_pb_menu .et_pb_menu__wrap,
.et_pb_menu .et_pb_menu__menu,
.et_pb_menu .et-menu-nav{
  width: 100% !important;}


.et_pb_menu--style-inline_centered_logo
.et_pb_menu_inner_container > .et_pb_menu__logo-wrap,
.et_pb_menu--style-inline_centered_logo
.et_pb_row > .et_pb_menu__logo-wrap{
  margin-bottom: 0 !important;}


@media (max-width: 980px){

.et_pb_menu_0_tb_header .et_pb_menu_inner_container {
  display: flex;  align-items: center;}
  
  
  .et_pb_menu .et-menu-nav > ul.et-menu{
    display: block !important;  }

  
  .et_pb_menu .et_pb_menu__logo img{
    display: block !important;    width: var(--sb-logo-mobile) !important;    height: auto !important;  }

  
  .et_pb_menu .et_pb_menu__logo-wrap{
    display: block !important;  }
}


@media (min-width: 981px){

  
  .et_pb_menu .et-menu-nav > ul.et-menu{
    display: grid !important;    
    grid-template-columns: 1fr 1fr 1fr auto 1fr 1fr 1fr!important;
    /*grid-template-columns: 1fr 1fr auto 1fr 1fr !important;*/
    align-items: center !important;    width: 100% !important;    overflow: visible !important;    text-align: left !important;  }

  
  .et_pb_menu .et-menu-nav > ul.et-menu > li{
    margin: 0 !important;    padding: 0 !important;    justify-self: center !important;    align-self: center !important;  }

  
  .et_pb_menu .et-menu-nav > ul.et-menu > li > a{
    display: inline-block !important;    text-align: center !important;  }

  
  .et_pb_menu .et-menu-nav > ul.et-menu > li.et_pb_menu__logo-slot{
    position: static !important;    transform: none !important;    display: flex !important;    align-items: center !important;    justify-content: center !important;    z-index: 10 !important;  }

  
  .et_pb_menu .et-menu-nav > ul.et-menu > li.et_pb_menu__logo-slot
  .et_pb_menu__logo-wrap,
  .et_pb_menu .et-menu-nav > ul.et-menu > li.et_pb_menu__logo-slot
  .et_pb_menu__logo{
    display: block !important;    width: auto !important;    overflow: visible !important;  }

  
  .et_pb_menu .et-menu-nav > ul.et-menu > li.et_pb_menu__logo-slot
  .et_pb_menu__logo img{
    display: block !important;    width: clamp(var(--sb-logo-min), var(--sb-logo-fluid), var(--sb-logo-max)) !important;    height: auto !important;    max-width: none !important;  }

  
  .et_pb_menu .et_pb_menu__logo-wrap:not(.et_pb_menu__logo-slot .et_pb_menu__logo-wrap){
    display: none !important;  }
}

/* =========================
   MENU
========================= */


/* =========================
   Base (gedeeld)
========================= */

.sb-cf{
  --sb-radius-pill: 999px;
  --sb-radius-box: 28px;

  --sb-btn-bg: #4b0f1c;
  --sb-btn-bg-hover: #3e0c16;
  --sb-btn-text: #ffffff;

  --sb-text: #2b2b2b;
  --sb-muted: rgba(43,43,43,.75);

  --sb-gap: 18px;
  --sb-field-pad-y: 16px;
  --sb-field-pad-x: 22px;

  color: var(--sb-text);
}

.sb-cf *{
  box-sizing: border-box;
}

.sb-cf .wpcf7-form-control-wrap{
  display: block;
}

.sb-cf input[type="text"],
.sb-cf input[type="email"],
.sb-cf input[type="tel"],
.sb-cf input[type="url"],
.sb-cf input[type="number"],
.sb-cf input[type="date"],
.sb-cf select,
.sb-cf textarea{
  width: 100%;
  border: 0;
  outline: none;
  color: var(--sb-text);
  padding: var(--sb-field-pad-y) var(--sb-field-pad-x);
  font-size: 16px;
  line-height: 1.2;
}

.sb-cf textarea{
  min-height: 140px;
  border-radius: var(--sb-radius-box);
  resize: vertical;
  padding-top: 18px;
  padding-bottom: 18px;
}

.sb-cf input:not(textarea),
.sb-cf select{
  border-radius: var(--sb-radius-pill);
}

/* Placeholder */
.sb-cf ::placeholder{
  color: rgba(43,43,43,.55);
}

/* Submit button */
.sb-cf input[type="submit"]{
  border: 0;
  border-radius: var(--sb-radius-pill);
  padding: 14px 34px;
  background: var(--sb-btn-bg);
  color: var(--sb-btn-text);
  cursor: pointer;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: none;
}

.sb-cf input[type="submit"]:hover{
  background: var(--sb-btn-bg-hover);
}

/* Validation + response */
.sb-cf .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 13px;
}
.sb-cf .wpcf7-response-output{
  margin: 16px 0 0;
  border-radius: 14px;
}

/* Layout helpers */
.sb-cf__stack{
  display: grid;
  gap: var(--sb-gap);
}

.sb-grid{
  display: grid;
  gap: var(--sb-gap);
  margin-bottom: var(--sb-gap);
}
.sb-grid--1{ grid-template-columns: 1fr; }
.sb-grid--2{ grid-template-columns: 1fr 1fr; }

@media (max-width: 980px){
  .sb-grid--2{ grid-template-columns: 1fr; }
}

/* Checkbox styling */
.sb-cf input[type="checkbox"]{
  width: 16px;
  height: 16px;
  transform: translateY(2px);
}

.sb-cf .wpcf7-list-item{
  margin: 0;
}

.sb-cf .wpcf7-list-item label{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--sb-muted);
}

.sb-cf__checkline{
  margin: 10px 0 18px;
}

.sb-cf__legend{
  margin: 26px 0 10px;
  font-size: 14px;
  color: var(--sb-text);
}

.sb-cf__checks--2col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin-bottom: 18px;
}
@media (max-width: 767px){
  .sb-cf__checks--2col{ grid-template-columns: 1fr; }
}

/* Button wrapper: rechts uitlijnen + ruimte voor spinner */
.sb-cf__submit{
  position: relative;
  justify-content: flex-end;
}

/* CF7 spinner uit de flow halen */
.sb-cf__submit .wpcf7-spinner{
  position: absolute;
  right: -22px;        /* zet ‘m net buiten de knop */
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* Footer (kleine form: consent links, knop rechts) */
.sb-cf__footer{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 22px;
  align-items: end;
  margin-top: 18px;
}
@media (max-width: 767px){
  .sb-cf__footer{
    grid-template-columns: 1fr;
  }
}

.sb-cf__submit{
  display: flex;
  justify-content: flex-end;
}
.sb-cf__submit--left{
  justify-content: flex-start;
}

.sb-cf__checkline--spaced{
  margin-top: 18px;
  margin-bottom: 22px;
}

/* =========================
   Variant 1: lichtroze-cf
   (velden lichtroze)
========================= */

.lichtroze-cf .sb-cf{
  --sb-field-bg: rgba(255,255,255,.35);
}

.lichtroze-cf .sb-cf input[type="text"],
.lichtroze-cf .sb-cf input[type="email"],
.lichtroze-cf .sb-cf input[type="tel"],
.lichtroze-cf .sb-cf select,
.lichtroze-cf .sb-cf textarea{
  background: #f5edee;
}

/* Klein formulier: textarea iets hoger, zoals screenshot */
.lichtroze-cf .sb-cf--small textarea{
  min-height: 180px;
}

/* =========================
   Variant 2: wit-cf
   (witte velden op lichtroze achtergrond)
========================= */

.wit-cf .sb-cf input[type="text"],
.wit-cf .sb-cf input[type="email"],
.wit-cf .sb-cf input[type="tel"],
.wit-cf .sb-cf select,
.wit-cf .sb-cf textarea{
  background: #ffffff;
}

/* Grote textarea’s zoals in het ontwerp */
.wit-cf .sb-cf--large textarea{
  min-height: 140px;
}

/* Nettere spacing onder de eerste checkbox */
.wit-cf .sb-cf__checkline{
  margin-top: 8px;
}

/* Checkbox grid: 2 kolommen, netjes uitgelijnd */
.sb-cf__checks--2col .wpcf7-checkbox{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}

/* p-wrapper van CF7 weghalen */
.sb-cf__checks--2col p{
  margin: 0 !important;
}

/* list-items moeten block zijn (geen inline) */
.sb-cf__checks--2col .wpcf7-list-item{
  display: block !important;
  margin: 0 !important;
}

/* mobiel: 1 kolom */
@media (max-width: 767px){
  .sb-cf__checks--2col .wpcf7-checkbox{
    grid-template-columns: 1fr;
  }
}


.et_pb_group_carousel_dots_disabled .et_pb_group_carousel_arrow, .et_pb_group_carousel_dots_overlay .et_pb_group_carousel_arrow {
	top: clamp(-70px, -27.7273px + -3.4091vw, -40px);
}
.et_pb_group_carousel_arrows_outside .et_pb_group_carousel_arrow_next {
  transform: none;
}
.et_pb_group_carousel_arrows_outside .et_pb_group_carousel_arrow_prev {
  transform: none;
  left: unset;
  right: clamp(40px, 27.7273px + 3.4091vw, 70px);
}

/* Meer weten block – carousel even hoog als tekstkolom */
@media (min-width: 981px){

  /* row: columns even hoog */
  .meerwetenblock{
    align-items: stretch !important;
  }

  .meerwetenblock > .et_pb_column{
    align-self: stretch !important;
  }

  /* kolom met carousel */
  .meerwetenblock .et_pb_column:has(.et_pb_group_carousel){
    display: flex;
  }

  /* carousel moet volledige hoogte pakken */
  .meerwetenblock .et_pb_group_carousel{
    flex: 1;
    display: flex;
    min-height: 100%;
  }

  /* alle carousel wrappers op full height */
  .meerwetenblock .et_pb_group_carousel_container,
  .meerwetenblock .et_pb_group_carousel_track,
  .meerwetenblock .et_pb_group_carousel_slide,
  .meerwetenblock .et_pb_group,
  .meerwetenblock .et_pb_image,
  .meerwetenblock .et_pb_image_wrap{
    height: 100% !important;
  }

  /* afbeelding vult container */
  .meerwetenblock .et_pb_image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

/* Styling meldingen CF 7 */
/* CF7 meldingen */
.wpcf7-response-output{
  margin: clamp(20px,3vw,40px) 0 0 !important;
  padding: 18px 28px !important;

  border-radius: 100vw !important;
  border: 2px solid transparent;

  font-size: 14px;
  line-height: 1.5;

  display: flex;
  align-items: center;
}

.wpcf7-response-output.wpcf7-mail-sent-ok{
  background: #f4faf5;
  border-color: #3aa655;
  color: #2a6f3b;
}

.wpcf7-response-output.wpcf7-validation-errors{
  background: #fff7f7;
  border-color: #e05757;
  color: #8b2e2e;
}

.wpcf7-response-output.wpcf7-mail-sent-ng{
  background: #fff4f4;
  border-color: #c94b4b;
  color: #7a1e1e;
}