/* ═ Camelot mobiel — één laag voor alle pagina's ═
   Laadt ná kleuren.css en typografie.css. Raakt de desktop niet: alles staat
   onder @media (max-width:767px), de Elementor-mobielgrens; alleen de header
   volgt de Astra-grens (921px), want daar verschijnt de hamburger.
   Ontwerpkader (gemeten op 390px, 7-9-2026):
     raster    gutter 20 · kaart-binnenpadding 20 · kaart-gap 14
     type      h1 30/1.15 · h2 24/1.2 · h3 20/1.3 · p 15/1.75 · eyebrow 12/.18em
     ritme     sectie 48 boven / 56 onder · kop→alinea 12 · alinea→alinea 16
     hero      binnenpagina 300px, home min(78vh,640px)
     knoppen   pil, 48px hoog, 14/700, volle breedte (max 340) in CTA-blokken
     kaarten   radius 16 · rand 1px navy 8% · schaduw zacht
     footer    navy, compact, tekst wit (AA), ordes in twee kolommen */

/* ── 0 · header (Astra-grens: hamburger vanaf 921px) ─────────────────── */
@media (max-width:921px){
  .ast-mobile-header-wrap .ast-primary-header-bar,
  .ast-primary-header-bar .site-primary-header-wrap{min-height:64px!important;}
  #ast-mobile-header .site-header-primary-section-right{gap:10px;}
  .ast-mobile-header-wrap img.custom-logo{width:118px!important;height:auto!important;}
  a.camelot-mob-knop{display:inline-flex!important;align-items:center;height:40px;padding:0 16px!important;
    margin-right:0!important;font-size:13px!important;letter-spacing:.01em;}
  .ast-button-wrap .menu-toggle.main-header-menu-toggle{width:40px!important;height:40px!important;min-width:40px;
    padding:0!important;border-radius:12px!important;display:inline-flex;align-items:center;justify-content:center;}
  .site-header{padding-top:env(safe-area-inset-top);}
}

