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

   Every page links this one file. Change a size or color here and it
   updates on every page automatically — no per-page CSS to hunt down.

   HOW TO RESIZE THE LOGO
   -----------------------
   Edit the numbers in the :root block below. --avo-logo-h-header is the
   one people usually mean by "the logo" (main site header, top of page).

   HOW THE AUTOMATIC WHITE-ON-DARK WORKS
   ---------------------------------------
   There are two real logo files, and BOTH sit in the markup at once —
   this is a plain display:none/block toggle, not a CSS image-replace
   trick, so it renders the same in every browser:

     images/avodiel-logo.png       — orange wordmark, for light backgrounds
     images/avodiel-logo-dark.png  — white wordmark, for dark backgrounds

   Both use the same full-color orange/blue icon, so the icon never loses
   its brand color, only the wordmark switches.

   Markup for any spot that needs to react to a dark background:

     <a href="index.html" class="logo on-dark">
       <img src="images/avodiel-logo.png" alt="Avodiel" class="avo-logo avo-logo-light">
       <img src="images/avodiel-logo-dark.png" alt="Avodiel" class="avo-logo avo-logo-dark">
     </a>

   Add the class "on-dark" to the wrapper (not the <img>s) whenever that
   logo sits on the dark navy brand background — CSS shows the dark file
   and hides the light one. Leave "on-dark" off on white/light backgrounds
   (the scrolled header pill, the login card, the Lobby page header, the
   footer-less pages) — only ONE <img> is needed there, just the light
   file, no second tag required. The main header handles the light/dark
   switch by itself: it starts on-dark over the dark hero, and
   header.scrolled flips back to the light file once the header becomes
   a light pill — no JS or markup change needed for that switch.
   ===================================================================== */

:root{
  --avo-logo-h-header:           40px; /* main site header, TOP OF PAGE (unscrolled), every marketing page EXCEPT Home — About/Services/Products/Careers/Blog/Contact all start on a dark hero, so their logo carries the "on-dark" class. Change --avo-logo-h-header-scrolled (below) instead if you want to change the size AFTER scrolling on these pages. */
  --avo-logo-h-home:             26px; /* main site header, TOP OF PAGE (unscrolled), HOME ONLY — Home's hero is light from the very top, so it's the one page that never gets "on-dark"; that's what lets its logo be sized here independently of every other page's --avo-logo-h-header above. Adjust THIS one line to resize just the Home logo. */
  --avo-logo-h-header-scrolled:  26px; /* main site header once ANY page (Home included) is scrolled into the white "island" pill — one shared size for that state, separate from both lines above, so scroll-size can be tuned without touching either page's top-of-page size */
  --avo-logo-h-header-mobile:    56px; /* main site header on phones (<=760px), BEFORE the hamburger menu is opened — every page, unscrolled or scrolled. Applies on every page/state on phones (see the 760px media query in css/header.css). Change --avo-logo-h-menu-home / --avo-logo-h-menu-header below instead if you want to change the size WHILE the hamburger menu is open. */
  --avo-logo-h-menu-home:        36px; /* hamburger menu OPEN, phones (<=760px), HOME PAGE ONLY — same default as the line above; adjust THIS one line to resize just Home's menu-open logo, independent of every other page's. */
  --avo-logo-h-menu-header:      36px; /* hamburger menu OPEN, phones (<=760px), every OTHER page — adjust THIS one line to resize their menu-open logo, independent of Home's. */
  --avo-logo-h-footer:           62px; /* main site footer                 */
  --avo-logo-h-lobby:            54px; /* Avodiel Lobby page header        */
  --avo-logo-h-dash-sidebar:     32px; /* staff dashboard sidebar — kept low on purpose: the sidebar is only 236px wide (188px once its own padding is subtracted), and the wordmark's real proportions (see the file comment above) need ~5.6x their height in width, so anything much taller than this clips the last couple of letters. Verified 2026-09 with the corrected-ratio logo file. */
  --avo-logo-h-dash-topbar:      36px; /* staff dashboard mobile topbar    */
  --avo-logo-h-dash-login:       56px; /* staff dashboard login card       */
}

.avo-logo{
  width:auto;
  display:block;
  transition:height .5s cubic-bezier(.16,1,.3,1);
}

/* Automatic white-on-dark — a plain show/hide toggle between the two
   real files (see the markup pattern in the comment above). Used by
   the footer, the Lobby header, and anywhere else on the site that
   just needs "light file on dark background, otherwise the light
   file everywhere" — the main site header does NOT use this anymore
   (see "HOW TO CHANGE THE HEADER'S LOGO IMAGES" below); this block
   stays exactly as it always has for everything else. */
