/* =============================================================================
   styles.css: page styles for the standalone Byman Cykler placeholder
   HAND-WRITTEN (build.mjs never changes this file). Loaded after tokens.css,
   which holds every colour, font and size (the Press values). Section numbers
   (§) refer to design/ui-spec.md; A1–A7 are the page parts in section-map.md.
   Breakpoints: 768px (md), 1024px (lg, the theme's desktop), 1280px (xl).
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text-small);
  font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-body);
  line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
p, address, ul { margin: 0; }
address { font-style: normal; }
h1, h2 {
  margin: 0; color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}
a { color: inherit; }
img, svg, picture { display: block; }
/* §10 Headings count as "large text" only from 1024px; below that the 21.88px ones use the small-text colour */
@media (max-width: 1023.98px) { .info h2, .title-row h2, .brand--more p { color: var(--color-text-small); } }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* §3 Every section ends with a 1px pink line; no margins between sections */
.sec { border-bottom: var(--border-width) solid var(--color-line); }
/* §3 Grid look: pink container, 1px gaps, white cells */
.grid { display: grid; gap: var(--grid-gap); background: var(--color-line); }
.grid > .cell { background: var(--color-bg); min-width: 0; }

/* §8.2 Focus: 2px red ring, 3px away from the element. Mouse clicks show no ring. */
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

/* Arrows added by CSS (" →", " ↓") are decoration: hidden from screen readers where the browser allows it */
.btn::after { content: var(--button-arrow); }
.textlink span::after { content: var(--link-arrow); }
.status::after { content: "\00a0\2193"; }
@supports (content: "x" / "") {
  .btn::after { content: var(--button-arrow) / ""; }
  .textlink span::after { content: var(--link-arrow) / ""; }
  .status::after { content: "\00a0\2193" / ""; }
}

/* ---------- Labels (eyebrow, status) ---------- */
.label {
  font-family: var(--font-label); font-size: var(--subheading-size); line-height: var(--line-height-subheading);
  letter-spacing: var(--letter-spacing-label); text-transform: var(--text-transform-label);
}
.dot::before {
  content: ""; flex: none; width: var(--subheading-dot-size); height: var(--subheading-dot-size);
  border-radius: 50%; background: currentColor;
}

/* ---------- A1 status strip (§6.4) ---------- */
.strip { display: flex; justify-content: center; padding: 0 var(--page-padding); text-align: center; }
.status {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: var(--tap-target); padding-inline: var(--space-xs); text-decoration: none; /* padding: room for the inset focus ring (QA N1) */
}
@media (pointer: fine) { .status { min-height: var(--announcement-height); } }
.status:focus-visible { outline-offset: calc(var(--focus-ring-width) * -1); } /* inside: the strip touches the window top */
.status[data-state]::before {
  content: ""; flex: none; width: var(--status-dot-size); height: var(--status-dot-size); border-radius: 50%;
}
.status[data-state="open"]::before { background: currentColor; }                                        /* ● open */
.status[data-state="closed"]::before { box-shadow: inset 0 0 0 var(--status-ring-width) currentColor; } /* ○ closed */

/* ---------- A2 photo (§4) ---------- */
.hero { padding: var(--media-padding); }
.hero__frame {
  position: relative; margin: 0 auto; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-media); background: var(--color-media-placeholder);
}
.hero__frame picture, .hero__frame img { width: 100%; height: 100%; }
.hero__frame img { object-fit: cover; object-position: var(--photo-focus); }
/* Full-bleed (photo >= 2400px wide and landscape): natural shape on mobile (max 3:2), 16:9 from 1024px */
.hero--full .hero__frame { aspect-ratio: var(--photo-ratio-mobile); }
@media (min-width: 1024px) { .hero--full .hero__frame { aspect-ratio: var(--hero-aspect); } }
/* Contained (smaller photo): never wider than 1.5x the file, never taller than 75vh, never cropped */
.hero--contained .hero__frame {
  aspect-ratio: var(--photo-ratio);
  width: min(100%, var(--photo-cap), calc(var(--photo-contained-max-h) * var(--photo-ratio)));
}

