/* =============================================
   NAVBAR (links list + hamburger behavior)
   Mobile‑first + Capability/Orientation queries
   Works with DOM:
     <div id="menu" class="fas fa-bars"></div>
     <nav class="navbar"><ul>…</ul></nav>
   ============================================= */

/* -------- Core (mobile-first) -------- */
#menu {
  font-size: 3rem;
  cursor: pointer;
  color: rgb(24, 2, 63);
  display: block; /* visible on mobile by default */
}

/* Off-canvas nav panel (hidden by default) */
header .navbar {
  position: fixed;
  top: 6.5rem;              /* directly under fixed header */
  right: -120%;             /* off-screen */
  width: 75%;
  height: 100%;
  text-align: left;
  align-items: flex-start;
  background-color: #0e0f31; /* site dark */
  transition: right 0.35s ease-in-out;
  z-index: 999;             /* under header (1000) */
}

header .navbar ul {
  list-style: none;
  display: flex;
  flex-flow: column;
  padding: 1rem;
}

header .navbar li {
  width: 26rem;
  margin: 1rem 0;
  border-radius: 0.5rem;
  text-align: center;
}

header .navbar ul li a {
  display: block;
  padding: 1rem;
  text-align: left;
  font-size: 2rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04rem;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: #fff;
  border-radius: 0.5rem;
  border-bottom: 0.5rem solid #011aff; /* blue accent */
}

/* JS toggles .nav-toggle on <nav> to open, .fa-times on #menu for rotation */
header .navbar.nav-toggle { right: 0; }
.fa-times { transform: rotate(180deg); transition: transform 0.3s ease; }

/* -------- Baseline desktop styles as utilities (used in breakpoints) -------- */
.navbar-inline {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  right: auto !important;
  transition: none !important;
}

/* Inline (desktop) link look */
.navbar-inline ul {
  flex-flow: row nowrap !important;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.navbar-inline li { margin-left: 2.5rem; width: auto; }

.navbar-inline ul li a {
  font-size: 1.57rem;
  color: #0e2431;
  padding: 0.5rem 0; /* allow underline space */
}

.navbar-inline ul li a.active,
.navbar-inline ul li a:hover {
  color: #011aff;
  border-bottom: 0.2rem solid #011aff;
}

/* ===========================
   MOBILE-FIRST CORE BREAKPOINTS
   =========================== */

/* Tiny phones */
@media (min-width: 360px) {
  /* Slightly larger targets */
  header .navbar ul li a { padding: 1.1rem; }
}

/* Phones */
@media (min-width: 480px) {
  header .navbar { width: 70%; }
}

/* Large phones / small phablets */
@media (min-width: 600px) {
  header .navbar { width: 60%; }
}

/* Tablets (portrait) */
@media (min-width: 768px) {
  /* Switch to inline desktop nav */
  #menu { display: none; }
  header .navbar { /* keep DOM node, switch look */ }
  header .navbar { right: auto; top: auto; }
  header .navbar { background: transparent; height: auto; width: auto; }
  header .navbar { position: static; }
  header .navbar { transition: none; }
  header .navbar { z-index: auto; }

  /* Apply inline utility to ensure predictable cascade */
  header .navbar { composes: navbar-inline; } /* for editors that support it */
  /* Fallback if composes is not supported: duplicate rules */
  header .navbar ul { flex-flow: row nowrap; justify-content: center; align-items: center; padding: 0; }
  header .navbar li { margin-left: 2.5rem; width: auto; }
  header .navbar ul li a {
    font-size: 1.6rem;
    color: #0e2431;
    padding: 0.5rem 0;
    border-bottom: none;
  }
  header .navbar ul li a.active,
  header .navbar ul li a:hover {
    color: #011aff;
    border-bottom: 0.2rem solid #011aff;
    border-radius: 0;
  }
}

/* Tablets (landscape) / small laptops */
@media (min-width: 900px) {
  header .navbar li { margin-left: 3rem; }
}

/* Laptops (HD-ready) */
@media (min-width: 1024px) {
  header .navbar ul li a { font-size: 1.7rem; }
}

/* Standard laptops */
@media (min-width: 1280px) {
  header .navbar li { margin-left: 3.2rem; }
}

/* Large laptops / desktops */
@media (min-width: 1440px) {
  header .navbar ul li a { font-size: 1.8rem; }
}

/* Full HD desktops */
@media (min-width: 1920px) {
  header .navbar li { margin-left: 3.6rem; }
}

/* iMac / 2K–4K canvases */
@media (min-width: 2560px) {
  header .navbar ul li a { font-size: 2rem; }
}

/* ===========================
   CAPABILITY & PREFERENCE QUERIES
   =========================== */

/* Touch-first: bigger targets, less hover reliance */
@media (hover: none) and (pointer: coarse) {
  header .navbar ul li a { padding: 1.2rem 1.6rem; }
}

/* High-density (retina) assets */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  /* Improve hairline visibility for underlines */
  header .navbar ul li a.active,
  header .navbar ul li a:hover { border-bottom-width: 0.22rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation: none !important; }
  header .navbar { transition: none !important; }
}

