/* =====================================================================
   EYEZ marketing — mobile/tablet fixes (hand-authored, safe to edit).

   Loaded LAST (after eyez.css, the per-page pageCss file, and blog.css)
   so these overrides win at small widths without ever touching a
   generated/regenerated file. See CLAUDE.md: eyez.css / home.css /
   about.css / contact.css / knowledge.css / system.css are regenerated
   by `python3 tools/build_css.py` and must never be hand-edited.

   eyez.css already ships a ~155-line "responsive layer" (its own
   comment block, added by hand outside the sanctioned pipeline) that
   correctly handles most of the general mobile behaviour: gutter
   trimming, single-column grid collapse at <=720px, type-scale shrink,
   nav layout at phone width, and the eyez-feature row reorder. This
   file does NOT duplicate that — it only:
     1. Fixes two verified selector bugs in that layer where the
        selector text doesn't match how React serializes inline
        styles (a space after `:` that the real markup never has), so
        the intended rule silently never fires.
     2. Adds a couple of small, verified gaps (tap targets, tablet-width
        2-column grid collapse) that the existing layer didn't cover.
   Every rule below is scoped to a media query and targets only inline
   `style*="..."` substrings or existing classes — nothing here changes
   desktop (>1024px) rendering.
   ========================================================================= */

/* ---------------------------------------------------------------------
   Tablet (<=1024px): collapse the site's asymmetric two-column grids
   (hero/content splits on home, about, contact, system) to one column.

   eyez.css already has a rule for this, but its selectors have a space
   after the colon (`style*="grid-template-columns: 1.4fr"`) while the
   real inline styles — produced by React serializing a JS style object —
   never contain that space (`grid-template-columns:1.4fr 1fr`), so the
   existing rule is a permanent no-op and these grids never collapse
   between 721px and 1024px, only below 720px (where a separate,
   property-only catch-all rule already works). Verified against the
   live generated markup in src/_includes/generated/*.main.html.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main [style*="grid-template-columns:1.25fr 1fr"],   /* home — accuracy section */
  main [style*="grid-template-columns:1fr 1.05fr"],    /* home — feature split */
  main [style*="grid-template-columns:5fr 7fr"],       /* home — case-study card */
  main [style*="grid-template-columns:1.3fr 1fr"],     /* about */
  main [style*="grid-template-columns:minmax(0,5fr) minmax(0,7fr)"], /* about */
  main [style*="grid-template-columns:1.4fr 1fr"],     /* contact */
  main [style*="grid-template-columns:minmax(0,7fr) minmax(0,5fr)"]  /* system */ {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------
   Phone (<=720px): the home-page stat cards ("96% דיוק" / frequency
   chart / etc. in the "דיוק שאפשר לבנות עליו" section) keep full
   desktop padding and get clipped by the viewport edge.

   Same root cause as above: eyez.css's trim selectors expect a space
   after the colon that the real inline styles don't have, so they
   never match. Also adds the `padding:36px 40px` sibling that eyez.css
   never targeted at all. Verified against src/_includes/generated/home.main.html.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  main [style*="padding:52px 56px"],
  main [style*="padding:56px 64px"],
  main [style*="padding:36px 40px"] {
    padding: 32px 24px !important;
  }
}

