/*
 * GORALi — shared styles for the support, privacy and account-deletion
 * pages, and the site root.
 *
 * These are documents, not dashboards, so the typography carries them: a
 * fixed masthead, a title band, a sticky section index, and sections divided
 * by space and hairlines rather than boxed into cards. Panels are reserved
 * for the few places a box means something — a warning, an aside, a table.
 *
 * Palette and type come from the app itself: colours from
 * lib/core/constants/app_colors.dart, and Rubik, the app's own UI face,
 * which carries Hebrew as well as Latin. Everything is a token with a dark
 * counterpart; a literal inside a rule would survive into dark mode and put
 * one theme's text on the other theme's ground. Spacing is logical
 * throughout, so the Hebrew RTL layout mirrors without a second stylesheet.
 */

:root{
  --brand:#1976D2; --brand-ink:#0F5CA8; --gold:#FFC93C;
  /* #A9E5FD is AppColors.third and the launch-screen colour on both
     platforms (android launch_background.xml, iOS LaunchScreen.storyboard).
     It is the first thing every user of the app sees. */
  --sky:#A9E5FD; --on-sky:#14304F; --sky-soft:#3A5573; --sky-hover:rgba(20,48,79,.09);
  --paper:#FCFDFF; --tint:#E3F4FE; --panel:#F1F8FE;
  --ink:#16233A; --ink-soft:#55677E; --line:#DDE7F2; --hair:#EDF3F9;
  --danger:#A3241D; --danger-tint:#FDEDEB;
  --ok:#0B6E52;
  --measure:68ch;
  --shell:1120px;
  --focus:#0B62C4;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#5AA9F0; --brand-ink:#9CC9F7; --gold:#FFD05C;
    --sky:#12314F; --on-sky:#E4F1FB; --sky-soft:#A9BDD4; --sky-hover:rgba(228,241,251,.10);
    --paper:#0B1220; --tint:#132539; --panel:#141F31;
    --ink:#E8EEF7; --ink-soft:#9FB0C6; --line:#24344B; --hair:#1A2739;
    --danger:#FFB4AE; --danger-tint:#341412;
    --ok:#6FDCB6;
    --focus:#8CC6FA;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-block-start:78px}
body{
  /* Column so .site-footer's margin-block-start:auto pins it to the bottom
     of short pages instead of floating mid-screen. */
  margin:0; min-block-size:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;
  font-weight:300; font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:3px}
img{max-inline-size:100%}

.skip{
  position:absolute; inset-inline-start:-9999px; inset-block-start:0; z-index:60;
  background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{inset-inline-start:0}

/* Only the active language is shown; all three stay in the document. */
[data-l]{display:none}
html[data-lang="he"] [data-l="he"],
html[data-lang="fr"] [data-l="fr"],
html[data-lang="en"] [data-l="en"]{display:revert}

/* ---------------------------------------------------------------- masthead */
.masthead{
  position:sticky; inset-block-start:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-block-end:1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){ .masthead{background:var(--paper)} }
.masthead > div{
  max-inline-size:var(--shell); margin-inline:auto; padding:0 20px;
  display:flex; align-items:center; gap:14px; min-block-size:58px;
}
/* Narrow screens: brand and languages on one row, the page nav on its own
   below. Three links plus three language buttons will not share 390px. */
@media (max-width:639px){
  .masthead > div{flex-wrap:wrap; padding-block-end:2px; gap:0 10px}
  .masthead nav{
    order:3; flex-basis:100%; margin-inline-start:0; gap:0;
    border-block-start:1px solid var(--hair);
  }
  .masthead nav a{min-block-size:42px; padding-inline:0; margin-inline-end:18px}
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.brand img{inline-size:30px; block-size:30px; border-radius:24%}
.brand b{font-weight:700; font-size:1.02rem; letter-spacing:.01em}
.masthead nav{
  margin-inline-start:auto; display:flex; align-items:center; gap:2px;
  overflow-x:auto; scrollbar-width:none;
}
.masthead nav::-webkit-scrollbar{display:none}
.masthead nav a{
  display:inline-flex; align-items:center; min-block-size:44px;
  padding-inline:11px; font-size:.9rem; font-weight:400; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap; border-block-end:2px solid transparent;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current="page"]{
  color:var(--ink); font-weight:600; border-block-end-color:var(--gold);
}
.langs{display:flex; align-items:center; gap:1px; flex:none}
.langs button{
  font:inherit; font-size:.82rem; font-weight:400; cursor:pointer;
  background:transparent; border:0; border-radius:8px; color:var(--ink-soft);
  min-block-size:44px; padding-inline:9px;
}
.langs button:hover{color:var(--ink)}
.langs button[aria-current="true"]{
  color:var(--brand-ink); font-weight:600; background:var(--tint);
}

/* ------------------------------------------------------------- title band */
.page-head{background:var(--sky); color:var(--on-sky)}
.page-head > div{
  max-inline-size:var(--shell); margin-inline:auto; padding:44px 20px 38px;
}
.eyebrow{
  margin:0 0 10px; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-ink);
}
.page-head h1{
  margin:0; font-size:clamp(1.75rem,5vw,2.4rem); font-weight:700;
  line-height:1.12; letter-spacing:-.02em; text-wrap:balance;
  max-inline-size:20ch;
}
.page-head .lede{
  margin:12px 0 0; font-size:1.05rem; color:var(--sky-soft);
  max-inline-size:var(--measure);
}
.page-head .stamp{
  margin:18px 0 0; font-size:.82rem; color:var(--sky-soft);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------ doc layout */
/* inline-size:100% because body is a column flex container, where an auto
   inline margin turns off stretch and leaves the item shrink-to-fit. */
.layout{
  inline-size:100%; max-inline-size:var(--shell); margin-inline:auto;
  padding:0 20px 60px; display:grid; gap:40px; align-items:start;
}
@media (min-width:980px){
  .layout{grid-template-columns:236px minmax(0,1fr); gap:56px}
}
/* Pages short enough not to need an index keep one centred column. */
.layout.plain{grid-template-columns:minmax(0,1fr)}
.layout.plain .doc{margin-inline:auto}

.index{padding-block-start:36px}
@media (min-width:980px){
  .index{position:sticky; inset-block-start:78px}
}
.index h2{
  margin:0 0 10px; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.index ol{list-style:none; margin:0; padding:0; display:grid; gap:1px}
.index a{
  display:block; padding:7px 12px; border-radius:8px; font-size:.9rem;
  color:var(--ink-soft); text-decoration:none;
  border-inline-start:2px solid transparent;
}
.index a:hover{color:var(--ink); background:var(--panel)}
.index a[aria-current="true"]{
  color:var(--brand-ink); font-weight:500; background:var(--panel);
  border-inline-start-color:var(--brand);
}
/* Narrow screens get it as a plain nav block above the document; wide
   screens get the sticky rail. No <details>: a collapsed index is one more
   thing to open before you can find the section you came for. */
@media (max-width:979px){
  .index{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:18px 16px; margin-block-start:32px;
  }
  .index h2{margin-block-end:6px}
  .index ol{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:0 10px;
  }
}

.doc{padding-block-start:36px; max-inline-size:var(--measure)}
.doc > section + section{
  margin-block-start:40px; padding-block-start:38px;
  border-block-start:1px solid var(--hair);
}
.doc section > h2{
  margin:0 0 14px; font-size:1.32rem; font-weight:600; letter-spacing:-.01em;
  line-height:1.3; text-wrap:balance;
}
.doc section > h2 .num{
  display:inline-block; min-inline-size:1.6em; color:var(--brand);
  font-weight:700; font-variant-numeric:tabular-nums;
}
.doc h3{
  margin:26px 0 8px; font-size:1rem; font-weight:600; color:var(--ink);
}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px; padding-inline-start:20px}
.doc li{margin-block-end:8px}
.doc li::marker{color:var(--brand)}
.doc a{color:var(--brand-ink); font-weight:400}
.doc strong{font-weight:600}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}

/* ------------------------------------------------------------ components */
.note{
  border-inline-start:3px solid var(--brand); background:var(--panel);
  border-radius:0 10px 10px 0; padding:14px 18px; margin-block-end:16px;
}
[dir="rtl"] .note{border-radius:10px 0 0 10px}
.note.stop{border-inline-start-color:var(--danger); background:var(--danger-tint)}
.note > :last-child{margin-block-end:0}
.note b{color:var(--ink)}

.table-wrap{overflow-x:auto; margin-block-end:18px; border-radius:12px;
  border:1px solid var(--line)}
table{border-collapse:collapse; inline-size:100%; font-size:.92rem}
th,td{
  text-align:start; padding:11px 14px; vertical-align:top;
  border-block-end:1px solid var(--hair);
}
thead th{
  background:var(--panel); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap;
}
tbody tr:last-child td{border-block-end:0}
td:first-child{font-weight:500}

/* Split panel: what goes vs what stays, side by side rather than one list. */
.split{display:grid; gap:16px; margin-block-end:18px}
@media (min-width:620px){.split{grid-template-columns:1fr 1fr}}
.split > div{
  border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  background:var(--paper);
}
.split h3{margin:0 0 10px; font-size:.95rem; display:flex; align-items:center; gap:8px}
.split.gone h3{color:var(--danger)}
.split.stays h3{color:var(--ok)}
.split ul{margin:0; padding-inline-start:18px; font-size:.93rem}
.split li:last-child{margin-block-end:0}

/* Contact — the one thing on the support page that is an action. */
.contact{
  background:var(--sky); color:var(--on-sky); border-radius:16px;
  padding:26px 26px 24px; margin-block-end:26px;
}
.contact h2{margin:0 0 8px !important; color:var(--on-sky) !important;
  font-size:1.15rem !important}
.contact p{margin:0 0 16px; color:var(--on-sky)}
.contact .btn{
  display:inline-flex; align-items:center; gap:9px; min-block-size:50px;
  padding-inline:22px; border-radius:12px; background:#1976D2; color:#fff;
  font-weight:600; text-decoration:none; font-size:.98rem;
}
.contact .btn:hover{filter:brightness(1.08)}
.contact .aside{margin:14px 0 0; font-size:.86rem; color:var(--sky-soft)}

/* FAQ — scannable, one open question at a time is the reader's choice. */
.faq{border-block-start:1px solid var(--hair)}
.faq details{border-block-end:1px solid var(--hair)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:16px 2px; font-weight:500; font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; inline-size:9px; block-size:9px; flex:none;
  margin-inline-start:auto; border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand); transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--brand-ink)}
