/* Base elements, layout shell, navigation, footer. */
/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
/* The hidden attribute always wins. Any author display (e.g. .grid's
   display:grid) silently overrides the UA's [hidden]{display:none} — which is
   how the parent-consent block rendered on "Myself" signups. One global guard
   ends the whole class of bug. */
[hidden]{display:none !important}
html,body{margin:0; max-width:100%; overflow-x:clip}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Hanken Grotesk','Shidduch Hebrew',system-ui,-apple-system,'Segoe UI','Noto Sans Hebrew','Arial Hebrew',sans-serif; line-height:1.6;
  font-size:16px;
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'Newsreader','Frank Ruhl Libre',Georgia,'Noto Serif Hebrew',serif; font-weight:600; line-height:1.15;
  margin:.2em 0; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:clamp(1.9rem,6vw,2.6rem)}
em{font-style:italic}
img{max-width:100%}
:focus-visible{outline:3px solid rgba(39,75,102,.4); outline-offset:2px; border-radius:4px}
::selection{background:var(--tint-line)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

.wrap{width:100%; max-width:1040px; margin:0 auto; padding:26px 18px 48px; flex:1}
.muted{color:var(--muted)}
.hint{color:var(--muted); font-weight:400; font-size:.86em}
.sub{color:var(--muted); margin-top:.35em; font-size:1.02rem; max-width:60ch}
.back{display:inline-block; margin-bottom:14px; font-weight:600; font-size:.92rem}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-bar{display:flex; align-items:center; gap:12px;
  max-width:1040px; margin:0 auto; padding:12px 18px; min-height:64px}
.brand{font-family:'Newsreader',serif; font-size:1.6rem; font-weight:500; color:var(--ink);
  letter-spacing:-.01em; line-height:1}
.brand:hover{text-decoration:none; color:var(--accent-800)}
.brand .dot{color:var(--gold)}
/* "Beta" reads as a small subscript badge tucked just below the wordmark baseline.
   Its auto right-margin pushes the nav to the right. */
.beta-tag{font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-700); background:var(--tint); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:2px 7px; line-height:1.3;
  align-self:flex-end; margin:0 auto 8px -3px}
/* MDY logo sits to the LEFT of the "Shidduch" wordmark. */
.mdy-logo{width:auto; height:36px; object-fit:contain}
.nav-quick{display:flex; align-items:center; gap:6px}
/* Language toggle: a quiet pill showing the OTHER language's own name. */
.lang-form{display:flex; margin:0}
.lang-toggle{border:1px solid var(--line-strong); background:#fff; color:var(--accent-700);
  font-family:inherit; font-weight:600; font-size:.85rem; cursor:pointer;
  border-radius:var(--r-pill); padding:6px 11px; min-height:34px; line-height:1; white-space:nowrap}
.lang-toggle:hover{border-color:var(--accent); background:var(--tint)}
.bell{position:relative; color:var(--ink-soft); text-decoration:none;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  transition:background .15s}
.bell svg{display:block}
.bell:hover{color:var(--accent-700)}
.bell:hover{text-decoration:none; background:var(--tint)}
.bell-badge{position:absolute; top:4px; right:2px; background:var(--accent-600); color:#fff;
  font-size:.66rem; font-weight:700; min-width:18px; height:18px; line-height:18px; text-align:center;
  border-radius:var(--r-pill); padding:0 4px; box-shadow:0 0 0 2px var(--bg)}
.nav-toggle{display:grid; place-items:center; width:44px; height:44px; border:0; background:none;
  cursor:pointer; border-radius:var(--r-sm); padding:0}
.nav-toggle:hover{background:var(--tint)}
.nav-toggle .bars{display:block; position:relative; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:background .15s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:""; position:absolute; left:0; width:20px;
  height:2px; background:var(--ink); border-radius:2px; transition:transform .2s var(--ease), top .2s var(--ease)}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