/* §4.5 Scrolling name (Press "Image with scrolling text"). Decorative: aria-hidden in the HTML. */
.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: var(--hero-scroll-bottom); z-index: 1;
  overflow: hidden; pointer-events: none; white-space: nowrap;
  color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  font-size: var(--hero-scroll-text-size); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading);
}
@media (min-width: 1024px) { .hero--contained .hero__scroll { font-size: var(--hero-scroll-size-contained); } }
.hero__track { display: flex; justify-content: center; }
.hero__track span { flex: none; padding-right: 0.3em; }
.hero__track span + span { display: none; }       /* no JS or reduced motion: one copy, centred, still */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__track {
    justify-content: flex-start; width: max-content;
    animation: hero-scroll calc(var(--hero-scroll-unit) * 6) linear infinite; /* 12s per copy, 6 copies per half */
  }
  .js .hero__track span + span { display: block; }
  .js .hero.is-paused .hero__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .js .hero__frame:hover .hero__track { animation-play-state: paused; }
}
@keyframes hero-scroll { to { transform: translateX(-50%); } }

/* §4.6 Pause button (WCAG 2.2.2): only when the name moves. 44px to tap, 33px circle drawn. */
.hero__pause { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__pause {
    position: absolute; z-index: 2;
    top: calc(var(--media-content-padding) - 5.5px); left: calc(var(--media-content-padding) - 5.5px);
    display: grid; place-items: center; width: var(--tap-target); height: var(--tap-target); padding: 0;
    border: 0; border-radius: var(--radius-button); background: none; color: var(--color-text); cursor: pointer;
  }
}
.hero__pause::before {
  content: ""; position: absolute; inset: calc((var(--tap-target) - var(--button-height)) / 2);
  border: var(--border-width) solid currentColor; border-radius: var(--radius-button); background: var(--color-bg);
}
/* Focus (QA S2): the ring hugs the white circle (3px white + 2px red, like the other buttons), so it never
   depends on the photo behind it. The transparent outline stays for Windows high-contrast mode. */
.hero__pause:focus-visible { outline-color: transparent; }
.hero__pause:focus-visible::before {
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-bg),
              0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}
.hero__pause i {   /* pause icon: two 3px bars, 12px tall */
  position: relative; display: block; width: 10px; height: 12px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.hero__pause[aria-pressed="true"] i {   /* play icon: a triangle */
  width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

/* §4.7 No photo: the name as a still band */
.name-band {
  padding: var(--space-sm) var(--page-padding); text-align: center; overflow: hidden; white-space: nowrap;
  color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  font-size: var(--hero-scroll-text-size); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading);
}

/* ---------- A3 eyebrow, h1, intro ---------- */
.intro { text-align: center; padding: var(--space-md) var(--page-padding); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--subheading-margin-bottom); }
.intro h1 { font-size: var(--heading-feature-size); margin: 0 auto; text-wrap: balance; }
.lede { margin: var(--space-sm) auto 0; max-width: 75ch; text-wrap: pretty; } /* pretty: no single-word last line (QA N2) */
@media (min-width: 1024px) {
  .intro h1 { max-width: var(--text-width-feature); }
  .lede { max-width: min(var(--text-width-page), 75ch); }
}

/* ---------- A4 buttons ---------- */
.ctas { grid-template-columns: 1fr; border-bottom: var(--border-width) solid var(--color-line); }
.ctas > .cell { padding: var(--space-xs) var(--page-padding); }
@media (min-width: 768px) { .ctas { grid-template-columns: repeat(var(--cta-count, 3), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ctas > .cell { padding: var(--space-sm) var(--page-padding); } }
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--tap-target);
  padding: var(--button-padding-y) var(--button-padding-x); text-align: center; text-decoration: none;
  font-family: var(--button-font); font-size: var(--button-font-size); line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing); text-transform: var(--button-text-transform);
  color: var(--color-text-small); background: var(--color-button-secondary-bg);
  border: var(--button-border-width) solid currentColor; border-radius: var(--button-radius);
  transition: var(--button-transition);
}
.btn--primary { color: var(--color-button-text-primary); background: var(--color-button-bg-primary); border-color: var(--color-button-bg-primary); }
@media (min-width: 1024px) and (pointer: fine) { .btn { min-height: var(--button-height); } }

