/* =========================================================================
   Coduners brand tokens + adaptive header logo
   -------------------------------------------------------------------------
   Loaded on EVERY page (after the main stylesheet). Single source for:
     - the two official brand colours (from the Coduners logo)
     - the adaptive header logo styles (colour logo on light, white on dark)
     - the transparent glass header + compact height once the page scrolls
   Brand colours:
     dark blue  #142544  (logo wordmark, solid-area sample of coduners_logo.png)
     light blue #8CC3E1  (logo icon, exact fill in the vector coduners.svg)
   ========================================================================= */
:root{
  --brand-dark:#142544;
  --brand-light:#8CC3E1;
  --brand-dark-rgb:20,37,68;
  --brand-light-rgb:140,195,225;
  --brand-light-tint:#E8F3F9;   /* brand light at 20% on white */
  --brand-light-soft:#AFD5EA;   /* brand light at 70% on white (hover) */
}

/* =========================================================================
   Adaptive header logo
   -------------------------------------------------------------------------
   Two copies of the ORIGINAL logo artwork are stacked and cross-faded:
     .cod-logo__img--color  coduners_logo.png        (light backgrounds)
     .cod-logo__img--white  coduners_logo_white.png  (dark backgrounds;
                            same artwork, every pixel white, same alpha)
   What is behind the logo is measured by /assets/adaptive-logo.js, which
   samples the pixels directly under the logo and sets:
     html.logo-auto + html.is-logo-dark / html.is-logo-light
   Fallback (script not running / WebGL unreadable): the site's own flags
     html.is-black-bg / html.is-blue-bg / #header.--is-projects  -> dark
   ========================================================================= */
.cod-logo{position:relative;display:inline-block;vertical-align:middle;line-height:0}
.cod-logo__img{display:block;height:auto;transition:opacity .45s ease} /* keep the 792x123 aspect ratio at the site's 200px width */
.cod-logo__img--white{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}

/* measured (primary) */
html.logo-auto.is-logo-dark .cod-logo__img--white{opacity:1}
html.logo-auto.is-logo-dark .cod-logo__img--color{opacity:0}

/* fallback: site section flags */
html:not(.logo-auto).is-black-bg .cod-logo__img--white,
html:not(.logo-auto).is-blue-bg .cod-logo__img--white,
html:not(.logo-auto) #header.--is-projects .cod-logo__img--white{opacity:1}
html:not(.logo-auto).is-black-bg .cod-logo__img--color,
html:not(.logo-auto).is-blue-bg .cod-logo__img--color,
html:not(.logo-auto) #header.--is-projects .cod-logo__img--color{opacity:0}

/* Mobile menu panel is brand light blue: always show the colour logo on it */
@media (max-width:812px){
  #header.--menu-opened .cod-logo__img--white{opacity:0}
  #header.--menu-opened .cod-logo__img--color{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .cod-logo__img{transition:none}
}

/* =========================================================================
   Glass header on scroll (all pages)
   -------------------------------------------------------------------------
   /assets/header-glass.js adds html.is-header-glass after 24px of scroll.
   - Transparent glass: a near-clear layer with a 6px blur BEHIND the header
     content (pseudo-element, so nothing inside the header moves). The tint
     no longer changes with the section; only the logo adapts.
   - Compact: the header's vertical padding shrinks while scrolled.
   ========================================================================= */
:root{
  --glass-blur:blur(6px) saturate(1.2);
  --glass-bg:rgba(255,255,255,.06);
  --glass-edge:rgba(255,255,255,.14);
  --header-compact-pad:calc(var(--base-padding-y) * .35);
  --glass-ease:.35s cubic-bezier(.35,0,.25,1);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-bg:rgba(255,255,255,.18)}
}

/* ---- Main site header (#header, WebGL pages) ---- */
#header{transition:color .25s,padding var(--glass-ease)}
html.is-header-glass #header:not(.--menu-opened){padding-top:var(--header-compact-pad);padding-bottom:var(--header-compact-pad)}
#header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 -1px 0 var(--glass-edge);
  opacity:0;transition:opacity var(--glass-ease);
}
html.is-header-glass #header::before{opacity:1}
#header.--menu-opened::before{opacity:0!important}   /* never over the open menu */

/* ---- Contact page header (.cx-header, sticky in normal flow) ----
   The removed padding is given back as margin, so the page never shifts. */
.cx-header{
  --cx-pad:calc(var(--base-padding-y) * .6);
  --cx-shrink:calc(var(--cx-pad) - var(--header-compact-pad));
  background:transparent;margin-bottom:0;
  transition:padding var(--glass-ease),margin var(--glass-ease),background-color var(--glass-ease),box-shadow var(--glass-ease);
}
html.is-header-glass .cx-header{
  padding-top:var(--header-compact-pad);padding-bottom:var(--header-compact-pad);
  margin-bottom:calc(var(--cx-shrink) * 2);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 -1px 0 rgba(var(--brand-dark-rgb),.08);
}

@media (prefers-reduced-motion:reduce){
  #header,#header::before,.cx-header{transition:none}
}