/* ---------------------------------------------------------------------
   Phone (<=720px): un-stick the about-page "הסיפור שלנו" image column.

   The founder-story block (about/02-SystemMockup.jsx) is a two-column
   grid whose left column — the grayscale storefront image + signature —
   is `position:sticky;top:100px`, so on desktop it stays pinned beside
   the taller narrative column as it scrolls. At <=720px eyez.css collapses
   every grid to a single column, which stacks that image ABOVE the
   narrative; but the sticky was never reset, so the image pins 100px from
   the top of the viewport while the narrative (later in the DOM, so it
   paints on top) scrolls up over it — the image and text end up overlapping.
   Reset to static so the image scrolls away normally in the stacked layout.

   Scoped to `main`: nav.eyez-nav is also `position:sticky` but is a sibling
   of <main>, not a descendant, so it keeps its (intended) sticky behaviour.
   This is the only sticky element inside <main> on any page. React serializes
   the inline style with no space after the colon (`position:sticky`), matching
   src/_includes/generated/about.main.html.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  main [style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Nav quick-actions (WhatsApp / dashboard login): on phones the text
   label is hidden (eyez.css) and only the 20x20px icon remains, with
   no padding, so the tappable area is well under the WCAG 2.5.8 AA
   minimum (24x24px) and the common 44x44px guideline. Enlarge the hit
   area with padding + an equal negative margin so the visible icon
   size/position and surrounding nav spacing are unchanged.

   Finding #32: this rule previously used `.eyez-nav-actions a`, which
   also matched the five `.eyez-nav-mobile-link` anchors inside the
   <details> dropdown (it is nested inside .eyez-nav-actions), making
   the open menu's rows overlap (-12px margins in a gap:2px column) and
   bleed outside the floating card. Only the two quick-action anchors
   are DIRECT children of .eyez-nav-actions, so scope with `>`; plus a
   belt-and-braces reset on the menu links themselves in case future
   markup nests other anchors.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .eyez-nav-actions > a {
    padding: 12px !important;
    margin: -12px !important;
  }
  /* #32: dropdown menu links keep their intended box */
  .eyez-nav-actions .eyez-nav-mobile-link {
    padding: 14px 16px !important;
    margin: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   Mobile nav menu: replace the horizontally-scrolling link row
   (eyez.css's `.eyez-nav-links { overflow-x:auto }`, <=720px) with a
   proper hamburger + dropdown, built on the native <details>/<summary>
   disclosure element — no JavaScript, works with JS disabled, and
   <summary> is keyboard/screen-reader accessible by default.
   nav.eyez-nav is `position:sticky`, which is enough to be the
   containing block for the panel below, regardless of DOM nesting.
   --------------------------------------------------------------------- */
.eyez-nav-mobile { display: none; }

@media (max-width: 720px) {
  .eyez-nav-links { display: none !important; }

  .eyez-nav-mobile { display: block; }

  .eyez-nav-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -12px 0 -12px -8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--fg-1);
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .eyez-nav-mobile-toggle::-webkit-details-marker { display: none; }
  .eyez-nav-mobile-toggle::marker { content: ""; }
  .eyez-nav-mobile-toggle:focus-visible {
    outline: 2px solid var(--primary-container);
    outline-offset: -2px;
  }

  .eyez-nav-mobile-icon-close { display: none; }
  .eyez-nav-mobile[open] .eyez-nav-mobile-icon-open { display: none; }
  .eyez-nav-mobile[open] .eyez-nav-mobile-icon-close { display: block; }
  .eyez-nav-mobile[open] .eyez-nav-mobile-toggle { background: var(--surface-container); }

  /* Floating dropdown card: solid white, clearly separated from the page,
     no full-bleed dividers. Items read as a menu via spacing + an active
     chip, which is the modern convention (dividers between every row look
     cramped and "collapsed" over the light page background). */
  .eyez-nav-mobile-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--surface-variant);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18),
                0 4px 12px -4px rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  .eyez-nav-mobile-link {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    font-family: Heebo, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--fg-1);
    text-decoration: none;
    text-align: right;
    transition: background 150ms ease, color 150ms ease;
  }
  .eyez-nav-mobile-link:hover { background: var(--surface-container-low, var(--surface-container)); }
  .eyez-nav-mobile-link.is-active {
    color: var(--eyez-green); /* AA contrast on the panel bg */
    font-weight: 700;
    background: var(--surface-container-low, var(--surface-container));
  }
  .eyez-nav-mobile-link:focus-visible {
    outline: 2px solid var(--primary-container);
    outline-offset: -2px;
  }
}

