/* focusEDU: header navigation (2026-09-27).
   Plain CSS on purpose: the Tailwind build is precompiled and inlined in
   base.html, so utility classes that are not already in it do not exist.

   Desktop dropdowns (Insights, About Us, Services, Our Team) share one disclosure
   pattern, driven by insights-nav.js: the word is a link, the chevron is a
   <button aria-expanded>. Insights uses .insights-nav / data-insights-*; the other
   three use .nav-dd / data-nav-*. The rules are the same. */
/* padding-right .375rem: room for the chevron's 2px focus ring (offset 2px), which
   otherwise sat on the last letter of the word. */
.insights-nav__link, .nav-dd__link { padding-left: .75rem; padding-right: .375rem; }
.insights-nav__toggle, .nav-dd__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 36px; margin-right: .5rem; padding: 0;
    background: transparent; border: 0; border-radius: 4px; cursor: pointer;
}
.insights-nav__toggle svg, .nav-dd__toggle svg { transition: transform .2s ease; }
.insights-nav__toggle[aria-expanded="true"] svg,
.nav-dd__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.insights-nav__toggle--mobile { min-width: 44px; min-height: 44px; margin-right: 0; }
.insights-nav__panel, .nav-dd__panel { top: 100%; margin-top: .25rem; }
/* INSIGHTS is the second-to-last item, so its 288px panel opens leftward from the
   right edge of the item; anchored left it ran ~33px off screen at 1024-1320px. */
.insights-nav__panel { left: auto; right: 0; }
.insights-nav [data-insights-panel][hidden],
.nav-dd [data-nav-panel][hidden] { display: none !important; }
.insights-nav--mobile [data-insights-panel] { padding-bottom: .25rem; }

/* Visible focus: one white ring across the whole navy header (logo, nav words,
   chevrons, hamburger, the mobile menu) and the navy utility bar above it; the
   site's red ring (main.css) is too dark on navy. These beat main.css's
   `a:focus-visible, button:focus-visible` on specificity. Inside the white desktop
   dropdown panels the more specific rule below keeps the site's red ring. The skip
   link (before <header>) shows over the navy bar too, so its ring is white as well. */
header a:focus-visible,
header button:focus-visible,
[aria-label="Utility links"] a:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px;
}
header .insights-nav__panel a:focus-visible,
header .nav-dd__panel a:focus-visible {
    outline: 2px solid #b81321; outline-offset: -2px; border-radius: 4px;
    background: #f6f6f6; color: #19355c;
}
/* The open mobile menu (#mobile-nav, below 1024px) is its own scroll container
   (overflow-y:auto, see below), which clips anything drawn outside its box. Its links
   are full-width blocks and the INSIGHTS chevron sits on its right edge, so a ring
   offset 2px outward lost its left and right sides. Inset the ring there instead:
   same 2px white, drawn 2px inside each item. */
#mobile-nav a:focus-visible,
#mobile-nav button:focus-visible { outline-offset: -2px; }

/* Mobile menu (below 1024px). It opens inside the sticky header and is taller than
   a phone screen (about 1,200px, 1,600px with Insights expanded), so it scrolls on
   its own instead of scrolling the page under a pinned header. --mnav-top is the
   distance from the top of the viewport to the top of the panel; insights-nav.js
   sets it exactly, the fallbacks are the header height (64px, 80px from 768px). */
@media (max-width: 1023.98px) {
    .mobile-nav-panel {
        --mnav-fallback: 64px;
        max-height: calc(100vh - var(--mnav-top, var(--mnav-fallback)));
        max-height: calc(100dvh - var(--mnav-top, var(--mnav-fallback)));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mobile-nav-panel { --mnav-fallback: 80px; }
}

/* Section chips on the Insights list pages (blog/listing.html). The count inside an
   inactive chip is 70% navy (4.9:1 on white) and follows the chip's white text on
   hover and focus. Below 640px the chips are one swipeable row, so the first
   article is not pushed below the first screen by a stack of nine chips;
   insights-nav.js scrolls the active chip into view. */
.chip-count { color: rgba(25, 53, 92, .7); }
.insights-chips a:hover .chip-count, .insights-chips a:focus-visible .chip-count { color: inherit; }
@media (max-width: 639.98px) {
    /* The row runs to the screen edges (the page gutter is 1rem below 640px), so a
       chip cut off by the edge shows there is more to swipe. */
    .insights-chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        margin: -2px -1rem 0; padding: 2px 1rem 6px; scroll-padding-inline: 1rem;
        scrollbar-width: thin;
    }
    .insights-chips > a {
        flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
        display: inline-flex; align-items: center; gap: .3em; min-height: 32px;
    }
}

/* Skip link (base.html): first stop for keyboard users, hidden until focused. */
.skip-link {
    position: absolute; left: .75rem; top: -100px; z-index: 100;
    padding: .5rem 1rem; border-radius: 4px; background: #fff; color: #19355c;
    font-weight: 600; font-size: .9375rem; text-decoration: underline;
}
.skip-link:focus { top: .5rem; outline: 2px solid #fff; outline-offset: 2px; }
#main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .insights-nav__toggle svg, .nav-dd__toggle svg { transition: none; }
}