/*! header/main (dark island, 136px — Figma header-eye 4691:10945) — copied verbatim from the demo's app.css lines 76–300 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */


.site-header{position:relative;height:136px;display:flex;flex-direction:column;justify-content:space-between;}/* Figma inside-stroke: bottom hairline drawn over the content, not consuming layout space */


.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--bw-thin);background:var(--border-strong);pointer-events:none;}
.site-header__top{direction:ltr;background:var(--bg-component-header);height:80px;padding:var(--sp-normal);display:flex;justify-content:center;}
.site-header__row{flex:1;min-width:1px;display:flex;justify-content:space-between;align-items:center;}
.site-header__cta{display:flex;gap:var(--sp-snug);align-items:center;}
/* button-primary (Figma component set `button-primary`): a per-brand pill on
   its own token set (bg/button-primary-static, content/on-button-primary-static,
   radius/button-primary). Shared by the header CTA (--sm) and hamburger CTA (--lg);
   the label + icon carry the button-primary text styles. */
.button-primary{height:40px;border:0;cursor:pointer;text-decoration:none;border-radius:var(--radius-button-primary);background:var(--bg-component-button-primary);color:var(--content-on-button-primary-static);display:flex;gap:var(--sp-x-tight);align-items:center;justify-content:center;}
.button-primary--lg{padding:0 var(--sp-normal);}
.button-primary--sm{padding:0 var(--sp-snug);}
/* every button master pads its label-container by spacing/height-fix — 2 in
   eye, 0 in the other three — so it belongs on the shared button, not on one
   caller (button-primary / button-secondary / button-outline all bind it) */
.button-primary .lbl,
.button-secondary .lbl,
.button-outline .lbl{padding-top:var(--sp-height-fix);}
.button-primary--donate .lbl{white-space:nowrap;}/* subscribe (Figma header/subscribe): rest = outline + label; HOVER = white
   fill + "הכנס את כתובת האימייל שלך"; CLICK INSIDE = clean RTL input, caret at
   the line start; typing = red send icon. Width hugs its content. */


.site-header__subscribe{height:40px;border:var(--bw-thin) solid var(--border-normal);border-radius:var(--radius-button-primary);padding:0 var(--sp-snug);display:flex;gap:var(--sp-snug);align-items:center;cursor:text;transition:background-color .2s ease;}
.site-header__subscribe .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);color:var(--content-primary);transition:color .2s ease;}
.site-header__subscribe .lbl{color:var(--content-tertiary);padding-top:var(--sp-height-fix);white-space:nowrap;}
.site-header__subscribe .site-header__subscribe-label--prompt{display:none;color:var(--content-static-darkest);}
.site-header__subscribe .site-header__subscribe-input{display:none;flex:1;min-width:1px;direction:rtl;text-align:start;background:none;border:0;padding:var(--sp-height-fix) 0 0;margin:0;color:var(--content-static-darkest);}/* hover (before activation): white fill, darkened icon, swapped label */


.site-header__subscribe:hover:not(.is-active),
.site-header__subscribe.is-active{background:var(--bg-static-white);}
.site-header__subscribe:hover:not(.is-active) .ic,
.site-header__subscribe.is-active .ic{color:var(--content-static-darkest);}
.site-header__subscribe:hover:not(.is-active) .site-header__subscribe-label--long,
.site-header__subscribe:hover:not(.is-active) .site-header__subscribe-label--short{display:none;}
.site-header__subscribe:hover:not(.is-active) .site-header__subscribe-label--prompt{display:block;}/* active (clicked inside): clean input, fixed focus width (Figma 252) */


.site-header__subscribe.is-active{width:252px;}
.site-header__subscribe.is-active .lbl{display:none;}
.site-header__subscribe.is-active .site-header__subscribe-input{display:block;}
.site-header__subscribe.is-typing .ic{color:var(--content-static-breaking);}
.site-header__utility{display:flex;gap:var(--sp-tight);align-items:center;}/* search opens INSIDE the utility row (Figma 4691:11645): ONE morphing element —
   closed it is exactly the 24px magnifier (utility spacing untouched), open it
   grows into the white field with the X sliding in after it. Opening does NOT
   focus the input — the caret appears only when the user clicks inside (and
   sits at the line start of a clean RTL field). */