/* ---------------------------------------------------------------------
   Finding #31: Material Symbols icon font flashes raw English ligature
   words ("lock", "menu", "person", "share"…) into the Hebrew page while
   the font loads, because eyez.css declares it with font-display:swap.
   Redeclare the exact same @font-face (same family/style/weight/src as
   eyez.css, which is generated and must not be hand-edited) with
   font-display:block — a later declaration for the same family wins, so
   the fallback text stays invisible during the short block period.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/fonts/e9b4663eaadf.woff2") format('woff2');
}

/* ---------------------------------------------------------------------
   Finding #9: eyez.css's tablet grid-collapse set (lines ~584-588) is
   dead code — its selectors have a space after the colon
   (`grid-template-columns: 1.4fr`) that React-serialized inline styles
   never contain. The 1.4fr/1.3fr splits already have working no-space
   replacements in the <=1024px block at the top of this file; these are
   the remaining no-space equivalents of that dead set (1.2fr / 1fr
   1.1fr / 1.1fr 1fr — currently unused in dist, added for parity so a
   regenerated bundle can't silently miss the collapse).
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main [style*="grid-template-columns:1.2fr"],
  main [style*="grid-template-columns:1fr 1.1fr"],
  main [style*="grid-template-columns:1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------
   Findings #9 + #34: eyez.css's phone gap-trim set (lines ~617-620,
   `[style*="gap: 80px"]` etc.) never matches for the same
   space-after-colon reason, so phones kept desktop-tuned 48-80px gaps.
   These are the corrected no-space equivalents with the exact gap
   values eyez.css intended (verified in dist: gap:80px x3, gap:64px x7,
   gap:56px x3, gap:48px x120 — and no column-gap/row-gap inline styles
   that the substring match could hit by accident).
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  main [style*="gap:80px"] { gap: 40px !important; }
  main [style*="gap:64px"] { gap: 36px !important; }
  main [style*="gap:56px"] { gap: 32px !important; }
  main [style*="gap:48px"] { gap: 28px !important; }
}

/* ---------------------------------------------------------------------
   Finding #8: home "סיפורי הצלחה" section — the section itself is
   `padding:120px 0` and its two inner wrappers carry the 80px gutters
   inline (heading wrapper `max-width:1600px;margin:0 auto;padding:0 80px`,
   card strip `padding:8px 80px 24px`). Below 1024px eyez.css adds its
   own 48px (tablet) / 20px (phone) gutter on `main > section`, so the
   inner 80px stacks on top of it (~128px per side on tablet, ~100px on
   phone) instead of matching every other section's gutter. Drop the
   inner horizontal padding below 1024px so the eyez.css section gutter
   is the only one, exactly like the rest of the page. Selectors are
   unique to these two wrappers in dist (the hero header's
   `padding:0 80px 80px` does NOT contain `margin:0 auto;padding:0 80px`).
   Desktop (>1024px) is untouched.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main section [style*="margin:0 auto;padding:0 80px"],
  main [style*="padding:8px 80px 24px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   Finding #25: blog index (/blogs/מגזין-אייז) hero — the inner container
   carries `padding:110px 80px 120px` inline, and eyez.css's responsive
   layer adds its own 48px/20px gutter on `main > header`, so phones end
   up with ~100px of dead gutter per side (a ~190px text column on a
   390px screen). Drop the inner horizontal padding below 1024px so the
   header's own gutter (48px tablet / 20px phone) is the only one, like
   every other hero. The padding value is unique to this page in dist.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main > header [style*="padding:110px 80px 120px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   Finding #33: home hero stat card ("השבוע ב-EYEZ") is
   `padding:32px 36px;min-width:280px` with no box-sizing:border-box, so
   its minimum outer width is 354px — wider than the hero's content box
   below ~395px, and the header's overflow:hidden clips it. Let it
   shrink and span the stacked hero column on small phones instead.
   min-width:280px is unique to this card in dist.
   --------------------------------------------------------------------- */
