/* Public website styles, following the Figma draft.

   KNOBS: the values worth tweaking are all in the first two blocks below.
   Change a value, save, reload the page. Most colours point at a Material
   role from css/light.css or css/dark.css; the two the theme doesn't have
   (the beige paper and the bright red) are written out. */

/* ---- knobs: light theme ---- */
.light {
  --paper: #f0deca;                                   /* page background (draft beige) */
  --ink: var(--md-sys-color-inverse-surface);         /* text, tile borders */
  --hot: #e53b2d;                                     /* category names, tagline (draft red) */
  --label: var(--md-sys-color-secondary);             /* "Main Categories" */
  --quiet: var(--md-sys-color-outline);               /* the way back in the trail */
  --rule: var(--md-sys-color-outline);                /* footer line */
  --soft: var(--quiet);                               /* borders of the cue and variation boxes */
  color-scheme: light;
}
/* ---- knobs: dark theme ---- */
.dark {
  --paper: var(--md-sys-color-surface);
  --ink: var(--md-sys-color-on-surface);
  --hot: #ff7b6b;
  --label: var(--md-sys-color-secondary);
  --quiet: var(--md-sys-color-outline);
  --rule: var(--md-sys-color-outline-variant);
  --soft: var(--quiet);
  color-scheme: dark;
}
/* ---- knobs: sizes ---- */
:root {
  --cat-name: var(--hot);       /* category tile name colour */
  --ex-name: var(--ink);        /* exercise tile name colour */
  --tile-line: var(--ink);      /* category tile border colour */
  --ex-line: #b98282;           /* exercise tile border colour: calmer than the categories */
  --tile-border: 2px;
  --tile-radius: 18px;
  --tile-min: 200px;            /* tiles are at least this wide; columns fill the rest */
  --tile-height: 120px;
  --tile-gap: 40px;
  --tile-text: 1.5rem;          /* 24px */
  --side: 170px;                /* sidebar width */
  --page: 1280px;
  --gutter: clamp(16px, 2.7vw, 34px);
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  min-height: 100vh; display: flex; flex-direction: column;   /* footer at the bottom */
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; border-radius: 6px; }
h1, h2 { margin: 0; line-height: 1.15; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 2; }
.skip:focus { left: 8px; }

/* ---- header: name + tagline, search on the right ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: var(--page); margin: 0 auto; padding: 32px var(--gutter) 40px;
}
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-tag { font-size: 1.5rem; font-weight: 700; color: var(--hot); margin-top: 4px; }

.search input {
  width: min(260px, 44vw); height: 50px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 25px; background: transparent;
  color: var(--ink); font: 600 1.0625rem var(--text);
}
.search input::placeholder { color: var(--ink); opacity: 1; }
.search input:focus { outline: none; border-color: var(--hot); }

/* ---- sidebar + content ---- */
.layout {
  flex: 1; width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter) 64px;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 38px;
  /* Sidebar and content line up on their first text line:
     "Main Categories" sits on the same baseline as "Main >". */
  align-items: baseline; align-content: start;
}
/* ALIGNMENT: the second lines line up too ("Endurance" with the big title),
   because both columns have the same distance between their first two
   baselines. The sizes below are paired with the .trail ones - change them together:
     sidebar: label 16px/24px, gap 8 + 6, first link 24px/32px  -> (24+32)/2 + 14 = 42
     content: trail 24px/32px, gap 5,     title 32px/40px       -> (32+40)/2 + 5  = 41
     (41, not 42: browsers round the half-leading differently for the two
     sizes, and 5 measured spot on in Chrome.)
   (Both pairs also grow by the same 8px in font size, so it works with any font.) */
