/* a11y.css — accessibility remediation shared by every public page.
 *
 * ת"י 5568 level AA (= WCAG 2.0 AA), the mandatory bar for an Israeli commercial site.
 * Everything here is corrective, not cosmetic: the visual design is unchanged for anyone who is not
 * using a keyboard, and unchanged entirely for anyone who has not asked their OS for reduced motion.
 *
 * Loaded from <head> BEFORE each page's own <style>, so a few rules need !important to win against
 * the page-level declarations they are correcting. Each one says which rule it is overriding.
 */

/* ---------------------------------------------------------------------------------------------
 * 2.4.1 Bypass Blocks — skip to the main content.
 * Every page repeats ~10 header links before its content. The link is off-screen until focused,
 * so it costs the design nothing and gives keyboard users a first tab stop that skips the header.
 * ------------------------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  right: 16px;
  top: -80px;                     /* parked off-screen, still focusable (never display:none) */
  z-index: 1000;
  padding: 12px 22px;
  background: #c8a26b;
  color: #0a0a0a;
  font-family: 'Heebo', 'Assistant', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top .18s ease-out;
}
.skip-link:focus { top: 0; }

/* The <main> target must not steal a tab stop when it receives programmatic focus. */
main:focus { outline: none; }

/* ---------------------------------------------------------------------------------------------
 * 2.4.7 Focus Visible.
 * The pages strip the UA focus ring (`input:focus{outline:none}` in checkout, and the anchors have
 * no focus style at all), leaving several controls — including the mandatory consent checkbox —
 * with no visible focus state whatsoever. :focus-visible restores it for keyboard users ONLY, so
 * mouse clicks look exactly as they do today.
 * ------------------------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="option"]:focus-visible {
  outline: 3px solid #c8a26b !important;   /* overrides checkout `input:focus{outline:none}` */
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* On the cream sections gold-on-cream is too faint to serve as a focus indicator; go dark instead. */
.about-book-content a:focus-visible,
.about-book-content button:focus-visible,
.press-feature a:focus-visible,
.post-card a:focus-visible,
.post-card button:focus-visible,
.comment-form input:focus-visible,
.comment-form textarea:focus-visible,
.comment-form button:focus-visible {
  outline-color: #1a1612 !important;
}

/* ---------------------------------------------------------------------------------------------
 * 1.4.4 Resize Text — the centred nav overlapped the buttons it sits next to.
 * `.nav` was `display:flex` with `.nav-links` pulled out of the flow (`position:absolute;left:50%`),
 * so the flex row reserved no space for it and the links painted on top of the CTA buttons at every
 * width from 1240px down to 700px — up to 109px of overlap, measured.
 * A three-column grid with equal side columns keeps the links optically centred exactly as before,
 * but now the layout reserves their space, so they can never overlap again.
 * ------------------------------------------------------------------------------------------- */
.nav {
  display: grid !important;                     /* overrides `.nav{display:flex}` */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav > .nav-logo   { grid-column: 1; justify-self: start; }
.nav > .nav-links  {
  grid-column: 2;
  position: static !important;                  /* overrides `position:absolute;left:50%` */
  left: auto !important;
  transform: none !important;                   /* overrides `translateX(-50%)` */
  justify-content: center;
  flex-wrap: wrap;
}
.nav > .nav-cta-row { grid-column: 3; justify-self: end; }
/* When the links are hidden (burger mode) the middle column collapses on its own — nothing to do. */

/* ---------------------------------------------------------------------------------------------
 * 1.4.3 Contrast (Minimum) — measured failures.
 * ------------------------------------------------------------------------------------------- */

/* #8a6f48 on the cream #faf5eb sections measures 4.34:1, just under the 4.5:1 needed for normal
 * text. It is corrected to #7f6540 (5.04:1) at source, in each page's own resting-state rule —
 * deliberately NOT with an !important override here, because these controls invert on hover and on
 * .liked (light text on a dark gold fill), and a blanket override would force the dark text onto the
 * dark fill and collapse those states to ~1.2:1. Fixing one contrast bug by creating a worse one is
 * exactly the trap; the resting state is the only thing that was failing. */

/* NOTE: .poster-strip-label was reported by the scanner at 3.16:1, but that was an artefact — its
 * container runs a delayed `fadeUp` animation, so the scan sampled it mid-fade. Its settled colour
 * is #c8a26b on #0a0a0a = 8.33:1, which passes, so nothing is overridden here. */

/* The footer "ניהול" link was inline-styled #857f72 and, after the footer's own opacity, rendered
 * at 2.44:1. Matching it to its sibling legal links puts it at 8.37:1. */
.footer-legal-links a[href="/admin/"] { color: #d4d0c8 !important; }

/* 1.4.1 Use of Colour — links inside running prose were distinguished by colour alone. */
.legal-body p > a,
.legal-body li > a,
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------------------------
 * 1.3.1 / 4.1.2 — a class for text that must reach assistive technology but not the screen.
 * Never display:none, which would hide it from screen readers too.
 * ------------------------------------------------------------------------------------------- */
.a11y-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------------------------
 * 2.2.2 Pause, Stop, Hide — respect an OS-level request for reduced motion.
 * The site runs several infinite decorative loops (the floating book, the blog grain and orbs, the
 * rotating checkout book, drifting motes). They are purely decorative, so for a visitor who has
 * asked for reduced motion we stop them outright. Everyone else sees the design exactly as before.
 * ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Decorative layers that exist only to move: remove them rather than freeze them mid-drift. */
  body::before, body::after,
  .floating-book-section::before,
  .fb-motes, .hero-particles, .memory-thread { display: none !important; }
  /* The book stops wherever it is, flat and readable, instead of frozen at an angle. */
  .fb-float, .cb-float, .fb-book, .cb-book { transform: none !important; animation: none !important; }
}
