/* ==========================================================================
   Chrome — header and footer, in the site's design language.

   Replaces the two Elementor Theme Builder templates. Depends on hetel.css for
   tokens, buttons and the .wrap container.

   The menu hierarchy is the live site's, unchanged: three of the five top-level
   items are group labels rather than pages. On the live site they link to "/",
   which means clicking "היטל השבחה לפי ערים" quietly takes you home. Here they
   are <button>s that open their group — the behaviour the label already implied.
   ========================================================================== */

/* ---------- Self-contained preamble ----------
   The header and footer render on EVERY page, including the landing pages and
   privacy policy that were never converted. hetel.css only loads on rebuilt
   pages, so the chrome cannot borrow its tokens, .wrap or .btn — it would be
   unstyled everywhere else. They are restated here, scoped to the chrome's own
   elements so nothing leaks onto a page we have not touched.

   Same values as hetel.css. If a token changes there, change it here too. */
.hdr2,.drawer,.ftr2,.scrim{
  --parchment:#FBF7EF; --paper:#F4EDE1; --line:#E2D8C6;
  --ink:#16243D; --ink-2:#22344F; --ink-3:#3C4A63; --muted:#7A7264;
  --accent:#B0593A; --accent-deep:#8E4429; --accent-wash:#F3E3D9;
  --sans:"Rubik","Assistant","Alef Hebrew",-apple-system,"Segoe UI",system-ui,sans-serif;
  --container:1240px; --gutter:clamp(1.25rem,4vw,2.5rem);
  --r-card:28px; --r-md:18px; --r-pill:999px;
  --shadow-float:0 30px 70px -28px rgba(22,36,61,.34), 0 2px 8px rgba(22,36,61,.06);
  --ease:cubic-bezier(.22,.68,.24,1);

  font-family:var(--sans);font-size:1rem;line-height:1.7;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
.hdr2 *,.drawer *,.ftr2 *{box-sizing:border-box}
.hdr2 a,.drawer a,.ftr2 a{text-decoration:none;color:inherit}
.hdr2 p,.drawer p,.ftr2 p{margin:0}
.hdr2 ul,.drawer ul,.ftr2 ul{margin:0;padding:0;list-style:none}
.hdr2 :focus-visible,.drawer :focus-visible,.ftr2 :focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}
.hdr2 .wrap,.ftr2 .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

