/* AOU CENTRALIZED PATHS: edit in repo, then aou-deploy */
/* ====== AOU Header & Footer (canonical) ======
   Scope: ONLY header/footer + their responsive & a11y rules.
   Tokens (colors) are expected in :root within styles.css.
*/

/* Header shell */
.aou-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--aou-blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.aou-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.aou-header .brand,
.aou-header .brand a {
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;
}

/* Header controls */
.nav-toggle { display: none; } /* shown via @media on mobile */
.header-right { display:flex; align-items:center; gap:10px; }
.lang-form select, .lang-select {
  background:#fff; color:var(--aou-blue);
  border:1px solid rgba(255,255,255,.35);
  padding:4px 8px; border-radius:6px;
}

/* Primary menu (desktop baseline) */
.main-nav .menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.menu-item { position: relative; }
.menu-item > a {
  display: inline-block;
  padding: 8px 6px;
  border-radius: 8px;
  color:#fff;
  text-decoration: none;
  transition: background .2s ease;
}
.menu-item > a:hover { background: rgba(255,255,255,.12); }

/* Dropdowns (hover/focus on desktop) */
.menu-item.has-dropdown { position: relative; }
.has-dropdown .dropdown {
  position: absolute; top: calc(100% - 2px); left: 0;
  min-width: 220px; background: #073a8b;
  border-radius: 12px; padding: 8px; display: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.25); z-index: 2000;
}
.menu-item.has-dropdown:hover > .dropdown,
.menu-item.has-dropdown:focus-within > .dropdown { display: block; }
.has-dropdown .dropdown::before {
  content: ""; position: absolute; left:0; right:0; top:-10px; height:10px; background: transparent;
}
.dropdown li { list-style: none; }
.dropdown a {
  display:block; padding:10px 12px; border-radius:8px; white-space:nowrap;
  color:#fff; text-decoration:none;
}
.dropdown a:hover { background: rgba(255,255,255,.14); }

/* Backdrop for off-canvas state (mobile uses body.menu-open) */
.menu-backdrop { display: none; }
body.menu-open .menu-backdrop {
  display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999;
}

/* Footer */
.aou-footer {
  text-align:center; padding:30px 16px; color:#333; border-top:2px solid var(--aou-gold);
  background:#fff; margin-top:40px;
}

/* Mobile / small screens */
/* === AOU BRAND LOGO BASE (desktop) — 56px (inserted) === */
.aou-header .brand { display:flex; align-items:center; gap:10px; }
.aou-header .brand-logo { height:67px; width:auto; display:block; }

/* (mobile override remains below at 48px) */

/* (mobile override remains below at 48px) */
@media (max-width: 1024px) {
  /* Header grid compaction */
  .aou-header__inner { grid-template-columns: auto 1fr auto; gap:12px; }

  /* Show hamburger */
  .nav-toggle {
    display: inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; background:transparent;
    border:1px solid rgba(255,255,255,.35); border-radius:10px;
    color:#fff; font-size:22px;
  }

  /* Off-canvas style nav toggle */
  .main-nav { display: none; }
  body.menu-open .main-nav { display: block; }

  /* Mobile menu layout (drawer list) */
  .main-nav .menu { flex-direction: column; gap:8px; padding:8px 0; flex-wrap: nowrap; }

  /* Mobile dropdowns: tap-to-open (JS toggles .open) */
  .menu-item.has-dropdown > .dropdown {
    display:none; margin:8px 0 0 16px; background:transparent; box-shadow:none;
  }
  .menu-item.has-dropdown.open > .dropdown { display:block; }
  .menu-item.has-dropdown > a::after { content:" ▼"; font-size:.85em; margin-inline-start:4px; }

  /* Base drawer — slides in from the side; exact side set below via [dir] */
  .aou-header .main-nav {
    position:fixed; top:0; height: 100dvh;
    width: 60vw; max-width: 240px;                 /* smaller drawer */
    background:#073a8b; padding:76px 16px 24px;  /* +top space for header/hamburger */
    overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y;
    box-shadow:0 0 24px rgba(0,0,0,.35);
    transform:translateX(100%);                  /* overridden per direction */
    transition:transform .25s ease-in-out;
    display:block !important; z-index:1100;
  }

  /* A11y: visible keyboard focus for header/menu */
  .menu-item > a:focus,
  .menu-item > a:focus-visible,
  .dropdown a:focus,
  .dropdown a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background: rgba(255,255,255,.12);
    border-radius: 8px;
  }

  /* Keep hamburger above backdrop */
  .nav-toggle { position: relative; z-index: 1200; }
  body.menu-open { overflow: hidden; }
  body.menu-open .menu-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1050; }

  /* Larger tap targets */
  .menu-item > a { padding:12px 8px; }
  .auth-actions { justify-content:flex-start; }
}