/* ---------- A4 info cells: hours, contact, address ---------- */
.info { grid-template-columns: 1fr; }
.info > .cell { padding: var(--space-md) var(--page-padding); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info > .cell--hours { grid-row: span 2; }
}
@media (min-width: 1024px) { .info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info h2 { font-size: var(--heading-secondary-size); margin-bottom: var(--space-sm); scroll-margin-top: var(--space-sm); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--hours-cell-pad-y) 0; border-top: var(--border-width) solid var(--color-line);
  text-align: left; vertical-align: top; font-weight: inherit;
}
.table tr:last-child > * { border-bottom: var(--border-width) solid var(--color-line); }
.hours td { text-align: right; white-space: nowrap; padding-left: var(--space-sm); }
/* §6.3 Today: bold + 7px dot (set by app.js) */
.hours tr.is-today { font-weight: var(--today-weight); }
.hours tr.is-today th::before {
  content: ""; display: inline-block; width: var(--subheading-dot-size); height: var(--subheading-dot-size);
  border-radius: 50%; background: currentColor; margin-right: var(--space-2xs); vertical-align: 0.05em;
}
.details th { width: var(--hours-label-width); padding-right: var(--space-xs); }
.details td { overflow-wrap: anywhere; }
@media (pointer: coarse) {   /* §8.3 phone and email rows become 44px tap targets */
  .details th, .details td { padding-block: calc((var(--tap-target) - 1em * var(--line-height-body)) / 2); }
  /* QA S1: an invisible layer makes the whole 44px cell tappable, not just the text. Nothing moves. */
  .details td { position: relative; }
  .details td > a::before { content: ""; position: absolute; inset: 0; }
}
.small { font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.hours-source { margin-top: var(--space-xs); }

/* §6.5 Special-hours notice */
.notice { border: var(--notice-border-width) solid currentColor; padding: var(--notice-padding); margin-bottom: var(--space-sm); }
.notice__title { margin-bottom: var(--space-xs); }
.notice__table td { text-align: right; white-space: nowrap; padding-left: var(--space-sm); }
.notice__table tr:last-child > * { border-bottom: 0; }
.notice__table .notice__note td { border-top: 0; padding-top: 0; padding-left: 0; text-align: left; white-space: normal; }

/* Links */
.inline-link { text-decoration-line: underline; text-decoration-thickness: var(--text-border-width); text-underline-offset: 0.2em; }
.textlink { position: relative; display: inline-block; text-decoration: none; text-transform: var(--link-text-transform); }
.textlink span { border-bottom: var(--link-border-width) solid currentColor; padding-bottom: var(--link-padding-bottom); }
/* §8.3 bigger tap area without moving anything: an invisible 44px-tall layer over the link */
.hit::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc((100% - var(--tap-target)) / 2); bottom: calc((100% - var(--tap-target)) / 2);
}
.stack > * + * { margin-top: var(--space-sm); }
.stack > .textlink-wrap { margin-top: var(--space-xs); }
.email-missing { margin-top: var(--space-sm); }

/* ---------- A5 brands (§5) ---------- */
.title-row { text-align: center; padding: var(--section-header-padding-top) var(--page-padding) var(--section-header-padding-bottom); }
.title-row h2 { font-size: var(--heading-standard-size); }
.brand-grid { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(var(--brand-cols), minmax(0, 1fr)); }
.brand { height: var(--brand-cell-h); padding: var(--brand-cell-pad); display: flex; align-items: center; justify-content: center; }
/* §5.3 height = base x scale (x 1.2 for square badges); wide logos shrink to the cap, never stretch */
.logo {
  --h: calc(var(--brand-logo-h) * var(--scale, 1) * var(--badge, 1));
  flex: none; width: min(calc(var(--h) * var(--ratio)), var(--brand-logo-max-w)); height: auto;
  aspect-ratio: var(--ratio); color: var(--color-text);
}
.logo--badge { --badge: var(--brand-badge-factor); }
/* §5.5 PNG logos (ENVE, GripGrab): the PNG is a mask filled with the text colour */
.logo--png {
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.logo--png img { display: none; }
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .logo--png { background: none; }
  .logo--png img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0); } /* black: allowed */
}
/* §5.4 "…og mange flere" fills the rest of the last row (spans written by build.mjs) */
.brand--more { grid-column: span var(--span-2); }
.brand--more p {
  text-align: center; text-wrap: balance; color: var(--color-text);
  font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: var(--brand-more-size);
  line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading);
}
@media (min-width: 768px) { .brand--more { grid-column: span var(--span-4); } }
@media (min-width: 1024px) { .brand-grid--many { --brand-cell-h: var(--brand-cell-h-many); --brand-logo-h: var(--brand-logo-h-many); } }
@media (min-width: 1280px) {
  .brand-grid--many { --brand-cols: var(--brand-cols-many); }
  .brand-grid--many .brand--more { grid-column: span var(--span-6); }
}