.site-search{display:flex;gap:0;align-items:center;}
button.ic-menu,
button.site-search__close{background:none;border:0;margin:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;}
button.ic-menu::before{content:"\e014";}
button.site-search__close::before{content:"\e03c";}
.site-search__box{display:flex;align-items:center;gap:0;height:40px;width:24px;background:transparent;border:var(--bw-thin) solid transparent;border-radius:var(--radius-button-primary);padding:0;overflow:hidden;cursor:pointer;transition:width .25s ease, background-color .25s ease, border-color .25s ease, padding .25s ease, gap .25s ease;}
.site-search__box .site-search__input{flex:1;min-width:0;width:0;direction:rtl;background:none;border:0;padding:var(--sp-height-fix) 0 0;margin:0;color:var(--content-static-darkest);opacity:0;transition:opacity .2s ease;}
.site-search__box .site-search__input::placeholder{color:var(--content-static-darkest);opacity:.6;transition:opacity .15s ease;}/* clicking inside = a clean field: the placeholder clears, the caret sits at the line start */


.site-search__box .site-search__input:focus::placeholder{opacity:0;}
.site-header.is-search-open .site-search__box{width:197px;background:var(--bg-static-white);border-color:var(--border-normal);padding:0 var(--sp-snug);gap:var(--sp-tight);}
.site-header.is-search-open .site-search__box .ic{color:var(--content-static-darkest);}
.site-header.is-search-open .site-search__box .site-search__input{opacity:1;}/* the close X slides open after the field */


button.site-search__close{width:0;opacity:0;overflow:hidden;margin-inline-start:0;transition:width .25s ease, opacity .25s ease, margin .25s ease;}
.site-header.is-search-open button.site-search__close{width:24px;opacity:1;margin-inline-start:var(--sp-tight);}
/* menu open, desktop: utility collapses to the X alone (Figma 4691:11810).
   On mobile the fullscreen panel covers the header, so nothing is hidden. */
@media (min-width:768px){
  .site-header.is-menu-open .site-search{display:none;}
}
.site-header.is-menu-open button.ic-menu::before{content:"\e03c";}
.header-language-toggle{display:inline-flex;}
.header-language-toggle .en,
.header-language-toggle .he{height:22px;border:var(--bw-thin) solid var(--border-darkest);display:flex;align-items:center;}
.header-language-toggle .en{padding:0 var(--sp-x-tight) 0 var(--sp-tight);border-radius:var(--radius-button-primary) 0 0 var(--radius-button-primary);color:var(--content-primary);}
.header-language-toggle .he{padding:0 var(--sp-tight) 0 var(--sp-x-tight);margin-left:-1px;border-radius:0 var(--radius-button-primary) var(--radius-button-primary) 0;background:var(--bg-basic-darkest);color:var(--content-primary-inverse);}
.site-header__utility .ic,
.site-header__utility--nav .ic{font-family:var(--typo-font-icon);font-size:var(--typo-icon-md-font-size);line-height:var(--typo-icon-md-line-height);color:var(--content-primary);}
/* theme toggle — glyph shows the ACTION (theme it switches TO), with a separate hover glyph (Figma theme-bottun states) */
button.theme-toggle{background:none;border:0;margin:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;}
:root[data-theme="light"] .theme-toggle::before{content:"\e019";}        /* light page → moon → go dark */
:root[data-theme="light"] .theme-toggle:hover::before{content:"\e018";}
:root[data-theme="dark"] .theme-toggle::before{content:"\e01e";}        /* dark page → sun → go light */
:root[data-theme="dark"] .theme-toggle:hover::before{content:"\e01f";}/* nav flows RTL with the DOM in reading order (procedure #4: DOM order = reading order) */


.site-nav{background:var(--bg-component-header);border-top:var(--bw-thin) solid var(--border-hairline);height:56px;padding:var(--sp-snug) var(--sp-normal);display:flex;gap:var(--sp-loose);align-items:center;justify-content:center;overflow:hidden;}
.site-nav__item{padding:var(--sp-micro) var(--sp-x-tight);border-bottom:var(--bw-thin) solid transparent;display:flex;gap:var(--sp-micro);align-items:center;color:var(--content-nav-item);text-decoration:none;white-space:nowrap;transition:color .2s ease, border-color .2s ease;}/* hover / pressed (Figma header/tab hover variants): text brightens to
   content-brand and a hairline runs under the tab — NOT a location marker */