.hdr2 .btn,.drawer .btn,.ftr2 .btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1.05rem 2rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:500;font-size:1rem;letter-spacing:-.015em;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.hdr2 .btn--primary,.drawer .btn--primary{background:var(--accent);color:#fff}
.hdr2 .btn--primary:hover,.drawer .btn--primary:hover{background:var(--accent-deep)}
.hdr2 .btn--ghost,.drawer .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.hdr2 .btn--ghost:hover,.drawer .btn--ghost:hover{background:var(--paper);border-color:var(--muted)}

/* ---------- Logo ----------
   The mark IS the H of "Hetel"; "etel" completes the word. Same paths that were
   already running on the site — not a redrawn mark.

   Alignment is structural rather than eyeballed: the viewBox is cropped to the
   mark's painted bounds (round caps included), so the SVG box IS the letter. An
   inline SVG's baseline is its bottom edge, so cap-height sizing drops it onto
   the text baseline exactly, at any size, with no magic numbers.

   The paths are written inline, never via <use>: a descendant selector does not
   cross the shadow tree <use> creates, and the paths would fall back to SVG
   defaults — filled black, no stroke — which turns this into a heavy blob. */
.logo{display:inline-flex;align-items:baseline;flex-shrink:0;direction:ltr;
  font-size:1.95rem;font-weight:500;letter-spacing:-.045em;line-height:1;
  color:var(--word,var(--ink));
}
.logo__mark{
  display:inline-block;height:.715em;width:auto;margin-right:.055em;
  --stroke:var(--ink);--bar:var(--accent);
}
.logo__mark .s{fill:none;stroke:var(--stroke);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.logo__mark .b{fill:none;stroke:var(--bar);stroke-width:12;stroke-linecap:round}

/* ---------- Header ---------- */
.hdr2{
  position:sticky;top:0;z-index:80;
  background:rgba(251,247,239,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.hdr2.is-stuck{border-bottom-color:var(--line)}
.hdr2__in{display:flex;align-items:center;gap:1.6rem;height:78px;transition:height .3s var(--ease)}
.hdr2.is-stuck .hdr2__in{height:66px}

.nav2{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.nav2__item{position:relative}
.nav2__link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.62rem .8rem;border-radius:var(--r-pill);border:0;background:none;
  font:inherit;font-size:.95rem;color:var(--ink-3);cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;
}
.nav2__link:hover,.nav2__link[aria-expanded="true"]{color:var(--accent);background:var(--accent-wash)}
.nav2__link[aria-current="page"]{color:var(--ink);font-weight:500}
.nav2__chev{transition:transform .25s var(--ease);flex-shrink:0}
.nav2__link[aria-expanded="true"] .nav2__chev{transform:rotate(180deg)}

.hdr2__cta{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.hdr2__tel{font-weight:500;font-size:.95rem;white-space:nowrap;color:var(--ink)}
.hdr2 .btn{padding:.68rem 1.3rem;font-size:.92rem}

/* ---------- Dropdown panel ---------- */
.drop{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);
  min-width:264px;background:var(--parchment);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-float);padding:.8rem;z-index:2;
  /* Hidden by the [hidden] attribute, not by opacity — a panel parked at
     opacity 0 is still in the tab order and still catches clicks. */
}
.drop__grid{display:grid;gap:.1rem}
.drop--wide{min-width:min(620px,80vw)}
.drop--wide .drop__grid{grid-template-columns:repeat(3,1fr);gap:.1rem .6rem}
.drop a{
  display:block;padding:.55rem .7rem;border-radius:var(--r-md);
  font-size:.92rem;color:var(--ink-3);line-height:1.4;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.drop a:hover{background:var(--paper);color:var(--accent)}
.drop a[aria-current="page"]{color:var(--ink);font-weight:500;background:var(--paper)}
/* Rova 3 sits under Tel Aviv on the live site, and that is correct — it is a
   Tel Aviv plan, not a city. The indent keeps that relationship visible. */
.drop a.is-sub{padding-inline-start:1.6rem;font-size:.87rem;position:relative}
.drop a.is-sub::before{
  content:"";position:absolute;inset-inline-start:.75rem;top:50%;
  width:.42rem;height:1px;background:var(--line);
}
.drop__label{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--muted);
  padding:.5rem .7rem .35rem;
}

/* ---------- Burger + mobile drawer ---------- */
.burger2{
  display:none;background:none;border:1px solid var(--line);border-radius:14px;
  padding:.55rem;cursor:pointer;color:var(--ink);line-height:0;
}
.burger2:hover{border-color:var(--accent);color:var(--accent)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(408px,88vw);z-index:90;
  background:var(--parchment);border-inline-start:1px solid var(--line);
  box-shadow:-30px 0 70px -30px rgba(22,36,61,.34);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease);
}
[dir="rtl"] .drawer{inset:0 auto 0 0;transform:translateX(-100%);border-inline:0 1px solid var(--line)}
.drawer.is-open{transform:none}
.drawer__top{
  display:flex;align-items:center;gap:1rem;padding:1rem var(--gutter);
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.drawer__close{
  margin-inline-start:auto;background:none;border:1px solid var(--line);
  border-radius:14px;padding:.55rem;cursor:pointer;color:var(--ink);line-height:0;
}
.drawer__body{overflow-y:auto;padding:.6rem var(--gutter) 1.2rem;flex:1}
.drawer__foot{
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:grid;gap:.6rem;flex-shrink:0;
}
.drawer__foot .btn{width:100%;justify-content:center}

.macc{border-bottom:1px solid var(--line)}
.macc__btn{
  width:100%;display:flex;align-items:center;gap:.6rem;
  background:none;border:0;padding:1.02rem .2rem;font:inherit;font-size:1.02rem;
  color:var(--ink);cursor:pointer;text-align:start;
}
.macc__btn .nav2__chev{margin-inline-start:auto;color:var(--muted)}
.macc__btn[aria-expanded="true"]{color:var(--accent)}
.macc__panel{padding:0 .2rem .9rem;display:grid;gap:.08rem}
.macc__panel a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-md);
  color:var(--ink-3);font-size:.95rem;
}
.macc__panel a:hover{background:var(--paper);color:var(--accent)}
.macc__panel a.is-sub{padding-inline-start:1.7rem;font-size:.89rem;position:relative}
.macc__panel a.is-sub::before{
  content:"";position:absolute;inset-inline-start:.85rem;top:50%;
  width:.42rem;height:1px;background:var(--line);
}
.macc--flat > a{display:block;padding:1.02rem .2rem;font-size:1.02rem;color:var(--ink)}
.macc--flat > a:hover{color:var(--accent)}

.scrim{
  position:fixed;inset:0;z-index:85;background:rgba(22,36,61,.42);
  backdrop-filter:blur(2px);
}

@media (max-width:1080px){
  /* Desktop carries a larger wordmark: at 1.55rem the mark filled only 22.7% of
     a 78px bar, against the 30-40% a header logo normally occupies, with 178px
     of unused space beside it. Below this width the bar shortens to 66px and
     the phone number drops, so the logo steps back down. */
  .logo{font-size:1.55rem}
  .nav2,.hdr2__tel{display:none}
  .burger2{display:inline-flex}
  .hdr2__in{height:66px;gap:1rem}
  .hdr2 .btn{padding:.6rem 1.05rem;font-size:.88rem}
}
@media (max-width:520px){
  .hdr2__cta .btn{display:none}
  .logo__mark{height:30px}
  .logo{font-size:1.3rem}
}

/* ---------- Footer ---------- */
.ftr2{background:var(--ink);color:var(--parchment);padding-block:clamp(3rem,6vw,4.75rem) 0}
.ftr2 .logo{--word:var(--parchment)}
.ftr2 .logo__mark{--stroke:var(--parchment);--bar:var(--accent)}

.ftr2__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.5fr 1fr;
  gap:clamp(1.8rem,3.4vw,3rem);align-items:start;
}
.ftr2__h{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;color:#8FA0BA;
  margin:0 0 1.15rem;
}
.ftr2__blurb{color:#B9C4D6;font-size:.95rem;line-height:1.8;margin:1.3rem 0 0;max-width:34ch}

.ftr2__list{display:grid;gap:.62rem;margin:0;padding:0;list-style:none}
.ftr2__list a{color:#C7D2E2;font-size:.94rem;transition:color .18s var(--ease)}
.ftr2__list a:hover{color:var(--parchment)}

/* The cities are the bulk of the site, so they get their own two-column block
   instead of a scrolling column of thirteen. */
/* display:block matters — .ftr2__list is a grid, and `columns` has no effect
   on a grid container, so the thirteen cities stacked in one long column. */
.ftr2__cities{display:block;columns:2;column-gap:1.5rem}
.ftr2__cities li{break-inside:avoid;margin-bottom:.62rem}

.ftr2__contact{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;color:#C7D2E2;font-size:.94rem}
.ftr2__contact a{color:var(--parchment);font-weight:500}
.ftr2__contact a:hover{color:var(--accent-light,#D9A188)}
.ftr2__row{display:flex;align-items:flex-start;gap:.6rem}
.ftr2__row svg{flex-shrink:0;margin-top:.28rem;color:#7E8DA6}

.ftr2__social{display:flex;gap:.5rem;margin-top:1.4rem}
.ftr2__social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:#C7D2E2;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.ftr2__social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.ftr2__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.13);
  padding-block:1.4rem 1.8rem;display:flex;gap:1rem 1.6rem;flex-wrap:wrap;align-items:center;
}
.ftr2__legal{color:#7E8DA6;font-size:.8rem;line-height:1.7;margin:0;max-width:76ch}
.ftr2__bar nav{margin-inline-start:auto;display:flex;gap:1.3rem}
.ftr2__bar nav a{color:#8FA0BA;font-size:.8rem}
.ftr2__bar nav a:hover{color:var(--parchment)}

@media (max-width:1080px){
  .ftr2__grid{grid-template-columns:1fr 1fr;gap:2.2rem}
  .ftr2__brand{grid-column:1/-1}
}
@media (max-width:560px){
  .ftr2__grid{grid-template-columns:1fr}
  .ftr2__cities{columns:2}
  .ftr2__bar nav{margin-inline-start:0;width:100%}
}