/* Prefer more contrast */
@media (prefers-contrast: more) {
  header .navbar ul li a { color: #0b1630; }
  header .navbar ul li a.active,
  header .navbar ul li a:hover { color: #0015cc; border-bottom-color: #0015cc; }
}

/* ===========================
   ORIENTATION HELPERS
   =========================== */

/* Tablet portrait behaviors */
@media (min-width: 768px) and (orientation: portrait) {
  header .navbar li { margin-left: 2.2rem; }
}

/* Tablet landscape behaviors */
@media (min-width: 768px) and (orientation: landscape) {
  header .navbar li { margin-left: 2.8rem; }
}

/* Small devices in landscape: keep panel usable */
@media (max-width: 900px) and (orientation: landscape) {
  header .navbar { top: 5.8rem; } /* slightly tighter under header */
}

/* ===========================
   Utility classes if you prefer explicit toggles in JS
   =========================== */
.nav-open  header .navbar { right: 0; }
.nav-open  #menu { transform: rotate(180deg); }

/* Ensure focus styles are visible for keyboard users */
header .navbar a:focus {
  outline: 2px solid #011aff;
  outline-offset: 2px;
}

/* ======================================================
   MOBILE-ONLY ENHANCED MENU (≤ 767.98px)
   Card-style items + higher contrast for readability
   Leaves tablet/desktop (≥768px) exactly as V1
   ====================================================== */
@media (max-width: 767.98px) {
  /* Theme tokens used only on small screens */
  :root{
    --nav-panel-bg: linear-gradient(180deg,#111827 0%, #0b1220 100%);
    --nav-panel-border: rgba(255,255,255,.08);
    --nav-shadow: 0 20px 50px rgba(2,8,23,.45);

    --nav-item-bg: rgba(255,255,255,.06);
    --nav-item-hover-bg: rgba(255,255,255,.12);
    --nav-item-border: rgba(255,255,255,.10);
    --nav-text: #f9fafb;
    --nav-muted: #cbd5e1;

    --brand-a:#011aff;  /* site blue */
    --brand-b:#764ba2;  /* site purple */
  }

  /* Trigger styling improvements */
  #menu{
    color: #0e0f31;
    transition: transform .3s ease, color .2s ease;
  }
  #menu.fa-times{ transform: rotate(180deg); color: var(--brand-a); }

  /* Off‑canvas panel */
  header .navbar{
    right: -120%;
    top: var(--header-height, 6.5rem);
    width: min(86vw, 420px);
    height: calc(100dvh - var(--header-height, 6.5rem));
    background: var(--nav-panel-bg) !important;
    border-left: 1px solid var(--nav-panel-border);
    box-shadow: var(--nav-shadow);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    overflow-y: auto;
    padding: 1.2rem 1.2rem 2rem;
  }
  header .navbar::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:6px;
    background: linear-gradient(90deg,var(--brand-a),var(--brand-b));
    opacity:.65;
  }

  /* List + items */
  header .navbar ul{ gap: .6rem; padding: .25rem; margin:0; }
  header .navbar li{ width: 100%; margin: 0; }

  /* Per-item card look */
  header .navbar ul li a{
    display: flex; align-items: center; gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.2rem;
    font-size: 1.9rem; font-weight: 650; letter-spacing: .02em;
    color: var(--nav-text) !important;
    background: var(--nav-item-bg);
    border: 1px solid var(--nav-item-border);
    border-radius: 14px;
    text-decoration: none; text-transform: none;
    border-bottom: none !important; /* cancel V1 underline */
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease;
  }
  header .navbar ul li a:hover{
    background: var(--nav-item-hover-bg);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    color: var(--nav-text) !important;
  }
  header .navbar ul li a:active{ transform: translateY(1px); }

  /* Active/current page */
  header .navbar ul li a.active{
    color:#fff !important;
    background: linear-gradient(135deg,var(--brand-a) 0%, var(--brand-b) 100%);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(17,24,39,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  }

  /* Open state */
  header .navbar.nav-toggle{ right: 0; }

  /* Optional page overlay when open (toggle body.nav-open in JS) */
  body.nav-open::before{
    content:""; position: fixed; left:0; right:0; top: var(--header-height,6.5rem); bottom:0;
    background: rgba(2,8,23,.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 998;
  }

  /* Focus visibility (a11y) */
  header .navbar a:focus, header .navbar a:focus-visible{
    outline: 2px solid var(--brand-a);
    outline-offset: 3px;
    border-radius: 14px;
  }

  /* Small devices in landscape: keep panel close under header */
  @media (orientation: landscape) {
    header .navbar{ top: calc(var(--header-height,6.5rem) - .4rem); }
  }

  /* Touch-first targets a bit larger */
  @media (hover:none) and (pointer:coarse){
    header .navbar ul li a{ padding: 1.3rem 1.5rem; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion:reduce){
    header .navbar{ transition: none !important; }
  }

  /* Prefer more contrast */
  @media (prefers-contrast:more){
    header .navbar ul li a{ color:#fff; }
    header .navbar ul li a.active, header .navbar ul li a:hover{
      outline: 2px solid #fff; outline-offset: 2px;
    }
  }
}