@media (max-width: 430px) {
  main > header [style*="min-width:280px"] {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------
   Finding #35: home "דיוק שאפשר לבנות עליו" band + "במספרים" stats grid —
   at 320-355px the giant inline numerals ("96%" at font-size:132px,
   "47M"/"1,247"/"35"/"99.7%" at font-size:112px) and the text column's
   content-box min-width:240px (+40px padding-inline-start) exceed the
   collapsed one-column width, and nothing clips them, so the whole page
   gains horizontal scroll. Scale the numerals down and let the column
   shrink on very small phones only. All three inline values are unique
   to these blocks in dist.
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  main [style*="min-width:240px"] { min-width: 0 !important; }
  main [style*="font-size:132px"] { font-size: 96px !important; }
  main [style*="font-size:112px"] { font-size: 80px !important; }
}

/* ---------------------------------------------------------------------
   Finding #36: the login (/account/login) and 404 card keeps its
   desktop `padding:48px` on small phones (pages.css has no mobile
   override for .login-card), squeezing the Hebrew copy into a ~174px
   column at 320px. Reduce the padding on small screens only; this file
   loads after pages.css so the plain class selector wins.
   --------------------------------------------------------------------- */
@media (max-width: 430px) {
  .login-card {
    padding: 36px 20px;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------
   Finding #16: minimal lightbox for the system-page feature screenshots
   (their frames ship cursor:zoom-in + a zoom_in icon but had no zoom).
   The overlay element is injected by assets/js/enhance.js; these styles
   apply at every viewport width.
   --------------------------------------------------------------------- */
.eyez-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 18, 5, 0.88);
  cursor: zoom-out;
}
.eyez-lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.eyez-lightbox-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px; /* top-left in RTL */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 33, 8, 0.55);
  color: #fff;
  cursor: pointer;
}
.eyez-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body.eyez-lightbox-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Login dropdown — the "כניסה לדשבורד שלך" button in *menu* mode
   (site.loginMode == 'menu'). Same no-JS <details>/<summary> disclosure
   as the mobile menu above; works with JS disabled and is keyboard/
   screen-reader accessible by default. Shown at every viewport width
   (not media-gated). The panel floats below the button; the sticky
   nav is its containing block via .eyez-login-menu position:relative.
   The reused .eyez-nav-actionlabel span inherits the existing
   narrow-screen "hide label" rule (eyez.css), keeping parity with the
   single-link button.
   --------------------------------------------------------------------- */
.eyez-login-menu {
  position: relative;
  display: inline-flex;
}
.eyez-login-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Heebo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--eyez-green); /* was --primary-container: 4.39:1 on the blurred nav bg */
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.eyez-login-summary::-webkit-details-marker { display: none; }
.eyez-login-summary::marker { content: ""; }
.eyez-login-summary:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 4px;
  border-radius: 6px;
}
.eyez-login-caret { transition: transform 200ms ease; }
.eyez-login-menu[open] .eyez-login-caret { transform: rotate(180deg); }

.eyez-login-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  background: var(--surface-container-lowest, #fff);
  border: 1px solid var(--surface-variant);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18),
              0 4px 12px -4px rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 8px;
}
.eyez-login-item {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: Heebo, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--fg-1);
  text-decoration: none;
  text-align: right;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.eyez-login-item:hover { background: var(--surface-container-low, var(--surface-container)); }
.eyez-login-item:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: -2px;
}

/* =====================================================================
   Icon-font subset override (perf).
   eyez.css ships the FULL Material Symbols font (~1.1MB). The build
   keeps only the ~40 icons the site actually uses in a self-hosted
   subset (assets/fonts/material-symbols-subset.woff2, ~47KB), built by
   `node tools/subset_icons.mjs` — re-run it whenever a new icon name
   is added anywhere. This block is loaded after eyez.css, so this
   same-descriptor @font-face wins and the 1.1MB file is never fetched.
   font-display:block (not swap) so raw ligature names like "arrow_back"
   are never painted as text while the font loads.
   ===================================================================== */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/assets/fonts/material-symbols-subset.woff2?v=6bc4e7e6") format('woff2');
}

/* Marquee pause toggle (injected by assets/js/enhance.js — WCAG 2.2.2) */
.eyez-marquee-pause {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--outline-variant);
  background: var(--bg-card);
  color: var(--fg-2);
  cursor: pointer;
  opacity: 0.75;
}
.eyez-marquee-pause:hover,
.eyez-marquee-pause:focus-visible { opacity: 1; }
.eyez-marquee-pause .material-symbols-outlined { font-size: 18px; }
.eyez-marquee.eyez-marquee-paused .eyez-marquee-track { animation-play-state: paused !important; }

/* FAQ accordion (<details>-based, shared by home/system/contact) */
.eyez-faq summary { -webkit-appearance: none; }
.eyez-faq summary::-webkit-details-marker,
.eyez-faq summary::marker { display: none; content: ""; }
.eyez-faq details[open] .eyez-faq-caret { transform: rotate(180deg); }
.eyez-faq summary:focus-visible {
  outline: 2px solid var(--primary-container);
  outline-offset: 4px;
  border-radius: 4px;
}