/* Site header: logo, nav links, mobile menu.
   Appears on every page. */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 244, 246, 0.82);
  backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid var(--color-line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; }

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
.brand__logo { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--color-line); }
.brand__logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.brand:hover .brand__logo { box-shadow: 0 0 0 1px var(--color-ink); }
.brand__name { font-weight: 600; letter-spacing: -0.02em; }

/* Nav links: ink by default, accent + underline on hover and on the current page */
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav a { text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav a:not(.btn) { position: relative; color: var(--color-ink); font-size: var(--text-sm); transition: color 200ms var(--ease); }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--color-accent-text); }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle { display: none; background: none; border: 1px solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font: inherit; font-size: var(--text-sm); cursor: pointer; }
@media (max-width: 900px) {   /* menu button below 900px: the nav (with EN · ES · CA) needs the room */
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--gutter); background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
  .nav.is-open { display: flex; }
}

/* EN · ES · CA switcher in the nav (written in by build.py) */
.lang-switch { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
.lang-switch a[aria-current] { color: var(--color-accent-text); }
.lang-switch a[aria-current]::after { transform: scaleX(1); }
@media (max-width: 900px) { .lang-switch { padding-left: 0; border-left: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); width: 100%; } }