/* Site header, mega menu, mobile drawer and footer. Figma "חישובים.ישראל | Mega Menu UX UI" (1.11.2026).
   Prefix gsn- (navigation) and gsf- (footer). Mobile first, RTL. Loaded on every page next to the theme's own CSS. */

:root {
  --gsn-navy: #152d53;
  --gsn-green: #0c936a;
  --gsn-mint: #e6f7f0;
  --gsn-paper: #f3fbf8;
  --gsn-line: #dfe9e5;
  --gsn-muted: #63788a;
  --gsn-teal: #42A58C;
  --gsn-font: "Rubik", "Alef", Arial, sans-serif;
  --gsn-h: 72px;
  --gsn-shadow: 0 20px 21px rgba(15, 43, 51, .17);
  --gsn-shadow-sm: 0 12px 14px rgba(10, 38, 46, .16);
}

.gsn-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gsn-skip { position: absolute; top: -100px; right: 16px; background: var(--gsn-navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 1100; font-family: var(--gsn-font); }
.gsn-skip:focus { top: 12px; }
.gsn-ic { flex: none; display: block; }

/* ---------- Header bar ---------- */
.gsn-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 1px 0 var(--gsn-line); font-family: var(--gsn-font); direction: rtl; color: var(--gsn-navy); }
body.admin-bar .gsn-header { top: 32px; }
.gsn-header *, .gsn-header *::before, .gsn-header *::after { box-sizing: border-box; }
header.gsn-header button, header.gsn-header button:hover, header.gsn-header button:focus, header.gsn-header button:active,
div.gsn-drawer button, div.gsn-drawer button:hover, div.gsn-drawer button:focus, div.gsn-drawer button:active { font: inherit; font-family: var(--gsn-font); color: inherit; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: inherit; }
header.gsn-header a, header.gsn-header a:hover, header.gsn-header a:focus, div.gsn-drawer a, div.gsn-drawer a:hover { text-decoration: none; color: inherit; }
.gsn-header :focus-visible, .gsn-drawer :focus-visible { outline: 3px solid var(--gsn-green); outline-offset: 2px; border-radius: 8px; }
.gsn-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--gsn-h); padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); max-width: 1600px; margin: 0 auto; }
.gsn-logo { display: inline-flex; align-items: center; flex: none; }
.gsn-header .gsn-logo img { display: block; width: auto; height: 44px; max-width: none; }
.gsn-nav { display: none; }
.gsn-burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: var(--gsn-navy); }
.gsn-burger-bars { display: inline-flex; flex-direction: column; gap: 5px; }
.gsn-burger-bars i { display: block; width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.gsn-burger[aria-expanded="true"] .gsn-burger-bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.gsn-burger[aria-expanded="true"] .gsn-burger-bars i:nth-child(2) { opacity: 0; }
.gsn-burger[aria-expanded="true"] .gsn-burger-bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobile drawer (drill-down) ---------- */
html.gsn-lock { overflow: hidden; }
html.gsn-lock body { position: fixed; width: 100%; overflow: hidden; }
.gsn-drawer { position: fixed; inset: 0; z-index: 1200; font-family: var(--gsn-font); direction: rtl; color: var(--gsn-navy); }
.gsn-drawer[hidden] { display: none; }
.gsn-scrim { position: absolute; inset: 0; background: rgba(236, 247, 243, .78); opacity: 0; transition: opacity .2s; }
.gsn-drawer-box { position: absolute; top: 0; bottom: 0; right: 0; width: min(362px, 93vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease-out; box-shadow: -8px 0 32px rgba(15, 43, 51, .14); }
.gsn-drawer.is-open .gsn-scrim { opacity: 1; }
.gsn-drawer.is-open .gsn-drawer-box { transform: none; }
@media (prefers-reduced-motion: reduce) { .gsn-drawer-box, .gsn-scrim { transition: none; } }
.gsn-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 92px; padding: 0 18px 0 14px; border-bottom: 1px solid var(--gsn-line); margin: 0 18px; padding-inline: 0; }
.gsn-drawer .gsn-drawer-logo img { display: block; width: auto; height: 40px; max-width: none; }
.gsn-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--gsn-navy); }
.gsn-levels { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 13px 12px; }
.gsn-level[hidden] { display: none; }
.gsn-level-head { position: relative; padding: 18px 8px 10px 36px; }
.gsn-back { position: absolute; left: 0; top: 14px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--gsn-navy); }
.gsn-header p.gsn-eyebrow, .gsn-drawer p.gsn-eyebrow { font-size: 12px; line-height: 1.4; color: var(--gsn-muted); margin: 0 0 8px; }
.gsn-drawer h2.gsn-level-title { font-family: var(--gsn-font); font-size: 25px; line-height: 1.35; font-weight: 700; color: var(--gsn-navy); margin: 0; }
.gsn-drawer h2.gsn-level-title:focus { outline: none; }
.gsn-drawer p.gsn-level-sub { font-size: 13px; line-height: 1.4; color: var(--gsn-muted); margin: 8px 0 0; }
.gsn-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.gsn-rows > li + li { border-top: 1px solid var(--gsn-line); }
.gsn-drawer a.gsn-mrow, .gsn-drawer button.gsn-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 55px; padding: 8px 10px; border-radius: 10px; font-size: 16px; font-weight: 500; line-height: 1.38; color: var(--gsn-navy); text-align: right; }
.gsn-mrow .gsn-ic { width: 18px; height: 18px; color: var(--gsn-green); }
.gsn-drawer a.gsn-mrow:hover, .gsn-drawer button.gsn-mrow:hover, .gsn-drawer .gsn-mrow:active { background: var(--gsn-paper); color: var(--gsn-navy); }
.gsn-drawer .gsn-mrow.is-current { color: var(--gsn-green); font-weight: 700; }
.gsn-drawer a.gsn-mrow.is-self { color: var(--gsn-green); }
.gsn-drawer-cta { flex: none; margin: 8px 15px calc(15px + env(safe-area-inset-bottom, 0px)); background: var(--gsn-paper); border-radius: 16px; padding: 12px 12px; }
.gsn-drawer p.gsn-drawer-cta-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-align: center; color: var(--gsn-navy); }
.gsn-header a.gsn-wa-btn, .gsn-drawer a.gsn-wa-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 59px; padding: 10px 16px; background: var(--gsn-green); color: #fff; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; }
.gsn-header a.gsn-wa-btn:hover, .gsn-drawer a.gsn-wa-btn:hover, .gsn-header a.gsn-wa-btn:focus, .gsn-drawer a.gsn-wa-btn:focus { background: #0a7f5c; color: #fff; }
.gsn-wa-btn .gsn-ic { width: 25px; height: 25px; }

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
  :root { --gsn-h: 92px; }
  .gsn-burger, .gsn-drawer { display: none; }
  .gsn-bar { gap: 28px; justify-content: flex-start; padding: 0 max(24px, 2.4vw); }
  .gsn-header .gsn-logo img { height: 56px; }
  .gsn-nav { display: block; flex: 1 1 auto; min-width: 0; }
  .gsn-top { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
  .gsn-item { position: relative; }
  .gsn-item.is-mega { position: static; }

  .gsn-header .gsn-pill { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 13px; border-radius: 26px; font-size: 17px; font-weight: 500; color: var(--gsn-navy); white-space: nowrap; transition: background .15s, color .15s; }
  .gsn-pill .gsn-ic { width: 18px; height: 18px; color: var(--gsn-green); transition: transform .15s; }
  .gsn-pill-split { padding: 0; }
  .gsn-header .gsn-pill-split a.gsn-pill-link { display: inline-flex; align-items: center; height: 52px; padding: 0 6px 0 20px; border-radius: 26px 0 0 26px; }
  .gsn-pill-split .gsn-pill-toggle { display: inline-flex; align-items: center; justify-content: center; height: 52px; width: 38px; padding: 0 13px 0 6px; border-radius: 0 26px 26px 0; }
  .gsn-header .gsn-pill-split a.gsn-pill-link:hover, .gsn-header .gsn-pill-split button.gsn-pill-toggle:hover { background: var(--gsn-paper); color: var(--gsn-green); }
  .gsn-header .gsn-item:hover > .gsn-pill, .gsn-header .gsn-item.is-current > .gsn-pill, .gsn-header .gsn-item.is-current > .gsn-pill a { color: var(--gsn-green); }
  .gsn-item.is-open > .gsn-pill, .gsn-item.is-open > .gsn-pill .gsn-pill-link, .gsn-item.is-open > .gsn-pill .gsn-pill-toggle { background: var(--gsn-mint); color: var(--gsn-green); font-weight: 700; }
  .gsn-item.is-open > .gsn-pill .gsn-ic { transform: rotate(-90deg); }

  /* Panels: the wrapper carries the invisible bridge between the pill and the panel, so the pointer never leaves the item. */
  .gsn-panel { position: absolute; top: 100%; z-index: 1001; }
  .gsn-panel[hidden] { display: none; }
  .gsn-panel-in { background: #fff; direction: rtl; overflow: auto; overscroll-behavior: contain; }

  /* Simple dropdown */
  .gsn-simple { inset-inline-start: 0; padding-top: 22px; }
  .gsn-simple .gsn-panel-in { width: 360px; border-radius: 14px; box-shadow: var(--gsn-shadow-sm); padding: 10px 12px; }
  .gsn-simple-list { list-style: none; margin: 0; padding: 0; }
  .gsn-simple-list > li + li { border-top: 1px solid var(--gsn-line); }
  .gsn-simple-list .gsn-link { min-height: 50px; }

  /* Mega panel */
  .gsn-mega { inset-inline: clamp(16px, 4.4vw, 70px); padding-top: 20px; }
  .gsn-mega .gsn-panel-in { display: grid; grid-template-columns: 222px minmax(0, 1fr) 280px; gap: 0 22px; border-radius: 24px; box-shadow: var(--gsn-shadow); padding: 22px 24px; max-height: calc(100vh - var(--gsn-h) - 36px); }
  .gsn-header p.gsn-col-title { margin: 8px 0 18px; font-size: 19px; font-weight: 700; color: var(--gsn-navy); }
  .gsn-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .gsn-col-l2 { border-left: 1px solid var(--gsn-line); padding-left: 22px; overflow-y: auto; }
  .gsn-col-list .gsn-row { position: relative; display: flex; align-items: center; min-height: 52px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--gsn-navy); }
  .gsn-header .gsn-col-list button.gsn-row-btn, .gsn-header .gsn-col-list a.gsn-row-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 auto; min-height: 52px; padding: 6px 15px 6px 12px; border-radius: 10px; text-align: right; color: inherit; }
  .gsn-col-list .gsn-row-btn.is-aside { flex: none; width: 40px; justify-content: center; padding: 0 12px 0 8px; }
  .gsn-col-list .gsn-row .gsn-ic { width: 16px; height: 16px; color: var(--gsn-green); }
  .gsn-col-list .gsn-row:hover { background: var(--gsn-paper); }
  .gsn-header .gsn-col-list .gsn-row.is-selected, .gsn-header .gsn-col-list .gsn-row.is-selected a, .gsn-header .gsn-col-list .gsn-row.is-selected button { background: var(--gsn-mint); color: var(--gsn-green); font-weight: 700; }
  .gsn-header .gsn-col-list .gsn-row.is-selected a:hover, .gsn-header .gsn-col-list .gsn-row.is-selected button:hover { background: transparent; }
  .gsn-col-list .gsn-row.is-selected::before { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--gsn-green); }
  .gsn-col-list .gsn-row.is-current:not(.is-selected) { color: var(--gsn-green); }
  .gsn-col-l3 .gsn-col-list .gsn-row { min-height: 49px; border-radius: 9px; }
  .gsn-col-l3 .gsn-col-list .gsn-row-btn, .gsn-col-l3 .gsn-col-list .gsn-row-link { min-height: 49px; }

  .gsn-stages { min-width: 0; display: flex; flex-direction: column; }
  .gsn-stage { display: flex; flex-direction: column; min-height: 0; }
  .gsn-stage[hidden] { display: none; }
  .gsn-stage-head { padding: 4px 2px 18px; }
  .gsn-header .gsn-stage-head p.gsn-eyebrow { display: block; font-size: 13px; color: var(--gsn-green); margin: 0 0 6px; }
  .gsn-header p.gsn-stage-title { margin: 0 0 6px; font-size: 31px; line-height: 1.3; font-weight: 700; color: var(--gsn-navy); }
  .gsn-header p.gsn-path { margin: 0; font-size: 14px; color: var(--gsn-muted); }
  .gsn-path-sep { margin: 0 8px; }
  .gsn-stage-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 26px; min-height: 0; border-top: 1px solid var(--gsn-line); padding-top: 18px; }
  .gsn-stage-body:has(.gsn-col-l3) { grid-template-columns: 207px minmax(0, 1fr); }
  .gsn-col-l3 { border-left: 1px solid var(--gsn-line); padding-left: 16px; overflow-y: auto; }
  .gsn-grids { min-width: 0; overflow-y: auto; }
  .gsn-grid[hidden] { display: none; }
  .gsn-header p.gsn-grid-title { margin: 4px 0 14px; font-size: 21px; font-weight: 700; color: var(--gsn-navy); }
  .gsn-grid.is-only .gsn-grid-title { display: none; }
  .gsn-links { list-style: none; margin: 0; padding: 0; }
  .gsn-grid > .gsn-links { columns: 2; column-gap: 30px; }
  .gsn-grid > .gsn-links > li { break-inside: avoid; }
  .gsn-links-sub { margin-right: 12px; }
  .gsn-header a.gsn-link, .gsn-header span.gsn-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 8px 6px 7px; border-bottom: 1px solid var(--gsn-line); border-radius: 6px 6px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--gsn-navy); }
  .gsn-link .gsn-ic { width: 16px; height: 16px; color: var(--gsn-green); opacity: .9; }
  .gsn-header a.gsn-link:hover, .gsn-header a.gsn-link:focus { background: var(--gsn-paper); color: var(--gsn-green); }
  .gsn-header a.gsn-link[aria-current="page"], .gsn-header .gsn-links li.is-current > a.gsn-link { color: var(--gsn-green); font-weight: 700; }
  .gsn-header a.gsn-link.is-self { color: var(--gsn-green); }
  .gsn-header span.gsn-link.is-plain { color: var(--gsn-muted); }
  .gsn-group { padding-top: 6px; }
  .gsn-group-title { display: block; padding: 10px 8px 4px; font-size: 14px; font-weight: 700; color: var(--gsn-muted); }

  /* WhatsApp community promo (left column) */
  .gsn-promo { background: var(--gsn-paper); border-radius: 20px; padding: 32px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; align-self: start; }
  .gsn-promo-ic { width: 92px; height: 92px; border-radius: 50%; background: var(--gsn-mint); display: inline-flex; align-items: center; justify-content: center; color: var(--gsn-green); margin-bottom: 26px; }
  .gsn-promo-ic .gsn-ic { width: 40px; height: 40px; }
  .gsn-header p.gsn-promo-title { margin: 0 0 18px; font-size: 23px; line-height: 1.4; font-weight: 700; color: var(--gsn-navy); }
  .gsn-header p.gsn-promo-text { margin: 0 0 34px; font-size: 16px; line-height: 1.4; color: var(--gsn-muted); }
  .gsn-promo .gsn-wa-btn { width: 100%; min-height: 64px; border-radius: 14px; font-size: 17px; }
  .gsn-promo .gsn-wa-btn .gsn-ic { width: 27px; height: 27px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .gsn-pill { font-size: 15px; padding: 0 14px 0 10px; height: 46px; gap: 8px; }
  .gsn-pill-split .gsn-pill-link { height: 46px; padding-left: 14px; }
  .gsn-pill-split .gsn-pill-toggle { height: 46px; }
  .gsn-mega .gsn-panel-in { grid-template-columns: 200px minmax(0, 1fr) 240px; gap: 0 16px; }
  .gsn-stage-body:has(.gsn-col-l3) { grid-template-columns: 190px minmax(0, 1fr); }
  .gsn-grid > .gsn-links { columns: 1; }
}
@media (min-width: 1440px) {
  :root { --gsn-h: 108px; }
  .gsn-header .gsn-logo img { height: 64px; }
  .gsn-pill { font-size: 18px; }
  .gsn-bar { gap: 34px; }
}
@media (max-width: 782px) { body.admin-bar .gsn-header { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .gsn-pill, .gsn-pill .gsn-ic, .gsn-burger-bars i { transition: none; } }

/* ---------- Footer (menus at the locations gsc-footer and gsc-legal) ---------- */
.gsf { background: #fff; color: #0D1934; border-top: 1px solid rgba(22, 43, 89, .08); font-family: var(--gsn-font); direction: rtl; margin-top: 40px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.gsf *, .gsf *::before, .gsf *::after { box-sizing: border-box; }
.gsf a { color: #162B59; text-decoration: none; }
.gsf a:hover { color: var(--gsn-green); text-decoration: underline; }
.gsf-in { max-width: 1600px; margin: 0 auto; padding: 32px 5% 16px; display: grid; grid-template-columns: 1fr; gap: 28px; }
.gsf .gsf-logo img { display: block; width: 220px; max-width: 100%; height: auto; }
.gsf-disclaimer { margin: 18px 0 0; font-size: 17px; line-height: 1.6; max-width: 46ch; }
.gsf-cta { margin-top: 22px; background: var(--gsn-teal); border-radius: 12px; padding: 28px 24px; text-align: center; }
.gsf-cta-title { margin: 0; font-family: "Alef", "Rubik", sans-serif; font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; }
.gsf-cta-btn { display: inline-block; margin-top: 16px; background: #fff; color: #162B59; font-family: "Alef", "Rubik", sans-serif; font-size: 18px; font-weight: 700; line-height: 1; padding: 12px 24px; border-radius: 4px; }
.gsf-cta-btn:hover { background: var(--gsn-paper); text-decoration: none; }
.gsf-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 20px; align-content: start; }
.gsf h2.gsf-col-title { margin: 0 0 8px; font-family: var(--gsn-font); font-size: 22px; line-height: 1.4; font-weight: 500; color: #5CB883; }
.gsf-col-title a { color: inherit; }
.gsf-list { list-style: none; margin: 0; padding: 0; }
.gsf-list li { font-size: 17px; line-height: 1.6; color: #162B59; }
.gsf-bottom { width: 90%; max-width: 1360px; margin: 0 auto; border-top: 1px solid rgba(22, 43, 89, .08); padding: 22px 0 26px; text-align: center; }
.gsf-copy { margin: 0 0 10px; font-family: "Alef", "Rubik", sans-serif; font-size: 18px; font-weight: 700; color: #162B59; }
.gsf-legal { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 0; font-size: 16px; }
.gsf-legal li + li::before { content: "|"; margin: 0 10px; color: #162B59; }
@media (min-width: 768px) { .gsf-in { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; } }
@media (min-width: 1200px) { .gsf-in { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; } .gsf-cols { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }