/* assets/css/v2/chrome-a1.css — A1 v2 page chrome: header, navigation, language switch, footer, preview banner (all static, never sticky or fixed)
   keywords: header, nav, language switch, footer, preview banner, static layout, logical properties
   Below 900px the link row sits on its own line and scrolls sideways, so the header height never depends on the font that loads. */

.a1-header { background: var(--c-bg); border-block-end: 1px solid var(--c-line); }
.a1-header-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); min-height: 72px; padding-block: var(--sp-3); }
.a1-logo { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-brand); font-weight: var(--fw-display); font-size: 1.25rem; text-decoration: none; }
.a1-logo:hover { color: var(--c-brand-strong); }
.a1-logo svg { display: block; }

.a1-nav { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.a1-nav ul { display: flex; gap: var(--sp-4); list-style: none; }
.a1-nav ul a { display: block; padding: var(--sp-2) var(--sp-1); color: var(--c-text); font-weight: var(--fw-strong); text-decoration: none; border-block-end: 2px solid transparent; }
.a1-nav ul a:hover, .a1-nav ul a[aria-current] { color: var(--c-brand); border-block-end-color: var(--c-brand); }

.a1-lang { display: inline-flex; border: 1px solid var(--c-line); border-radius: 999px; padding: 2px; background: var(--c-surface); }
.a1-lang a { padding: 4px var(--sp-4); border-radius: 999px; color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-strong); text-decoration: none; }
.a1-lang a[aria-current] { background: var(--c-brand); color: var(--c-brand-ink); }
.a1-lang a:not([aria-current]):hover { color: var(--c-brand); }

@media (max-width: 899px) {
  .a1-header-bar { flex-wrap: wrap; }
  .a1-nav { width: 100%; order: 3; justify-content: space-between; overflow-x: auto; }   /* the link row scrolls; the header keeps its height */
  .a1-nav ul { flex: 1 1 auto; min-width: max-content; }
}

.a1-preview-banner { padding: var(--sp-3) var(--gutter); background: #fff4cc; color: #5a4300; text-align: center; font-weight: var(--fw-strong); }

.a1-footer { margin-block-start: var(--sp-8); background: var(--c-inverse-bg); color: var(--c-inverse-text); padding-block: var(--sp-7) var(--sp-5); }
.a1-footer a { color: var(--c-inverse-text); text-decoration: none; opacity: 1; }
.a1-footer a:hover { text-decoration: underline; color: #fff; }
.a1-footer .a1-logo { color: #fff; }
.a1-footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.a1-footer-brand p { margin-block-start: var(--sp-3); color: #c9d3e6; max-width: 36ch; }
.a1-footer h2 { margin-block-end: var(--sp-3); font-size: 1rem; font-weight: var(--fw-strong); color: #c9d3e6; }
.a1-footer ul { list-style: none; display: grid; gap: var(--sp-2); }
.a1-footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); border-block-start: 1px solid rgba(255, 255, 255, .18); font-size: var(--fs-sm); color: #c9d3e6; }
@media (max-width: 767px) { .a1-footer-grid { grid-template-columns: 1fr 1fr; } .a1-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .a1-footer-grid { grid-template-columns: 1fr; } }