.site-nav__item:hover,
.site-nav__item.is-pressed{color:var(--content-brand);border-bottom-color:var(--border-hairline);}
.site-nav__item .dropdown-trigger{font-family:var(--typo-font-icon);font-size:var(--typo-icon-xs-font-size);line-height:var(--typo-icon-xs-line-height);transition:transform .25s ease;}
.site-nav__item.is-pressed .dropdown-trigger{transform:rotate(180deg);}/* floating dropdown under a caret tab (Figma dropdown-tab-sublist 4680:9686) —
   a light panel regardless of the dark header island */


.site-nav__submenu{position:absolute;top:100%;z-index:110;min-width:91px;background:var(--bg-basic-white);border:var(--bw-thin) solid var(--border-normal);padding:var(--sp-tight) 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;}
.site-nav__submenu.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s ease, transform .2s ease, visibility 0s;}
.site-nav__submenu-item{padding:var(--sp-tight) var(--sp-normal);color:var(--content-primary);text-align:center;text-decoration:none;white-space:nowrap;transition:background-color .15s ease;}
.site-nav__submenu-item:hover{background:var(--bg-surface-1);}/* the brand logo links home. The slot itself stays event-transparent (see
   below) — only the tight box around the visible logo re-enables pointing */


.site-header__logo .site-header__lockup{display:flex;align-items:center;justify-content:center;pointer-events:auto;}
.site-header__logo{position:absolute;top:0;bottom:56px;left:50%;transform:translateX(-50%);width:360px;display:flex;align-items:center;justify-content:center;/* the slot is a passive layer over the whole header centre — on a 402 screen
     it reaches the utility icons and swallowed their taps. Only the inner
     .logo-link (the logo itself, now a home link) re-enables pointer events */pointer-events:none;}/* brand-switched logo: both inline, active brand decides (important beats the svg's inline display:block).
   ham has no logo asset yet (header spec pending) — slot stays empty */
/* shakuf, same client note: 121×44 at desktop sitting 22/14 in the 80 row
   (4px below centre → margin-top:8px); 77×28 at 18/14 in the 60 rows
   (2px below centre → margin-top:4px). Read off the placed instances. */



.site-header__logo .logo-shakuf{width:121px;height:44px;margin-top:8px;}
[data-brand="eye"] .logo-shakuf{display:none!important;}/* client 2026-08-25: smaller header logo, more breathing room. Sizes read
   off the placed instances in the HEADER frames, per tier. */
/* NOT vertically centred: Figma places it 18/14 in the 80 row and 14/10 in
   the 60 rows — 2px below centre in both. margin-top:4px on a flex-centred
   item yields exactly that at every tier. */



.site-header__logo .logo-eye{width:189px;height:48px;margin-top:4px;}
[data-brand="shakuf"] .logo-eye{display:none!important;}
[data-brand="ham"] .logo-eye,
[data-brand="ham"] .logo-shakuf{display:none!important;}
/* signature source (glyph + name) is a single element whose CONTENT is swapped
   per brand in JS — no per-brand markup or CSS here */

[data-brand="ham"]{--hb-stripe:linear-gradient(to right, var(--b-core-main-tertiary) 0 33.33%, var(--b-core-signal-essential) 33.33% 67.7%, var(--b-core-signal-breaking) 67.7% 100%);}/* surface = the brand-agnostic --bg-component-header token in EVERY variant (main, sticky
   sub, solid60, overlay-solid, mobile). eye resolves dark (its header is pinned
   data-theme=dark), ham follows the page theme. No per-brand surface overrides. */
/* The three colours come from the BRAND layer, not from primitives: site-specs H1 names a `--color-*`
   in a consumer sheet as the defect, because it cannot follow a palette change. Not the THEME layer,
   because no theme token exposes ham's purple — and a brand band is identity rather than surface, so
   it is meant not to flip with light and dark. */
/* the brand stripe replaces the bottom hairline (border-width/thick = 4) */




[data-brand="ham"] .site-header::after{height:var(--bw-thick);background:var(--hb-stripe);}/* the stripe exists in EVERY ham header state — the base hides ::after on the
   sticky sub and the hero compact headers, so ham re-enables it there */


