/* ==========================================================================
   Kishoreganj University — per-office sub-navbar (docs/decisions_sazid.md
   D-S13). Sits directly under the page banner on /explore/{type}/{slug}.
   main.css sets `html { font-size: 10px }`, so 1rem = 10px.
   ========================================================================== */

.kiu-dept-nav {
    background: var(--kiu-navy, #1B3A6B);
    border-bottom: 3px solid var(--kiu-accent, #00A393);

    /* #kiu-navbar is `position: fixed` with an enormous z-index. Any plain
       position:static content is always painted BELOW positioned content in
       the same stacking context, regardless of z-index or margin — so even
       with enough margin-top to clear the badge geometrically, this element
       still needs to be a positioned element itself to guarantee it paints
       on top of, not underneath, the fixed navbar. */
    position: relative;
    z-index: 10;
}

/* At rest (scrollY 0) the main navbar's hanging badge logo is taller than
   its white mainbar and overhangs into whatever follows — measured up to
   ~24px at 1920px wide. margin-top here is set well above that measured
   value for headroom; if this still overlaps, hard-refresh first (this file
   is served unversioned, so browsers can cache a pre-fix copy). Same fix as
   .kiu-employee-nav in public/css/pages/employee.css; below 701px the badge
   collapses to a bare crest with no overhang, so no extra clearance is
   needed there. */
@media (min-width: 701px) {
    .kiu-dept-nav {
        margin-top: 64px;
    }
}

/* ...unless something that already clears the navbar precedes it: the hero on
   office and institute pages, or the photo carousel on department pages. Both
   carry the clearance themselves, so the 64px above would read as a stray gap
   beneath them — which is exactly the dead space that used to sit between the
   main navbar and this one. */
.kiu-page-hero + .kiu-dept-nav,
.kiu-dept-hero + .kiu-dept-nav,
/* .kiu-hero is the shared photo carousel. On a department landing page it
   replaces .kiu-dept-hero outright rather than sitting above it, so it — not
   the hero — is this bar's previous sibling, and without it listed here the
   64px reappeared as a band of dead white between the carousel and this bar. */
.kiu-hero + .kiu-dept-nav {
    margin-top: 0;
}

.kiu-dept-nav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kiu-dept-nav__item {
    position: relative;
}

.kiu-dept-nav__item > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kiu-white);
    text-decoration: none;
    transition: background var(--kiu-dur-fast) var(--kiu-ease-out);
}

.kiu-dept-nav__item > a:hover {
    background: rgba(255, 255, 255, .12);
}

@media (hover: hover) and (pointer: fine) {
    .kiu-dept-nav__item:hover > a {
        background: rgba(255, 255, 255, .12);
    }
}

/* ---------- dropdown (children) ---------- */

.kiu-dept-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--kiu-white);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(20, 33, 61, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--kiu-lift-lg));
    transition: opacity var(--kiu-dur-fast) var(--kiu-ease-out), transform var(--kiu-dur-fast) var(--kiu-ease-out), visibility var(--kiu-dur-fast) var(--kiu-ease-out);
    z-index: 40;
}

/* Hover only where hovering is real. On a touchscreen the browser synthesises
   a hover state on tap; opening the submenu changed the layout under the
   finger, which dropped the hover, which closed it again — the rapid
   open/close flicker. Touch opens submenus through .is-open instead. */
