/* Site chrome: the one header + footer every page shares (written by tools/sync-chrome.mjs).
   Self-contained on purpose: pages that don't load style.css (the blog) look the same. */
.site-header, .site-footer {
  --c-navy: #0D2A4C; --c-gold: #CCA667; --c-cream: #F8F5EE;
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  box-sizing: border-box;
}
.site-header *, .site-footer * { box-sizing: border-box; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin: 0;
  background: var(--c-navy); color: var(--c-cream);
  font-size: 16px;
}
.site-header .brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--c-cream); text-decoration: none; font-weight: 800; font-size: 19px; }
.site-header .brand img { display: block; width: 24px; height: auto; margin: 0; }
.site-header .brand span { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.site-header .nav { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; }
.site-header .nav a { color: var(--c-cream); text-decoration: none; font-weight: 500; padding: 6px 10px; margin: 0; border-radius: 999px; font-size: 16px; line-height: 1.5; opacity: 1; white-space: nowrap; }
.site-header .nav a[aria-current] { background: var(--c-gold); color: var(--c-navy); font-weight: 700; }
.site-header a:focus-visible, .site-footer a:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
@media (hover: hover) { .site-header .nav a:not([aria-current]):hover { background: rgba(248, 245, 238, .12); } }

/* Phones: one slim sticky row (logo + menu button); the links open as a dropdown.
   CSS only (checkbox toggle), no JavaScript. */
.site-header .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.site-header .nav-btn { display: none; }
@media (max-width: 760px) {
  .site-header { position: sticky; flex-wrap: wrap; padding: 8px 14px; }
  .site-header .brand { font-size: 18px; }
  .site-header .brand img { width: 20px; }
  .site-header .nav-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 36px; padding: 6px 8px; cursor: pointer; border-radius: 10px; }
  .site-header .nav-btn span { display: block; height: 2.5px; border-radius: 2px; background: var(--c-cream); transition: transform .2s, opacity .2s; }
  .site-header .nav-toggle:focus-visible + .nav-btn { outline: 3px solid var(--c-gold); outline-offset: 2px; }
  .site-header .nav-toggle:checked + .nav-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header .nav-toggle:checked + .nav-btn span:nth-child(2) { opacity: 0; }
  .site-header .nav-toggle:checked + .nav-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .site-header .nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 4px; }
  .site-header .nav-toggle:checked ~ .nav { display: flex; }
  .site-header .nav a { padding: 10px 12px; font-size: 17px; border-radius: 12px; }
}

/* Footer */
.site-footer { background: var(--c-navy); color: var(--c-cream); text-align: center; padding: 24px 16px 32px; margin: 24px 0 0; font-size: 17px; }
.site-footer .socials { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.site-footer .socials li { margin: 0; }
/* Tap targets >= 44x44 px (WCAG 2.5.5 / Apple HIG): same text size, bigger hit area via min-size + padding. */
.site-footer .socials a { color: var(--c-cream); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 8px; }
.site-footer .socials a:hover { text-decoration: underline; }
.site-footer .foot-link { margin: 0 0 6px; }
.site-footer .foot-link a { color: var(--c-gold); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; vertical-align: middle; }
.site-footer .foot-link span { color: var(--c-gold); }
.site-footer .foot-link a:hover, .site-footer .foot-link a:focus-visible { text-decoration: underline; }
.site-footer .handle { color: var(--c-gold); margin: 0; }
.site-footer .copy { font-size: 14px; opacity: .75; margin: 6px 0 0; }

/* Language switch (עברית / English): next to the logo, always visible (phones too). */
.site-header .lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: -4px 0; padding: 4px 14px;
  color: var(--c-cream); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap;
  border: 1.5px solid var(--c-gold); border-radius: 999px; background-clip: padding-box;
}
.site-header .lang-switch:hover { background: rgba(204, 166, 103, .18); }
@media (min-width: 761px) {
  .site-header .nav { margin-inline-start: auto; }
  .site-header .lang-switch { order: 3; }
}
@media (max-width: 760px) {
  .site-header .lang-switch { margin-inline-start: auto; font-size: 15px; padding: 4px 12px; }
}
/* English pages: a little more room between the עברית pill and the window's right edge (Fo, Hive #603). */
@media (min-width: 761px) {
  html[lang="en"] .site-header { padding-inline-end: 28px; }
}