.avo-logo-dark{ display:none; }
.on-dark .avo-logo-light{ display:none; }
.on-dark .avo-logo-dark{ display:block; }
header.scrolled.on-dark .avo-logo-light,
header.scrolled .on-dark .avo-logo-light{ display:block; } /* scrolled pill is light */
header.scrolled.on-dark .avo-logo-dark,
header.scrolled .on-dark .avo-logo-dark{ display:none; }

/* =====================================================================
   HOW TO CHANGE THE HEADER'S LOGO IMAGES
   -----------------------------------------
   Same idea as the SIZE variables above — separate, clearly-labeled
   spots, one per context, so you can swap any one of them without
   touching the others or any CSS here.

   >>> YOU NEVER NEED TO EDIT ANYTHING IN THIS FILE TO CHANGE WHICH
   >>> LOGO IMAGE SHOWS SOMEWHERE. The actual file paths live in
   >>> partials/header.html, as NINE separate, numbered <img> lines
   >>> (look for the big comment block starting "NINE LOGO LINES
   >>> BELOW" in that file). Everything in THIS file below just
   >>> decides which ONE of those nine is VISIBLE in a given
   >>> situation — it never needs to change just because you swapped
   >>> a logo file.

     DESKTOP/TABLET:
     avo-logo-img-home                    — (1) Home page, unscrolled
     avo-logo-img-header                  — (2) every other page, unscrolled
     avo-logo-img-header-scrolled         — (3) ANY page, once scrolled

     PHONES (<=760px) — same Home/other/scrolled split as desktop, just its own images:
     avo-logo-img-mobile-home             — (4) Home page, unscrolled
     avo-logo-img-mobile-header           — (5) every other page, unscrolled
     avo-logo-img-mobile-home-scrolled    — (6) Home page, once scrolled
     avo-logo-img-mobile-header-scrolled  — (7) every other page, once scrolled

     HAMBURGER MENU OPEN (the full-screen nav overlay's own header pill,
     any width the hamburger appears at) — overrides everything above
     while it's true, regardless of scroll position:
     avo-logo-img-menu-home               — (8) Home page
     avo-logo-img-menu-header             — (9) every other page

   This is separate from the generic on-dark toggle above on purpose,
   so the header can have nine independent logos instead of just two.
   ===================================================================== */

/* Desktop/tablet: exactly one of the first three is visible, same as before. */
header .avo-logo-img-home,
header .avo-logo-img-header,
header .avo-logo-img-header-scrolled,
header .avo-logo-img-mobile-home,
header .avo-logo-img-mobile-header,
header .avo-logo-img-mobile-home-scrolled,
header .avo-logo-img-mobile-header-scrolled,
header .avo-logo-img-menu-home,
header .avo-logo-img-menu-header{ display:none; }

header .logo:not(.on-dark) .avo-logo-img-home{ display:block; }        /* Home only, unscrolled */
header .on-dark .avo-logo-img-header{ display:block; }                 /* every other page, unscrolled */
header.scrolled .logo .avo-logo-img-header-scrolled{ display:block; }  /* any page, scrolled — same specificity/source-order trick as the SIZE rules above: keep this listed after the two rules above it */
header.scrolled .logo .avo-logo-img-home,
header.scrolled .logo .avo-logo-img-header{ display:none; }

/* Phones (<=760px): logos 4-7 take over from 1-3, split the same way
   (Home vs every other page, unscrolled vs scrolled). "on-dark" is a
   per-page class that's present or absent regardless of scroll (see
   the comment in partials/header.html), so it can still be used here
   to tell Home apart from every other page even once scrolled.
   Written with the SAME selectors (so the same specificity) as the
   desktop rules above, and placed AFTER them, so on a narrow screen
   these are the ones that win the tie — same trick used throughout
   this file, don't reorder this block earlier than the desktop one
   above it. */
@media (max-width:760px){
  header .logo:not(.on-dark) .avo-logo-img-home,
  header .on-dark .avo-logo-img-header,
  header.scrolled .logo .avo-logo-img-header-scrolled{ display:none; }

  header .logo:not(.on-dark) .avo-logo-img-mobile-home{ display:block; }   /* phone, Home, unscrolled */
  header .on-dark .avo-logo-img-mobile-header{ display:block; }            /* phone, other pages, unscrolled */

  header.scrolled .logo:not(.on-dark) .avo-logo-img-mobile-home-scrolled{ display:block; }  /* phone, Home, scrolled — placed after the two lines above so it wins the tie once scrolled */
  header.scrolled .on-dark .avo-logo-img-mobile-header-scrolled{ display:block; }            /* phone, other pages, scrolled — same reason */

  header.scrolled .logo .avo-logo-img-mobile-home,
  header.scrolled .logo .avo-logo-img-mobile-header{ display:none; }
}

