/*
  Header + navigation for the old PHP apps (postcards in /fg145, ...), matching the Next.js site.
  Mirrors src/components/Header.module.css and Nav.module.css; the colours come from src/styles/tokens.css.
  Markup is generated by scripts/build-legacy-chrome.mjs (out/legacy/header.html). Everything is prefixed with
  "cb-" so it cannot disturb the legacy pages' own styles; anchor rules use ".cb-header a.cb-..." so they win over
  the legacy pages' bare A:link / A:visited / A:hover rules. Fonts: add the Google Fonts link in the page <head>:
  https://fonts.googleapis.com/css2?family=Fredoka:wght@600&family=Nunito:wght@400;700;800&display=swap
*/
:root {
  --cb-heading: #333366;
  --cb-accent: #ffc968;
  --cb-accent-soft: #ffeebb;
  --cb-accent-strong: #e0a040;
  --cb-accent-deep: #d59438;
  --cb-bg: #ffffff;
  --cb-surface: #fffaf0;
  --cb-border: #ecdcb4;
  --cb-muted: #5a6072;
  --cb-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --cb-font-heading: "Fredoka", "Nunito", system-ui, sans-serif;
}

.cb-header, .cb-header * { box-sizing: border-box; }
.cb-header {
  margin: 0 0 1rem; background: var(--cb-bg);
  border-top: 5px solid var(--cb-accent); border-bottom: 1px solid var(--cb-border);
  font-family: var(--cb-font-body); font-size: 16px; line-height: 1.65; color: #1f2430; text-align: left;
}
.cb-container { width: 100%; max-width: 66rem; margin-inline: auto; padding-inline: 1rem; }

.cb-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 1rem; }
.cb-identity { container-type: inline-size; flex: 1 1 100%; max-width: 28rem; min-width: 0; }
.cb-header a.cb-logo { display: block; }
.cb-header a.cb-logo img { display: block; width: 100%; height: auto; }
.cb-tagline {
  position: relative; z-index: 1; margin: -4.4cqw 0 0 22%; padding: 0;
  font-family: var(--cb-font-heading); font-size: max(0.72rem, 3.3cqw); font-weight: 600;
  line-height: 1.25; color: var(--cb-heading); white-space: nowrap;
}
.cb-mark { position: relative; display: inline-block; padding: 0 0.1em; }
.cb-mark::before {
  content: ""; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; top: 52%; bottom: 10%;
  background: var(--cb-accent); border-radius: 0.2em;
}

.cb-header a.cb-award { display: flex; align-items: center; gap: 0.5rem; flex: none; margin-inline: auto; padding: 0; text-decoration: none; color: var(--cb-heading); }
.cb-header a.cb-award img { display: block; width: 3.25rem; height: auto; border-radius: 6px; }
.cb-award-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.25; font-size: 0.8125rem; color: var(--cb-muted); }
.cb-award-text strong { font-size: 0.9375rem; font-weight: 800; color: var(--cb-heading); }
.cb-award-text strong span { color: var(--cb-accent-deep); }
.cb-header a.cb-award:hover .cb-award-text strong { text-decoration: underline; }

.cb-nav { margin-top: 0.75rem; }
.cb-toggle {
  display: none; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 1rem;
  font: inherit; font-weight: 800; color: var(--cb-heading); background: var(--cb-bg);
  border: 1px solid var(--cb-heading); border-radius: 14px; cursor: pointer;
}
.cb-toggle:hover { background: var(--cb-accent-soft); }
.cb-bars, .cb-bars::before, .cb-bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor; content: ""; }
.cb-bars { position: relative; }
.cb-bars::before { position: absolute; top: -6px; }
.cb-bars::after { position: absolute; top: 6px; }

.cb-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0; margin: 0 0 0 -0.75rem; padding: 0; list-style: none; }
.cb-header a.cb-link {
  display: block; padding: 0.7rem 0.75rem; font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
  color: var(--cb-heading); border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: background-color 0.15s, border-color 0.15s;
}
.cb-header a.cb-link:hover { background: var(--cb-surface); border-bottom-color: var(--cb-accent); color: var(--cb-heading); }
.cb-header a.cb-link[aria-current="page"] { border-bottom-color: var(--cb-heading); font-weight: 800; }

@media (min-width: 48rem) {
  .cb-brand { flex-wrap: nowrap; justify-content: space-between; }
  .cb-identity { flex: 0 1 28rem; }
  .cb-header a.cb-award {
    margin-inline: 0; padding: 0.25rem 1.5rem 0.25rem 0.25rem; background: var(--cb-surface);
    border: 1px solid var(--cb-border); border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    transition: box-shadow 0.15s, border-color 0.15s;
  }
  .cb-header a.cb-award:hover { border-color: var(--cb-accent-strong); box-shadow: 0 2px 8px rgb(51 51 102 / 0.15); }
  .cb-header a.cb-award:hover .cb-award-text strong { text-decoration: none; }
  .cb-header a.cb-award img { width: 6rem; }
  .cb-award-text { align-items: flex-start; text-align: left; }
}

@media (max-width: 56rem) {
  .cb-nav { padding-bottom: 0.75rem; }
  .cb-toggle { display: flex; }
  .cb-list { display: none; flex-direction: column; margin: 0.75rem 0 0; border-top: 1px solid var(--cb-border); }
  .cb-list.cb-open { display: flex; }
  .cb-header a.cb-link { min-height: 2.75rem; padding: 0.5rem 1rem; white-space: normal; border-bottom: 1px solid var(--cb-border); margin-bottom: 0; }
  .cb-header a.cb-link:hover { border-bottom-color: var(--cb-border); }
  .cb-header a.cb-link[aria-current="page"] { background: var(--cb-accent-soft); border-left: 4px solid var(--cb-heading); padding-left: calc(1rem - 4px); }
}