/* =========================================================
   HEADER.CSS
   Desktop header only, built to the approved Figma screenshot.
   Tablet/mobile navigation is intentionally out of scope for
   this step — see the temporary rules in responsive.css.
   ========================================================= */

.site-header {
  position: relative; /* never fixed or sticky */
  background-color: var(--color-surface);
}

/* ---------------------------------------------------------
   HEADER-SPECIFIC WIDTH OVERRIDE

   The header is a full-bleed bar, not a capped container: the
   logo sits against the left of the screen and the navigation
   against the right, with only a gutter between them and the
   edges. This is the footer's composition, and the two are
   deliberately driven by the SAME expression --
   clamp(24px, 4.2vw, 100px), copied from .site-footer__inner --
   so the logo in the bar and the logo in the footer stay on
   one vertical line at every screen width, not just one.

   Measured at a 1519px viewport: header logo 64px from the
   left, navigation 64px from the right, footer logo 64px from
   the left. Identical.

   This previously capped at max-width: 1428px with
   margin-inline: auto, which is what left the bar floating in
   the middle of wide screens. The cap is removed here only --
   the sitewide --page-max-width token and every other
   .page-shell usage are untouched. The combined class selector
   (0,2,0) outranks .page-shell (0,1,0), so this wins on
   specificity regardless of file order, for the padding as
   well as the width.
   --------------------------------------------------------- */
.page-shell.site-header__inner {
  max-width: none;
  padding-inline: clamp(24px, 4.2vw, 100px);
}

/* ---------------------------------------------------------
   INNER GRID
   The document is dir="rtl", but the Figma's physical order
   (logo left, nav center-right, language switcher far right)
   is fixed regardless of language. direction: ltr here keeps
   that physical composition; Hebrew text direction is
   restored explicitly on the nav and its links below.
   --------------------------------------------------------- */
.site-header__inner {
  direction: ltr;
  display: grid;
  /* Two columns, because the bar has two children: the logo
     lockup and the navigation. There used to be a third `auto`
     column here for the language switcher, which is not in the
     markup -- it resolved to 0px, but the 48px column-gap in
     front of it still counted, and that gap was holding the
     navigation 48px short of the right-hand gutter. Removing
     the empty column is what lets the nav sit flush.

     If the language switcher is ever restored, add its column
     back as a third `auto` and this still works. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-7);
  /* 79px, corrected per direct Figma layer inspection (the Hero
     image starts at Y=79 in the Home Page frame) — the earlier
     100px was an approximation from the screenshot, not a real
     inspector reading. */
  min-height: 79px;
}

/* ---------------------------------------------------------
   LOGO
   Original SILANDE logo file, undistorted, natural aspect
   ratio preserved.
   --------------------------------------------------------- */
.site-header__logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* 6.25px, up from 6px: measured off the supplied brand lockup,
     where the distance from the wordmark's bottom edge to the
     tagline's cap top is 9px at a 124px wordmark. This is a flex
     gap between BOXES, and the tagline's 10px line box carries
     2.75px of leading above its cap, so 6.25px here renders as
     exactly 9px of ink-to-ink (verified in the browser). Kept identical in
     footer.css so the lockup reads the same top and bottom. */
  gap: 7.3px;   /* 6.25 scaled with the wordmark, 124 -> 145 */
}

.site-header__logo {
  /* 124px — the wordmark's own Figma size (124x21). This had been
     upscaled to 140px, which is 13% larger than the design and is
     half of why the block felt tight: the wordmark grew while the
     space under it did not. height:auto keeps the exact aspect. */
  width: 145px;   /* was 124 */
  height: auto;
  object-fit: contain;
}

