/* =============================================================
   header-desktop.css — canonical DESKTOP header (Hebrew)
   Breakpoints: bar height >=481px, typography >=1024px

   Why this file exists
   --------------------
   he/index.html is the ONLY Hebrew page that loads styles-new.css and the
   IBM Plex Sans Hebrew webfont. The other 11 Hebrew pages are the older build:
   they load styles.css plus a per-page inline <style>, and their font stack
   starts at Inter — which has NO Hebrew glyphs, so their Hebrew menu rendered
   in whatever Hebrew font the visitor's OS happened to supply.

   Different font + different weights = different text widths, and .nav-container
   is `justify-content: space-between`, so the nav block landed ~20px off on the
   homepage versus every other page. Measured at 1920px before this file:

                     homepage      inner pages
       nav block     611 -> 1046   612 -> 1066   (20px)
       logo left     1216          1206          (10px)
       EN button     48px wide     79px wide     (31px)

   Fixing it per page is how it drifted in the first place. This pins the header
   once, for every Hebrew page, to the homepage's design — same approach as
   header-mobile.css. Load it LAST; `html[lang="he"] .header X` (0,3,1) beats
   both the inline per-page rules (0,1,1) and styles-new.css (0,2,1).

   Scope
   -----
   The header only. Body text on the inner pages is deliberately NOT touched
   here — that is a separate migration.

   And only >=1024px, which is exactly the range where the two builds show the
   SAME header. Below 1024px the inner pages' inline <style> deliberately
   collapses the nav to a hamburger and shrinks the logo to 1.35rem so it stops
   overflowing:

       @media (max-width:1023px),(hover:none) and (pointer:coarse){
         .nav-menu{display:none!important} .hamburger-menu{display:flex!important}
       }
       @media (min-width:700px) and (max-width:1023px){ .logo{font-size:1.35rem} }

   An earlier draft of this file used min-width:481px and overrode that logo size
   back to 1.5rem, which would have re-broken the tablet header on 8 pages. Don't
   widen this breakpoint without re-checking those rules.
   ============================================================= */

/* ── The black bar: 70px at every width above mobile, by declaration ──
   The homepage pins `height/min-height: 70px`. The inner pages pinned NOTHING
   above 820px — only `.header{padding:1rem 0}` — so their bar was
   16 + tallest child + 16, and it landed on 70 purely by accident: their logo
   box happens to be 38px (24px font x the ~1.6 line-height inherited from body).

   That made the bar hostage to its own contents. The moment the typography below
   changed the logo's line-height to 1.05, the bar collapsed to 64px. It is 70px
   here because it is DECLARED 70px — nothing inside it can move it again.

   No !important anywhere in this file. The 88px the inner pages used to force at
   <=820px was removed at source (their inline `he-mobile-header-*` blocks), along
   with the values coupled to it, rather than out-shouted from here. */
@media (min-width: 481px) {

  html[lang="he"] .header {
    height: 70px;
    min-height: 70px;
    padding: 0;
  }

  html[lang="he"] .header .nav-container {
    height: 70px;
    min-height: 70px;
    align-items: center;
  }
}

/* ── Where the menu collapses: 1024 on every Hebrew page ──
   Before this, a 1280px laptop showed the full menu on the homepage and a
   hamburger on every other Hebrew page. The inner pages collapsed at 1320 (their
   inline blocks, since moved to 1023); the homepage never collapsed at all,
   because styles.css forces `.nav-menu{display:flex !important}` from 768px up
   and nothing Hebrew-side could out-rank it.

   THE ONLY !important IN THIS FILE, and it is here under protest. styles.css is
   shared with English, and its !important cannot be beaten by a normal
   declaration at any specificity. Removing it there was tried and rejected: it
   let styles-new.css's English `@media (max-width:1320px)` rules take over, and
   English pages started collapsing at 1320. So the shared file stays untouched
   and both languages answer it here instead, for this range only.

   English had the same disease, measured at 900px before this rule:
       index                     MENU     (styles.css's !important wins)
       about/contact/results/
       testimonials/insights/
       how-to-cut-project-time   BURGER   (their own inline blocks)
       why-line-balancing,
       why-projects-are-delayed  MENU     (their inline blocks stop at 767)
   Three sources, three different answers, on one language. Both languages now
   collapse at the same 1024. */
@media (max-width: 1023px) {
  html[lang] .header .nav-menu:not(.mobile-open) {
    display: none !important;
  }
  html[lang] .header .hamburger-menu {
    display: flex !important;
  }
}

/* ── The CBS accent, 481-820px: contrast ──
   In this range the inner pages shrink the logo, so the accent renders at ~14.5px
   bold. #2563eb on the #1a1a1a bar is only 3.37:1 — WCAG AA needs 4.5:1 below the
   large-text threshold (18.66px bold), so it failed. It passes >=821px purely
   because the logo is big enough there to count as large text (3:1).
   #3b82f6 is ~4.6:1 — the same colour header-mobile.css already uses at <=480px
   for exactly this reason. The pages used to force #2563eb with !important; that
   was removed at source rather than out-shouted. */
@media (min-width: 481px) and (max-width: 820px) {
  html[lang="he"] .header .logo .cbs {
    color: #3b82f6;
  }
}

/* Typography + the language button apply from 1024px: that is now where every
   page shows the full menu (the shared breakpoint moved 1320 -> 1023 in
   styles.css, styles-new.css and the inner pages' inline blocks, so a 1280px
   laptop no longer gets a hamburger on some pages and a full menu on others).
   Below 1024 the inner pages collapse to a hamburger and shrink the logo on
   purpose — do not extend this block down there. */
@media (min-width: 1024px) {

  /* The homepage's stack. Inter carries the Latin "CBS BUSINESS SOLUTIONS";
     IBM Plex Sans Hebrew must come first so the Hebrew menu stops depending on
     the visitor's OS. Every page linking this file also links the webfont. */
  html[lang="he"] .header .logo,
  html[lang="he"] .header .nav-link,
  html[lang="he"] .header .language-selector {
    font-family: "IBM Plex Sans Hebrew", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  }

  html[lang="he"] .header .logo {
    direction: ltr;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
  }

  html[lang="he"] .header .nav-menu {
    gap: 2rem;
  }

  html[lang="he"] .header .nav-link {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
  }

  html[lang="he"] .header .nav-actions {
    gap: .75rem;
    direction: ltr;
    /* styles-new.css pins this to 28px, which would clip the taller hit area
       set below. The header's own height (70px) governs the bar. */
    height: auto;
  }

  /* Same box on every page: 48px wide, no chrome — the homepage's look.
     The homepage sets height:20px, but a 20px-tall control fails WCAG 2.2 AA
     target size (2.5.8 needs 24x24), and the inner pages currently pass at 36px
     — copying 20px verbatim would have pushed 11 passing pages below the
     minimum. Vertical-only padding buys a 32px target without touching the
     WIDTH, so the layout still lines up and nothing moves visually (the button
     has no background or border). */
  html[lang="he"] .header .language-selector {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: auto;
    min-height: 32px;
    padding: 6px 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
  }

  /* The homepage draws the globe as an inline <svg>; the inner pages use a Font
     Awesome <i>. Pinning an explicit 20px box makes both occupy the same width,
     so the button measures the same regardless of which markup the page uses. */
  html[lang="he"] .header .language-selector svg,
  html[lang="he"] .header .language-selector i {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
  }
}