@media (max-width:767px){
  :root{
    --m-gutter:20px; --m-sectie-boven:48px; --m-sectie-onder:56px;
    --m-h1:30px; --m-h2:24px; --m-h3:20px; --m-lh:1.75;
    --m-radius:16px; --m-rand:rgba(22,31,46,.08); --m-schaduw:0 6px 20px rgba(22,31,46,.06);
    --m-knop:48px;
  }
  html{-webkit-text-size-adjust:100%;}

  /* ── 1 · typografie ──────────────────────────────────────────────────── */
  h1,h1.elementor-heading-title,h1.entry-title,.ttk h1{
    font-size:var(--m-h1)!important;line-height:1.15!important;font-weight:800!important;
    letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual;}
  h2,h2.elementor-heading-title,h2.elementor-image-box-title,.slc-titel,.rtv-titel,.edu-titel,.cb-demo h2,
  .elementor-element-519aba3 .elementor-heading-title{
    font-size:var(--m-h2)!important;line-height:1.2!important;font-weight:800!important;
    letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual;}
  /* home: hero-titel en de statement "Treed binnen" krijgen hun eigen trap */
  .elementor-578 .elementor-element-fcdaf37 .elementor-heading-title{font-size:34px!important;line-height:1.1!important;}
  .elementor-578 .elementor-element-431bb09 .elementor-heading-title{font-size:13px!important;line-height:1.5!important;
    letter-spacing:.14em!important;font-weight:700!important;margin-top:10px;}
  .elementor-578 .elementor-element-519aba3 .elementor-heading-title{font-size:28px!important;line-height:1.15!important;}
  h3,h4,h3.elementor-heading-title,.slcs-kop,.rtv-naam,span.rb-functie{
    font-size:var(--m-h3)!important;line-height:1.3!important;overflow-wrap:break-word;}
  h3.elementor-heading-title{font-size:22px!important;}
  span.og-naam{font-size:22px!important;line-height:1.15!important;}
  h5{font-size:16px!important;}
  /* alleen inhoud en footer — het uitschuifmenu van Astra blijft ongemoeid */
  .site-content p,.site-content li,.site-content td,.site-content blockquote,.site-content figcaption,
  .site-footer p,.site-footer li{font-size:15px!important;line-height:var(--m-lh)!important;}
  .site-content p:not([class]):not(:last-child){margin-bottom:16px!important;}
  .elementor-widget-text-editor p:not(:last-child){margin-bottom:16px!important;}
  .slc-eyebrow,.cb-demo .eyebrow,span.rtv-eyebrow,span.edu-eyebrow,.of-ladder-kop{
    font-size:12px!important;letter-spacing:.18em!important;line-height:1.5!important;}
  .fq-antwoord,.og-desc,.slc-card p,.edu-card p{font-size:15px!important;line-height:1.7!important;}
  /* wint van pagina-eigen regels als .elementor-element-… .elementor-widget-text-editor p{line-height:1.85!important} */
  .site-content .elementor-element .elementor-image-box-description,.site-content .elementor-element .elementor-widget-text-editor p{line-height:var(--m-lh)!important;}

  /* ── 2 · uitlijning: koppen mogen gecentreerd blijven, lopende tekst links ── */
  .elementor-widget-text-editor p,.elementor-widget-text-editor ul,.elementor-widget-text-editor ol,
  .ttk p,.slc-lede,.rtv-lede,.edu-lede,.cb-demo .lead,.slcs-sub,.rtv-duo-tekst p,.elementor-image-box-description{
    text-align:left!important;}
  .ttk-div,.slc-div,.rtv-div,.edu-div{width:220px!important;max-width:80%;margin-left:auto!important;margin-right:auto!important;}
  .elementor-widget-divider{--divider-width:220px!important;}
  .elementor-widget-divider .elementor-divider{max-width:100%;}

  /* ── 3 · hero's: binnenpagina's 300px, home iets korter dan de viewport ── */
  .tth{height:300px!important;}
  .elementor-8 .elementor-element.elementor-element-627553f,
  .elementor-10 .elementor-element.elementor-element-a0fb02c,
  .elementor-1673 .elementor-element.elementor-element-29ff59d,
  .elementor-579 .elementor-element.elementor-element-cbcf082,
  .elementor-2307 .elementor-element.elementor-element-6a005e6{
    --min-height:300px;min-height:300px!important;--padding-top:72px;--padding-bottom:16px;
    --padding-left:20px;--padding-right:20px;--align-items:center;--justify-content:center;
    align-items:center!important;justify-content:center!important;}
  /* over-camelot-2-3: pagina-eigen regel zet height:450px hard — op mobiel dezelfde 300px als de rest */
  .elementor-579 .elementor-element.elementor-element-cbcf082{height:300px!important;}
  .elementor-578 .elementor-element.elementor-element-094be62{--min-height:min(78vh,640px);min-height:min(78vh,640px)!important;min-height:min(78dvh,640px)!important;}

  /* ── 4 · secties en ritme ────────────────────────────────────────────── */
  .ttk{padding:40px var(--m-gutter) 36px!important;}
  .ttk-cta{margin:32px 0 4px!important;}
  .slc,.rtv,.edu,.tif,.fq-wrap,.cf-wrap,.of-wrap,.od-wrap{padding:var(--m-sectie-boven) var(--m-gutter) var(--m-sectie-onder)!important;}
  .cb-demo{padding:56px var(--m-gutter) 64px!important;}
  .cb-demo .kop{margin-bottom:32px!important;}
  .cb-demo .feat{margin-top:40px!important;}
  .cb-demo .galerij{margin-top:40px!important;}
  .cb-demo .cta{margin-top:36px!important;}
  .slc-grid,.edu-grid{margin-top:28px!important;}
  .slc-verhaal{margin-top:28px!important;}
  .elementor-8 .elementor-widget-spacer{--spacer-size:16px!important;}
  .elementor-8 .elementor-element.elementor-element-577fc67{--padding-top:32px;--padding-bottom:24px;}
  .elementor-8 .elementor-element.elementor-element-ad9132b{--padding-bottom:40px;}
  .elementor-2307 .elementor-element.elementor-element-x08jixj{padding:48px 20px 40px!important;}
  .elementor-2307 .elementor-element.elementor-element-zrrongk{padding:48px 20px 40px!important;}

  /* ── 5 · kaarten ─────────────────────────────────────────────────────── */
  .og-kaart,.slc-card,.edu-card,.tif-blok,.fq-card,.cf-card,.of-card,.od-card,.cb-demo .feat > div,.slc-stand{
    border-radius:var(--m-radius)!important;padding:24px 20px!important;}
  .fq-card,.cf-card,.of-card,.od-card{padding:24px 20px 28px!important;}
  .og-grid,.slc-grid,.edu-grid,.rtv-grid,.cb-demo .feat,.cb-demo .galerij{gap:14px!important;}
  .og-kop{gap:12px!important;min-height:0!important;margin-bottom:10px!important;}
  .og-kop img.orde-embleem{width:44px!important;height:44px!important;}
  .og-desc{margin-bottom:14px!important;}
  .slc-icoon,.edu-icoon{width:48px!important;height:48px!important;border-radius:12px!important;margin-bottom:14px!important;}
  .slc-icoon svg,.edu-icoon svg{width:24px;height:24px;}
  .tif-blok{margin-bottom:14px!important;}

  /* ── 6 · knoppen: pil, 48px, volle breedte in CTA-blokken ────────────── */
  .elementor-widget-button .elementor-button,a.ast-custom-button,.wpforms-submit,button.fq-knop,a.fq-knop,button.cf-btn,a.of-cta,a.oa-cta,
  .ttk-cta a,.slc-cta a,.cb-demo .cta a,.tif-knop,.tif-knop-licht,.fq-cta a{
    min-height:var(--m-knop)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    padding:0 24px!important;font-size:14px!important;font-weight:700!important;border-radius:999px!important;
    line-height:1.2!important;box-sizing:border-box;text-align:center;}
  .elementor-align-center .elementor-button,.elementor-mobile-align-center .elementor-button,
  .ttk-cta a,.slc-cta a,.cb-demo .cta a,button.cf-btn,.wpforms-submit,.tif-knop,.fq-cta a,a.of-cta{
    width:100%!important;max-width:340px;}
  .elementor-widget-button .elementor-button-wrapper{display:flex;justify-content:center;}
  .elementor-widget-button.elementor-align-left .elementor-button-wrapper,.elementor-widget-button.elementor-mobile-align-left .elementor-button-wrapper{justify-content:flex-start;}
  .elementor-widget-button.elementor-align-right .elementor-button-wrapper,.elementor-widget-button.elementor-mobile-align-right .elementor-button-wrapper{justify-content:flex-end;}
  .og-cta{font-size:14px!important;min-height:44px;display:inline-flex!important;align-items:center;}

  /* ── 7 · formulieren: 16px voorkomt de iOS-zoom, 48px raakvlak ───────── */
  .cf-input,.cf-select,.cf-card input:not([type=checkbox]):not([type=radio]),.cf-card select,.cf-card textarea,
  .tif input:not([type=checkbox]):not([type=radio]),.tif select,.tif textarea,
  .wpforms-field input:not([type=checkbox]):not([type=radio]),.wpforms-field select,.wpforms-field textarea{
    font-size:16px!important;min-height:48px;border-radius:10px!important;box-sizing:border-box;}
  .cf-card textarea,.tif textarea,.wpforms-field textarea{min-height:120px;}
  .cf-label,.tif label{font-size:14px!important;}

  /* ── 8 · footer: navy, compact, leesbaar ─────────────────────────────── */
  .site-primary-footer-wrap[data-section="section-primary-footer-builder"]{
    background:#011627!important;background-attachment:scroll!important;
    padding:40px var(--m-gutter) 8px!important;border-top:0!important;}
  .site-footer .footer-widget-area{margin-bottom:28px;}
  .site-footer .site-footer-section{margin-bottom:0!important;}
  .site-footer h2.widget-title{font-size:16px!important;line-height:1.3!important;margin-bottom:10px!important;color:#fff!important;}
  .site-footer .footer-widget-area p{font-size:14px!important;line-height:1.65!important;margin-bottom:12px!important;color:rgba(255,255,255,.82)!important;}
  .site-footer .footer-widget-area li{font-size:14px!important;line-height:1.5!important;color:rgba(255,255,255,.82)!important;}
  .site-footer .footer-widget-area li a{color:#fff!important;display:block;padding:5px 0;}
  .footer-widget-area[data-section="sidebar-widgets-footer-widget-2"] ul.menu{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;}
  .site-below-footer-wrap{padding:20px var(--m-gutter) max(20px,env(safe-area-inset-bottom))!important;}
  .site-below-footer-wrap p{font-size:13px!important;line-height:1.5!important;margin-bottom:6px!important;}

  /* lidmaatschap: de image-box herhaalt de hero-titel — op mobiel één keer volstaat */
  body.page-id-8 h2.elementor-image-box-title{display:none!important;}

  /* ── 9 · toegankelijkheid en rust ────────────────────────────────────── */
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #3f7d59;outline-offset:2px;}
  .og-kaart:active,.slc-card:active{transform:scale(.99);}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
  .slcs-rij{scroll-snap-type:none!important;}
  .og-kaart:active,.slc-card:active{transform:none!important;}
}