.site-header__tagline {
  /* Not in the source logo.png (that file is wordmark-only) —
     added to close the measured gap between the reference's
     full logo block and the wordmark alone. Text read directly
     off the approved screenshot. Sized so it never exceeds the
     logo's own width (Figma keeps the tagline within the
     wordmark's width). */
  /* THE LOCKUP, RESIZED

     The tagline was unreadable, and two separate things were
     making it so. The obvious one is size: 6.7px is smaller
     than anything else on the site. The hidden one is weight --
     this line asks for Regular (400), but only Blinker Light
     (300) was wired as a font file, so the browser had nothing
     but the Light face to serve it. It was rendering a weight
     lighter than its own CSS asked for, on every page.

     Both are fixed here. The family below names "Blinker
     Regular" first, which is the real 400 file (declared in
     variables.css), and the size goes to 8.2px.

     THE TRACKING IS NOT A GUESS. The tagline is meant to span
     the wordmark's own width exactly -- that is the whole shape
     of the lockup, and it is what went wrong the last time this
     was touched, when the line overhung the mark by 15px. At
     8.2px in the real Regular face the line measures 135.7px of
     natural width; the wordmark is now 145px; the difference
     spread over its 37 characters is 0.031em. Measured in the
     browser afterwards: wordmark 145.0px, tagline 145.1px.

     If the size, the weight or the wordmark's width changes
     again, this number has to be recalculated -- it is derived
     from all three. */
  font-family: "Blinker Regular", var(--font-english), Arial, sans-serif;
  font-weight: var(--font-weight-regular);
  /* 6.7px / 10px line box, Figma-exact. At the 8px it had been
     using, this line measured 138.6px against a 124px wordmark --
     it overhung the logo by 15px, which is the other half of the
     crowding. The tracking is tuned so the line now spans the
     wordmark's own width exactly instead of sticking out past it. */
  font-size: 8.2px;   /* was 6.7 */
  line-height: 12px;   /* was 10, scaled with the size */
  letter-spacing: 0.031em;   /* recalculated -- see above */
  /* Ink, not muted grey: in the supplied brand lockup the tagline
     is set in solid black under the wordmark, where this had been
     rendering at --color-text-muted (#747474) and read noticeably
     lighter than the artwork. --color-text (#262626) is the site's
     own standard ink and resolves to black at 6.7px; swap it for
     --color-text-strong (#000000) if a harder black is wanted. */
  color: var(--color-text);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   NAVIGATION
   direction: rtl restores Hebrew reading order inside the
   ltr grid: the first item in the markup ("פרופיל החברה")
   renders on the right, next to the language switcher,
   matching the screenshot. The nav sits flush toward that
   right side of its flexible column rather than centered —
   this is the balance the approved screenshot actually shows.
   --------------------------------------------------------- */
.site-navigation {
  direction: rtl;
  justify-self: end;
  min-width: 0;
}

.site-navigation__list {
  display: flex;
  align-items: center;
  gap: 56px;
}

.site-navigation__link {
  direction: rtl;
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-nav);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text);
  transition: color 200ms ease;
}

.site-navigation__link:hover {
  color: var(--color-accent-blue);
}

.site-navigation__link:focus-visible {
  outline: 1px solid var(--color-accent-blue);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   ACTIVE NAVIGATION STATE
   Two-segment underline reconstructed from the screenshot:
   a longer blue line with a short red continuation flush to
   one end, sitting below the text baseline rather than
   touching it. Built with pseudo-elements, not text-decoration.
   --------------------------------------------------------- */
.site-navigation__link.is-active::before,
.site-navigation__link.is-active::after {
  content: "";
  position: absolute;
  bottom: -18px;
  height: 1px;
}

.site-navigation__link.is-active::before {
  right: 20%;
  width: 40%;
  background-color: var(--color-accent-blue);
}

.site-navigation__link.is-active::after {
  right: 0;
  width: 20%;
  background-color: var(--color-accent-red);
}

/* ---------------------------------------------------------
   LANGUAGE SWITCHER
   Real button, native styling removed. Chevron built with
   CSS borders only — no icon library.
   --------------------------------------------------------- */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
  transition: color 200ms ease;
}

.language-switcher:hover {
  color: var(--color-accent-blue);
}

.language-switcher:focus-visible {
  outline: 1px solid var(--color-accent-blue);
  outline-offset: 4px;
}

.language-switcher__icon {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}