/* ---------- A6 wordmark (standalone; on Shopify the theme's password section sits here) ---------- */
/* Override of the tokens.css value 5.8, which was measured for the fallback fonts. With the real
   Instrument Serif (self-hosted since 2026-10-09) "Byman Cykler" is 4.47em wide, so 5.2 fills 86% of
   the row, as A7 intended. While the font loads, Bodoni 72 fills 96% (still one line). */
:root { --wordmark-divisor: 5.2; }
.wordmark-row { container-type: inline-size; padding: var(--space-sm) var(--page-padding); }
.wordmark {
  text-align: center; color: var(--color-text); text-wrap: balance;
  font-family: var(--font-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading); padding-bottom: 0.2em;   /* room for the "y" descenders */
  font-size: calc(100vw / (var(--wordmark-divisor) + 0.4));             /* browsers without container units */
  font-size: calc(100cqi / var(--wordmark-divisor));
}
/* §1.4 when build.mjs LOGO_FILE is set */
.wordmark__logo { margin: 0 auto; max-width: 100%; max-height: 40vh; width: auto; height: auto; color: var(--color-text); }
svg.wordmark__logo { width: 100%; }

/* ---------- A6 name band (Søren, 2026-10-09): "Byman Cykler." runs like the banner on the photo ---------- */
/* Same font, size and speed as .hero__scroll (it reuses .hero__track), but edge to edge and with its own
   pause button. Still and centred without JS or with reduced motion, like the photo banner. */
.name-scroll {
  position: relative; overflow: hidden; white-space: nowrap;
  --name-scroll-pad: var(--space-md);                             /* 28px; 56px on desktop (below) */
  padding: var(--name-scroll-pad) 0 calc(var(--name-scroll-pad) + 0.15em);   /* the extra 0.15em keeps the "y" descenders visible */
  color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  font-size: var(--hero-scroll-text-size); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading);
}
@media (min-width: 1024px) {
  .name-scroll { --name-scroll-pad: var(--space-lg); }
  .name-scroll--contained { font-size: var(--hero-scroll-size-contained); }
}
.js .name-scroll.is-paused .hero__track { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .js .name-scroll:hover .hero__track { animation-play-state: paused; }
}
/* The pause button sits at the left, centred in the band (the rest of its look comes from .hero__pause) */
.js .name-scroll__pause { top: 50%; left: calc(var(--page-padding) - 5.5px); transform: translateY(-50%); }

/* ---------- A7 footer ---------- */
.foot { grid-template-columns: 1fr; border-bottom: var(--border-width) solid var(--color-line); }
@media (min-width: 768px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot > .cell { padding: var(--space-sm) var(--page-padding) var(--space-md); }
.foot ul { list-style: none; padding: 0; }
.menu-link { display: inline-flex; align-items: center; min-height: var(--tap-target); text-decoration: none; text-transform: var(--link-text-transform); }
.foot .inline-link { display: inline-flex; align-items: center; min-height: var(--tap-target); }
@media (pointer: fine) {   /* mouse: at least 24px per link (WCAG 2.2 2.5.8, QA M2) */
  .menu-link { min-height: 24px; }
  .foot .inline-link { min-height: 24px; }
}
.foot a { overflow-wrap: anywhere; }   /* a long email never pushes the page wider (QA N10) */
.legal { padding: var(--space-sm) var(--page-padding); }