/* ==========================================================
   Sander Wielemaker theme — fonts + component styles
   Zelfde visuele taal als het draaiboek "24 uur weg met je kind"
   ========================================================== */

@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-900-normal.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-600-italic.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('../fonts/work-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('../fonts/work-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('../fonts/work-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('../fonts/work-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- basics ---------- */
body { background:#FFFFFF; }
a { text-decoration underline; text-underline-offset:0.15em; }
::selection { background:#E8782A; color:#F7F2E6; }

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; padding:22px 24px;
  font-family:'Plex Mono', monospace; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
}
.site-header a{ text-decoration:none; }
.site-header .brand{ color:#1F3327; font-weight:600; }
.site-header nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.site-header nav a{ color:#2A2620; }
.site-header nav a:hover{ color:#E8782A; }

.site-footer{
  max-width:1100px; margin:0 auto; padding:34px 24px 46px 24px;
  font-family:'Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color:#6b6250; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px 32px;
  border-top:1px solid rgba(42,38,32,0.15); margin-top:40px;
}
.site-footer a{ color:#6b6250; text-decoration:none; }
.site-footer a:hover{ color:#E8782A; }
.site-footer__details{
  display:flex; flex-direction:column; gap:6px; line-height:1.45;
}
.site-footer__name{
  color:#1F3327; font-weight:600;
}
.site-footer__nav{ flex:1 1 auto; }
.site-footer__menu{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px; line-height:1.45;
}
.site-footer__menu a{ color:#6b6250; }
.site-footer__menu a:hover{ color:#E8782A; }
.site-footer__copy{ flex:0 0 auto; }

/* Ruimte bovenaan als de site-header uitstaat */
body.sw-no-header #main{
  padding-top:48px;
}

/* ---------- eyebrow / mono labels ---------- */
.is-style-eyebrow{
  font-family:'Plex Mono', monospace !important;
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#E8782A;
}
.is-style-eyebrow.brass{ color:#9C7A32; }
.is-style-eyebrow.ember{ color:#B14A2B; }

/* ---------- dark hero / cover card ---------- */
.is-style-dark-card{
  background:#1F3327 !important;
  color:#F7F2E6;
  border:1px solid rgba(215,179,106,0.45);
  border-radius:3px;
}
.is-style-dark-card h1,
.is-style-dark-card h2,
.is-style-dark-card h3{ color:#F7F2E6 !important; }
.is-style-dark-card p{ color:#CBBE9C; }
.is-style-dark-card .wp-block-button__link{
  background:#E8782A; color:#F7F2E6; border-radius:2px;
}
.is-style-dark-card .wp-block-button__link:hover{
  background:#B14A2B;
}

/* ---------- accent / paper panel ---------- */
.is-style-panel{
  background:#F7F2E6 !important;
  border-left:3px solid #9C7A32;
  padding:18px 22px;
  border-radius:2px;
}
.is-style-panel.ember{ border-left-color:#B14A2B; }
.is-style-panel.mandarin{ border-left-color:#E8782A; }

/* ---------- waypoint numbered badge (heading style) ---------- */
.is-style-waypoint{
  display:flex; align-items:flex-start; gap:16px; margin-bottom:0.4em;
}
.is-style-waypoint::before{
  counter-increment: waypoint;
  content: counter(waypoint, decimal-leading-zero);
  flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  background:#1F3327; color:#F7F2E6; border:1.5px solid #E8782A;
  font-family:'Plex Mono', monospace; font-size:0.95rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.waypoint-list{ counter-reset: waypoint; }

/* ---------- buttons ---------- */
.wp-block-button__link{
  font-family:'Plex Mono', monospace !important;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none !important;
  padding:0.9em 1.6em !important;
  box-sizing:border-box;
}
.is-style-outline .wp-block-button__link{
  border:1.5px solid #1F3327 !important; color:#1F3327 !important; background:transparent !important;
}
.is-style-outline .wp-block-button__link:hover{
  border-color:#E8782A !important; color:#E8782A !important;
}

/* ---------- pull quote / beat line ---------- */
.is-style-beat{
  font-family:'Fraunces', serif !important;
  font-style:italic; font-weight:600;
  font-size:1.35rem !important;
  color:#1F3327;
  border-left:3px solid #E8782A;
  padding-left:16px;
  margin:0.6em 0;
}

/* ---------- separators ---------- */
.wp-block-separator{ border-top:1.5px solid rgba(42,38,32,0.2); }
.wp-block-separator.is-style-ember{ border-top:2.5px solid #E8782A; max-width:60px; margin-left:0; }

/* ---------- contact form ---------- */
.sander-contact-form{ max-width:520px; margin-top:1em; }
.sander-contact-form p{ margin:0 0 14px 0; }
.sander-contact-form label{
  display:block; font-family:'Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase; color:#9C7A32; margin-bottom:5px;
}
.sander-contact-form input[type="text"],
.sander-contact-form input[type="email"],
.sander-contact-form textarea{
  width:100%; padding:11px 12px; border:1.4px solid rgba(42,38,32,0.3);
  background:#F7F2E6; color:#2A2620; font-family:'Work Sans', sans-serif; font-size:1rem;
  border-radius:2px;
}
.sander-contact-form textarea{ min-height:130px; resize:vertical; }
.sander-contact-form button{
  font-family:'Plex Mono', monospace; letter-spacing:0.04em; text-transform:uppercase;
  background:#E8782A; color:#F7F2E6; border:none; padding:0.9em 1.8em;
  border-radius:2px; cursor:pointer; font-size:0.85rem;
}
.sander-contact-form button:hover{ background:#B14A2B; }
.sander-contact-form .hp-field{ position:absolute; left:-9999px; }
.sander-contact-notice{
  padding:12px 16px; margin-bottom:18px; border-radius:2px; font-size:0.95rem;
}
.sander-contact-notice.success{ background:#e4ecdf; color:#1F3327; border-left:3px solid #1F3327; }
.sander-contact-notice.error{ background:#f3ded7; color:#7a2c14; border-left:3px solid #B14A2B; }

/* ---------- responsive ---------- */
@media (max-width:600px){
  .site-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .is-style-waypoint::before{ width:36px; height:36px; font-size:0.8rem; }
}

/* ---------- standaard content-breedte ---------- */
.sw-content{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}
/* Blokken die je in de editor op "brede breedte" zet, mogen breder dan de standaard container */
.sw-content .alignwide{
  max-width:1100px;
}
/* Blokken op "volle breedte" (bijv. een hero met achtergrondfoto) breken uit de container */
.sw-content .alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Voorkom horizontale scroll door 100vw + scrollbar */
html{
  overflow-x:clip;
}
img, svg, video, iframe{
  max-width:100%;
  height:auto;
}

/* ---------- layout utilities (used by the block patterns) ---------- */
.sw-section{ max-width:1100px; margin:0 auto; padding:64px 24px; }
.sw-section.narrow{ max-width:740px; }
.sw-pad-lg{ padding:72px 32px; }
.sw-pad-md{ padding:40px 28px; }

/* ---------- salespage photos ---------- */
.sw-photo img{ border-radius:2px; border:1px solid rgba(42,38,32,0.12); }
.sw-photo-dark img{ border-color:rgba(215,179,106,0.45); }
.sw-hero-cover{ border-radius:0; }
.sw-hero-cover .wp-block-cover__inner-container{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- FluentCart Buy Now-knop centreren ---------- */
.wp-block-fluent-cart-buy-now-button{
  display:table;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- FluentCart order bump ---------- */
.fct_order_promotions_wrap{
  margin-top:1.25rem;
}
.fct_order_promotions_wrap .fct_form_section_header{
  margin-bottom:10px;
}
.fct_order_promotions_wrap .fct_form_section_header_label{
  font-family:'Plex Mono', monospace !important;
  font-size:0 !important;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#E8782A !important;
  font-weight:600 !important;
  margin:0;
}
.fct_order_promotions_wrap .fct_form_section_header_label::before{
  content:"Voeg toe aan je bestelling";
  font-size:0.78rem;
  line-height:1.4;
  display:inline-block;
}
.fct_order_promotions_wrap .fct_form_section_header_label[data-sw-localized]{
  font-size:0.78rem !important;
  line-height:1.4;
}
.fct_order_promotions_wrap .fct_form_section_header_label[data-sw-localized]::before{
  content:none;
  display:none;
}

.fct_order_promotions_wrap .fct_order_promotion{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#F7F2E6;
  border:1.5px dashed rgba(232,120,42,0.65);
  border-radius:3px;
  padding:18px 16px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fct_order_promotions_wrap .fct_order_promotion:has(.fct_order_promotion_input:checked){
  border-style:solid;
  border-color:#E8782A;
  background:#FFF6ED;
  box-shadow:0 0 0 1px rgba(232,120,42,0.25);
}

.fct_order_promotions_wrap .fct_order_promotion_checkbox{
  flex:0 0 auto;
  padding-top:3px;
}
.fct_order_promotions_wrap .fct_order_promotion_input{
  width:18px;
  height:18px;
  accent-color:#E8782A;
  cursor:pointer;
}

.fct_order_promotions_wrap .fct_bump_details{
  flex:1 1 auto;
  min-width:0;
}
.fct_order_promotions_wrap .fct_order_promotion_label{
  cursor:pointer;
  display:block;
}

.fct_order_promotions_wrap .fct_order_promotion_title{
  font-family:'Fraunces', ui-serif, Georgia, serif;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.25;
  color:#1F3327;
  margin:0 0 6px;
}

.fct_order_promotions_wrap .fct_order_promotion_product_title{
  font-family:'Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#6b6250;
  margin:0 0 8px;
}

.fct_order_promotions_wrap .fct_order_promotion_price,
.fct_order_promotions_wrap span.fct_order_promotion_price{
  font-family:'Fraunces', ui-serif, Georgia, serif !important;
  font-weight:900 !important;
  font-size:1.45rem !important;
  color:#E8782A !important;
  display:inline-block;
  margin:0 0 10px;
}

.fct_order_promotions_wrap .fct_order_promotion_description{
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:0.92rem;
  line-height:1.55;
  color:#2A2620;
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid rgba(42,38,32,0.12);
}
.fct_order_promotions_wrap .fct_order_promotion_description strong{
  color:#1F3327;
}
.fct_order_promotions_wrap .fct_order_promotion_description br{
  display:block;
  content:"";
  margin-top:0.35em;
}

@media (max-width:600px){
  .fct_order_promotions_wrap .fct_order_promotion{
    padding:14px 12px;
    gap:10px;
  }
  .fct_order_promotions_wrap .fct_order_promotion_title{
    font-size:1.05rem;
  }
}

/* ---------- Betaalpagina: Wat je kind onthoudt ---------- */
.sw-checkout-hero{
  background:#FFFFFF;
  padding:56px 24px 48px;
  border-bottom:1px solid rgba(42,38,32,0.1);
}
.sw-checkout-hero > .wp-block-columns,
.sw-checkout-hero .wp-block-columns{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  align-items:flex-start;
  gap:48px;
}

/* Productcover-mockup (tot er een echte cover staat) */
.sw-product-cover{
  aspect-ratio:3/4;
  max-width:340px;
  margin:0 auto;
  background:#1F3327;
  color:#F7F2E6;
  border:1.5px solid rgba(232,120,42,0.55);
  border-radius:2px;
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:12px 16px 0 rgba(31,51,39,0.12);
}
.sw-product-cover__eyebrow{
  font-family:'Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#E8782A;
}
.sw-product-cover__title{
  font-family:'Fraunces', ui-serif, Georgia, serif;
  font-weight:900;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  line-height:1.15;
  color:#F7F2E6;
  margin:18px 0 12px;
}
.sw-product-cover__sub{
  font-family:'Work Sans', sans-serif;
  font-size:0.95rem;
  line-height:1.45;
  color:#CBBE9C;
}
.sw-product-cover__foot{
  font-family:'Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(247,242,230,0.55);
  border-top:1px solid rgba(215,179,106,0.35);
  padding-top:14px;
  margin-top:24px;
}

.sw-checkout-copy h1{
  font-size:clamp(2rem, 4vw, 2.75rem);
  margin-top:0.15em;
  margin-bottom:0.35em;
}
.sw-checkout-copy .sw-lead{
  font-size:1.2rem;
  line-height:1.45;
  color:#1F3327;
  font-weight:500;
  margin-bottom:1.1em;
}

.sw-topic-list{
  list-style:none;
  margin:1em 0 1.4em;
  padding:0;
}
.sw-topic-list li{
  margin:0 0 0.85em;
  padding-left:0;
  line-height:1.45;
}
.sw-topic-list strong{
  display:inline-block;
  font-family:'Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#E8782A;
  margin-right:0.35em;
}

.sw-checklist{
  list-style:none;
  margin:1em 0 1.5em;
  padding:0;
}
.sw-checklist li{
  position:relative;
  padding-left:1.55em;
  margin:0 0 0.65em;
  line-height:1.5;
}
.sw-checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#E8782A;
  font-weight:700;
}

.sw-moment-list{
  list-style:none;
  margin:0.8em 0 1.2em;
  padding:0;
  border-left:3px solid #E8782A;
  padding-left:16px;
}
.sw-moment-list li{
  font-family:'Fraunces', ui-serif, Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:1.15rem;
  color:#1F3327;
  margin:0 0 0.35em;
  line-height:1.35;
}

/* Bestelzone onder de marketing */
.sw-checkout-zone{
  background:#FFFFFF;
  padding:48px 24px 64px;
}
.sw-order-card{
  max-width:420px;
  margin:0 auto;
  background:#F7F2E6;
  border:1px solid rgba(42,38,32,0.12);
  border-radius:3px;
  padding:32px 28px 28px;
  box-shadow:0 10px 28px rgba(42,38,32,0.08);
  text-align:center;
}
.sw-order-card h2{
  margin-top:0;
  margin-bottom:0.35em;
  font-size:1.55rem;
}
.sw-order-meta{
  font-family:'Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#9C7A32;
  margin:0 0 1.2em;
}
.sw-order-price{
  font-family:'Fraunces', ui-serif, Georgia, serif;
  font-weight:900;
  font-size:2.6rem;
  line-height:1;
  color:#1F3327;
  margin:0 0 0.15em;
}
.sw-order-price-note{
  font-family:'Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6b6250;
  margin:0 0 1.4em;
}
.sw-order-card .wp-block-buttons{
  justify-content:center;
  width:100%;
  max-width:100%;
}
.sw-order-card .wp-block-button,
.sw-order-card .wp-block-button.has-custom-width{
  width:100% !important;
  max-width:100%;
}
.sw-order-card .wp-block-button__link{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:#E8782A !important;
  color:#F7F2E6 !important;
}
.sw-order-card .wp-block-button__link:hover{
  background:#B14A2B !important;
}
.sw-order-card .wp-block-fluent-cart-buy-now-button{
  width:100%;
  max-width:100%;
  display:block;
  margin:0;
  box-sizing:border-box;
}
.sw-cta-note{
  font-family:'Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#6b6250;
  margin:14px 0 0;
}

@media (max-width:781px){
  .sw-content{
    padding-left:16px;
    padding-right:16px;
    width:100%;
    max-width:100%;
  }
  /* Geen 100vw op mobiel — dat is vaak een fractie te breed */
  .sw-content .alignfull{
    width:calc(100% + 32px);
    max-width:calc(100% + 32px);
    margin-left:-16px;
    margin-right:-16px;
  }
  .sw-checkout-hero{ padding:36px 16px 32px; box-sizing:border-box; }
  .sw-product-cover{ max-width:280px; margin-bottom:12px; }
  .sw-checkout-zone{ padding:36px 16px 48px; box-sizing:border-box; }
  .sw-order-card{ padding:26px 20px 22px; }

  /* FluentCart checkout: houd alles binnen het scherm */
  .fct_checkout_form_section,
  .fct_order_promotions_wrap,
  .fct_order_promotion,
  .fct_bump_details,
  .fct_form_section_body,
  [class*="fct_checkout"],
  [class*="fluent-cart"]{
    max-width:100%;
    box-sizing:border-box;
  }
  .fct_order_promotions_wrap .fct_order_promotion_description,
  .fct_order_promotions_wrap .fct_order_promotion_title{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  input, select, textarea, button{
    max-width:100%;
    box-sizing:border-box;
  }
}