/* ============================================================
   site.css — the website's shared layer (2026-10-29), loaded by every public page and never by the dashboards.

   What every public page shares with the homepage the owner approved (29 Oct): Archivo, self-hosted; the bar
   (the site's nav: POWALIFTA, the homepage's chapters, which are the coach's week, then Log in and Start free);
   the footer. Its classes (.bar, .foot) are its own, so it reads the same over the inside pages' styles.css.
   The homepage's own chapters live in home.css (its body is .home, not .site); every other public page's look
   (body.site, the s-* classes) lives in pages.css, which the homepage never loads.
   ============================================================ */

/* ---------- Type: Archivo, self-hosted, trimmed to weight 400 to 800, width 100 to 125, Latin (OFL, fonts/OFL-Archivo.txt).
   Until it lands, Arial sized to Archivo (measured size and line overrides), so lines wrap the same and nothing moves. */
@font-face { font-family: 'Archivo'; src: url(/fonts/archivo-tw.woff2) format('woff2'); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'); font-weight: 100 549; size-adjust: 97.8%; ascent-override: 89.8%; descent-override: 21.5%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); font-weight: 550 1000; size-adjust: 97%; ascent-override: 90.5%; descent-override: 21.6%; line-gap-override: 0%; }
body.site { --font-display: 'Archivo', 'Archivo Fallback', 'Arial Black', system-ui, sans-serif; --font-body: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-num: 'Archivo', 'Archivo Fallback', system-ui, sans-serif; }

/* ---------- The bar and the footer: their own tokens and type, the homepage's frame (1440 at most, centred). */
.bar, .foot {
  --bar-fx: calc((100vw - min(100vw, 1440px)) / 2);
  --bar-gut: clamp(16px, 4.45vw, 64px);
  --bar-cg: clamp(16px, 2.23vw, 32px);
  --bar-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-io: cubic-bezier(0.77, 0, 0.175, 1);
  --bar-t: 220ms;
  --bar-font: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box; margin: 0; border: 0; text-align: left;
  font: 400 15px/1.55 var(--bar-font); letter-spacing: -0.006em; text-transform: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.bar *, .bar *::before, .bar *::after, .foot *, .foot *::before, .foot *::after { box-sizing: border-box; }
.bar :focus-visible, .foot :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* The bar: the app's glass. Dark on the homepage (all dark, whatever the theme) and on inside pages in the dark theme;
   daylight glass on inside pages in the light theme. The homepage floats it over its opening (transparent at the very
   top, home.css); every other page keeps it at the top of the page (sticky). */
.bar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--bar-fx) + var(--bar-gut)); color: #f4f4f6;
  background: rgba(10, 10, 12, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color var(--bar-t) ease, box-shadow var(--bar-t) ease, color var(--bar-t) ease;
}
body.site .bar { position: sticky; }
.bar-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.bar-mark { display: block; flex: none; width: 26px; height: 26px; }
.bar-word { font-family: var(--bar-font); font-weight: 800; font-stretch: 125%; font-size: 16px; letter-spacing: 0.01em; }
.bar-r { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; }
.bar .bar-link { font-size: 15px; font-weight: 600; color: #c4c4cc; text-decoration: none; transition: color var(--bar-t) ease; }
/* The contents of the coach's week. The chapter in view is ink-bright, and a 2 px marker on the bar's lower edge slides
   to it (home.js; a tab indicator, fired often, so 250 ms). */
.bar-toc { position: relative; display: flex; align-items: center; gap: 26px; margin-right: 12px; }
.bar .bar-toc .bar-link[aria-current] { color: #f4f4f6; }
.bar-mk { position: absolute; left: 0; bottom: -22px; width: 100px; height: 2px; border-radius: 1px; background: currentColor; pointer-events: none;
  transform-origin: 0 50%; transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); opacity: 0;
  transition: transform 250ms var(--bar-io), opacity var(--bar-t) ease; }
.bar-toc.has-on .bar-mk { opacity: 1; }
.bar .bar-pill { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #f4f4f6; color: #0b0b0d; font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: opacity var(--bar-t) var(--bar-out), transform var(--bar-t) var(--bar-out), visibility 0s linear 0s, background-color var(--bar-t) ease, color var(--bar-t) ease; }
html[data-theme="light"] body.site .bar { background-color: rgba(246, 246, 248, 0.94); color: #0b0b0d; box-shadow: inset 0 -1px 0 rgba(15, 15, 25, 0.08); }
html[data-theme="light"] body.site .bar .bar-link { color: #3d3d45; }
html[data-theme="light"] body.site .bar .bar-toc .bar-link[aria-current] { color: #0b0b0d; }
html[data-theme="light"] body.site .bar .bar-pill { background: #0b0b0d; color: #f4f4f6; }
@media (hover: hover) and (pointer: fine) {
  .bar .bar-link:hover { color: #f4f4f6; }
  html[data-theme="light"] body.site .bar .bar-link:hover { color: #0b0b0d; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background-color: #0b0b0c; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme="light"] body.site .bar { background-color: #f4f4f6; }
}
/* An inside page shown inside the iPhone app: the bar clears the status bar. */
html.native body.site .bar { height: auto; min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
/* Skip to the page: hidden until focused. */
.bar-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #f4f4f6; color: #0b0b0d; font: 650 15px/1.3 'Archivo', 'Archivo Fallback', system-ui, sans-serif; text-decoration: none; }
.bar-skip:focus { top: 12px; }

/* The footer: the brand and its line, three columns of links, the demo's names. */
.foot { padding: 64px 0 40px; background: #050506; color: #f4f4f6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.foot-in { width: min(100% - 2 * var(--bar-gut), 1312px); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bar-cg); row-gap: 40px; align-items: start; }
.foot-brand { grid-column: 1 / span 4; }
.foot-brand p { margin: 12px 0 0; padding: 0; font-size: 15px; color: #b8b8c0; }
.foot-cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--bar-cg); }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot .fc-h { margin: 0 0 4px; padding: 0; font-size: 13px; font-weight: 650; color: #8c8c96; }
.foot .foot-cols a { font-size: 15px; font-weight: 550; color: #c8c8d0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot .foot-cols a:hover { color: #f4f4f6; } }
.foot .foot-c { grid-column: 1 / -1; margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; color: #8c8c96; }
.foot-c span { display: block; max-width: 70ch; }

@media (max-width: 1099px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-brand, .foot-cols { grid-column: 1; }
}
/* Phone width: the brand and two buttons; the chapters stay on the homepage itself. */
@media (max-width: 759px) {
  .bar { height: 56px; }
  .bar-mark { width: 24px; height: 24px; }
  .bar-word { font-size: 15px; }
  .bar-r { gap: 16px; }
  .bar-toc { display: none; }
  .foot-in { row-gap: 36px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* The programs shop is linked only once it has three published programs (app.js siteProgramsReady). */
[data-needs-programs] { display: none !important; }
html.has-programs [data-needs-programs] { display: revert !important; }