/*
 * BKA Web UI — LAYOUT (W-UI0)
 * Responsive shell: container, header, navigation, main, footer.
 *
 * Mobile-first. Media query tiers (see tokens.css for documented reasons):
 *   640px  large phone / small tablet
 *   768px  tablet portrait — inline navigation replaces the hamburger
 *   1024px tablet landscape / small laptop
 *   1280px desktop / large desktop — container capped (readability)
 */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* ---------- Page frame ---------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
  padding-block: var(--space-5);
}

.site-main:focus {
  outline: none; /* skip-link target; focus is indicated on the link itself */
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 3px solid var(--color-accent); /* approved Gold accent rule */
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

/* ---------- Navigation (mobile: collapsible panel) ---------- */
.site-nav {
  display: none; /* closed by default; opened by shell.js via .is-open */
  flex: 1 0 100%; /* its own row below the header bar */
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.site-nav.is-open {
  display: block;
}

/* Without JavaScript the hamburger is never shown (no dead button)… */
.menu-toggle {
  display: none;
}

html.js .menu-toggle {
  display: inline-flex;
}

/* …and the <noscript> block below provides the same links instead. */
.noscript-nav {
  flex: 1 0 100%;
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  margin-top: auto;
}

.footer-note {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

.footer-brand {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}

/* Legal entity name: small, muted, footer only (Blueprint v2.2 §9.1) */
.footer-legal {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
}

/* ---------- Grid foundation (multi-column from the tablet tier) ---------- */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.grid > * {
  min-width: 0;
}

/* ---------- 640px — large phone / small tablet ---------- */
@media (min-width: 640px) {
  :root {
    --pad-inline: 1.5rem;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 768px — tablet portrait: inline navigation ---------- */
@media (min-width: 768px) {
  .menu-toggle,
  html.js .menu-toggle {
    display: none; /* hamburger is mobile-only */
  }

  .site-nav,
  .site-nav.is-open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-top: none;
    padding-block: 0;
  }

  /* The <noscript> fallback is redundant once inline nav is visible */
  .noscript-nav {
    display: none;
  }
}

/* ---------- 1024px — tablet landscape / small laptop ---------- */
@media (min-width: 1024px) {
  :root {
    --pad-inline: 2rem;
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 1280px — desktop / large desktop ---------- */
@media (min-width: 1280px) {
  /* Content stays capped at --container-max; extra viewport width becomes
     centered whitespace instead of stretched lines (readability). */
  .site-main {
    padding-block: var(--space-6);
  }
}