.side-label { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--label); margin: 0 0 8px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li + li { margin-top: 4px; }   /* spacing between items (doesn't touch the alignment above) */
.side a { display: block; padding: 6px 0; font-size: 24px; line-height: 32px; font-weight: 700; }
/* Tags: outlined pills, one per line, in the trail's grey (like the draft) */
.side-tags-label { margin-top: 40px; }
.side-tags { display: grid; justify-items: start; gap: 10px; }
.side-tags li + li { margin-top: 0; }
.side .side-tags a {
  display: inline-block; padding: 3px 10px; border: 2px solid var(--quiet); border-radius: 999px;
  color: var(--quiet); font-size: 0.9375rem; line-height: 1.3; font-weight: 700;
}
.side .side-tags a:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.side .side-tags a.on { color: var(--paper); background: var(--quiet); }

/* ---- trail: the way back up on a grey line, the current item big below it ----
   Main > Sprinting >
   Max Velocity                                                                 */
.trail { margin: 0 0 24px; }
.trail ol { display: flex; flex-wrap: wrap; align-items: baseline; list-style: none; margin: 0 0 5px; padding: 0; }
.trail li { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--quiet); }
.trail li.spacer::after { display: none; }   /* home page: an invisible line keeps the layout steady */
.trail li::after {   /* the > chevron, drawn as two borders of a turned square */
  content: ""; display: inline-block; width: 0.36em; height: 0.36em;
  border-right: 3px solid; border-top: 3px solid; transform: rotate(45deg);
  margin: 0 0.6em 0.1em 0.3em;
}
.trail li a:hover { color: var(--ink); }
.trail h1 { font-size: 32px; line-height: 40px; font-weight: 700; overflow-wrap: anywhere; }
.trail h1 a:hover { text-decoration: none; }
/* On a variation's page, "Squatty Dribbles" in "Squatty Dribbles > Overhead" is a link:
   underline it on hover. :not([aria-current]) leaves the current page's name alone. */
.trail h1 a:not([aria-current]):hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.trail h1 .chevron {   /* the > between "Squatty Dribbles" and "Overhead" on a variation's page */
  display: inline-block; width: 0.32em; height: 0.32em;
  border-right: 3px solid; border-top: 3px solid; transform: rotate(45deg);
  margin: 0 0.45em 0.1em 0.2em;
}

/* ---- tiles ---- */
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: 28px var(--tile-gap);
}
.tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  min-height: var(--tile-height); padding: 12px 14px;
  border: var(--tile-border) solid var(--tile-line); border-radius: var(--tile-radius);
  overflow: hidden;
}
.tile:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.tile-name { position: relative; z-index: 1; font-size: var(--tile-text); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tile-ex { border-color: var(--ex-line); }
.tile-cat .tile-name { color: var(--cat-name); }
.tile-ex .tile-name { color: var(--ex-name); }
.tile-meta { position: relative; z-index: 1; margin-top: auto; font-size: 0.9375rem; font-weight: 600; color: var(--quiet); max-width: 55%; }
/* Lower right: reserved for the thumbnail cutout. Empty until exercises get images. */
.thumb { position: absolute; right: 6px; bottom: 0; width: 45%; height: 75%; }
.thumb img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

.group { margin-top: 44px; }
.group h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 18px; }
.group h2 a { color: var(--hot); }

/* ---- exercise page ----
   wide:   trail   | "Related"          phone:  trail
           details | related tiles               details
                                                 related                          */
.ex-page { display: grid; grid-template-columns: minmax(0, 742px); grid-template-areas: "trail" "body"; }
.ex-page.has-related {
  grid-template-columns: minmax(0, 742px) minmax(180px, 220px); column-gap: 32px;
  grid-template-areas: "trail related-h" "body related";
}
.ex-page > .trail { grid-area: trail; }
.related-h { grid-area: related-h; align-self: end; font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; }
.ex-body { grid-area: body; min-width: 0; }
.related { grid-area: related; }
.related .tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Where the video will go. */
.media {
  margin-bottom: 12px; aspect-ratio: 16 / 9; border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--quiet); font-weight: 600;
}
.media svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.media svg path { fill: currentColor; stroke: none; }

.credits-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.credits { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--quiet); line-height: 1.55; }
.credits span { display: block; }
.ex-body .prose { margin-bottom: 18px; }

