/* ============================================================
   CDI Premium v4 - site-wide responsive and interaction finish
   Loaded last. Preserves existing layouts, Poppins and brand palette.
   ============================================================ */
:root{
  --cdi-page-max:1200px;
  --cdi-reading-max:780px;
  --cdi-mobile-pad:16px;
  --cdi-tablet-pad:24px;
}

html,body{max-width:100%;overflow-x:clip}
body{min-width:0;background:#fff}
body.cdi-drawer-open{overflow:hidden!important;touch-action:none}

/* Full-width shells with controlled inner content */
.fw,.topnav,.site-footer,.util,.urg,.mphero,.hero-block,.cdi-hero,.page-hero{
  width:100%!important;
  max-width:none!important;
}
.cw,.container,.cdi-container,.page-container{
  width:100%!important;
  max-width:var(--cdi-page-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--cdi-tablet-pad)!important;
  box-sizing:border-box!important;
  min-width:0!important;
}
.fw>.cw,.mphero>.cw,.hero-block>.cw,.cdi-hero>.cw,.page-hero>.cw,.site-footer>.container{
  max-width:var(--cdi-page-max)!important;
}
.reading-width,.article-body,.guide-copy,.legal-copy,.content-reading{
  width:100%!important;
  max-width:var(--cdi-reading-max)!important;
  margin-inline:auto!important;
}

/* Do not allow grid/flex children or media to push a public page wider. */
.cdi-premium,.cdi-premium *,.site-footer *,.topnav *{min-width:0}
.cdi-premium img,.cdi-premium svg,.cdi-premium video{max-width:100%;height:auto}
.cdi-premium p,.cdi-premium li,.cdi-premium a,.cdi-premium h1,.cdi-premium h2,.cdi-premium h3{
  overflow-wrap:anywhere;
}

/* Premium body rhythm without changing section order. */
body:not(.admin-body) .sec,
body:not(.admin-body) .section,
body:not(.admin-body) section{
  box-sizing:border-box;
}
body:not(.admin-body) .sec>.cw,
body:not(.admin-body) .section>.container,
body:not(.admin-body) .mphero>.cw{
  position:relative;
  z-index:1;
}

/* Header and drawer reliability */
.topnav>.container,.topnav>.row,.topnav .row{
  width:100%!important;
  max-width:var(--cdi-page-max)!important;
  margin-inline:auto!important;
  padding-inline:var(--cdi-tablet-pad)!important;
}
.hamburger{
  position:relative;
  z-index:10002!important;
  touch-action:manipulation;
}
.hamburger span{pointer-events:none}
.mobile-drawer{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  width:min(88vw,380px)!important;
  max-width:380px!important;
  height:100dvh!important;
  z-index:10001!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  pointer-events:none!important;
  visibility:hidden!important;
  transform:translate3d(104%,0,0)!important;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),visibility 0s linear .28s!important;
  box-shadow:-24px 0 60px rgba(6,20,38,.24)!important;
}
.mobile-drawer.open{
  pointer-events:auto!important;
  visibility:visible!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),visibility 0s!important;
}
.cdi-drawer-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(6,20,38,.58);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.cdi-drawer-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease,visibility 0s;
}
.mobile-drawer .dtop{position:sticky;top:0;z-index:2}
.mobile-drawer .mmenu,.mobile-drawer .dfoot{width:100%;max-width:100%}
.mobile-drawer details>summary{min-height:50px;touch-action:manipulation}

/* Shared FAQ behaviour. Actual state is controlled by cdi-core-v4.js. */
.fi{width:100%;max-width:100%}
.fi>.fq{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-height:54px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  font-family:'Poppins',system-ui,sans-serif!important;
  text-align:left!important;
  touch-action:manipulation;
}
.fi>.fq::after{content:'+'!important;transform:none!important}
.fi.o>.fq::after{content:'−'!important;transform:none!important}
.fi>.fa{display:none!important}
.fi.o>.fa{display:block!important}
.seo-faq-q{touch-action:manipulation}
.seo-faq-item .seo-faq-a{display:none!important}
.seo-faq-item.open .seo-faq-a{display:block!important}