.faq .answer{padding:0 2px 18px}
.faq .answer > :last-child{margin-block-end:0}

.steps{list-style:none; margin:0 0 18px; padding:0; counter-reset:step}
.steps li{
  counter-increment:step; position:relative; padding-inline-start:44px;
  margin-block-end:16px; min-block-size:32px;
}
[dir="rtl"] .steps li{padding-inline-start:44px}
.steps li::before{
  content:counter(step); position:absolute; inset-inline-start:0; inset-block-start:0;
  inline-size:30px; block-size:30px; border-radius:50%;
  background:var(--tint); color:var(--brand-ink); border:1px solid var(--line);
  display:grid; place-items:center; font-size:.9rem; font-weight:700;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:1px 6px; direction:ltr; unicode-bidi:isolate; white-space:nowrap;
}
.mail{font-weight:500; overflow-wrap:anywhere}

/* ------------------------------------------------------------------ home */
.home-hero{
  inline-size:100%; max-inline-size:var(--shell); margin-inline:auto;
  padding:60px 20px 50px; display:grid; gap:34px; align-items:center;
  /* Fill the space between masthead and footer rather than leaving a gap. */
  flex:1; align-content:center;
}
@media (min-width:820px){
  .home-hero{grid-template-columns:1fr auto; gap:52px}
}
.home-hero h1{
  margin:0; font-size:clamp(2rem,6vw,3rem); font-weight:700; line-height:1.08;
  letter-spacing:-.025em; text-wrap:balance; max-inline-size:16ch;
}
.home-hero .lede{
  margin:16px 0 0; font-size:1.1rem; color:var(--ink-soft);
  max-inline-size:46ch;
}
.home-hero img{inline-size:min(320px,72vw); justify-self:center}
.stores{display:flex; flex-wrap:wrap; gap:10px; margin-block-start:26px}
.stores a{
  display:inline-flex; align-items:center; gap:9px; min-block-size:52px;
  padding-inline:20px; border-radius:13px; text-decoration:none;
  font-weight:600; font-size:.96rem;
}
.stores a.primary{background:var(--brand); color:#fff}
.stores a.secondary{
  background:transparent; color:var(--brand-ink); border:2px solid var(--line);
}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--sky); color:var(--on-sky); margin-block-start:auto}
.site-footer > div{
  max-inline-size:var(--shell); margin-inline:auto; padding:44px 20px 34px;
  display:grid; gap:30px;
}
@media (min-width:720px){
  .site-footer > div{grid-template-columns:auto 1fr; align-items:center}
}
.site-footer img{inline-size:132px; justify-self:center}
.site-footer nav{
  display:flex; flex-wrap:wrap; gap:2px; margin-block-end:14px;
}
.site-footer nav a{
  display:inline-flex; align-items:center; min-block-size:44px;
  padding-inline:12px; color:var(--on-sky); text-decoration:none;
  font-size:.93rem; font-weight:500; border-radius:8px;
}
.site-footer nav a:hover{background:var(--sky-hover)}
.site-footer .contact-line{margin:0 0 6px; font-size:.93rem}
.site-footer a.mail{color:var(--on-sky)}
.site-footer small{display:block; margin-block-start:14px; font-size:.8rem;
  color:var(--sky-soft)}
.site-footer hr{
  border:0; border-block-start:2px solid #1976D2; margin:0 0 16px;
  inline-size:44px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}