/* =================================================================
   Dana Duhok Medical — Responsive
   ================================================================= */

/* ---- Navbar collapse ----
   The full inline menu (brand + up to ~10 links + actions + CTA) needs roughly
   1195px to fit; below that the CTA starts to clip. So the inline-menu designs
   fold to brand + hamburger at <=1200px and the full-screen overlay carries the
   links + CTA. 'minimal' is excluded here: it already uses the pop-out menu and
   keeps its own theme + CTA in the bar down to the 1080px breakpoint. This query
   is intentionally wider than the 1080px page-layout breakpoint below, so the
   content grids (hero, footer, admin…) keep their multi-column layouts to 1080px. */
@media (max-width: 1200px) {
    .site-header:not([data-nav="minimal"]) .nav-pod--nav { display: none; }
    .site-header:not([data-nav="minimal"]) .menu-toggle  { display: inline-flex; }
    .site-header:not([data-nav="minimal"]) .nav-cta,
    .site-header:not([data-nav="minimal"]) .nav-call { display: none; }

    /* Grid-based designs (bento, split, centered) use a 3-column grid. Once the
       centre menu pod is display:none, grid auto-placement drops the actions
       pod into the MIDDLE column — floating the theme/hamburger buttons to the
       centre of the bar instead of hugging the right. Collapse all three to a
       simple flex bar: brand left, actions right. (Centered also sheds its tall
       two-row height this way.) */
    .site-header[data-nav="bento"] .nav-bento,
    .site-header[data-nav="split"] .nav-bento,
    .site-header[data-nav="centered"] .nav-bento { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
    .site-header[data-nav="bento"] .nav-pod--brand,
    .site-header[data-nav="split"] .nav-pod--brand,
    .site-header[data-nav="centered"] .nav-pod--brand { justify-self: auto; }

    /* 'centered' is the two-tier bar on desktop; on mobile the shared rule above
       folds it to a single-row bar (brand left, actions right; the menu row is
       hidden → links go to the panel). The grid props go inert under flex; undo
       the wide utility-strip gap so the <=400px tightening can apply, and shrink
       the height reserve. */
    .site-header[data-nav="centered"] .nav-pod--actions { gap: 6px; }
    body.nav-design-centered .site-main { padding-top: 76px; }
    body.nav-design-centered .site-main.page-home > .slideshow { margin-top: 0; }
}

@media (max-width: 1080px) {
    /* Below the page-layout breakpoint even 'minimal' tucks its CTA into the
       overlay — the bar gets too tight on phones / small tablets. */
    .site-header[data-nav="minimal"] .nav-cta { display: none; }

    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { order: -1; min-height: 380px; max-width: 540px; margin-inline: auto; }
    .floating-card--a { right: 0; }
    .floating-card--b { left: 0; }

    .cta { grid-template-columns: 1fr; }
    .cta__actions { justify-content: flex-start; }

    .form-shell { grid-template-columns: 1fr; }
    .detail-hero { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }

    /* Footer hero tightens; brand + link columns wrap on their own (flex). */
    .site-footer { padding-top: 88px; }
    .footer-lead { margin-bottom: 64px; }

    /* Admin nav is a sticky top bar above the content (see admin.css); it wraps
       on its own, so no column override is needed here. */
}

@media (max-width: 720px) {
    h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
    .section { padding: 70px 0; }

    .form-grid { grid-template-columns: 1fr; }

    /* Admin top bar: links drop to their own row; brand + sign-out share the top. */
    .admin-topbar { flex-wrap: wrap; }
    .admin-topbar__nav { order: 3; flex-basis: 100%; }
    .admin-topbar__brand { border-right: 0; padding-left: 4px; }

    .stats-row { grid-template-columns: repeat(2, 1fr); padding: 26px; gap: 22px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .site-footer { padding-top: 64px; }
    .footer-lead { margin-bottom: 48px; }

    .theme-picker { width: calc(100vw - 32px); right: -8px; }

    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar__chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

    .modal__panel { width: 100%; }
    .topbar__tagline { display: none; }
    .topbar__contact { gap: 14px; font-size: .9em; }
    .brand__tag  { display: none; }
    .brand__name { font-size: 1.25rem; }

    .floating-card--a { top: -2%; right: 4%; padding: 10px 12px; }
    .floating-card--b { bottom: -2%; left: 4%; padding: 10px 12px; }

    .dashboard-card__stats { grid-template-columns: 1fr 1fr; }
    .dashboard-card__stats .vital:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .topbar__contact a:nth-child(2) { display: none; } /* hide email, keep phone */
    .nav-cta, .nav-call { display: none; }
}

@media (max-width: 460px) {
    .stats-row { grid-template-columns: 1fr; }
}

/* Small phones — shrink the bento pods so brand + actions never overflow.
   (Center nav pod is already hidden below 1080px.) */
@media (max-width: 400px) {
    .nav-bento, .site-header.is-scrolled .nav-bento { gap: 6px; }
    .nav-pod { padding: 6px 9px; }
    .nav-pod--brand   { padding-left: 8px; padding-right: 11px; }
    .nav-pod--actions { gap: 2px; }
    .brand { gap: 8px; }
    .brand__mark { width: 36px; height: 36px; }
    .brand__mark svg { width: 20px; height: 20px; }
    .brand__name { font-size: 1rem; }
    .nav-mode { width: 38px; height: 38px; }
    /* Collapse the menu pill to an icon-only chip so brand + actions never
       overflow on tiny phones (the morph + accent states still apply). */
    .menu-toggle { height: 38px; padding: 0; width: 38px; justify-content: center; gap: 0; }
    .menu-toggle__label { display: none; }
}

/* The 'minimal', 'boxed' and 'dense' designs use the full-screen overlay as
   their ONLY menu, on desktop too. The shared frosted overlay + the .mega-cols
   column index (layout.css) already give it a proper desktop look (centred,
   auto-fit text columns grouped by section), so no override is needed here. */