/* paamon-nav.css — self-contained standard site header (cream light bar).
   Purpose: give bespoke landing pages (guide, 8sec, career-compass, nashim)
   the exact same top nav as the rest of the site WITHOUT loading
   paamon-light.css (whose global !important rules would repaint the page).
   Everything here is scoped to .nav* / .lang-btn / .nav-actions and uses
   literal brand colors, so dropping this file onto any page only styles the
   nav. Pair with lang-switcher.js (burger + tagline + language) and
   paamon-bell-contact.js (the "לשיחת היכרות" CTA). Colors: teal #0E5A61,
   teal-deep #0B3B41, cream #FAF7F2, burgundy #7B1A3A, gold #C5A059. */

.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(250,247,242,.94);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(123,26,58,.18);
  padding:.9rem 1.25rem;
  box-shadow:0 4px 22px rgba(14,90,97,.10);
  font-family:'Heebo','Arial Hebrew',sans-serif;
  direction:rtl;
}
.nav *{box-sizing:border-box}
/* neutralize host-page list bullets / pseudo-markers that would otherwise
   leak into the nav items on pages with global li::before styling (e.g. nashim) */
.nav-links li::before,.nav-links li::after,.nav-brand::before,.nav-brand::after{content:none!important;display:none!important}
.nav-links,.nav-links li{list-style:none!important}
.nav-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative}
.nav-brand{font-weight:800;font-size:1.1rem;color:#0B3B41;display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav-brand img{height:28px;width:auto}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.08}
.nav-brand-tagline{font-family:'Frank Ruhl Libre','David Libre',serif;font-size:.64rem;font-weight:500;font-style:italic;color:#7B1A3A;letter-spacing:.4px;white-space:nowrap}
.nav-links a{color:inherit;text-decoration:none;transition:color .2s}
.nav-cta{background:#0E5A61;color:#fff!important;padding:.55rem 1.2rem;border-radius:999px;font-weight:700;transition:all .25s;text-decoration:none}
.nav-cta:hover{background:#0B3B41;transform:translateY(-1px)}
.lang-btn{background:transparent;border:1px solid rgba(11,59,65,.3);color:#0B3B41;padding:.32rem .9rem;border-radius:4px;font-family:'JetBrains Mono','SF Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:1.5px;cursor:pointer;transition:all .25s}
.lang-btn:hover{border-color:#7B1A3A;color:#7B1A3A}
.nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:transparent;border:0}
.nav-burger span{width:26px;height:3px;background:#7B1A3A;border-radius:2px;display:block}
.nav-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;margin-inline-start:auto}

/* close button + backdrop are injected by lang-switcher.js; hidden on desktop */
.nav-close{display:none}
.nav-backdrop{display:none}

/* ---- slide-in side drawer at ALL widths (2026-09 approved: hamburger on desktop too) ---- */
@media(max-width:99999px){
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(11,59,65,.42);opacity:0;visibility:hidden;transition:opacity .28s ease;z-index:290}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .nav-links{
    position:fixed;top:0;bottom:0;left:0;right:auto;height:100vh;height:100dvh;
    width:min(330px,85vw);max-width:none;
    display:flex;flex-direction:column;align-items:stretch;gap:0;list-style:none;margin:0;
    background:#FAF7F2;color:#0B3B41;border:0;border-radius:0;
    box-shadow:14px 0 46px rgba(14,90,97,.22);
    padding:1rem 1.15rem 2rem;overflow-y:auto;
    transform:translateX(-102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:300;font-size:1rem;font-weight:600
  }
  .nav-links.open{transform:none}
  /* lift .nav (the drawer's stacking-context ancestor) above the backdrop when
     open, so the drawer's links receive taps instead of the backdrop. */
  body.nav-open .nav{z-index:400!important}
  .nav-close{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:2.2rem;height:2.2rem;margin:0 0 .3rem;background:none;border:0;font-size:1.4rem;line-height:1;color:#0B3B41;cursor:pointer;border-radius:8px}
  .nav-close:hover{background:rgba(14,90,97,.08)}
  .nav-links>li{width:100%;border-bottom:1px solid rgba(14,90,97,.08)}
  .nav-links>li:last-child{border-bottom:0}
  .nav-links>li>a{display:block;padding:.85rem .2rem;font-weight:700;color:#0B3B41}
  .nav-links .dd>a{position:relative}
  .nav-links .sub{list-style:none;margin:.1rem 0 .45rem;padding-inline-start:1rem;display:flex;flex-direction:column;gap:.1rem}
  .nav-links .sub a{font-size:.92rem;opacity:.8;padding:.5rem .2rem;font-weight:500}
  .nav-links .nav-cta{display:inline-block;margin:1rem 0 0;text-align:center;background:#0E5A61;color:#fff;border-radius:999px;padding:.7rem 1.2rem}
  .lang-btn{margin-top:0}
}

/* ---- old horizontal desktop nav — disabled (unreachable breakpoint) so the
   drawer above is the nav on desktop too ---- */
@media(min-width:99999px){
  .nav-burger{display:none!important}
  .nav-links{display:flex!important;flex-direction:row!important;align-items:center!important;gap:.4rem!important;position:static!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;font-size:.92rem;font-weight:600}
  .nav-links>li{position:relative!important;border:0!important;width:auto}
  .nav-links>li>a:not(.nav-cta){display:inline-flex!important;align-items:center;gap:.35rem;padding:.5rem .9rem!important;border-radius:10px;white-space:nowrap;transition:background .16s,color .16s}
  .nav-links>li>a:not(.nav-cta):hover{background:rgba(14,90,97,.07)!important}
  .nav-links .dd>a::after{content:"";width:.62em;height:.62em;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5%206%208l3.5-3.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%204.5%206%208l3.5-3.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  /* submenu connects directly to the bar (top:100%, no dead gap) so moving the
     mouse from "ידע" down into the items never crosses a gap that closes it.
     A .35rem transparent top border on the parent link would also bridge it,
     but touching is simplest and reliable. */
  .nav-links .sub{position:absolute!important;top:100%;inset-inline-end:0;min-width:220px;background:#fff;border:1px solid rgba(14,90,97,.14);border-radius:12px;box-shadow:0 18px 40px rgba(14,90,97,.16);padding:.4rem;margin:0;list-style:none;display:flex!important;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(4px);transition:.16s;z-index:70}
  .nav-links .dd:hover .sub,.nav-links .dd:focus-within .sub{opacity:1;visibility:visible;transform:none}
  .nav-links .sub li{border:0!important;width:auto}
  .nav-links .sub a{padding:.55rem .8rem!important;border-radius:8px;white-space:nowrap;display:block;font-size:.9rem;opacity:1}
  .nav-links .sub a:hover{background:rgba(14,90,97,.07)!important}
  .nav-links .nav-cta{margin-inline-start:.7rem!important;white-space:nowrap!important;margin-block:0;display:inline-block}
}
@media(max-width:560px){.nav-brand-tagline{display:none!important}}