/* Hamburger menu open: the header shows the same full light pill as the
   scrolled state regardless of whether the page has actually been
   scrolled yet (see header.menu-open .container in header.css), so it
   gets its own two logos (Home / every other page) that take over from
   ALL eight logos above. Each "hide" line below is deliberately written
   as its matching "show" rule from above with .menu-open added onto
   header — that makes every hide rule's specificity strictly HIGHER
   than the rule it's overriding (one more class than a tie), so this
   wins no matter which other classes (.scrolled, mobile media query,
   on-dark) happen to be present at the same time — no reliance on
   source order needed here, unlike the blocks above. */
header.menu-open .logo:not(.on-dark) .avo-logo-img-menu-home{ display:block; }
header.menu-open .on-dark .avo-logo-img-menu-header{ display:block; }

header.menu-open .logo:not(.on-dark) .avo-logo-img-home,
header.menu-open .logo:not(.on-dark) .avo-logo-img-mobile-home{ display:none; }
header.menu-open .on-dark .avo-logo-img-header,
header.menu-open .on-dark .avo-logo-img-mobile-header{ display:none; }
header.menu-open.scrolled .logo .avo-logo-img-header-scrolled{ display:none; }
header.menu-open.scrolled .logo:not(.on-dark) .avo-logo-img-mobile-home-scrolled{ display:none; }
header.menu-open.scrolled .on-dark .avo-logo-img-mobile-header-scrolled{ display:none; }

/* Hamburger menu-open logo SIZE, Home vs every other page — phones only
   (<=760px), independent of --avo-logo-h-header-mobile above (which
   still controls the size before the menu is opened). Deliberately
   written with an extra ".logo" AND doubled ".avo-logo" class so this
   beats every other height rule in this file on specificity alone
   (header.css's own generic "header.menu-open .avo-logo{height:...}"
   rule, AND this file's own per-context sizing block further down) —
   no reliance on which one loads or is declared last. */
@media (max-width:760px){
  header.menu-open .logo .avo-logo.avo-logo-img-menu-home{ height:var(--avo-logo-h-menu-home); }
  header.menu-open .logo .avo-logo.avo-logo-img-menu-header{ height:var(--avo-logo-h-menu-header); }
}

/* Footer logo, narrow phones only: the footer column becomes full-width
   below 760px, but on phones narrower than ~460px that's still not quite
   wide enough for the wordmark's real proportions at --avo-logo-h-footer's
   72px — the browser's own `img{max-width:100%}` reset then quietly
   SQUISHES it down to fit (width shrinks, height doesn't), which compresses
   the lettering instead of clipping it. Shrinking the height here keeps the
   logo's real proportions intact on every phone size instead. Found and
   fixed 2026-09 alongside the dashboard sidebar clipping — same root cause
   (a container narrower than the wordmark needs), different visible symptom. */
@media (max-width:480px){
  :root{ --avo-logo-h-footer: 44px; }
}

.logo, .brand{
  display:flex;align-items:center;
  /* flex-shrink:0 is the fix for a real bug found 2026-09: the scrolled
     "island" pill's max-width didn't leave quite enough room for
     logo + nav links + buttons at the logo's real (properly-cropped)
     aspect ratio. Flexbox's default flex-shrink:1 was quietly
     absorbing that shortfall by squeezing the logo's WIDTH only (its
     height stays fixed), which distorts/compresses the wordmark —
     exactly the "logo is compressed" symptom. Text nav items can't
     shrink below their own content width, so the image — being the
     only flexible-in-appearance child — took 100% of the deficit.
     flex-shrink:0 makes the logo a hard floor so this can never happen
     again; the matching fix (giving the pill enough max-width so nav
     content actually fits) lives in each page's own
     header.scrolled .container rule. */
  flex-shrink:0;
  transition:opacity .3s ease;
}
.logo:hover, a:hover > .brand{
  opacity:.82;
}

/* ---- per-context sizing (keyed off the structural classes already on
        each page — no extra markup needed beyond avo-logo + on-dark) ---- */
header .avo-logo{ height:var(--avo-logo-h-header); }                          /* every marketing page except Home, unscrolled */
header .logo:not(.on-dark) .avo-logo{ height:var(--avo-logo-h-home); }        /* Home only — its .logo wrapper never has .on-dark, which is what targets it specifically; this is intentionally MORE specific than the line above so it wins on Home */
header.scrolled .logo .avo-logo{ height:var(--avo-logo-h-header-scrolled); }  /* any page once scrolled — written with the SAME specificity as the Home rule above but placed AFTER it, so on Home (once scrolled) this line wins the tie instead; don't reorder these three rules or that tie-break flips */

.footer-brand .avo-logo{ height:var(--avo-logo-h-footer); }

.lobby-header .avo-logo{ height:var(--avo-logo-h-lobby); }

.sidebar .avo-logo{ height:var(--avo-logo-h-dash-sidebar); }
.mobile-topbar .avo-logo{ height:var(--avo-logo-h-dash-topbar); }
.card .avo-logo{ height:var(--avo-logo-h-dash-login); }