/* =========================================================================
   header — fixed, directly after <body> (Alex rule 7). Figma 74:6964.
   Desktop: phone box + language (right) · logo (centre) · CTA (left), nav row below.
   Ground: solid navy 57px, then navy .9 → transparent down to 216px (over the hero).
   .is-scrolled (main.js) = solid navy so the nav stays readable over white sections.
   ========================================================================= */
.site-header{position:fixed;top:0;inset-inline:0;z-index:100;height:var(--header-h);padding:30px 40px 0;color:var(--white)}
.site-header::before{content:"";position:absolute;inset:0 0 auto;height:216px;pointer-events:none;z-index:-1;transition:all .3s;
  background:linear-gradient(180deg,var(--navy) 0,var(--navy) 57px,var(--navy-90) 57px,rgba(14,13,44,0) 216px)}
.site-header.is-scrolled::before{height:100%;background:var(--navy);box-shadow:0 6px 24px rgba(0,0,0,.25)}

.site-header__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start}
.site-header__side{display:flex;align-items:center;gap:23px}
.site-header__side--end{justify-content:flex-end}

/* phone box — white 197×46, label 15 + number Tel Aviv Bold 20, navy */
.site-header__phone{display:flex;align-items:center;justify-content:space-between;gap:10px;width:197px;height:46px;margin-top:2px;padding:0 18px 0 16px;white-space:nowrap;background:var(--white);color:var(--navy);font-family:var(--font-display)}
.site-header__phone:hover{background:var(--gold)}
.site-header__phone-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.site-header__phone-label{font-size:15px;line-height:17px}
.site-header__phone-num{font-weight:700;font-size:20px;line-height:22px;direction:ltr}
.site-header__phone-icon{width:24px;height:24px;flex:0 0 auto}

/* language — 90×46, 1px white .8 */
.site-header__lang{display:flex;align-items:center;justify-content:center;gap:8px;width:90px;height:46px;margin-top:2px;border:1px solid rgba(255,255,255,.8);font-family:var(--font-display);font-size:18px;color:var(--white)}
.site-header__lang:hover{border-color:var(--gold)}
.site-header__lang-chevron{width:16px;height:16px}
.site-header__lang img{width:16px;height:16px;border-radius:50%}

/* logo — "DAYAN ZAKAR" 259 + "— LAW FIRM —" 195 (gold gradient SVGs) */
.site-header__logo{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:2px}
.site-header__logo-word{width:259px;height:auto}
.site-header__logo-sub{width:195px;height:auto}

.site-header__cta{height:46px;padding:0 20px}
.site-header__call,.site-header__burger{display:none}

/* nav row — Tel Aviv 20 white, gap 46 */
.site-header__nav{display:flex;justify-content:center;gap:46px;margin-top:46px}
.site-header__nav a{position:relative;display:block;font-family:var(--font-display);font-size:20px;line-height:18px;padding-block:4px;color:var(--white)}
.site-header__nav a::after{content:"";position:absolute;inset:auto 0 -4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .2s}
.site-header__nav a:hover{color:var(--gold)}
.site-header__nav a:hover::after{transform:scaleX(1)}

@media (max-width:1480px){
  .site-header{padding:24px 28px 0}
  .site-header__nav{gap:34px;margin-top:38px}
  .site-header__nav a{font-size:18px}
  .site-header__logo-word{width:220px}
  .site-header__logo-sub{width:166px}
  .site-header__logo{gap:13px}
}

/* ---------- tablet + mobile: one row — logo · call + burger ------------- */
@media (max-width:1100px){
  .site-header{padding:0 20px;display:flex;align-items:center}
  .site-header::before{height:100%;background:var(--navy)}
  .site-header__bar{width:100%;align-items:center}
  .site-header__nav,.site-header__lang,.site-header__phone,.site-header__cta{display:none}
  .site-header__logo{gap:8px;padding:0}
  .site-header__logo-word{width:180px}
  .site-header__logo-sub{width:136px}
  .site-header__side--end{gap:10px}
  .site-header__call{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.4px solid var(--gold);border-radius:50%}
  .site-header__call svg{width:20px;height:20px}
  .site-header__burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:42px;height:42px;padding:0 9px}
  .site-header__burger span{display:block;height:2px;background:var(--white);border-radius:2px}
  .site-header__burger span:nth-child(2){background:var(--gold)}
}
@media (max-width:640px){
  .site-header{padding:0 14px}
  .site-header__logo-word{width:150px}
  .site-header__logo-sub{width:112px}
  .site-header__logo{gap:6px;justify-self:start;grid-column:1}
  .site-header__bar{grid-template-columns:1fr auto}
  .site-header__side--start{display:none}
  .site-header__side--end{grid-column:2}
}

/* ---------- mobile menu (drawer from the right) ------------------------- */
.mobile-menu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:var(--navy);color:var(--white);padding:0 24px 32px;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.mobile-menu__logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.mobile-menu__logo svg:first-child{width:150px;height:auto}
.mobile-menu__logo svg:last-child{width:112px;height:auto}
.mobile-menu__close{position:relative;width:42px;height:42px}
.mobile-menu__close span{position:absolute;top:50%;left:9px;right:9px;height:2px;background:var(--white)}
.mobile-menu__close span:first-child{transform:rotate(45deg)}
.mobile-menu__close span:last-child{transform:rotate(-45deg)}
.mobile-menu__nav{margin-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.mobile-menu__nav a{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.15);font-family:var(--font-display);font-size:22px}
.mobile-menu__nav a:hover{color:var(--gold)}
.mobile-menu__foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.mobile-menu__phone{font-family:var(--font-display);font-size:20px;font-weight:700}
.mobile-menu__phone span{font-weight:400;font-size:16px;color:var(--muted)}