/*
 * Header
 *
 * Sticky, transparent-to-solid header for the site.
 *
 * Developed by: Rhyll Neri
 */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--dur-300) var(--ease-out),
              box-shadow var(--dur-300) var(--ease-out),
              transform var(--dur-300) var(--ease-out);
}

.header--solid {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.header--hidden {
  transform: translateY(-100%);
}

.header__topbar {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-12);
  padding: 0.55rem 0;
  transition: max-height var(--dur-300) var(--ease-out);
}

.header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header__topbar-info {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header__topbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.85);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

.header__topbar-link:hover {
  color: var(--color-accent);
}

.header__topbar-link .icon {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

.header__topbar-socials {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.header__topbar-socials a {
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--dur-200) var(--ease-out), color var(--dur-200) var(--ease-out);
}

.header__topbar-socials a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
}

.header__topbar-socials .icon { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .header__topbar { display: none; }
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: var(--header-height);
  transition: min-height var(--dur-300) var(--ease-out);
}

.header--scrolled .header__inner {
  min-height: var(--header-height-scroll);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
}

.header__logo,
.header__logo-fallback {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: inherit;
}

.header__logo img {
  max-height: 56px;
  width: auto;
  transition: max-height var(--dur-300) var(--ease-out);
}

.header--scrolled .header__logo img {
  max-height: 44px;
}

/* ---- Dual logo (light over hero, dark on white / scrolled) ---- */
.header__logo--custom { position: relative; }

.header__logo-img {
  display: none;
  max-height: 56px;
  width: auto;
  transition: max-height var(--dur-300) var(--ease-out);
}

/* Default (inner pages + any scrolled state): show the dark logo. */
.header__logo-img--dark { display: block; }

/* Front page, before scroll: header is transparent, so show the light logo. */
.is-front .header:not(.header--scrolled) .header__logo-img--dark { display: none; }
.is-front .header:not(.header--scrolled) .header__logo-img--light { display: block; }

.header--scrolled .header__logo-img { max-height: 40px; }

.header__logo-mark {
  width: 38px;
  height: 38px;
  background: var(--color-primary);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
}

.header__cta-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  justify-self: end;
}

.header__cta { display: inline-flex; }

@media (max-width: 1120px) {
  .header__cta { display: none; }
}

/* Mobile toggle */
.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  background: transparent;
  border-radius: var(--radius-md);
  transition: background var(--dur-150) var(--ease-out);
}

.header__toggle:hover { background: var(--color-mist); }

@media (max-width: 1120px) {
  .header__toggle { display: inline-flex; }
}

/* =========================================================================
 * Header states
 *
 * 1. Front page, top (not scrolled): transparent header, light logo, white nav.
 * 2. Inner pages, top (not scrolled): solid white bar, dark logo, ink nav.
 * 3. Any page, scrolled: floating rounded "dynamic island", dark logo, ink nav.
 * ========================================================================= */

/* (1) Front page, before scroll — transparent over the hero. */
.is-front .header:not(.header--scrolled) {
  background: transparent;
  box-shadow: none;
}
.is-front .header:not(.header--scrolled) .header__brand,
.is-front .header:not(.header--scrolled) .header__nav-link {
  color: var(--color-white);
}
.is-front .header:not(.header--scrolled) .header__toggle { color: var(--color-white); }

/* (2) Inner pages, before scroll — solid white bar with the dark logo. */
body:not(.is-front) .header:not(.header--scrolled) {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* Hover on inner-page nav links turns the text black. */
body:not(.is-front) .header__nav-link:hover,
body:not(.is-front) .header__nav-link:focus {
  color: var(--color-black);
}
body:not(.is-front) .header__nav-link:hover::after,
body:not(.is-front) .header__nav-link:focus::after {
  background: var(--color-black);
}

/* (3) Scrolled — collapse the top bar and float the bar as a rounded island. */
.header--scrolled,
.header--solid {
  background: transparent;
  box-shadow: none;
}

.header--scrolled .header__topbar { display: none; }

.header--scrolled > .container {
  max-width: 1100px;
}

.header--scrolled .header__inner {
  background: var(--color-white);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  padding-inline: var(--space-6);
  margin-top: var(--space-3);
}