/*
  layout.css — Phase 1: shared website shell.

  Ported from the master project's components/layout/{Header,Footer,
  MobileNavigation,LanguageSwitcher,Logo}.tsx — structure, spacing,
  and treatments preserved as closely as CSS allows. Uses logical
  properties (inset-inline, padding-inline, margin-inline) so the
  same rules serve both LTR and RTL pages without duplication.
*/

/* ---------------------------------------------------------------
   Logo
   --------------------------------------------------------------- */
/* Official DAL logo — assets/brand/dal-logo-horizontal-final.png: the
   approved white-A horizontal lockup, cropped (pixels untouched) to the
   artwork plus a 6px transparent margin: 2020x458, ~4.41:1. Never
   recoloured, never mirrored in RTL. Width is the one controlling
   dimension (visible artwork = ~99% of it); height follows the aspect.
   Header widths: 160px mobile, 200px tablet, 240px desktop — see
   responsive.css. */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo__img {
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* header wrapper: hard cap so the brand box can never grow past the bar */
.site-header .logo {
  height: 55px;
  max-height: 55px;
}

/* header: mobile size; always well inside the 76px bar. The stacked
   logo (mark above, name on one line below — dal-logo-stacked.png,
   981x568) is sized by height with width:auto so its proportions
   never distort. */
.logo__img--header {
  width: auto;
  height: 40px;
  max-height: 40px;
}

/* footer: larger than the header */
.logo__img--footer {
  width: auto;
  height: 76px;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color var(--duration-slow) var(--ease-editorial),
    border-color var(--duration-slow) var(--ease-editorial),
    backdrop-filter var(--duration-slow) var(--ease-editorial);
}

.site-header--scrolled {
  border-bottom-color: var(--color-hairline);
  background: color-mix(in srgb, var(--color-void) 85%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.site-nav {
  display: none; /* shown at the lg breakpoint — see responsive.css */
  align-items: center;
  gap: 2rem;
}

.site-nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-ink) 85%, transparent);
  transition: color var(--duration-fast) ease;
}

.site-nav__link:hover {
  color: var(--color-accent);
}

.site-header__actions {
  display: none; /* shown at the lg breakpoint */
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* hidden at the lg breakpoint — see responsive.css */
}

.nav-toggle__line {
  display: block;
  height: 1px;
  width: 1.5rem;
  background: var(--color-ink);
}

/* ---------------------------------------------------------------
   Mobile navigation overlay

   Kept permanently in the DOM (rather than mounted/unmounted like
   the master's AnimatePresence version) so the open/close fade can
   be a plain CSS transition. `visibility` is included in the
   transition list specifically so it flips to `hidden` only once
   the opacity fade-out finishes, keeping it out of the tab order
   and off-screen the rest of the time — see js/navigation.js for
   the matching aria-hidden/focus handling.
   --------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--color-void);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-editorial),
    visibility var(--duration-base) var(--ease-editorial);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 76px;
}

.mobile-nav__close {
  position: relative;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
}

.mobile-nav__close-line {
  position: absolute;
  height: 1px;
  width: 1.5rem;
  background: var(--color-ink);
}

.mobile-nav__close-line:first-child {
  transform: rotate(45deg);
}

.mobile-nav__close-line:last-child {
  transform: rotate(-45deg);
}

.mobile-nav__list {
  display: flex;
  width: 86%;
  max-width: var(--container-shell);
  margin-inline: auto;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.mobile-nav__item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-editorial),
    transform var(--duration-slow) var(--ease-editorial);
}

/* Staggered entrance, matching the master's per-index delay
   (0.08s + i * 0.06s) — only applied while open, so closing is a
   plain, un-staggered fade. */
.mobile-nav.is-open .mobile-nav__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(80ms + var(--i, 0) * 60ms);
}

.mobile-nav__link {
  display: block;
  border-bottom: 1px solid var(--color-hairline);
  padding-block: 1.25rem;
  font-family: var(--font-display);
  /* clamp(), not a bare 13vw: caps growth at the same 3rem the sm
     breakpoint already uses below, and floors it for the narrowest
     phones — see Phase 5 QA report. */
  font-size: clamp(28px, 13vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  color: var(--color-ink);
  transition: color var(--duration-base) ease;
}

.mobile-nav__link:hover {
  color: var(--color-accent);
}

.mobile-nav__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2.5rem;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface);
}

.footer__inner {
  padding-block: 5rem;
}

.footer__grid {
  display: grid;
  gap: 3.5rem; /* single column by default; 3-col at lg — see responsive.css */
}

.footer__brand {
  max-width: var(--container-sm);
}

.footer__tagline {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.footer__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-faint);
}

.footer__list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__link {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-ink) 80%, transparent);
  transition: color 150ms ease;
}

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

.footer__legal {
  margin-top: 4rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 2rem;
  font-size: 11px;
  color: var(--color-faint);
}

.footer__legal-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* row layout at the sm breakpoint — see responsive.css */
}

.footer__meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.5rem;
}

.footer__meta-value {
  margin-top: 0.25rem;
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-ink) 80%, transparent);
}

/* ---------------------------------------------------------------
   Page shell — temporary placeholder wrapper for Phase 1 only.
   Offsets content below the fixed header. Replaced by real
   per-page layout in later phases.
   --------------------------------------------------------------- */
.page-shell {
  padding-top: calc(76px + 4rem);
  padding-bottom: 6rem;
  text-align: center;
}

.page-shell__placeholder {
  margin-top: 1rem;
  color: var(--color-muted);
}