/* ============================================================
   CDI V20 final nav, drawer and mobile rail clean-up
   - Removes desktop white gap under nav
   - Prevents desktop mega menus from showing internal scrollbars
   - Gives mobile drawer a proper menu area + CTA dock
   - Tightens mobile rails and read-more UI
   ============================================================ */

/* Keep the header in normal document flow. Sticky still keeps it visible,
   but it no longer creates the transparent white spacer seen on desktop. */
body:not(.admin-body) .topnav{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  z-index:9900!important;
  overflow:visible!important;
  contain:none!important;
}
body:not(.admin-body) .urg{
  margin-top:0!important;
}
body:not(.admin-body) .util{display:none!important;}

@media(min-width:981px){
  body:not(.admin-body) .topnav .row,
  body:not(.admin-body) .nav-links,
  body:not(.admin-body) .cdi-megawrap{
    overflow:visible!important;
    contain:none!important;
  }
  body:not(.admin-body) .cdi-mega{
    position:fixed!important;
    left:50%!important;
    width:min(920px, calc(100vw - 56px))!important;
    max-width:calc(100vw - 56px)!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    scrollbar-width:none!important;
    z-index:10020!important;
    margin:0!important;
    transform:translateX(-50%) translateY(-8px)!important;
  }
  body:not(.admin-body) .cdi-mega::-webkit-scrollbar{display:none!important;}
  body:not(.admin-body) .cdi-mega.open{transform:translateX(-50%) translateY(0)!important;}
  body:not(.admin-body) .cdi-level,
  body:not(.admin-body) .cdi-featurepane,
  body:not(.admin-body) .cdi-navpane{
    max-height:none!important;
    overflow:visible!important;
  }
  body:not(.admin-body) .cdi-menu{
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  /* Compact mega internals enough that they fit on common laptop screens. */
  body:not(.admin-body) .cdi-level{padding:22px 26px!important;}
  body:not(.admin-body) .cdi-featurepane{padding:24px 24px!important;}
  body:not(.admin-body) .cdi-catcard{padding:13px 15px!important;}
  body:not(.admin-body) .cdi-cic{width:40px!important;height:40px!important;}
  body:not(.admin-body) .cdi-sub{margin-bottom:14px!important;}
  body:not(.admin-body) .cdi-footlinks{margin-top:14px!important;padding-top:12px!important;}
}

@media(max-width:980px){
  body:not(.admin-body) .urg{display:none!important;}
  body:not(.admin-body) .cdi-mega,
  body:not(.admin-body) .cdi-overlay{display:none!important;}
}

/* Mobile drawer: proper sheet. Menu scrolls inside its area; CTAs never cover menu items. */
@media(max-width:760px){
  body:not(.admin-body) .topnav{
    position:sticky!important;
    top:0!important;
    z-index:9900!important;
  }
  body:not(.admin-body) .mobile-drawer.open,
  body:not(.admin-body) .mobile-drawer{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    flex-direction:column!important;
    padding:0!important;
    background:#fff!important;
  }
  body:not(.admin-body) .mobile-drawer.open{display:flex!important;}
  body:not(.admin-body) .mobile-drawer .dtop{
    flex:0 0 auto!important;
    position:relative!important;
    top:auto!important;
    z-index:4!important;
    min-height:80px!important;
    padding:15px 18px!important;
    background:#0B1F3D!important;
  }
  body:not(.admin-body) .mobile-drawer .drawer-logo{max-height:42px!important;width:auto!important;}
  body:not(.admin-body) .mobile-drawer .dclose{width:52px!important;height:52px!important;border-radius:18px!important;}
  body:not(.admin-body) .mobile-drawer .mmenu{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    min-height:0!important;
    max-height:none!important;
    -webkit-overflow-scrolling:touch!important;
    padding:18px 18px 14px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu details,
  body:not(.admin-body) .mobile-drawer .mmenu .mmenu-flat{
    margin-bottom:10px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu-flat,
  body:not(.admin-body) .mobile-drawer summary{
    min-height:58px!important;
    padding:14px 12px!important;
    border-radius:18px!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0!important;
    padding:12px 18px calc(14px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #E6EDF4!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 -14px 34px rgba(12,31,56,.08)!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn{
    min-height:44px!important;
    width:100%!important;
    border-radius:16px!important;
    font-size:13px!important;
    line-height:1.12!important;
    padding:10px 12px!important;
    white-space:normal!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn:nth-child(3),
  body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn{
    grid-column:1 / -1!important;
  }

  /* Cleaner mobile copy toggle: text only, no underline clutter or arrows. */
  body:not(.admin-body) .cdi-read-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    border:1px solid #CFE3F7!important;
    background:#fff!important;
    color:#0B5EC8!important;
    border-radius:999px!important;
    padding:8px 15px!important;
    font:800 12.5px/1 Poppins,system-ui,sans-serif!important;
    text-decoration:none!important;
    box-shadow:0 10px 22px rgba(47,128,237,.08)!important;
    margin:6px 0 16px!important;
  }
  body:not(.admin-body) .cdi-read-toggle *{display:none!important;}

  /* Homepage hero chips/cards: compact auto-carousel rail, no vertical stack. */
  body:not(.admin-body) .hero-ticks,
  body:not(.admin-body) .tboxes{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:2px 0 12px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body:not(.admin-body) .hero-ticks::-webkit-scrollbar,
  body:not(.admin-body) .tboxes::-webkit-scrollbar{display:none!important;}
  body:not(.admin-body) .hero-ticks .htick{
    flex:0 0 calc(50% - 6px)!important;
    min-width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
    min-height:36px!important;
    padding:8px 10px!important;
    border-radius:999px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body:not(.admin-body) .tboxes .tbox{
    flex:0 0 calc(50% - 6px)!important;
    min-width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
    min-height:70px!important;
    padding:12px 11px!important;
    border-radius:17px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    overflow:hidden!important;
  }
  body:not(.admin-body) .tboxes .tbox strong,
  body:not(.admin-body) .tboxes .tbox span{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:block!important;
  }
  body:not(.admin-body) .tboxes .tbox strong{font-size:15px!important;line-height:1.08!important;}
  body:not(.admin-body) .tboxes .tbox span{font-size:11.5px!important;line-height:1.2!important;}

  /* Comparison checklist two-row rail. */
  body:not(.admin-body) .comparison-points{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(190px, 72vw)!important;
    grid-template-rows:repeat(2, minmax(48px, auto))!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:2px 0 12px!important;
    margin:0!important;
  }
  body:not(.admin-body) .comparison-points::-webkit-scrollbar{display:none!important;}
  body:not(.admin-body) .comparison-points span{
    min-height:48px!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    font-size:12.75px!important;
    line-height:1.18!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    white-space:normal!important;
  }
}

@media(max-width:380px){
  body:not(.admin-body) .hero-ticks .htick,
  body:not(.admin-body) .tboxes .tbox{
    flex-basis:calc(56% - 6px)!important;
    min-width:calc(56% - 6px)!important;
    max-width:calc(56% - 6px)!important;
  }
}