/* ==========================================================================
   base.css : the site's foundation, loaded on every page after fonts.css.
   Tokens on :root, reset, typography, the header and footer (the live chrome,
   from the Phase 1 comp shop/assets/shop.css), the generic page and utilities.
   Components and pages (shop, book page, forms...) live in their own files.
   RTL: logical properties only; physical values appear only in shadows,
   which follow the light, not the reading direction.
   ========================================================================== */

:root {
  /* colour primitives: the site's palette (brief §5) */
  --paper: #E5E2D9;
  --paper-header: #E6E3DA;
  --paper-light: #F3F1EC;
  --text: #333333;
  --text-muted: #5B564C;         /* a shade of the paper's own hue (concept-table-v2 §4), 5.6:1 on paper */
  --muted: #5B564C;
  --menu-text: #5B564C;          /* the site's muted text (verdict v7 6.8: no stock default grey) */
  --plum: #9F1E62;
  --red: #8D1D1D;
  --blue: #256F9F;
  --link: #1F5F88;
  --teal: #306C85;
  --sky: #73BCEB;
  --menu-hover: var(--blue);     /* the hovered menu item's ground, white text on it (5.45:1). The live site hovers on --sky with white text (2.07:1: below AA, IS 5568): set this to var(--sky) for the live-exact look */
  --pale-blue: #D1E3F0;
  --focus: #104848;              /* logo green: focus ring, selected chip */
  --olive: #576A13;              /* book titles, as on the live page */
  --ink: #104848;                /* the colour of «חלי לוי אלדר» in the logo: titles, numerals, the finder */
  --ink-soft: #3B6765;           /* the ink at 80% on the paper (the finder's ages not chosen): 4.9:1 on the paper; no grey. Written out because color-mix() is newer than the compatibility floor */
  --add: var(--sky);             /* the «הוספה לעגלה» button (Change 13, the author: «הבורדו צועק לי בהוספה. אולי תכלת?»): the site's sky, dark text on it (the text colour on the sky 6:1; white would be 2.07:1) */
  --add-hover: #5AAEE3;          /* the hover of the site's other sky buttons (newsletter, search): 5.2:1 with the dark text */
  --add-text: var(--text);
  --buy: var(--add);             /* every purchase-or-send button (contact, cart, checkout, WooCommerce) is the sky with dark text; the burgundy is gone (Change 15) */
  --buy-hover: var(--add-hover);
  --buy-text: var(--add-text);
  --ok: #104848;                 /* success states (a confirmation never shows in the buy red) */
  --badge: #8D1D1D;
  --ledge: #D6D1C4;
  --ledge-top: #DCD7CA;
  --rule: #CBC4B4;               /* a shade of the paper's hue, not a neutral grey */
  --pencil: #8E8778;             /* the unpainted book */
  --leaf: #5C6E44;
  --footer-head: #333333;

  /* type: the site's two faces only */
  --font-body: "Assistant", "Alef", Arial, sans-serif;
  --font-display: "Alef", "Assistant", Arial, sans-serif;
  /* Change 21 (the owner, 2026-11-01: «את כל הכותרות באתר תעשה ב Yehuda», the home line in Noot). Every heading rule says var(--font-heading); buttons, the menu and the prices keep --font-display.
     Yehuda's web files have no niqqud and no Latin letters: .pil-points (set by inc/typography.php on a heading with Hebrew points) hands that heading back to Alef, whole. */
  --font-heading: "Yehuda CLM", "Alef", "Assistant", Arial, sans-serif;
  --font-slogan: "Noot", "Alef", "Assistant", Arial, sans-serif;
  --t-small: 0.9375rem;          /* 15 */
  --t-body: 1.0625rem;           /* 17 */
  --t-read: 1.125rem;            /* 18: descriptions */
  --t-lead: 1.25rem;             /* 20 */
  --t-excerpt: 1.375rem;         /* 22 */
  --t-h3: 1.5rem;                /* 24 */
  --t-price: 2rem;               /* 32 */
  --t-h1: clamp(2rem, 1.6vw + 1.125rem, 2.75rem);      /* 32-44 */
  --t-h2: clamp(1.75rem, 1.4vw + 1rem, 2.5rem);        /* 28-40 */
  --lh-body: 1.7;
  --lh-read: 1.75;
  --lh-head: 1.3;

  /* space (px, so it does not grow with text zoom) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --gutter: 24px;
  --wrap: 1200px;

  /* radii and elevation */
  --r-control: 3px;
  --r-pill: 999px;
  --r-panel: 2px;
  --shadow-raise: 0 10px 30px -14px rgba(40, 32, 20, .35);
  --shadow-menu: 0 12px 28px -10px rgba(40, 32, 20, .30);


  /* motion (exceptional-web reference/motion.md) */
  --dur-feedback: 120ms;
  --dur-state: 200ms;
  --dur-layout: 320ms;
  --dur-enter: 560ms;
  --dur-authored: 800ms;
  --dur-turn: 520ms;             /* the book turning to its back */
  --dur-return: 380ms;           /* and back to its cover */
  --dur-intent: 120ms;           /* a hover turn waits this long, so a sweeping mouse turns nothing */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --ease-accelerate: cubic-bezier(.3, 0, 1, .3);
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --ease-turn: cubic-bezier(.45, 0, .2, 1);
  --ease-glide: cubic-bezier(.25, .1, .15, 1);   /* the cover glide between shelf and book page: prompt start, a peak the eye can follow (under 10% of the path per frame), a quick landing */
  --dur-glide: 480ms;
  --motion-distance: 16px;
}
@media (prefers-reduced-motion: reduce) {
  /* fewer and gentler, not none: colour and opacity still change (the turn becomes a 200ms cross-fade) */
  :root { --dur-feedback: 1ms; --dur-layout: 1ms; --dur-enter: 1ms; --dur-authored: 1ms; --dur-turn: 1ms; --dur-return: 1ms; --dur-intent: 0ms; --motion-distance: 0px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* a heading with Hebrew points (niqqud) keeps the display font, whole: the Yehuda files have no niqqud, and the letters that carry a point would print in Alef while the bare ones print
   in Yehuda, two fonts in one word (Change 21). inc/typography.php puts the class on such a heading; the custom property hands every heading rule inside it back to Alef. */
.pil-points { --font-heading: var(--font-display); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  border-top: 4px solid var(--sky);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
bdi { unicode-bidi: isolate; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip-link {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  padding: 10px 16px; background: var(--focus); color: #fff; font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   Header: the live chrome (from the Phase 1 comp), on WordPress menu markup
   ========================================================================== */
.site-header { background: var(--paper-header); position: relative; z-index: 20; }
.brand { display: flex; justify-content: center; padding-block: 6px 12px; }
.brand-link { display: block; line-height: 0; border-radius: 2px; }
.site-header .logo { display: block; width: auto; height: 96px; max-width: 100%; } /* .site-header: WooCommerce's `.woocommerce-page img { height: auto }` would otherwise win on shop pages */

/* The bar spans the live bar's width (Facebook and cart included): 1190px from 1310px up (live x 129-1320 at 1440),
   64px gutters under that (live x 68-1220 at 1280), the page gutter once the phone menu takes over (live 30-1004 at 1024). */
.menubar {
  display: flex;
  align-items: stretch;
  width: min(1190px, 100% - 2 * clamp(var(--gutter), 5vw, 64px));
  margin-inline: auto;
  border-block: 2px solid #4D4D4D;
  min-height: 50px;
}
.menu { flex: 1 1 auto; display: flex; }
.menu-list { display: flex; flex: 1 1 auto; align-items: stretch; }
.menu-list > .menu-item { position: relative; flex: 1 1 auto; display: flex; }
.menu-list > .menu-item > a {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 10px;
  min-height: 46px;
  font: 700 18px/1.2 var(--font-heading);   /* Change 22 (the owner: «את כל ה Menu תשנה גם לפונט Yehuda»): the bar, the dropdown, the phone's list and the words of its bottom bar */
  color: var(--menu-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
/* As the live bar: the current page is the sky with black text (10.2:1), a hovered item is filled and its text is white. The live
   hover fill is the same sky, which makes white on it 2.07:1; here it is the site's blue (--menu-hover, white on it 5.45:1).
   Keyboard focus looks like a hover plus a white ring inside the item (white on the blue 5.45:1), so it is never only a colour.
   Only colours change, so nothing moves. */
@media (hover: hover) {
  .menu-list > .menu-item > a:hover,
  .menu-list > .menu-item-has-children:hover > a { background: var(--menu-hover); color: #fff; }
}
.menu-list > .menu-item > a:focus-visible,
.menu-list > .menu-item-has-children:focus-within > a { background: var(--menu-hover); color: #fff; }
.menu-list > .menu-item > a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.menu-list > .current-menu-item > a,
.menu-list > .current-menu-ancestor > a { background: var(--sky); color: #000; }
@media (hover: hover) {
  .menu-list > .current-menu-item > a:hover,
  .menu-list > .current-menu-ancestor:hover > a { background: var(--menu-hover); color: #fff; }
}
.menu-list > .current-menu-item > a:focus-visible,
.menu-list > .current-menu-ancestor:focus-within > a { background: var(--menu-hover); color: #fff; }
.heart { display: block; flex: none; }
.caret { flex: none; }
.menu-list .sub-menu {
  position: absolute; inset-block-start: calc(100% + 2px); inset-inline-start: 0; z-index: 30;
  min-width: 190px; padding-block: 6px;
  background: var(--paper-light); box-shadow: var(--shadow-menu);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-state, 200ms) var(--ease-standard, ease), visibility 0s linear var(--dur-state, 200ms);
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
  visibility: visible; opacity: 1; transition-delay: 0s;
}
.sub-menu .menu-item > a {
  display: block; padding: 10px 20px;
  font: 700 17px/1.3 var(--font-heading); color: var(--menu-text); text-decoration: none;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard);
}
/* the same two states as the bar: the current sub page sky with black text, a hovered or focused one the blue with white text */
.sub-menu .current-menu-item > a { background: var(--sky); color: #000; }
@media (hover: hover) {
  .sub-menu .menu-item > a:hover { background: var(--menu-hover); color: #fff; }
}
.sub-menu .menu-item > a:focus-visible { background: var(--menu-hover); color: #fff; outline: 3px solid #fff; outline-offset: -6px; }

.bar-tools {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding-inline: 18px 14px;
  margin-block: -2px;
  border-block: 2px solid #141414;
}
.fb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.cart-link {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 7px;
  color: #6B7782; text-decoration: none;
}
.cart-link:hover { color: var(--focus); }
/* The header cart is the basket and its count only. A visitor's browser can still hold cart fragments stored by an
   earlier version (WooCommerce keeps them in sessionStorage), whose markup carried the amount: never show it. */
.cart-link .cart-amount { display: none; }
.cart-icon { position: relative; display: block; line-height: 0; }
.cart-badge {
  position: absolute; inset-block-start: -8px; inset-inline-end: -9px;
  min-width: 19px; height: 19px; padding-inline: 5px; border-radius: 10px;
  background: var(--badge); color: #fff;
  font: 700 13px/19px var(--font-body); text-align: center;
}
/* forced colours drop the sky ground, the ink rule and the badge's red: mark the current page and the count with borders */
@media (forced-colors: active) {
  .menu-list > .current-menu-item > a,
  .menu-list > .current-menu-ancestor > a { border-block-end: 4px solid Highlight; }
  .sub-menu .current-menu-item > a { border-inline-start: 4px solid Highlight; }
  .cart-badge { border: 1px solid CanvasText; }
}

/* phone menu: a button that opens the same menu as a panel (script in assets/js/nav.js);
   without script the panel is simply open under the bar */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--menu-text); cursor: pointer;
}
/* the word under each icon of the phone's bottom bar: in the page for everyone (it names the button), drawn only on a phone (below) */
.bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar-shop { display: none; }

@media (max-width: 1099px) {
  .menubar { justify-content: space-between; position: relative; width: min(1190px, 100% - 2 * var(--gutter)); }
  .js .nav-toggle { display: flex; }
  .menu {
    flex: none;
    background: var(--paper-light);
    border-block-start: 2px solid #4D4D4D;
  }
  .js .menu {
    position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 30;
    box-shadow: var(--shadow-menu);
    display: none;
  }
  .js .menu.is-open { display: block; }
  .no-js .menubar { flex-wrap: wrap; }
  .no-js .menu { order: 2; flex: 1 1 100%; }
  .menu-list { display: block; padding-block: 8px; }
  .menu-list > .menu-item { display: block; }
  .menu-list > .menu-item > a { justify-content: flex-start; padding-inline: 12px; min-height: 48px; }
  .menu-list .caret { display: none; }
  .menu-list .sub-menu {
    position: static; visibility: visible; opacity: 1; transition: none;
    min-width: 0; padding-block: 0; background: transparent; box-shadow: none;
  }
  .sub-menu .menu-item > a { padding-block: 0; padding-inline: 32px 12px; min-height: 48px; display: flex; align-items: center; font-size: 16px; }
  .bar-tools { padding-inline: 18px 6px; }
}
@media (max-width: 599px) {
  .site-header .logo { height: 68px; }
  .brand { padding-block: 4px 10px; }
}

/* ==========================================================================
   The phone's navigation (Change 12, the owner's note: «השורה של התפריט למטה והלוגו למעלה»): the logo alone at the top, the menu row at
   the bottom of the screen, where the thumb is, and always in view. Four equal touch targets, each an icon over its word: the menu
   (the whole list opens upward from the bar), the shop, Facebook and the cart. Only with script, since the menu needs it to open; with
   no script the bar stays under the logo with the list open, as before. Tablets and up keep the bar at the top.
   ========================================================================== */
@media (max-width: 599px) {
  :root { --bar-min: calc(60px + env(safe-area-inset-bottom, 0px)); --bar-h: var(--bar-min); }   /* the bar's height from the first paint; nav.js writes the measured one into --bar-h (a larger text size makes the bar taller), and everything that stands on the bar reads that */
  .js { scroll-padding-block-end: var(--bar-h); }   /* a control reached with Tab, or an anchor, is never left under the bar (2.4.11) */
  .js body { padding-block-end: var(--bar-h); }     /* the page's last line (the © line) ends above the bar */
  .js .site-header { z-index: 50; }                 /* above the book page's buy bar (40), which slides down behind this bar when it leaves */

  .js .menubar {
    position: fixed; z-index: 1; inset-inline: 0; inset-block-end: 0;
    width: auto; min-height: var(--bar-min); margin: 0; padding-block-end: env(safe-area-inset-bottom, 0px);
    justify-content: stretch;
    border-block-end: 0;   /* the 2px rule on top is the old bar's own rule */
    background: var(--paper-light);
    box-shadow: 0 -6px 12px -8px rgba(40, 32, 20, .35);
  }
  .js .bar-tools { display: contents; }   /* its three links become slots of the bar */
  .js .nav-toggle, .js .bar-shop, .js .fb, .js .cart-link {
    flex: 1 1 0; min-width: 0; width: auto; height: auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    margin: 0; padding: 6px 2px 5px; border: 0; border-radius: 0; border-inline-start: 1px solid var(--rule);
    background: transparent; color: var(--menu-text); text-align: center; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .js .nav-toggle { border-inline-start: 0; }
  .js .bar-label {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    font: 700 13px/1.15 var(--font-heading); color: inherit;
  }
  .js .bar-icon { display: block; flex: none; }
  /* every icon stands in a box 26px tall, so the four words share one baseline */
  .js .bar-icon-menu { width: 26px; height: 19px; margin-block: 3.5px; }
  .js .bar-icon-shop { width: 26px; height: 22px; margin-block: 2px; }
  .js .bar-icon-fb { width: 25px; height: 25px; margin-block: .5px; }
  .js .cart-icon { display: flex; align-items: center; height: 26px; }
  .js .cart-icon svg { display: block; width: 28px; height: 24px; }
  .js .cart-badge { inset-block-start: -3px; inset-inline-end: -10px; }
  /* states: pressed and hovered are the pale blue, the open menu is the site's blue with white text, the current shop the sky with black text (as the bar on
     a wide screen); keyboard focus is a ring inside the slot, so it is never cut by the screen's edge or the next slot */
  .js .nav-toggle:active, .js .bar-shop:active, .js .fb:active, .js .cart-link:active { background: var(--pale-blue); color: var(--ink); }
  @media (hover: hover) {
    .js .nav-toggle:hover, .js .bar-shop:hover, .js .fb:hover, .js .cart-link:hover { background: var(--pale-blue); color: var(--ink); }
  }
  .js .nav-toggle:focus-visible, .js .bar-shop:focus-visible, .js .fb:focus-visible, .js .cart-link:focus-visible {
    outline: 3px solid var(--focus); outline-offset: -5px; background: var(--pale-blue); color: var(--ink);
  }
  .js .bar-shop.is-current { background: var(--sky); color: #000; }
  .js .nav-toggle[aria-expanded="true"], .js .nav-toggle[aria-expanded="true"]:hover, .js .nav-toggle[aria-expanded="true"]:active { background: var(--menu-hover); color: #fff; }
  .js .nav-toggle[aria-expanded="true"]:focus-visible { background: var(--menu-hover); color: #fff; outline-color: #fff; }

  /* the list: a sheet that opens upward from the bar, over a dimmed page; it scrolls inside itself on a short screen */
  .js .menu {
    position: absolute; z-index: 1; inset-inline: 0; inset-block: auto calc(100% + 2px);
    display: block; max-height: calc(100vh - var(--bar-h) - 16px); max-height: calc(100dvh - var(--bar-h) - 16px);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(12px);
    box-shadow: 0 -14px 28px -12px rgba(40, 32, 20, .35);
    transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard), visibility 0s linear var(--dur-state);
  }
  .js .menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .menu .sub-menu { visibility: inherit; }   /* the list under the tablet rule had its sub menu always visible: closed, its three links must not be a Tab stop nobody can see */
  .js .menu-list { padding-block: 6px; }
  .js .menu-list > .menu-item > a { padding-inline: 24px; }
  .js .sub-menu .menu-item > a { padding-inline: 44px 24px; }
  .js .menu-list > .menu-item > a:active, .js .sub-menu .menu-item > a:active { background: var(--pale-blue); color: var(--ink); }
  .js .site-header::before {
    content: ""; position: fixed; inset: 0; z-index: 0;
    background: rgba(40, 32, 20, .4); opacity: 0; visibility: hidden;
    transition: opacity var(--dur-state) var(--ease-standard), visibility 0s linear var(--dur-state);
  }
  .js .site-header.is-menu-open::before { opacity: 1; visibility: visible; transition-delay: 0s; }
  .js .brand { padding-block: 6px 14px; }
  .js.pil-lb-open .menubar { visibility: hidden; }   /* the image dialog covers the page: the bar does not show through its dark ground */
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .js .menu { transform: none; }
}
/* forced colours drop the sky ground and the blue of the open menu: the current shop and the open menu are marked with a border */
@media (max-width: 599px) and (forced-colors: active) {
  .js .bar-shop.is-current { border-block-start: 4px solid Highlight; }
  .js .nav-toggle[aria-expanded="true"] { border-block-start: 4px solid Highlight; }
  .js .menubar { border-block-start: 2px solid CanvasText; }
}
@media print { .js .menubar { position: static; } }

/* ==========================================================================
   Footer: the live newsletter strip and the © line
   ========================================================================== */
.newsletter { background: var(--pale-blue); padding: 26px var(--gutter) 28px; text-align: center; }
.nl-title { font: 700 26px/1.3 var(--font-heading); color: var(--footer-head); }
.nl-sub { margin-block: 2px 14px; font-size: var(--t-small); color: var(--footer-head); }
/* a grid of two rows (Change 20): the field and the send button on the first, the tick box on the second. In the markup the tick box comes BEFORE the button, so a
   keyboard walks field → tick → privacy link → send, the order the visitor should act in; the grid draws the button beside the field. */
.nl-form { display: grid; grid-template-columns: minmax(0, 1fr) 128px; width: min(507px, 100%); margin-inline: auto; }
.nl-input {
  grid-column: 1; grid-row: 1; min-width: 0; height: 44px; padding-inline: 14px;
  border: 1px solid #5C7384; border-radius: 0; background: #B9CCD9; color: var(--text); /* 3.7:1 against the strip (1.4.11) */
}
.nl-input::placeholder { color: #3E4A53; opacity: 1; }
/* an empty field resolves LTR under dir="auto" and would set its Hebrew placeholder at the left: while empty it reads right to left; a typed address is LTR again */
.nl-input:placeholder-shown { direction: rtl; text-align: start; }
.nl-btn {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 128px; height: 44px; border: 0; cursor: pointer;
  background: var(--sky); color: var(--text); font: 600 16px/1 var(--font-body);
}
.nl-btn:hover { background: #5AAEE3; }
@media (max-width: 359px) {   /* 320px: the field is 160px wide beside a 128px button and cut its own placeholder («כתובת דואר אלקטרו») */
  .nl-form { grid-template-columns: minmax(0, 1fr) 104px; }
  .nl-btn { width: 104px; gap: 6px; }
  .nl-input { padding-inline: 10px; }
}
/* The tick box under the field (Change 20: «צ'ק בוקס אישור»). Never ticked beforehand, required. A 24px square, ink on white with a 2px ink edge (9:1 on the strip),
   the check mark drawn as the box's own background so it stays a real checkbox for the keyboard and for a screen reader; the words beside it are its label (a click on them ticks it). */
.nl-consent { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; text-align: start; font-size: 14px; line-height: 1.5; color: var(--footer-head); }
.nl-check {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer;
  border: 2px solid var(--footer-head); border-radius: 3px; background: #fff;
}
.nl-check:checked {
  background: var(--footer-head) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.nl-check[aria-invalid="true"] { border-color: var(--red); }
.nl-consent-text { flex: 1 1 auto; min-width: 0; margin: 0; padding-top: 1px; text-wrap: balance; }   /* two even lines, never a single word on the second */
.nl-consent-text label { cursor: pointer; }
.nl-consent-text a { display: inline-flex; align-items: center; min-height: 24px; color: var(--footer-head); text-decoration: underline; text-underline-offset: 2px; }   /* a box of its own, 24px at least (the standard's floor for a target) */
.nl-consent-text a:hover { text-decoration-thickness: 2px; }
@media (forced-colors: active) {   /* high-contrast mode: the system's own colours; a ticked box is filled with the text colour */
  .nl-check { border-color: ButtonText; background: Canvas; }
  .nl-check:checked { background: CanvasText; forced-color-adjust: none; border-color: ButtonText; }
}
/* The message after a subscription (script, assets/js/nav.js, moves keyboard focus to it so it is read out). It is a compact tile in
   the strip, not a line the whole width of the page: the default focus ring would otherwise be drawn round all of it (the owner's
   bug). The tile is itself the visible state, so the scripted focus draws no ring; ok = ink, a problem = red. No coloured line on any side
   of it (Change 20, the owner: a frame with a line at its side is «AI slop»): the words say what happened, the colour only backs them. */
.nl-status {
  display: block; width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 9px 18px;
  background: var(--paper-light); border-radius: 3px;
  font-weight: 600; color: var(--ink);
}
.nl-status-invalid, .nl-status-consent, .nl-status-error { color: var(--red); }
.nl-status:focus, .nl-status:focus-visible { outline: none; }
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.copyright { padding: 12px var(--gutter) 14px; text-align: center; font-size: 14px; color: var(--text-muted); }
.copyright a { color: var(--plum); text-decoration: none; }
.copyright a:hover { text-decoration: underline; }

/* the accessibility statement link, between the newsletter strip and the © line (the live site's own link; Change 20 took the row of the other mandatory pages out of the footer).
   Ink on the paper (9:1), underlined so it never rests on colour alone, a box 24px tall at least */
.a11y-statement { margin: 0; padding: 18px var(--gutter) 2px; text-align: center; }
.a11y-statement a { display: inline-block; padding-block: 5px; font-size: var(--t-small); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.a11y-statement a:hover { color: var(--plum); text-decoration-thickness: 2px; }

/* ==========================================================================
   Generic page: title, body, children list, results, empty states, search form
   ========================================================================== */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { display: block; flex: 1 0 auto; }
.page-main { padding-block: var(--s-8) var(--s-9); }
.page-head { margin-block-end: var(--s-6); text-align: center; }
.page-title {
  font: 700 var(--t-h1)/var(--lh-head) var(--font-heading);
  color: var(--plum);
  text-wrap: balance;
}
.page-body { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.page-body.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); }

/* editor content: readable measure, the list and spacing defaults the reset removed */
.entry-content { max-width: 72ch; margin-inline: auto; font-size: var(--t-read); line-height: var(--lh-read); }
.entry-content > * + * { margin-block-start: 1em; }
.entry-content h2 { font: 700 var(--t-h2)/var(--lh-head) var(--font-heading); color: var(--text); margin-block-start: 1.6em; }
.entry-content h3 { font: 700 var(--t-h3)/var(--lh-head) var(--font-heading); color: var(--text); margin-block-start: 1.4em; }
.entry-content ul { list-style: disc; padding-inline-start: 1.4em; }
.entry-content ol { padding-inline-start: 1.4em; }
.entry-content li + li { margin-block-start: .35em; }
.entry-content blockquote { padding-inline-start: 16px; }   /* indented, no coloured line at its side (Change 20: that look is «AI slop») */
.entry-content img { border-radius: var(--r-panel); }
.entry-content .alignwide { max-width: min(1060px, 100vw - 2 * var(--gutter)); }
.entry-content figcaption { font-size: var(--t-small); color: var(--text-muted); margin-block-start: 6px; }

.children { margin-block-start: var(--s-7); }
.children-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); }
.children-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border: 2px solid var(--sky); border-radius: var(--r-pill);
  font: 700 var(--t-lead)/1.2 var(--font-display); color: var(--text); text-decoration: none;
}
.children-link:hover { background: var(--pale-blue); }

.results { max-width: 72ch; margin-inline: auto; margin-block-start: var(--s-6); }
.result { padding-block: var(--s-5); border-block-start: 1px solid var(--rule); }
.result:last-child { border-block-end: 1px solid var(--rule); }
.result-title { font: 700 var(--t-h3)/var(--lh-head) var(--font-heading); }
.result-title a { color: var(--olive); text-decoration: none; }
.result-title a:hover { text-decoration: underline; }
.result-type { font-size: var(--t-small); color: var(--text-muted); }
.result-excerpt { margin-block-start: 6px; color: var(--text); }
.results-count { max-width: 72ch; margin-inline: auto; margin-block-start: var(--s-5); color: var(--text-muted); }

.empty-state { max-width: 60ch; margin-inline: auto; text-align: center; }
.empty-title { font: 700 var(--t-lead)/1.4 var(--font-heading); color: var(--text); margin-block-end: var(--s-2); }
.empty-state .search-form { margin-block-start: var(--s-5); }

.search-form { display: flex; width: min(560px, 100%); margin-inline: auto; }
.search-input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding-inline: 14px;
  border: 1.5px solid #77715F; border-inline-end: 0; border-radius: 0; background: var(--paper-light);
}
.search-input::placeholder { color: #6B6B6B; opacity: 1; }
.search-btn {
  flex: none; height: 48px; padding: 0 24px; border: 0; cursor: pointer;
  background: var(--sky); color: var(--text); font-weight: 700;
}
.search-btn:hover { background: #5AAEE3; }

.nav-links { display: flex; justify-content: center; gap: var(--s-3); margin-block-start: var(--s-6); }
.nav-links a, .nav-links span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; }
.nav-links .current { font-weight: 700; background: var(--sky); }

/* WooCommerce pages until their own design files arrive */
.wc-main { padding-block: var(--s-7) var(--s-9); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.ltr { direction: ltr; unicode-bidi: isolate; }
.text-center { text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }

/* WooCommerce's own pre-order message («רכישה מוקדמת», pilpelet_preorder_label) under the buy row, and the product's short description under it (pilpelet_shop_stock_note) */
.stock-note { margin: 0; font: 700 .9375rem/1.4 var(--font-body); color: var(--ink); }
.stock-more { font-size: .9375rem; line-height: 1.5; color: var(--text); }
.stock-more p { margin: 0; }

@media (max-width: 599px) {
  :root { --gutter: 16px; }
  .page-main { padding-block: var(--s-6) var(--s-8); }
}