@media (hover: hover) and (pointer: fine) {
    .kiu-dept-nav__item.has-children:hover > .kiu-dept-nav__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.kiu-dept-nav__item.has-children.is-open > .kiu-dept-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* The tap target for a submenu. Pointer devices use hover, so it is only
   shown where hover is unavailable — see the mobile block below. */
.kiu-dept-nav__toggle {
    display: none;
    align-items: center;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--kiu-white);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.kiu-dept-nav__dropdown-item {
    position: relative;
}

.kiu-dept-nav__dropdown-item > a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    color: var(--kiu-ink, #14213D);
    text-decoration: none;
    white-space: nowrap;
}

.kiu-dept-nav__dropdown-item > a:hover {
    background: var(--kiu-surface, #F5F7FB);
}

/* ---------- nested (grandchildren) ---------- */

.kiu-dept-nav__dropdown-item .kiu-dept-nav__dropdown {
    top: 0;
    left: 100%;
    border-radius: var(--kiu-radius-xs);
}

@media (max-width: 991px) {
    /* Deliberately NOT flex-direction: column. The list stays a wrapping row so
       the links read side by side and only break to a second row when they
       actually run out of width — one link per row made this bar as tall as
       the page. `flex-wrap: wrap` on the base rule does the wrapping. */
    .kiu-dept-nav__list {
        row-gap: 0;
    }

    .kiu-dept-nav__item > a {
        padding: 12px 14px;
        font-size: 12px;
    }

    /* An expanded submenu is a block list, so its parent takes the whole row
       for as long as it is open — otherwise it would widen mid-row and shove
       its neighbours around. Keyed off .is-open only: driving a width change
       from :hover is what made this flicker on touch. */
    .kiu-dept-nav__item.has-children.is-open {
        width: 100%;
    }

    /* Row becomes link + toggle side by side, with the expanded submenu
       wrapping onto the line beneath them. */
    .kiu-dept-nav__item.has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .kiu-dept-nav__toggle {
        display: flex;
    }

    .kiu-dept-nav__item.has-children > a {
        padding-right: 4px;
    }

    /* The chevron inside the link would be a second, non-functional one. */
    .kiu-dept-nav__chevron {
        display: none;
    }

    .kiu-dept-nav__dropdown,
    .kiu-dept-nav__dropdown-item .kiu-dept-nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: rgba(255, 255, 255, .06);
        display: none;
    }

    .kiu-dept-nav__item.has-children.is-open > .kiu-dept-nav__dropdown {
        display: block;
        width: 100%;
    }

    .kiu-dept-nav__dropdown-item > a {
        color: var(--kiu-white);
        white-space: normal;
    }
}

/* The bar carries seven items now (Home, About, Academics, People, Notices,
   News & Events, Contact) rather than the four the structural default used to
   supply. At the 12px sizing above that wrapped to four rows on a 360px
   screen — as tall as the carousel it sits under. Tightening the padding and
   dropping the uppercase tracking gets it back to two.

   Still a wrapping row, not a column: one link per row was the original
   mistake this file's 991px block was written to avoid. */
@media (max-width: 575px) {
    .kiu-dept-nav__item > a {
        padding: 10px 11px;
        font-size: 11.5px;
        letter-spacing: 0;
    }

    .kiu-dept-nav__toggle {
        padding: 10px 9px;
        font-size: 15px;
    }

    .kiu-dept-nav__dropdown-item > a {
        padding: 10px 22px;
        font-size: 12.5px;
    }
}

/* Below ~360px even the tightened row overflows on the longest labels, so the
   bar becomes a single horizontally-scrollable strip. Items with a submenu are
   excluded from that: an accordion cannot open inside a nowrap scroller, so
   they keep their own row and expand downwards as before. */
@media (max-width: 359px) {
    .kiu-dept-nav__list {
        flex-wrap: wrap;
    }

    .kiu-dept-nav__item > a {
        padding: 10px 9px;
        font-size: 11px;
    }
}

/* Keyboard users need to see where they are in this bar; the links sit on a
   dark navy field where the browser default outline is nearly invisible. */
.kiu-dept-nav__item > a:focus-visible,
.kiu-dept-nav__toggle:focus-visible {
    outline: 2px solid var(--kiu-accent, #00A393);
    outline-offset: -2px;
}

.kiu-dept-nav__dropdown-item > a:focus-visible {
    outline: 2px solid var(--kiu-accent, #00A393);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .kiu-dept-nav__dropdown,
    .kiu-dept-nav__item > a {
        transition: none;
    }
}