/*
 * Shared chrome of the PhoneRemo site pages (landing, legal): page width,
 * skip link, header, brand, navigation, section headings and footer.
 * Built on /ds/tokens.css with logical properties, so RTL needs no overrides.
 */

.wrap {
  inline-size: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: max(var(--s-4), env(safe-area-inset-left)) max(var(--s-4), env(safe-area-inset-right));
}
@media (min-width: 720px) { .wrap { padding-inline: var(--s-6); } }

.skip-link {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: var(--z-modal);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---- brand ------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.brand__mark { inline-size: 32px; block-size: 32px; flex: none; }
.brand__mark .m-body { fill: none; stroke: currentColor; stroke-width: 2.2; }
.brand__mark .m-play { fill: var(--violet-400); }
.brand__mark .m-arc { fill: none; stroke: var(--mint-500); stroke-width: 2.2; stroke-linecap: round; }
.brand__word {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  border-block-end: 1px solid transparent;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-block-size: 68px;
}
.site-nav { display: none; gap: var(--s-1); }
.site-nav a {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.site-nav a:hover { color: var(--text); background: color-mix(in oklab, var(--ink-300) 8%, transparent); }
.site-header__end { display: flex; align-items: center; gap: var(--s-3); margin-inline-start: auto; }
@media (min-width: 900px) { .site-nav { display: flex; } }
/*
 * Narrow phones (≤ 400 px, i.e. 320–390 px devices): brand, language switch and
 * "Play now" do not fit one row (the Hebrew label is the widest). The header
 * keeps the brand and the language switch; the hero's large "Play now" sits
 * right below, and a phone visitor plays on a TV anyway. The header row can
 * never push the layout viewport wider than the device (tested at 320–412 px).
 */
@media (max-width: 400px) {
  .site-header__inner { gap: var(--s-3); }
  .site-header__end { gap: var(--s-2); }
  .site-header__end .pr-btn { display: none; }
}
@media (min-width: 401px) and (max-width: 420px) { .site-header__end .pr-btn { padding-inline: var(--s-3); } }

/* The language switch marks the current language from <html lang> (no script needed). */
html[lang="he"] .pr-lang a[data-lang="he"],
html[lang="en"] .pr-lang a[data-lang="en"] { background: var(--surface-3); color: var(--text); }

/* ---- sections ---------------------------------------------------------- */
.section { position: relative; padding-block: var(--s-9); }
@media (max-width: 719px) { .section { padding-block: var(--s-8); } }
.section__head { display: grid; gap: var(--s-3); max-inline-size: 46rem; margin-block-end: var(--s-7); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--mint-400);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.section__title {
  font-size: clamp(var(--fs-2xl), 4.2vw, var(--fs-4xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.section__lead { color: var(--text-muted); font-size: var(--fs-lg); text-wrap: pretty; }

/* ---- footer -------------------------------------------------------------- */
.site-footer { border-block-start: 1px solid var(--border); padding-block: var(--s-7); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-7); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: 0; margin: 0; list-style: none; }
.site-footer__links a { color: var(--text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__end { display: flex; align-items: center; gap: var(--s-4); margin-inline-start: auto; color: var(--text-muted); }
.site-footer__made { color: var(--text-muted); }
.mail { direction: ltr; unicode-bidi: isolate; }

/* A phone cursor (spec §10.1 live demo) hovering an interactive element. */
.pr-btn[data-cursor-hover], .site-nav a[data-cursor-hover], .pr-lang a[data-cursor-hover] {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.pr-gamecard[data-cursor-hover] {
  transform: translateY(-4px) scale(1.02);
  border-color: color-mix(in oklab, var(--_c) 70%, transparent);
  box-shadow: var(--shadow-2), 0 18px 60px -12px color-mix(in oklab, var(--_c) 55%, transparent);
}
summary[data-cursor-hover], a[data-cursor-hover]:not(.pr-btn):not(.pr-gamecard) { color: var(--violet-300); }