/* Copy Exercise: outlined red pill that opens a small menu */
.copy-menu { position: relative; flex: none; }
.copy-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px 3px 12px; border: 2px solid var(--hot); border-radius: 999px;
  color: var(--hot); font-weight: 700; font-size: 0.9375rem;
}
.copy-menu summary::-webkit-details-marker { display: none; }
.copy-menu summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.copy-menu[open] summary svg { transform: rotate(180deg); }
.copy-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 200px;
  display: grid; padding: 6px; background: var(--paper);
  border: 2px solid var(--quiet); border-radius: 14px; box-shadow: 0 6px 20px rgb(0 0 0 / .12);
}
.copy-list button {
  text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: 600 0.9375rem var(--text); cursor: pointer;
}
.copy-list button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.copy-list button:disabled { color: var(--quiet); cursor: default; }
.copy-list small { font-weight: 400; margin-left: 4px; }
.ex-section { margin-top: 18px; }
.ex-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
.box { border: 2px solid var(--soft); border-radius: 18px; }
.cues { margin: 0; padding: 14px 20px 14px 38px; font-size: 0.9375rem; line-height: 1.45; }
.cues li { margin: 3px 0; padding-left: 2px; }

/* Cues and "Also known as" side by side, like two columns of 7 : 3; stacked on phones. */
.ex-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 16px; align-items: stretch; }
.ex-pair > .ex-section { display: flex; flex-direction: column; }
.ex-pair > .ex-section > .box { flex: 1; }     /* both boxes as tall as the taller one */
.variations { display: flex; flex-wrap: wrap; gap: 14px; }
.variation { min-width: 130px; padding: 12px 14px 14px; text-align: center; }
.variation h3 { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 700; }
.variation ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; line-height: 1.7; }
.variation a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* ---- text pages (exercise, about, imprint, privacy) ---- */
.prose { max-width: 66ch; font-size: 1.125rem; line-height: 1.7; }
.prose p { margin: 0 0 1em; white-space: pre-line; }   /* keeps single line breaks from the editor */
.prose h2 { font-size: 1.375rem; margin: 1.4em 0 0.5em; }
.prose a { text-decoration: underline; text-underline-offset: 0.18em; }
.muted { color: var(--quiet); font-weight: 600; }

.empty { max-width: 560px; padding: 22px 24px; border: var(--tile-border) dashed var(--quiet); border-radius: var(--tile-radius); }
.empty h2 { font-size: 1.25rem; margin-bottom: 6px; }
.empty p { margin: 0; color: var(--quiet); font-weight: 600; }

/* ---- footer ---- */
.foot {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--page) - 2 * var(--gutter)));
  margin: 0 auto; padding: 16px 0 40px; border-top: 1px solid var(--rule);
}
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 54px; list-style: none; margin: 0; padding: 0; }
.foot a { font-weight: 600; }

/* Language: "EN DE" just left of the sun/moon. The current one in ink, the other quiet. */
.lang-switch { display: flex; gap: 14px; margin-left: auto; }
.lang-switch a { color: var(--quiet); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current] { color: var(--ink); }

/* Sun/moon button: shows the moon in light mode, the sun in dark mode. */
.theme-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  position: relative; top: 2px;   /* centre the icon on the letters of "about", not on their line box */
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.theme-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dark .show-light, .light .show-dark { display: none; }

/* ---- phones and narrow windows ---- */
@media (max-width: 760px) {
  .ex-pair { grid-template-columns: 1fr; gap: 0; }
  .bar { padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; }
  .brand-name { font-size: 2rem; }
  .brand-tag { font-size: 1.25rem; }
  .search, .search input { width: 100%; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  /* Phones: no category list; the trail and the tiles are the way around. */
  .side { display: none; }
  .ex-page.has-related { grid-template-columns: minmax(0, 1fr); grid-template-areas: "trail" "body" "related-h" "related"; }
  .related-h { margin-top: 32px; }
  .related .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .trail h1 { font-size: 28px; line-height: 34px; }
  .trail li { font-size: 18px; line-height: 26px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .tile { min-height: 100px; }
  .tile-name { font-size: 1.25rem; }
}