/* ===== AOU Drawer Direction Overrides (canonical & final) ===== */
@media (max-width: 1024px) {
  /* LTR: drawer from LEFT (closed = -100%) */
  .aou-header[dir="ltr"] .main-nav {
    left: 0; right: auto; transform: translateX(-100%);
    padding-left: 36px;   /* gutter from hamburger → menu */
  }
  body.menu-open .aou-header[dir="ltr"] .main-nav { transform: translateX(0); }

  /* RTL: drawer from RIGHT (closed = +100%) */
  .aou-header[dir="rtl"] .main-nav {
    right: 0; left: auto; transform: translateX(100%);
    padding-right: 36px;  /* gutter from hamburger → menu */
  }
  body.menu-open .aou-header[dir="rtl"] .main-nav { transform: translateX(0); }
}

@media (max-width: 1024px) {
  .aou-header .menu-item.has-dropdown > .dropdown {
    position: static !important;   /* was absolute on desktop */
    z-index: auto !important;      /* neutralize desktop z-index */
  }
  .aou-header .menu-item.has-dropdown > .dropdown::before {
    content: none !important;      /* remove desktop hover shim */
  }
}


/* === AOU Mobile dropdown stacking fix (2025-10-11) — canonical single copy ===
   Ensure submenus flow inside the drawer instead of overlapping other items. */
@media (max-width: 1024px) {
  .aou-header .menu-item.has-dropdown > .dropdown {
    position: static !important;   /* was absolute on desktop */
    z-index: auto !important;      /* neutralize desktop z-index */
  }
  .aou-header .menu-item.has-dropdown > .dropdown::before {
    content: none !important;      /* remove desktop hover shim */
  }
}



/* === AOU BRAND LOGO STANDARD 2025-10-12 ===
   Force consistent logo size; wins over earlier rules */

@media (max-width: 1024px) {
  .aou-header .brand-logo { height:48px; }
}
/* === AOU BRAND CONTAINER STANDARD 2025-10-12 === */

.aou-header .brand-name { line-height:1; }

/* === AOU BRAND TEXT VISIBILITY FIX — 2025-10-13 ==========================
   Ensure the "Afghanistan Open University (AOU)" text appears beside the logo
   on desktop and mobile. Kept minimal to avoid altering existing layout.
---------------------------------------------------------------------------*/
.aou-header .brand-name{
  display:inline-block;
  color:#fff;
  font-weight:800;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.1;
  white-space:nowrap;           /* keep it on one line so it doesn’t vanish/wrap oddly */
}
@media (max-width: 1024px){
  .aou-header .brand-name{ font-size:14px; }
}

