/* =====================================================================
   AVODIEL — shared header/nav styles (single source of truth)

   Every marketing page links this one file, the same way every page
   already links css/logo.css for logo sizing. Change the header, the
   scrolled "island" pill, the hamburger menu, or the mobile nav drawer
   HERE and it updates on every page automatically — no per-page CSS to
   hunt down. (Home is the one page with two small, clearly-marked
   overrides of its own further down, because its hero is light instead
   of dark — see the comment in index.html's own <style> block.)

   This pairs with public/partials/header.html (the shared markup) and
   public/js/header.js (the shared scroll/menu behavior) — together
   those three files are the entire header component.

   NOTE: page-to-page transitions (css/transitions.css) were removed
   (2026-09) — pages now hard-cut on navigation again, no morph effect.
   The file itself is left in place, just unused; nothing else changes.

   3-SECOND INTRO SPLASH (added 2026-09): the @import right below pulls
   in css/intro.css, the full-screen brand animation that plays once,
   the first time a visitor opens the site (see the big comment at the
   top of partials/header.html for why it lives there, and css/intro.css
   itself for the timing). TO TURN THE SPLASH OFF SITE-WIDE: delete this
   one line. To change how it looks/feels, edit css/intro.css instead —
   this line never needs to change again once it's in place. */
@import url("intro.css");

/* ---------- STRUCTURE: two states, a flat bar at the top of the page
   that becomes a rounded floating "island" pill once you scroll. ---- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1550;
  padding:0;
  transition:padding .45s var(--ease);
}
header.scrolled{
  padding:16px 0;
}
header .container{
  max-width:100%;
  border-radius:0;
  padding:22px 40px;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:max-width .45s var(--ease), padding .45s var(--ease), border-radius .45s var(--ease),
             background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
header.scrolled .container{
  /* 1140px (was 1060px until 2026-09) — 1060 was too narrow for the
     logo + nav links + buttons at the logo's real, properly-cropped
     width. Flexbox was quietly squeezing the logo's WIDTH only (its
     height stayed fixed) to make it fit, which is what was actually
     causing "the logo looks compressed" — not a font-weight
     difference. See the flex-shrink:0 fix in css/logo.css for the
     other half of this; that's the permanent guard, this width is
     what stops it from ever being needed. */
  max-width:1140px;
  border-radius:999px;
  padding:10px 12px 10px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 1px rgba(11,27,51,0.06),
    0 10px 24px -10px rgba(11,27,51,0.2),
    0 28px 56px -18px rgba(11,27,51,0.28);
}
header .btn{padding:11px 22px;font-size:14.5px;transition:padding .5s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),background .3s ease,font-size .5s var(--ease);}

/* Default (unscrolled) header sits over a dark hero on every page
   except Home, so nav links / toggle / ghost button start white and
   flip navy once scrolled onto the light island pill. Home overrides
   just the "default" half of this in its own <style> block, because
   its hero is light from the very top. */
header.scrolled .nav-links a{color:rgba(11,27,51,.75);}
header.scrolled .nav-links a:hover{color:var(--navy);background:rgba(11,27,51,.06);}
header.scrolled .nav-links a.active{color:var(--navy);background:#fff;box-shadow:0 1px 4px rgba(11,27,51,.14);}
header.scrolled .nav-toggle span{background:var(--navy);}
header.scrolled .btn-ghost{
  background:rgba(11,27,51,.07);
  color:var(--navy);
  border-color:rgba(11,27,51,.4);
  font-weight:700;
}
header.scrolled .btn-ghost:hover{background:rgba(11,27,51,.13);border-color:rgba(11,27,51,.5);}

nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-links{
  display:flex;align-items:center;gap:2px;
}
.nav-links a{
  color:rgba(255,255,255,0.82);
  font-weight:600;font-size:14.5px;letter-spacing:.01em;
  position:relative;
  padding:9px 16px;
  border-radius:100px;
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.14);}
.nav-links a.active{color:#fff;background:rgba(255,255,255,.16);}
.nav-cta{display:flex;align-items:center;gap:14px;position:relative;}
.nav-cta::before{
  content:'';
  position:absolute;left:-16px;top:50%;
  transform:translateY(-50%);
  width:1px;height:22px;
  background:rgba(255,255,255,0.2);
}
header.scrolled .nav-cta::before{background:rgba(11,27,51,0.12);}

.nav-toggle{
  display:none;position:relative;
  width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  cursor:pointer;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:0;
  transition:background .3s ease,border-color .3s ease,transform .2s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.16);}