/* Search/result page constraints */
.cdi-premium .sl,
.cdi-premium .sl>*,
.cdi-premium .mobsteps,
.cdi-premium .ic-list-wrap,
.cdi-premium .ic,
.cdi-premium .ic-main,
.cdi-premium .ic-act,
.cdi-premium .ph2-qfilter{
  max-width:100%!important;
  min-width:0!important;
}
.cdi-premium .ph2-qfilter,
.cdi-premium .acchips,
.cdi-premium .qf-pills,
.cdi-premium .filter-row{
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.cdi-premium .ph2-qfilter::-webkit-scrollbar,
.cdi-premium .acchips::-webkit-scrollbar{display:none}

/* Desktop maintains wide hero/footer, 1200px body. */
@media (min-width:769px){
  .cdi-premium .sl{grid-template-columns:minmax(220px,260px) minmax(0,1fr)!important}
  .cdi-premium .ic{grid-template-columns:196px minmax(0,1fr) minmax(250px,300px)!important}
  .site-footer>.container{max-width:var(--cdi-page-max)!important}
}

@media (max-width:900px){
  .nav-links,.hide-mobile{display:none!important}
  .hamburger{display:flex!important}
  .nav-actions{margin-left:auto!important}
  .nav-cta-mobile{display:inline-flex!important}
}

@media (max-width:768px){
  :root{--cdi-tablet-pad:var(--cdi-mobile-pad)}

  .cw,.container,.cdi-container,.page-container,
  .topnav>.container,.topnav>.row,.topnav .row{
    width:100%!important;
    max-width:100%!important;
    padding-left:var(--cdi-mobile-pad)!important;
    padding-right:var(--cdi-mobile-pad)!important;
  }

  /* Previous global mobile rule added padding to both section and .cw,
     causing inner pages to look clipped. Only the inner container pads now. */
  body:not(.admin-body) .sec,
  body:not(.admin-body) .section,
  body:not(.admin-body) section,
  .cdi-premium .sec{
    padding-left:0!important;
    padding-right:0!important;
  }

  .topnav .row{min-height:64px!important}
  .brand-logo{max-width:148px!important}
  .brand-logo-img{width:100%!important;max-height:46px!important;object-fit:contain!important}
  .nav-cta-mobile{min-height:42px!important;padding-inline:12px!important;font-size:12px!important}

  /* Search hero becomes a deliberate stacked app card. */
  .mphero{padding-top:30px!important;padding-bottom:26px!important}
  .mphero h1{font-size:clamp(26px,7.6vw,36px)!important;line-height:1.12!important}
  .mphero p{font-size:14px!important;line-height:1.62!important}
  .mps{display:none!important}
  .mptrig{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  .mptrig>span,.mptrig>button{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .mptrig>button{min-height:46px!important;justify-content:center!important}
  .acchips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding-bottom:4px!important}
  .acchip{flex:0 0 auto!important;white-space:nowrap!important}

  /* Mobile result layout, no horizontal clipping. */
  .sl{display:block!important;width:100%!important}
  .fp{display:none!important}
  .mobsteps{display:block!important;width:100%!important;border-radius:16px!important;overflow:hidden!important}
  .msstep{padding:16px!important}
  .mobsteps .tt{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
  }
  .mobsteps .tile{
    width:100%!important;
    min-width:0!important;
    min-height:92px!important;
    padding:12px 8px!important;
    text-align:center!important;
  }
  .msnav{width:100%!important}
  .msback,.msnext{min-height:46px!important}

  .ph2-qfilter{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    width:100%!important;
    margin-inline:0!important;
    padding:10px 0 15px!important;
  }
  .ph2-qf-pill{flex:0 0 auto!important}

  .ic{
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding:14px!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }
  .ic .ic-ph{
    width:88px!important;
    height:88px!important;
    min-height:88px!important;
    max-width:88px!important;
  }
  .ic-main{padding:0!important;overflow:hidden!important}
  .ic-namerow,.ic-creds,.ic-rows,.ic-row,.icsum{width:100%!important;max-width:100%!important;min-width:0!important}
  .ic .icname{font-size:16px!important;line-height:1.25!important}
  .ic-creds{gap:5px!important;margin:5px 0 8px!important}
  .ic-row{font-size:12.5px!important;line-height:1.45!important;align-items:flex-start!important}
  .ic-ri{flex:0 0 18px!important}
  .ic-hl{max-width:100%!important;white-space:normal!important;margin-bottom:8px!important}
  .icsum{font-size:13px!important;line-height:1.55!important}
  .ic-act{
    grid-column:1/-1!important;
    width:100%!important;
    padding-top:13px!important;
    border-top:1px solid #E8EEF5!important;
    gap:12px!important;
  }
  .ic-pricebox{display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:8px!important}
  .ic .icprice{font-size:24px!important}
  .ic-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:9px!important;
  }
  .ic-stat{padding:10px!important;border:1px solid #E8EEF5!important;border-radius:10px!important;background:#F8FAFC!important}
  .ic-ctas,.ic-ctas .btn,.ic-cta-row2{width:100%!important;max-width:100%!important}
  .ic-ctas{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .ic-cta-row2{display:flex!important;justify-content:space-between!important;align-items:center!important}

  /* Footer stays full width, content remains readable. */
  .site-footer>.container{padding-inline:var(--cdi-mobile-pad)!important}
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:24px 16px!important}
  .foot-brand{grid-column:1/-1!important}

  /* Swipeable product rows remain swipeable, not collapsed. */
  .sg,.steps,.tboxes,.lg,.freecards,.car-cont,.sim-scroll,
  .fm-instructor-carousel,.fm-school-carousel,.cdi-carousel-row{
    max-width:100%!important;
    overscroll-behavior-inline:contain!important;
  }
}

@media (max-width:420px){
  .nav-cta-mobile{display:none!important}
  .brand-logo{max-width:142px!important}
  .mobile-drawer{width:92vw!important}
  .foot-grid{grid-template-columns:1fr!important}
  .foot-brand{grid-column:auto!important}
  .mobsteps .tt{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ic{grid-template-columns:78px minmax(0,1fr)!important;padding:12px!important;gap:10px!important}
  .ic .ic-ph{width:78px!important;height:78px!important;min-height:78px!important}
}

@media (prefers-reduced-motion:reduce){
  .mobile-drawer,.cdi-drawer-overlay{transition:none!important}
}