/* === AOU BRAND TEXT WIDTH/ELLIPSIS TWEAK — 2025-10-13 ====================
   Prevent the brand text from vanishing when space is tight:
   clamp size + max-width + ellipsis. Keeps layout stable.
---------------------------------------------------------------------------*/
.aou-header .brand-name{
  max-width: min(42vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1024px){
  .aou-header .brand-name{
    max-width: 40vw;
    font-size: 13.5px; /* slightly smaller to fit beside logo on phones */
  }
}

/* === MOBILE FULL-BLEED HEADER & EDGE-TO-EDGE DRAWER — 2025-10-13 ========= */
@media (max-width: 1024px){
  /* Let header content span the viewport */
  .aou-header__inner{ max-width:none; width:100%; }

  /* Drawer covers the whole side and sits above header buttons */
  .aou-header .main-nav{
    width:100vw !important;
    max-width:none !important;
    height:100dvh;                 /* already set, keep explicit */
    z-index:2000 !important;       /* ensure it overlays Login/Sign up */
    box-shadow:none;               /* flush to screen edge */
  }

  /* Backdrop sits under the drawer but above the page */
  body.menu-open .menu-backdrop{ z-index:1500; }
}
/* Keep a strong z-index in all cases */
.aou-header .main-nav{ z-index:2000; }

/* === AOU MOBILE DRAWER BOTTOM-PIN OVERRIDE — 2025-10-14 =====================
   - Keep original mobile width (≈60% / max 240px)
   - Make drawer reach the bottom reliably (zoom-proof): top:0; bottom:0; height:auto
   - Ensure the drawer sits above header buttons, backdrop sits under it
------------------------------------------------------------------------------*/
@media (max-width: 1024px){
  .aou-header .main-nav{
    width: 60vw !important;
    max-width: 240px !important;
    top: 0; bottom: 0; height: auto !important;
    z-index: 2000 !important;    /* over header buttons */
    box-shadow: 0 0 24px rgba(0,0,0,.35) !important; /* tidy edge */
  }
  body.menu-open .menu-backdrop{
    z-index: 1500 !important;    /* under the drawer, over the page */
  }
}

/* === AOU HEADER FULL-BLEED FIX — 2025-10-13 ================================
   Make the header's blue background extend to the visual viewport edges on
   mobile / zoomed layouts (Android Chrome quirk).
   This does NOT change the inner layout or the drawer width.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .aou-header{
    position: sticky; top:0; z-index:1000;

    /* force the background to span the visual viewport */
    width: 100dvw;              /* modern devices */
    max-width: 100dvw;
    left: 0; right: 0;

    /* fallback for older browsers that don’t support dvw */
    width: 100vw;
    max-width: 100vw;
  }

  /* keep the inner grid behaving the same */
  .aou-header__inner{ width:100%; margin:0 auto; }
}

/* === AOU DRAWER HEADER (logo + auth) — 2025-10-14 ========================== */
.drawer-head{ display:none; }   /* hidden on desktop */

