/* ==========================================================
   Paamon site shell for inner pages (SiteShell.astro).
   The same menu, mobile drawer, pulse strip, page head, dark closing band
   and footer as the homepage (paamon-home.css), isolated from each page's
   own CSS:
   - SiteShell puts every page's own CSS in the cascade layer "legacy";
     this file is unlayered, so it always wins over it.
   - Every shell block starts from the browser defaults (all: revert), so
     page rules like `nav{…}`, `section{…}` or `h2{…}` cannot leak in.
   - Variables are prefixed --ps-* so a page's own --navy/--muted etc.
     cannot repaint the shell.
   Keep visually in sync with paamon-home.css (nav, .mnav, .final, footer.site).
   ========================================================== */
:root{
  --ps-page:#FFFFFF; --ps-warm:#F6F3EE; --ps-navy:#1A2A5E; --ps-navy-deep:#13204A; --ps-burgundy:#7B1A3A;
  --ps-gold:#C5A059; --ps-gold-hover:#B8924C; --ps-muted:#565D78; --ps-line:rgba(26,42,94,.14);
  --ps-on-dark:#FFFFFF; --ps-on-dark-soft:rgba(250,247,242,.62);
  --ps-serif:'Frank Ruhl Libre','David Libre',Georgia,serif; --ps-sans:'Heebo',system-ui,sans-serif;
  --ps-gutter:clamp(1rem,4vw,2rem); --ps-max:1160px;
}