[data-brand="ham"] .site-header--sub::after,
[data-brand="ham"] .site-header--compact::after{display:block;height:var(--bw-thick);background:var(--hb-stripe);}/* brand nav swap — both navs are in the DOM, CSS picks (same as the logos).
   The ham nav may only ever show where the base nav would (≥1024): scoping the
   display:flex to that media keeps the responsive hiding authoritative. */


.site-nav--ham{display:none;}
[data-brand="ham"] .site-nav--base{display:none;}
@media (min-width:1024px){
  [data-brand="ham"] .site-nav--ham{display:flex;}
}
/* ham donate: the per-brand token paints it green; only the width-dependent
   label swap is ham-specific (icon is now shown for every brand). */
.button-primary--donate .lbl-ham{display:none;}
[data-brand="ham"] .button-primary--donate .lbl-base{display:none;}
[data-brand="ham"] .button-primary--donate .lbl-ham-long{display:inline;}
@media (min-width:768px) and (max-width:1023px){
  [data-brand="ham"] .button-primary--donate .lbl-ham-long{display:none;}
  [data-brand="ham"] .button-primary--donate .lbl-ham-short{display:inline;}
}
@media (max-width:767px){
  [data-brand="ham"] .button-primary--donate .lbl-ham-long{display:none;}
  [data-brand="ham"] .button-primary--donate .lbl-ham-mini{display:inline;}
}/* logos: stamp on the big main header, wordmark on 768/mobile/sub; currentColor
   follows content-primary so the dark sub gets the light wordmark for free */


.site-header__logo .logo-ham-stamp,
.site-header__logo .logo-ham-word{display:none;color:var(--content-primary);}
/* stamp only on the big main header ≥1024; everything else gets the wordmark.
   The block rules live INSIDE their media ranges so no specificity fight. */
@media (min-width:1024px){
  [data-brand="ham"] .site-header:not(.site-header--sub):not(.site-header--compact) .site-header__logo .logo-ham-stamp{display:block;width:52px;height:60px;}
  [data-brand="ham"] .site-header--sub .site-header__logo .logo-ham-word,
[data-brand="ham"] .site-header--compact .site-header__logo .logo-ham-word{display:block;width:198px;height:24px;}
}
@media (min-width:768px) and (max-width:1023px){
  [data-brand="ham"] .site-header .site-header__logo .logo-ham-word{display:block;width:248px;height:30px;}
  [data-brand="ham"] .site-header--sub .site-header__logo .logo-ham-word{width:198px;height:24px;}
}
@media (max-width:767px){
  [data-brand="ham"] .site-header .site-header__logo .logo-ham-word{display:block;width:198px;height:24px;}
}/* utility icons, subscribe, and lang toggle are now brand-agnostic in the base
   rules (content/primary, content/tertiary, border/darkest, bg/darkest) — the
   per-brand values come from the tokens per theme, so ham needs no override. */
/* balance the 4px stripe (Ronen: content up, height stays): the stripe-touching
   bottom row centres its content ABOVE the stripe by moving half the stripe's
   height from top pad to bottom pad — sum unchanged, so nothing clips. Bottom
   row = the nav on the full header, the header-top on every 60px variant. */



[data-brand="ham"] .site-nav{padding-top:calc(var(--sp-snug) - var(--bw-thick)/2);padding-bottom:calc(var(--sp-snug) + var(--bw-thick)/2);}
[data-brand="ham"] .site-header--compact .site-header__top{padding-top:calc(var(--sp-x-tight) - var(--bw-thick)/2);padding-bottom:calc(var(--sp-x-tight) + var(--bw-thick)/2);}
[data-brand="ham"] .site-header--sub .site-header__top{padding-top:calc(var(--sp-tight) - var(--bw-thick)/2);padding-bottom:calc(var(--sp-tight) + var(--bw-thick)/2);}
@media (max-width:1023px){
  [data-brand="ham"] .site-header:not(.site-header--compact):not(.site-header--sub) .site-header__top{padding-top:calc(var(--sp-tight) - var(--bw-thick)/2);padding-bottom:calc(var(--sp-tight) + var(--bw-thick)/2);}
}
@media (max-width:767px){
  [data-brand="ham"] .site-header:not(.site-header--compact):not(.site-header--sub) .site-header__top{padding-top:calc(var(--sp-x-tight) - var(--bw-thick)/2);padding-bottom:calc(var(--sp-x-tight) + var(--bw-thick)/2);}
}