/* ==========================================================================
   FILE          assets/aes-nav.css
   UPLOAD TO     public_html/assets/aes-nav.css
   LOADED        LAST, on every page, after every other stylesheet.

   THE SINGLE SOURCE OF TRUTH FOR THE SITE HEADER.

   WHY THIS FILE EXISTS
   --------------------
   The header was styled by three stylesheets at once, and four properties
   were declared in two of them at the SAME specificity:

       .nav-links a      font-size    aes.css (13.5px)  AND  aes-type.css (0.8694rem)
       .nav-burger       font-size    aes.css           AND  aes-type.css
       .brand .nm b      font-size    aes.css           AND  aes-type.css
       .brand .nm small  font-size    aes.css           AND  aes-type.css

   When two rules have equal specificity, CSS gives the win to whichever
   stylesheet was loaded LAST. So the menu's size depended on the ORDER of
   the <link> tags on each page rather than on any deliberate decision:

       aes.css then aes-type.css  ->  13.9104px   (index and most pages)
       aes-type.css then aes.css  ->  13.5px      (tools.php)

   Same markup, same stylesheets, different result. That is why one menu
   looked different, and why it would have happened again on the next page
   anyone added.

   THE FIX
   -------
   Every header property is declared once, here, and this file is loaded
   last on every page. Load order upstream no longer matters: whatever
   aes.css or aes-type.css say about the header, this file has the final
   word. Add a new page, get an identical menu.

   Sizes are in px on purpose. A rem value is multiplied by the root font
   size, so any page that changes the root - a framework, an embedded app,
   a stray inline style - silently rescales the menu. px cannot drift.

   TO CHANGE THE MENU, CHANGE IT HERE. Nowhere else.
   ========================================================================== */

/* ---- the bar itself ---------------------------------------------------- */
header.nav{
  position: sticky;
  top: 0;
  z-index: 300;
}

header.nav .nav-in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---- the logo ---------------------------------------------------------- */
header.nav .brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}

header.nav .brand img{
  display: block;
  width: 92px;
  height: 42px;
  object-fit: contain;
}

/* The brand wordmark was removed from the markup in favour of the logo
   alone. This keeps it hidden even if an old page is ever re-uploaded, so
   a stale file cannot bring the overlapping text back. */
header.nav .brand .nm{
  display: none !important;
}

/* ---- the menu ---------------------------------------------------------- */
header.nav .nav-links{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;          /* never allow a second row */
}

header.nav .nav-links a{
  font-family: "Orbitron", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.9104px;       /* the value the site already used; now fixed */
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;        /* "AI & APPS" must never break across lines */
  color: #8792A0;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  text-shadow: 0 -1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(210,222,236,.28);
  transition: color .2s, border-color .2s, text-shadow .2s;
}

header.nav .nav-links a:hover,
header.nav .nav-links a:focus-visible,
header.nav .nav-links a[aria-current]{
  color: #FFFFFF;
  border-color: #D2222B;
  text-shadow: 0 -1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.35);
}

/* ---- the burger -------------------------------------------------------- */
header.nav .nav-burger{
  display: none;
  background: none;
  border: 1px solid rgba(201,212,224,.22);
  border-radius: 8px;
  color: #C9D4E0;
  font-size: 21.16px;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---- mobile ------------------------------------------------------------
   1140px is the site's established breakpoint and is left exactly as it
   was. Below it the links become a stacked panel and the burger appears.
   ------------------------------------------------------------------------ */
@media (max-width: 1140px){
  header.nav .nav-burger{ display: block; }

  /* The panel is sized to its own text and anchored under the burger on the
     right, rather than stretched edge to edge. A full-bleed panel on a phone
     leaves a long run of empty space beside short words like BIM, and puts
     the tap targets a long way from the thumb that opened the menu.
     width:max-content makes the panel exactly as wide as its longest item;
     the max-width keeps it sane if an item is ever renamed to something
     long, and the min-width stops it looking mean next to BIM alone. */
  header.nav .nav-links{
    display: none;
    position: fixed;
    top: 74px;
    right: 12px;
    left: auto;
    bottom: auto;
    width: max-content;
    min-width: 190px;
    max-width: min(78vw, 320px);
    background: rgba(10,22,34,.98);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 8px 6px;
    border: 1px solid rgba(201,212,224,.18);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
    overflow: hidden;
  }
  header.nav .nav-links.open{ display: flex; }

  header.nav .nav-links a{
    width: auto;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(201,212,224,.09);
    border-radius: 7px;
    text-align: left;
    white-space: nowrap;
  }
  header.nav .nav-links a:last-child{ border-bottom: 0; }
}