.nav-toggle:active{transform:scale(.94);}
.nav-toggle span{
  position:absolute;
  width:19px;height:2px;border-radius:2px;background:#fff;
  transition:transform .4s var(--ease),opacity .25s ease,width .4s var(--ease);
}
.nav-toggle span:nth-child(1){transform:translateY(-6px);}
.nav-toggle span:nth-child(2){width:14px;transform:translateX(2.5px);}
.nav-toggle span:nth-child(3){transform:translateY(6px);}
.nav-toggle.active{background:rgba(255,82,0,.16);border-color:rgba(255,82,0,.35);}
.nav-toggle.active span:nth-child(1){transform:translateY(0) rotate(45deg);}
.nav-toggle.active span:nth-child(2){width:19px;opacity:0;transform:translateX(8px);}
.nav-toggle.active span:nth-child(3){transform:translateY(0) rotate(-45deg);}
header.scrolled .nav-toggle{background:rgba(11,27,51,.05);border-color:rgba(11,27,51,.18);}
header.scrolled .nav-toggle:hover{background:rgba(11,27,51,.1);}
header.scrolled .nav-toggle.active{background:rgba(255,82,0,.12);border-color:rgba(255,82,0,.3);}

/* Mobile menu open: the header may not have been scrolled yet (the
   visitor can open the menu right at the top of the page), but the
   logo needs a visible pill behind it against the full-screen navy
   menu overlay — reuse the scrolled "island" look whenever the menu
   is open, regardless of scroll position. */
header.menu-open{padding:16px 0;}
header.menu-open .container{
  max-width:1140px;
  border-radius:999px;
  padding:10px 12px 10px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 1px rgba(11,27,51,0.06),
    0 10px 24px -10px rgba(11,27,51,0.2),
    0 28px 56px -18px rgba(11,27,51,0.28);
}
header.menu-open .nav-toggle{background:rgba(11,27,51,.05);border-color:rgba(11,27,51,.18);}
header.menu-open .nav-toggle:hover{background:rgba(11,27,51,.1);}
header.menu-open .nav-toggle.active{background:rgba(255,82,0,.12);border-color:rgba(255,82,0,.3);}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:2000;
  background:linear-gradient(90deg,var(--orange-2),var(--orange) 50%,#FF7A29);
  box-shadow:0 0 12px rgba(255,82,0,.7);
  transition:width .08s linear;
}

/* ---------- MOBILE NAV DRAWER ---------- */
.mobile-menu{
  position:fixed;inset:0;background:var(--navy);z-index:1500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transform:translateY(-100%);transition:transform .45s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{color:#fff;font-size:26px;font-weight:600;font-family:'Outfit',sans-serif;}
.mobile-menu-cta{display:flex;flex-direction:column;gap:16px;width:220px;margin-top:10px;}
.mobile-menu a.btn{font-size:15.5px;font-weight:600;font-family:'Inter',sans-serif;justify-content:center;}
.mobile-menu .btn-ghost{border-color:rgba(255,255,255,.3);}

/* Hide the chat bubble/panel while the mobile menu is open — the chat
   widget floats at z-index:1600 (see public/chatbot.js), above the mobile
   menu's own 1500, so without this it visibly floats on top of the menu
   overlay. header.js adds/removes this body class on open/close. */
body.nav-menu-open .chat-launcher-wrap,
body.nav-menu-open .chat-panel{display:none !important;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:760px){
  /* Bigger, more comfortable logo on phones, tighter side padding so it
     has room to breathe — see --avo-logo-h-header-mobile in logo.css,
     the one place that size itself is set. */
  header .container{padding:16px 20px;}
  header .avo-logo,
  header.scrolled .avo-logo,
  header.menu-open .avo-logo{height:var(--avo-logo-h-header-mobile);}

  /* The mobile menu overlay used to just vertically-center its links
     (justify-content:center from the base .mobile-menu rule above) with
     no awareness of the fixed header pill sitting on top of it (z-index
     1550 vs the menu's 1500). On shorter phone screens that centering
     math can land "Home" (the first link) right underneath, or even
     partly behind, the header pill — looking misaligned/cramped compared
     to the even gaps between the rest of the links below it. Anchoring
     the list to the top with a fixed clearance (header pill's own
     height on phones is roughly 16+10+36+10+16 = 88px — 140px leaves a
     comfortable, consistent gap) fixes that regardless of screen height;
     overflow-y:auto is a safety net so a very short/landscape phone can
     still scroll to the CTA buttons instead of clipping them. */
  .mobile-menu{
    justify-content:flex-start;
    padding:140px 24px 40px;
    overflow-y:auto;
  }
}