/* ══════════════════════════════════════════════════════════════════════════
   luxfit.css — the content pages
   ══════════════════════════════════════════════════════════════════════════

   Shared by every page under /tabata-timer, /emom-timer, /amrap-timer and
   their /fa counterparts. One file rather than inlined copies: a visitor who
   reads two of these pages should pay for the stylesheet once, and these pages
   link to each other heavily on purpose.

   Deliberately committed to the app's dark palette rather than following
   prefers-color-scheme. Someone arriving from a search result and then opening
   the app should not watch the brand change colour underneath them.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0b0f19;
  --surface: #12151d;
  --surface-2: #171b26;
  --ink: #f2f4f8;
  --ink-2: #9aa1b1;
  --ink-3: #636a7a;
  --gold: #ffd700;
  --plasma: #6c7bff;
  --hairline: rgba(255, 255, 255, 0.09);
  --radius: 16px;
  --measure: 62ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Vazirmatn, Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-head {
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.brand span { color: var(--gold); }

.site-head nav {
  display: flex;
  gap: 18px;
  font-size: 14px;
  flex-wrap: wrap;
}

.site-head nav a { color: var(--ink-2); text-decoration: none; }
.site-head nav a:hover { color: var(--ink); }

/* The five-language switcher. Set apart from the protocol links by a rule
   rather than by more gap, because at 375px the nav already wraps and extra
   spacing there just costs another line. */
.site-head nav .langs {
  display: flex;
  gap: 11px;
  font-size: 13px;
  padding-left: 14px;
  border-left: 1px solid var(--hairline);
}

.site-head nav .langs a { color: var(--ink-3); }
.site-head nav .langs a:hover { color: var(--ink-2); }

/* ── type ───────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 8px 0 14px;
}

h2 {
  font-size: clamp(22px, 4vw, 27px);
  line-height: 1.25;
  margin: 48px 0 12px;
  letter-spacing: -0.2px;
}

h3 { font-size: 19px; margin: 28px 0 8px; }

p, li { max-width: var(--measure); color: var(--ink); }

.lede {
  font-size: 19px;
  color: var(--ink-2);
  margin-bottom: 28px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}

a { color: var(--gold); }

/* ── the workout box ────────────────────────────────────────────────────── */

.protocol {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 28px 0;
}

.protocol dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
}

.protocol dt { color: var(--ink-3); font-size: 14px; }
.protocol dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── tables ─────────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; margin: 20px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 15px;
}

th, td {
  text-align: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}

th { color: var(--ink-3); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
td { font-variant-numeric: tabular-nums; }

/* ── calls to action ────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffd700, #ff8a3d);
  color: #0b0f19;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 100px;
  margin: 8px 0;
}

.cta-note { font-size: 14px; color: var(--ink-3); margin-top: 10px; }

.cta-row { margin: 32px 0 8px; }

/* ── faq ────────────────────────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::before {
  content: "+";
  color: var(--gold);
  font-weight: 800;
  margin-inline-end: 10px;
}

details[open] summary::before { content: "–"; }

details p { margin: 10px 0 0; color: var(--ink-2); }

/* ── related + footer ───────────────────────────────────────────────────── */

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.related a {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
}

.related a:hover { border-color: var(--gold); }
.related a small { display: block; color: var(--ink-3); font-weight: 400; margin-top: 4px; }

.site-foot {
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
  padding: 28px 0;
  color: var(--ink-3);
  font-size: 14px;
}

.site-foot .wrap { padding-bottom: 0; }
.site-foot a { color: var(--ink-2); }

/* ── rtl ────────────────────────────────────────────────────────────────── */

[dir="rtl"] .protocol {
  border-left: 1px solid var(--hairline);
  border-right: 3px solid var(--gold);
}

[dir="rtl"] .site-head nav .langs {
  padding-left: 0;
  padding-right: 14px;
  border-left: 0;
  border-right: 1px solid var(--hairline);
}

/* The switcher labels are Latin ("EN", "EL") even on the Arabic and Persian
   pages, so they need an explicit LTR run. Without it a label sitting at the
   edge of an RTL line gets reordered against the neighbouring one and the
   list reads backwards. */
[dir="rtl"] .site-head nav .langs a[lang="en"],
[dir="rtl"] .site-head nav .langs a[lang="es"],
[dir="rtl"] .site-head nav .langs a[lang="el"] {
  direction: ltr;
  unicode-bidi: isolate;
}