/* 1. isolate: every shell block and everything inside it starts from browser defaults */
:where(.ps-skip, #top, #top *, #mnavBackdrop, #mnav, #mnav *, .ps-head, .ps-head *, .bb--slim, .bb--slim ul, .bb--slim li, .bb--slim button, #contact, #contact *, footer.site, footer.site *){all:revert}
/* (the strip's SVG drawings are not reset: that would drop their shape and fill attributes) */
:where(.ps-skip, #top, #top *, #mnavBackdrop, #mnav, #mnav *, .ps-head, .ps-head *, #contact, #contact *, footer.site, footer.site *){box-sizing:border-box;margin:0;padding:0}
:where(#top, #mnav, .ps-head, #contact, footer.site){font-family:var(--ps-sans);font-size:1.0625rem;line-height:1.75;color:var(--ps-navy);-webkit-font-smoothing:antialiased;text-align:start}
:where(#top, #mnav, .ps-head, #contact, footer.site) a{color:inherit}
:where(#top, #mnav, .ps-head, #contact, footer.site) img{display:block;max-width:100%;height:auto}
:where(#top, #mnav, .ps-head, #contact, footer.site) :focus-visible{outline:3px solid var(--ps-burgundy);outline-offset:3px;border-radius:4px}
#contact :focus-visible{outline-color:var(--ps-gold)}
.ps-wrap{max-width:var(--ps-max);margin:0 auto;padding:0 var(--ps-gutter)}
html{overflow-x:clip}
/* `overflow-x:hidden` on body (set by some pages) would break the sticky menu; clip does not */
body{overflow-x:clip;overflow-y:visible}
/* the page wrapper: a page's own `main{…}` rule (e.g. max-width on the legal pages) must not squeeze the shell */
main#content{all:revert;display:block;width:auto;max-width:none;margin:0;padding:0;border:0;background:transparent;float:none;position:static}

/* skip link */
.ps-skip{position:absolute;top:-100px;inset-inline-start:1rem;background:var(--ps-navy);color:#fff;padding:.7rem 1.2rem;border-radius:8px;z-index:400;font:700 1rem var(--ps-sans);text-decoration:none}
.ps-skip:focus{top:.7rem}

/* 2. buttons (same as the homepage): gold fill for the primary action, quiet underline for the secondary */
.ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:.8rem 1.6rem;border-radius:999px;font:700 1rem/1.2 var(--ps-sans);text-decoration:none;cursor:pointer;border:0;transition:background-color .2s,box-shadow .2s;background:var(--ps-gold);color:var(--ps-navy)}
.ps-btn:hover{background:var(--ps-gold-hover)}
.ps-btn-quiet{display:inline-flex;align-items:center;font:700 1rem/1.2 var(--ps-sans);color:var(--ps-navy);padding:.3rem .4rem;text-decoration:none;box-shadow:inset 0 -2px 0 var(--ps-gold)}
.ps-btn-quiet:hover{box-shadow:inset 0 -3px 0 var(--ps-gold)}

/* 3. top menu */
nav.top#top{display:block;position:sticky;top:0;z-index:250;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ps-line)}
#top .in{max-width:var(--ps-max);margin:0 auto;padding:.75rem var(--ps-gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
#top .brand,#mnav .brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0}
#top .brand .blogo,#mnav .brand .blogo{height:28px;width:auto}
#top .brand .btext{display:flex;flex-direction:column;line-height:1.1}
#top .brand .bm{font-family:var(--ps-serif);font-weight:700;color:var(--ps-navy);font-size:1.3rem}
#top .brand .tag{font-size:.7rem;color:var(--ps-muted)}
@media(max-width:560px){#top .brand .tag{display:none}}
#top .menu{display:flex;align-items:center;gap:.2rem}
#top .menu .dd>button{font:inherit;background:none;border:0;cursor:pointer}
#top .menu>a,#top .menu .dd>a,#top .menu .dd>button{display:inline-flex;align-items:center;gap:.3rem;color:var(--ps-navy);text-decoration:none;font-size:.94rem;font-weight:500;padding:.5rem .75rem;border-radius:8px;line-height:1.75}
#top .menu>a:hover,#top .menu .dd>a:hover,#top .menu .dd>button:hover{background:rgba(26,42,94,.06)}
#top .menu .has::after{content:"";width:.5em;height:.5em;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;margin-inline-start:.15rem}
#top .menu .dd{position:relative;display:inline}
#top .menu .panel{position:absolute;top:100%;inset-inline-start:0;min-width:13rem;background:#fff;border:1px solid var(--ps-line);border-radius:12px;padding:.4rem;box-shadow:0 18px 40px rgba(26,42,94,.12);display:none;flex-direction:column;z-index:5}
#top .menu .dd:hover .panel,#top .menu .dd:focus-within .panel{display:flex}
#top .menu .dd-btn:focus-within .panel{display:none}
#top .menu .dd-btn:hover .panel,#top .menu .dd-btn.open .panel{display:flex}
#top .menu .panel a{display:block;padding:.55rem .8rem;border-radius:8px;text-decoration:none;font-size:.92rem;color:var(--ps-navy);white-space:nowrap}
#top .menu .panel a:hover{background:rgba(26,42,94,.06)}
#top .menu .cta{background:var(--ps-gold);color:var(--ps-navy);font-weight:700;margin-inline-start:.4rem;border-radius:999px;padding:.55rem 1.1rem}
#top .menu .cta:hover{background:var(--ps-gold-hover)}
#top .menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ps-burgundy);border-radius:0}
#top .bar-actions{display:none;align-items:center;gap:.5rem}
#top .bar-cta{background:var(--ps-gold);color:var(--ps-navy);font-weight:700;font-size:.9rem;text-decoration:none;padding:.5rem 1rem;border-radius:999px;line-height:1.5}
#top .lang-btn{font:600 .8rem var(--ps-sans);color:var(--ps-navy);background:transparent;border:1px solid var(--ps-line);border-radius:8px;padding:.4rem .6rem;cursor:pointer;letter-spacing:normal}
#top .menu .lang-btn{margin-inline-start:.3rem}
#top .hamb{width:42px;height:42px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
#top .hamb span{display:block;width:22px;height:2px;background:var(--ps-navy);border-radius:2px}
@media(max-width:1060px){#top .menu{display:none}#top .bar-actions{display:flex}}
@media(max-width:420px){#top .bar-cta{display:none}}

/* 4. mobile drawer */
#mnavBackdrop{display:block;position:fixed;inset:0;background:rgba(19,32,74,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:290}
#mnavBackdrop.open{opacity:1;pointer-events:auto}
#mnav{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(330px,88vw);background:var(--ps-page);z-index:300;padding:1rem 1.2rem 2rem;overflow-y:auto;transform:translateX(105%);transition:transform .3s;display:flex;flex-direction:column;visibility:hidden}
#mnav.open{transform:none;visibility:visible}
html[dir="ltr"] #mnav:not(.open){transform:translateX(-105%)}
#mnav .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
#mnav .x{width:40px;height:40px;border:0;background:rgba(26,42,94,.06);border-radius:50%;font-size:1rem;color:var(--ps-navy);cursor:pointer}
#mnav a{display:block;padding:.65rem .2rem;color:var(--ps-navy);text-decoration:none;font-weight:500;border-bottom:1px solid var(--ps-line)}
#mnav .top a,#mnav .brand{border:0;padding:0}
#mnav a.sub{padding-inline-start:1rem;font-weight:400;color:var(--ps-muted)}
#mnav .grp{margin-top:1rem;padding:.2rem;font-size:.875rem;color:var(--ps-burgundy);font-weight:700}
#mnav .mcta{margin-top:1.4rem;text-align:center;background:var(--ps-gold);color:var(--ps-navy);font-weight:700;border-radius:999px;border:0}

/* 5. clean page head: title + one sentence on white (like /how/ and /about/) */
.ps-head{display:block;background:var(--ps-page);padding:clamp(3rem,7vw,5rem) 0 clamp(2.4rem,5vw,3.4rem)}
.ps-head h1{display:block;font-family:var(--ps-serif);font-weight:700;color:var(--ps-navy);font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.ps-head p{display:block;font-size:1.25rem;line-height:1.6;color:var(--ps-muted);margin-top:1rem;max-width:40rem}
.ps-head .ps-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem}
.ps-head .ps-note{font-size:.95rem;color:var(--ps-muted)}
/* English-only note in the page head (legal pages: the Hebrew is binding; trainings: delivered in Hebrew) */
.ps-head .ps-en-note{display:none}
html[lang="en"] .ps-head .ps-en-note{display:block;margin:0 0 1.2rem;padding:.6rem .9rem;max-width:40rem;font-size:.95rem;line-height:1.5;color:var(--ps-navy);background:var(--ps-warm,#F6F3EE);border-inline-start:3px solid var(--ps-burgundy);border-radius:4px}
/* trainings stay in Hebrew: their content keeps right-to-left when the page is in English */
.ps-he{display:contents}

/* 6. pulse strip: the strip's own look lives in paamon-banner.css; here only isolation */
.bb--slim{display:block}

/* 7. dark closing band */
#contact.final{display:block;background:var(--ps-navy);color:var(--ps-on-dark);padding:clamp(4.5rem,10vw,7.5rem) 0;text-align:center}
#contact .wrap{max-width:var(--ps-max);margin:0 auto;padding:0 var(--ps-gutter)}
#contact h2{font-family:var(--ps-serif);font-weight:700;color:var(--ps-on-dark);font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.15;letter-spacing:-.01em;margin:0 auto;max-width:24ch;text-wrap:balance}
#contact p{color:var(--ps-on-dark-soft);font-size:1.25rem;margin:1rem auto 2rem;max-width:34rem}
#contact .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:.8rem 1.6rem;border-radius:999px;font:700 1rem/1.2 var(--ps-sans);text-decoration:none;cursor:pointer;border:0;transition:background-color .2s;background:var(--ps-gold);color:var(--ps-navy)}
#contact .btn:hover{background:var(--ps-gold-hover)}

/* 8. footer */
footer.site{display:block;background:var(--ps-page);padding:3rem 0 2.4rem;font-size:.875rem;color:var(--ps-muted)}
footer.site .wrap{max-width:var(--ps-max);margin:0 auto;padding:0 var(--ps-gutter)}
footer.site .flinks{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1.2rem}
footer.site .flinks a{color:var(--ps-navy);text-decoration:none;font-weight:500}
footer.site .flinks a:hover{text-decoration:underline}
footer.site .fc{display:block}
footer.site .fc a{color:var(--ps-navy);text-decoration:underline}

/* 9. one look for every primary action inside page content: contact, sign-up, register.
   Gold fill, navy text, pill (like .btn-primary on the homepage). The page's own
   rules keep size and spacing; the shell sets colour and shape, so every page
   matches. WhatsApp and Spotify keep their own colours (not listed here). */
main#content :is(.wk-cta, .meeting-cta, .form-submit, .exposure-btn, .hero-cta, .pricing-cta, .p-hero-cta, .p-price-cta, .btn-gold, .gsubmit, .pod-btn.yt, a.btn:not(.btn-ghost)):not(#contact *):not(.ps-head *){
  background:var(--ps-gold);color:var(--ps-navy);border:0;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:none;text-shadow:none}
main#content :is(.wk-cta, .meeting-cta, .form-submit, .exposure-btn, .hero-cta, .pricing-cta, .p-hero-cta, .p-price-cta, .btn-gold, .gsubmit, .pod-btn.yt, a.btn:not(.btn-ghost)):not(#contact *):not(.ps-head *) *{color:inherit}
main#content :is(.wk-cta, .meeting-cta, .form-submit, .exposure-btn, .hero-cta, .pricing-cta, .p-hero-cta, .p-price-cta, .btn-gold, .gsubmit, .pod-btn.yt, a.btn:not(.btn-ghost)):not(#contact *):not(.ps-head *):is(:hover, :focus-visible){background:var(--ps-gold-hover);color:var(--ps-navy)}
/* secondary actions: navy outline, no fill */
main#content .btn-ghost:not(.dark *):not(.hero *){background:transparent;color:var(--ps-navy);border:1.5px solid var(--ps-navy);border-radius:999px}