body.nav-open .nav-toggle .bars{background:transparent}
body.nav-open .nav-toggle .bars::before{top:0; transform:rotate(45deg)}
body.nav-open .nav-toggle .bars::after{top:0; transform:rotate(-45deg)}
.nav-links{display:none; flex-direction:column; align-items:stretch; gap:2px;
  position:absolute; top:100%; left:0; right:0; z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  padding:10px 14px 16px}
body.nav-open .nav-links{display:flex; animation:navDrop .22s var(--ease)}
@keyframes navDrop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.nav-links a{color:var(--ink-soft); font-weight:600; padding:12px 12px; border-radius:var(--r-sm);
  min-height:44px; display:flex; align-items:center}
.nav-links a:hover{color:var(--ink); background:var(--tint); text-decoration:none}
/* "Shadchan login" is a different user type — set it apart from Join / Log in. */
.nav-links .nav-apart{margin-top:6px; padding-top:10px; border-top:1px solid var(--line)}
.switcher{width:auto; margin:6px 0; padding:10px 14px; font-size:max(16px,1rem); border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:#fff; font-weight:600; color:var(--accent-700);
  cursor:pointer; min-height:44px}
.nav-quick .btn-sm{min-height:44px; white-space:nowrap}
/* Small phones: the logo + wordmark + Beta + Sign up + menu button exceeded the
   viewport (no flex-wrap, nothing shrinkable) and pushed a page-wide horizontal
   scroll. Tighten every piece below 480px so the bar always fits. */
.brand{min-width:0}
@media(max-width:479px){
  .nav-bar{gap:8px; padding:10px 12px}
  .beta-tag{display:none}
  .mdy-logo{height:30px}
  .brand{font-size:1.32rem}
  .nav-quick{margin-inline-start:auto}
  .nav-quick .btn-sm{padding:8px 14px; font-size:.88rem}
}
@media(min-width:840px){
  .nav-toggle{display:none}
  .nav-links{display:flex !important; position:static; flex-direction:row; align-items:center; gap:4px;
    border-bottom:0; box-shadow:none; background:none; padding:0; margin:0 4px 0 0; animation:none}
  .nav-links a{padding:8px 13px; min-height:0}
  .nav-links .nav-apart{margin-top:0; padding-top:8px; border-top:0;
    margin-inline-start:6px; padding-inline-start:14px; border-inline-start:1px solid var(--line)}
  .nav-bar{gap:8px}
  .switcher{margin:0 4px; padding:7px 12px; min-height:38px; font-size:.9rem; border-radius:var(--r-pill)}
}

/* ==================================================== RTL (Hebrew) overrides
   Logical properties throughout (margin/padding/border/text-align/float) flip
   automatically and render identically in LTR. This block covers only what they
   can't: absolute-positioned decorations that must move to the mirror side, and
   directional glyphs. Everything here is scoped to [dir=rtl], so LTR is untouched. */
[dir=rtl] .bell-badge{right:auto; left:2px}
[dir=rtl] .lb-close{right:auto; left:18px}
[dir=rtl] .lb-prev{left:auto; right:16px}
[dir=rtl] .lb-next{right:auto; left:16px}
[dir=rtl] .lb-nav{transform:translateY(-50%) scaleX(-1)}   /* mirror the ‹ › glyph */
[dir=rtl] .pending-photos .pp-x{right:auto; left:-8px}
[dir=rtl] .hv-toast{right:auto; left:0; transform:rotate(-2deg)}
[dir=rtl] .audience-list li::before{left:auto; right:2px}
[dir=rtl] .audience-list li.yes::after{left:auto; right:5.5px}
[dir=rtl] .hiw-step::before{left:auto; right:26px}
[dir=rtl] .mc-line li::before{left:auto; right:0}
[dir=rtl] .hh-underline{left:auto; right:-2%}
[dir=rtl] .score{right:auto; left:12px}
[dir=rtl] .tab-badge{right:auto; left:-8px}
/* Back link's arrow, as a direction-aware pseudo (the literal "← " was removed from
   the markup) so it points the correct way and isn't part of the translated text. */
.back::before{content:"\2190\00a0"}
[dir=rtl] .back::before{content:"\00a0\2192"}