@media (max-width: 1024px){
  .drawer-head{
    display:block;
    margin: -8px 0 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }
  .drawer-brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color:#fff;
  }
  .drawer-logo{ height:40px; width:auto; display:block; }
  .drawer-name{
    font-weight:800;
    font-size: 15px;
    line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .drawer-auth{
    margin-top:10px;
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .drawer-link{
    color:#fff; text-decoration:none; font-weight:700;
  }
  .drawer-link--primary{
    padding:6px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
  }
}

/* === AOU HEADER FULL-BLEED OVERRIDE (robust) — 2025-10-14 ================== */
/* Make the blue header background truly span edge-to-edge on mobile/zoomed.  */
@media (max-width: 1024px){
  .aou-header{
    /* Force visual full-bleed even when the page is centered/wrapped */
    width: 100vw;
    max-width: none;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Respect notches / rounded corners */
    padding-left:  max(env(safe-area-inset-left, 0px), 0px);
    padding-right: max(env(safe-area-inset-right, 0px), 0px);
  }
}

/* === AOU DRAWER AUTH PILL LINKS — 2025-10-14 =============================== */
@media (max-width: 1024px){
  .drawer-link{
    color:#fff; text-decoration:none; font-weight:700;
    padding:6px 10px; border-radius:999px;
    border:1px solid rgba(255,255,255,.35);
  }
  .drawer-link--primary{ background:rgba(255,255,255,.1); }
}

/* === AOU DRAWER HEADER CENTERED LAYOUT — 2025-10-14 ======================= */
@media (max-width: 1024px){
  .drawer-head{
    text-align:center;
  }
  .drawer-brand{
    display:block;
    text-align:center;
  }
  .drawer-logo{
    height:60px;
    width:auto;
    margin:0 auto 8px;
    display:block;
  }
  .drawer-name{
    display:block;
    text-align:center;
    font-weight:800;
    font-size:15px;
    line-height:1.2;
    color:#fff;
    margin-bottom:10px;
  }
  .drawer-auth{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:8px;
  }
  .drawer-link--primary,
  .drawer-link{
    text-align:center;
  }
}

/* === AOU DRAWER HEADER POLISH — 2025-10-14 ================================ */
@media (max-width: 1024px){
  .drawer-head{
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-align: center;
  }
  .drawer-name{
    max-width: 80%;
    margin: 0 auto 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drawer-auth{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;               /* avoids overflow on very narrow phones */
  }
  .drawer-auth .btn,
  .drawer-auth .btn-outline,
  .drawer-auth .btn-primary{
    padding: 10px 16px;
    border-radius: 999px;
  }
}
@media (max-width: 1024px){
  .drawer-name{
    white-space: normal;          /* allow wrapping */
    display: -webkit-box;         /* clamp to 2 lines */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 86%;
  }
}
@media (max-width: 1024px){
  .drawer-auth{
    flex-wrap: nowrap;
    gap: 8px;
  }
  .drawer-auth .btn,
  .drawer-auth .btn-outline,
  .drawer-auth .btn-primary{
    flex: 1 1 0;                  /* equal, full width buttons */
    text-align: center;
  }
}
/* === AOU DRAWER HEADER MICRO-POLISH — 2025-10-14 === */
@media (max-width: 1024px){
  .drawer-auth{ align-items: center; }
  .drawer-head{ padding: 16px 16px 12px; } /* a hair more top padding */
}

/* === AOU DRAWER HEADER LEFT ALIGN — 2025-10-14 ============================ */
@media (max-width: 1024px){
  /* keep the block, but align with menu column */
  .drawer-head{ 
    text-align:left;                /* was center */
    padding-inline-start:10px;      /* same visual gutter as menu */
    padding-inline-end:16px;
  }
  .drawer-logo{ margin-left:0; }    /* was auto (center) */
  .drawer-name{ text-align:left; }  /* below the logo */
  .drawer-auth{ justify-content:flex-start; }  /* buttons start at menu column */
  .drawer-sep{ margin:12px 12px; }  /* keep the thin separator in the same column */
}

/* === AOU DRAWER LOGO CENTER ABOVE TITLE — 2025-10-14 ===================== */
@media (max-width: 1024px){
  /* Keep header content left-aligned overall… */
  .drawer-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;    /* title/buttons stay on the left gutter */
    padding-inline-start:16px;
    padding-inline-end:16px;
  }
  /* …but center JUST the logo within the drawer header */
  .drawer-logo{
    display:block;
    margin: 0 auto 8px auto;  /* centers it above the text */
  }
}

/* === AOU DRAWER LOGO NUDGE LEFT — 2025-10-14 ============================= */
@media (max-width: 1024px){
  .drawer-logo{
    transform: translateX(-6px);  /* small left shift; adjust -4..-8px if needed */
  }
}

/* === AOU DRAWER TOP SPACING TUNE — 2025-10-14 ============================== */
@media (max-width: 1024px){
  /* Move ALL drawer content closer to the top */
  .aou-header .main-nav{
    padding-top: 28px !important;   /* was ~76px; keep a little room for status bar */
  }

  /* Tighten the logo/title/buttons block spacing */
  .drawer-head{
    padding-top: 6px;               /* was larger; brings it up */
    padding-bottom: 10px;
    gap: 8px;
  }
  .drawer-logo{
    margin-top: 0;
    margin-bottom: 8px;             /* space between logo and title */
  }
  .drawer-sep{
    margin-top: 10px;               /* shorter gap above the thin divider */
  }
}

/* === AOU HEADER: HIDE TOP AUTH BUTTONS (drawer keeps its own) — 2025-10-14 === */
.aou-header .auth-actions { display:none !important; }

/* Small tidy on header right side so it doesn’t look “empty” without auth */
.aou-header .header-right { gap:6px; }

/* Mobile: keep header compact and truly full-bleed */
@media (max-width:1024px){
  .aou-header__inner{ padding-right:12px; padding-left:12px; }
}

/* === AOU MOBILE HEADER COMPACT TUNE — optional === */
@media (max-width:1024px){
  .aou-header__inner{
    grid-template-columns: auto 1fr auto; /* keep hamburger | brand | lang */
    column-gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .aou-header .brand-name{ max-width: 54vw; } /* a touch more room for name */
}