/* ==========================================================================
   site-chrome.css -- the one header, drawer and footer (functions/_chrome.js).

   Every page's own sheet has rules for bare `nav`, `footer` and `header`, and this has to win on
   all of them without knowing them, so selectors carry the element (`nav.sc-nav`, `footer.sc-foot`)
   and !important appears only against the rules in css/v2-skin.css and css/v2.css that have it.
   The token pages' skin styles bare button, a and p through body:not(.en):not(.he) (it has to beat
   their inline sheet), so the rules that meet those carry :not(#_), which matches everything and
   counts as an id. Own tokens, because the pages disagree about their variable names and families.

   No blur and a solid bar (RDDW-190: nothing here costs a frame while scrolling), a fixed height
   with text that does not wrap (nothing moves when a font arrives), logical properties throughout
   (Hebrew mirrors by itself).
   ========================================================================== */
:root {
  --sc-bar-h: 64px;
  --sc-bg: #12122A; --sc-bg-2: #17173A; --sc-deep: #0A0A1A; --sc-panel: #1D1D3A; --sc-panel-2: #25254A; --sc-line: #2E2E58;
  --sc-text: #F1ECE2; --sc-soft: #BDB7AD; --sc-dim: #8F8BA8; --sc-win: #FFD84A;
  --sc-fd: 'Lilita One', 'Fredoka', 'Rubik', system-ui, sans-serif;
  --sc-fb: 'DM Sans', 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sc-stripe: linear-gradient(90deg, #E84A3A 0 20%, #F5913F 20% 40%, #F7C843 40% 60%, #57C24E 60% 80%, #3E9BE0 80% 100%);
  --sc-bars: calc(var(--consent-h, 0px) + var(--installbar-h, 0px));
  /* an anchor lands under the bar; a focused element is not left under the fixed bars at the bottom
     or the accessibility button (the same 78px as css/a11y.css, this rule outranks that one) */
  scroll-padding-top: calc(var(--sc-bar-h) + 8px);
  scroll-padding-bottom: calc(78px + var(--sc-bars));
}
:root:lang(he) { --sc-fd: 'Fredoka', 'Rubik', system-ui, sans-serif; --sc-fb: 'Rubik', 'DM Sans', system-ui, sans-serif; }
html.sc-locked { overflow: hidden; }

.sc-skip { position: absolute; z-index: 200; top: 8px; inset-inline-start: 8px; padding: 12px 16px; border-radius: 12px; background: var(--sc-win); color: #12122A; font: 700 1rem/1.2 var(--sc-fb); text-decoration: none; transform: translateY(-200%); }
.sc-skip:focus { transform: none; }

.sc-bar, .sc-drawer, .sc-foot { box-sizing: border-box; font-family: var(--sc-fb); text-align: start; }
.sc-bar *, .sc-drawer *, .sc-foot * { box-sizing: border-box; }
.sc-bar :focus-visible, .sc-drawer :focus-visible, .sc-foot :focus-visible { outline: 3px solid var(--sc-win); outline-offset: 2px; }
.sc-globe { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------------------------------------------------------------- the logo */
a.sc-logo:not(#_) { display: inline-flex; flex: none; align-items: baseline; gap: .28em; min-height: 48px; line-height: 48px; color: #F7F0D8; font-family: 'Lilita One', 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 400; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
a.sc-logo b { font-weight: 400; }
.sc-rdd b:nth-child(1) { color: #E8534A; }
.sc-rdd b:nth-child(2) { color: #5B9BD5; }
.sc-rdd b:nth-child(3) { color: #6BBF6B; }
a.sc-logo small { display: none; margin-inline-start: .4em; color: var(--sc-dim); font-family: var(--sc-fb); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
@media (min-width: 1280px) { .sc-bar a.sc-logo small { display: inline; } }

/* ---------------------------------------------------------------- the bar */
header.sc-bar { position: sticky; top: 0; z-index: 100; height: var(--sc-bar-h); margin: 0; padding: 0; background: var(--sc-bg); border-bottom: 1px solid var(--sc-line); color: var(--sc-text); }
.sc-bar-in { display: flex; align-items: center; gap: 16px; height: 100%; max-width: 1400px; margin-inline: auto; padding-inline: clamp(12px, 3vw, 32px); }
nav.sc-nav { position: static; display: flex; flex: 0 1 auto; align-items: center; gap: 2px; width: auto; height: auto; margin: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
nav.sc-nav a:not(#_) { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--sc-soft); font-family: var(--sc-fb); font-size: .94rem; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; }
nav.sc-nav a:hover:not(#_) { color: #fff; background: rgba(255, 255, 255, .05); }
nav.sc-nav a[aria-current="page"]:not(#_) { color: #fff; }
nav.sc-nav a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 12px; bottom: 6px; height: 4px; border-radius: 4px; background: var(--sc-stripe); }
.sc-end { display: flex; flex: none; align-items: center; gap: 10px; margin-inline-start: auto; }
.sc-end .lang-pick { margin: 0; }

button.sc-lang:not(#_) { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 48px; min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-panel); box-shadow: none; color: var(--sc-text); font: 800 .84rem/1 var(--sc-fb); letter-spacing: 0; text-shadow: none; text-transform: none; filter: none; transform: none; transition: none; cursor: pointer; }
button.sc-lang:hover:not(#_), button.sc-lang[aria-expanded="true"]:not(#_) { border-color: var(--sc-win); }

/* The green candy of css/v2.css, here because that sheet is not on the skinned pages. The season's
   theme recolours .btn-candy through --face and --base and its own gradient. */
a.sc-get { --face: #4FB05C; --base: #24592D; position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; margin: 0 0 4px; padding: 2px 18px 0; border: 0; border-radius: 999px; background: linear-gradient(180deg, #7ACB84 0%, var(--face) 60%); box-shadow: 0 4px 0 var(--base), 0 8px 14px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5); color: #fff; font-family: var(--sc-fd); font-size: 1rem; font-weight: 400; letter-spacing: .05em; line-height: 1.1; text-decoration: none; text-transform: uppercase; text-shadow: 0 0 1.5px var(--base), 1px 1px 0 var(--base), -1px 1px 0 var(--base), 1px -1px 0 var(--base), -1px -1px 0 var(--base), 0 2px 0 var(--base); white-space: nowrap; cursor: pointer; }
a.sc-get:not(#_) { color: #fff; text-decoration: none; }
a.sc-get:hover { filter: brightness(1.07); }
a.sc-get:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--base), 0 3px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3); }
:root:lang(he) a.sc-get, :root:lang(hi) a.sc-get { letter-spacing: 0; text-transform: none; }
:root:lang(he) a.sc-get { font-weight: 600; text-shadow: 0 0 1px var(--base), 0 1px 0 var(--base), 0 2px 0 var(--base); }
.sc-get-st { display: none; }

button.sc-burger:not(#_) { display: none; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; margin: 0; padding: 0; border: 1px solid var(--sc-line); border-radius: 14px; background: var(--sc-panel); box-shadow: none; color: var(--sc-text); filter: none; transform: none; transition: none; cursor: pointer; }
button.sc-burger svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Five destinations fit from here up in every language; below it they live in the drawer. */
@media (max-width: 1099px) {
  nav.sc-nav { display: none; }
  button.sc-burger:not(#_) { display: inline-flex; }
}
@media (max-width: 560px) {
  .sc-bar-in { gap: 8px; }
  .sc-end { gap: 6px; }
  a.sc-logo:not(#_) { font-size: 1.3rem; }
  button.sc-lang:not(#_) { padding: 0 8px; gap: 5px; }
  a.sc-get { padding-inline: 12px; font-size: .92rem; letter-spacing: .03em; }
  .sc-get-lg { display: none; }
  .sc-get-st { display: inline; }
}
@media (max-width: 359px) {
  .sc-bar .sc-code { display: none; }
  .sc-bar-in { padding-inline: 8px; }
}

/* ---------------------------------------------------------------- the language menu */
.sc-lang-title, .sc-lang-note { display: none; }
.sc-bar .lang-menu { background: var(--sc-panel); border-color: var(--sc-line); }
.sc-bar .lang-menu a:not(#_) { min-height: 48px; color: #fff; }
.sc-bar .lang-menu .sc-lang-note:not(#_) { display: block; margin: 0; padding: 8px 14px 6px; color: var(--sc-dim); font-size: .78rem; line-height: 1.5; }
/* a bottom sheet on a phone, above the bars that may sit at the bottom; the shadow is the scrim */
@media (max-width: 640px) {
  .sc-bar .lang-pick > .lang-menu:not(#_) { position: fixed; inset-inline: 0; left: 0; right: 0; top: auto; bottom: var(--sc-bars); translate: none; width: auto; min-width: 0; max-width: none; max-height: calc(100dvh - var(--sc-bar-h) - var(--sc-bars)); overflow-y: auto; padding: 10px 10px calc(20px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 24px 24px 0 0; box-shadow: 0 0 0 100vmax rgba(6, 6, 20, .62); }
  .sc-bar .lang-menu .sc-lang-title:not(#_) { display: block; margin: 0; padding: 8px 14px 6px; color: var(--sc-soft); font-family: var(--sc-fd); font-size: 1.05rem; font-weight: 400; }
  .sc-bar .lang-menu a:not(#_) { min-height: 52px; font-size: 1rem; }
  /* the floating accessibility button would sit on the sheet's rows */
  html:has(.sc-bar .lang-menu:not([hidden])) #rdd-a11y { visibility: hidden; }
}

/* ---------------------------------------------------------------- the drawer */
dialog.sc-drawer { position: fixed; inset-block: 0; inset-inline: auto 0; width: min(88vw, 380px); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-inline-start: 1px solid var(--sc-line); background: var(--sc-bg-2); color: var(--sc-text); overflow: hidden; }
dialog.sc-drawer[open] { display: block; }
dialog.sc-drawer:focus { outline: none; }
dialog.sc-drawer::backdrop { background: rgba(6, 6, 20, .62); }
/* Fills the dialog, so a click on the dialog itself can only be its backdrop (js/site-chrome.js). */
.sc-dr-in { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
  dialog.sc-drawer[open] { transition: transform .2s ease-out; }
  @starting-style { dialog.sc-drawer[open] { transform: translateX(100%); } }
  :root[dir="rtl"] dialog.sc-drawer[open] { transition: transform .2s ease-out; }
  @starting-style { :root[dir="rtl"] dialog.sc-drawer[open] { transform: translateX(-100%); } }
}
html.motion-off dialog.sc-drawer[open], html.lite dialog.sc-drawer[open] { transition: none; }
.sc-dr-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--sc-bar-h); padding-inline: 16px; border-bottom: 1px solid var(--sc-line); }
button.sc-dr-close:not(#_) { display: inline-flex; }
nav.sc-dr-nav { position: static; display: grid; flex: none; gap: 2px; width: auto; height: auto; margin: 0; padding: 10px; background: none !important; border: 0 !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
nav.sc-dr-nav a:not(#_) { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 10px; border-radius: 14px; color: var(--sc-text); font-family: var(--sc-fd); font-size: 1.16rem; font-weight: 400; letter-spacing: .01em; text-decoration: none; }
nav.sc-dr-nav a[aria-current="page"] { background: var(--sc-panel); }
nav.sc-dr-nav img, .sc-di { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; font-style: normal; font-size: 1rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); }
.sc-di-b { background: #3E9BE0; } .sc-di-p { background: #8E6BD8; } .sc-di-o { background: #F5913F; } .sc-di-g { background: #4FB05C; }
.sc-dr-more { display: grid; flex: none; grid-template-columns: 1fr 1fr; gap: 0 10px; margin: 0; padding: 8px 20px 12px; border-top: 1px solid var(--sc-line); list-style: none; }
.sc-dr-more li { margin: 0; padding: 0; }
.sc-dr-more a:not(#_) { display: flex; align-items: center; min-height: 48px; color: var(--sc-soft); font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
.sc-dr-more a[aria-current="page"]:not(#_) { color: #fff; }
.sc-dr-foot { display: grid; flex: none; gap: 12px; margin-top: auto; padding: 16px 20px 24px; border-top: 1px solid var(--sc-line); background: var(--sc-bg); }
.sc-dr-lbl:not(#_) { margin: 0; color: var(--sc-dim); font-size: .84rem; font-weight: 800; }
.sc-dr-lang summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-panel); color: var(--sc-text); font-size: .94rem; font-weight: 700; cursor: pointer; list-style: none; }
.sc-dr-lang summary::-webkit-details-marker { display: none; }
.sc-dr-lang ul { margin: 8px 0 0; padding: 0; list-style: none; }
.sc-dr-lang li { margin: 0; }
.sc-dr-lang a:not(#_) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; color: var(--sc-text); font-size: 1rem; font-weight: 600; text-decoration: none; }
.sc-dr-lang a[aria-current="true"] { background: var(--sc-panel-2); }

/* Plain links, should css/store-badges.css not arrive: its !important rules paint them when it does.
   The slots hold their height, so nothing moves either way. */
.sc-drawer [data-store-badges], .sc-foot [data-store-badges] { display: flex; flex-wrap: wrap; gap: 12px; min-height: 48px; }
.sc-drawer [data-store-badges] > a:not(#_), .sc-foot [data-store-badges] > a:not(#_) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-panel); color: var(--sc-text); font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- the footer */
footer.sc-foot { position: relative; margin: 0; padding: clamp(40px, 6vw, 64px) 0 calc(28px + var(--sc-bars)); background: var(--sc-deep) !important; border: 0 !important; color: var(--sc-soft); font-size: 1rem; text-align: start; }
/* the last row clears the floating accessibility button; from 1280 up the page's margin already does */
@media (max-width: 1279px) { footer.sc-foot { padding-bottom: calc(88px + var(--sc-bars)); } }
footer.sc-foot::before { content: ''; position: absolute; inset-inline: 0; top: 0; display: block; width: auto; height: 6px; margin: 0; background: var(--sc-stripe); opacity: 1; transform: none; }
.sc-foot-in { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.sc-foot-top { display: grid; gap: 30px; }
@media (min-width: 900px) { .sc-foot-top { grid-template-columns: 1.1fr 2fr; gap: 40px; } }
.sc-foot-brand p:not(#_) { max-width: 26em; margin: 10px 0 16px; color: var(--sc-soft); font-size: .94rem; line-height: 1.65; }
.sc-cols { display: grid; gap: 0 24px; }
.sc-foot summary { color: var(--sc-win); font-family: var(--sc-fd); font-size: 1rem; font-weight: 400; letter-spacing: .04em; list-style: none; }
.sc-foot summary::-webkit-details-marker { display: none; }
.sc-col-links { display: grid; gap: 8px; }
.sc-col-links a:not(#_) { display: flex; align-items: center; min-height: 48px; color: var(--sc-soft); font-size: .94rem; font-weight: 500; line-height: 1.25; text-decoration: none; }
.sc-col-links a:hover:not(#_) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sc-col-links a[aria-current="page"]:not(#_) { color: #fff; font-weight: 700; }
/* one tap each on a phone */
@media (max-width: 639px) {
  .sc-cols { border-top: 1px solid rgba(255, 255, 255, .1); }
  .sc-col { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .sc-foot summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; cursor: pointer; }
  .sc-foot summary::after { content: '+'; color: var(--sc-dim); font-size: 1.5rem; line-height: 1; }
  .sc-col[open] summary::after { content: '\2212'; }
  .sc-col[open] { padding-bottom: 8px; }
}
/* open on a wide screen, before and without the script */
@media (min-width: 640px) {
  .sc-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-foot summary { margin-bottom: 4px; pointer-events: none; }
  @supports selector(::details-content) {
    .sc-col::details-content { content-visibility: visible; display: block; }
  }
}
.sc-foot-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sc-copy { color: var(--sc-dim); font-size: .84rem; }
p.sc-credit:not(#_) { margin: 14px 0 0; color: var(--sc-dim); font-size: .76rem; line-height: 1.5; }
html[dir="rtl"] p.sc-credit:not(#_) { text-align: right; }
.sc-tools, .sc-social { display: flex; flex-wrap: wrap; gap: 8px; }
button.sc-tool:not(#_) { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: transparent; box-shadow: none; color: var(--sc-soft); font: 600 .84rem/1.2 var(--sc-fb); letter-spacing: 0; text-shadow: none; text-transform: none; filter: none; transform: none; transition: none; cursor: pointer; }
button.sc-tool:hover:not(#_) { border-color: var(--sc-win); color: #fff; }
.sc-social a:not(#_) { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--sc-text); font-size: .9rem; font-weight: 800; text-decoration: none; }
.sc-social a:hover:not(#_) { border-color: var(--sc-win); }

/* ---------------------------------------------------------------- pages that had no header */
body[data-sc-bare]:not(#_) { display: block; min-height: 100vh; margin: 0; padding: 0; }
body[data-sc-bare]:not(#_) > main { box-sizing: border-box; width: calc(100% - 32px); margin: clamp(32px, 7vh, 72px) auto; }

/* ---------------------------------------------------------------- the community's own bar, under the shared one */
.sc-bar ~ .top { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sc-bar ~ .top .brand, .sc-bar ~ .top .nav-lang { display: none; }
.sc-bar ~ .top .brand-sub::before { display: none; }
.sc-bar ~ .top .brand-sub { margin: 0; padding: 0; }
/* its legal row sits on top of the shared footer, under one stripe */
.foot + footer.sc-foot { padding-top: 8px; }
.foot + footer.sc-foot::before { display: none; }