/* BlueBuzzah.com layout. Every value is a design-system token (css/tokens.css); components come from
   css/bundle.css. Breakpoints are web.md's: 600px (gutters, hero type) and 900px (menu collapse). */

html { scroll-behavior: smooth; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; height: auto; }

/* Links: underlined, brand-coloured; colour is never the only cue (README Color: link) */
a { color: var(--link); text-decoration: underline; text-underline-offset: var(--space-1); }
a:not(.bb-btn):focus-visible, summary:not(.bb-btn):focus-visible {
  outline: var(--focus-width) solid transparent; outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring); border-radius: var(--radius-xs);
}
/* bundle.css styles <button>s, which are border-box by default; links styled as buttons must match */
a.bb-btn { box-sizing: border-box; }
.link-icon { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); }

/* Layout --------------------------------------------------------------- */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-16); }
.section--sunken { background: var(--surface-sunken); }
.section__title { margin-bottom: var(--space-8); }
.prose { max-width: var(--prose-max); }
.stack > * + * { margin-top: var(--space-4); }
.list-reset { list-style: none; padding: 0; margin: 0; }
.grid-2, .grid-3 { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--target-gap); }
/* phones: button rows stack one per line, centred */
@media (max-width: 599.98px) {
  .button-row { flex-direction: column; align-items: center; }
}
.text-muted { color: var(--ink-muted); }
.icon-brand { color: var(--brand); }

@media (min-width: 600px) {
  .container { padding-inline: var(--space-6); }
  .section { padding-block: var(--space-20); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .section { padding-block: var(--space-24); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hero on abyss (web.md Home page 1) ----------------------------------- */
.hero { background: var(--abyss); color: var(--on-abyss); padding-block: var(--space-16); }
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
/* the mark only shows beside the text; when it would drop under the buttons it's hidden instead */
.hero__mark { display: none; width: calc(var(--space-20) * 2.5); height: auto; }
/* Button outline rule: in light themes the brand fill nearly matches abyss (2.5:1, 1.56:1 in light-hc),
   so it gets an outline in its label colour (components/Button/README.md) */
.hero .bb-btn--primary { border-color: var(--on-brand); }
@media (min-width: 600px) {
  .hero { padding-block: var(--space-24); }
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__mark { display: block; }
}

/* The one restated type style: display-xl steps down to display-l under 600px (tokens.json). Must equal
   tokens.css .display-l; re-check after a design-system re-import. */
@media (max-width: 599.98px) {
  .display-xl { font-family: var(--font-display); font-size: 2.75rem; line-height: 3rem; font-weight: 600; letter-spacing: -0.015em; }
}

/* Lockup: mark + BlueBuzzah in Lexend 600, gap space-3 (README Logo) ---- */
.lockup { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target); color: var(--ink); text-decoration: none; }
.lockup img { height: var(--space-10); width: auto; }

/* Header (web.md Layout) ---------------------------------------------- */
.site-header { position: relative; background: var(--surface); border-bottom: var(--border-hairline) solid var(--line); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--target-gap); padding-block: var(--space-3); }
.nav-desktop { margin-left: auto; }
.nav-desktop ul { display: flex; gap: var(--target-gap); }
.nav-link { display: flex; align-items: center; min-height: var(--target); padding-inline: var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.nav-link:hover { color: var(--brand); }
.nav-mobile { margin-left: auto; }
.nav-mobile summary { list-style: none; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  display: grid; gap: var(--target-gap); padding: var(--space-4);
  background: var(--surface-overlay); border-bottom: var(--border-hairline) solid var(--line); box-shadow: var(--shadow-3);
}
.nav-mobile__panel ul { display: grid; gap: var(--target-gap); }

@media (max-width: 899.98px) {
  .nav-desktop, .header-cta { display: none; }
}
@media (min-width: 900px) {
  .nav-mobile { display: none; }
}

/* Footer (web.md Layout: disclaimer, GitHub, license, contact) --------- */
.site-footer { background: var(--surface); border-top: var(--border-hairline) solid var(--line); padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; gap: var(--space-4); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--target-gap) var(--space-8); }
/* footer links drop the nav's side padding so the row (ending with Display settings) fits one line on a
   375px phone; target-gap still separates neighbours and each link stays at least target wide and tall */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--target-gap); }
.footer-links .nav-link { padding-inline: 0; min-width: var(--target); }
/* a display rule (e.g. bb-btn's) would otherwise beat the [hidden] attribute */
.js-only[hidden] { display: none; }

/* Compact Button: smaller to the eye, same 48px target. accessibility.md Motor: "Extend hit areas past
   the visual edge when the visual must be smaller." Text size comes from the parent (.body-s). */
.btn-compact {
  position: relative; min-height: calc(var(--target) - var(--space-3)); padding-inline: var(--space-3);
  gap: var(--space-1); font-size: inherit; line-height: inherit;
}
.btn-compact::after { content: ""; position: absolute; inset: calc((100% - var(--target)) / 2) 0; }

/* Display settings: a sheet over scrim (README Color: surface-overlay, shadow-3; Space: radius-xl, space-8) */
.settings-dialog {
  /* small screens: tighter margins and padding so the Appearance control (~247px wide) fits at 320px */
  width: min(calc(100% - 2 * var(--space-3)), calc(var(--prose-max) * 2 / 3)); max-width: none;
  max-height: calc(100% - 2 * var(--space-3)); padding: var(--space-4); box-sizing: border-box;
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-xl);
  background: var(--surface-overlay); color: var(--ink); box-shadow: var(--shadow-3);
}
.settings-dialog[open] { display: grid; gap: var(--space-6); }
.settings-dialog::backdrop { background: var(--scrim); }
[data-theme$="-hc"] .settings-dialog { border-color: var(--line); } /* HC themes drop shadows (README Space) */
.theme-controls { display: grid; gap: var(--space-4); }
@media (min-width: 600px) {
  .settings-dialog { padding: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .site-header, .site-footer, .nav-mobile__panel, .settings-dialog { border-color: CanvasText; }
  /* the hero rule above beats bundle.css's forced-colors ButtonText border; restore it */
  .hero .bb-btn--primary { border-color: ButtonText; }
}

/* Home sections (web.md Home page 3-5) ---------------------------------- */
.section-block { margin-top: var(--space-8); }
/* the flex gap is the card's only vertical spacing, so the head drops bundle.css's margin (else 24px, not 12px) */
.bb-card { display: flex; flex-direction: column; gap: var(--space-3); }
/* rows stack at narrow widths and 200% zoom: the nowrap badge drops below the title (README Type: layouts reflow) */
.bb-card__head { flex-wrap: wrap; margin-bottom: 0; }
.card-action { margin-top: auto; align-self: flex-start; }
/* icon centred on the title's first line, even when the title wraps (space-2 = icon-to-label gap at title size);
   the svg box is one line tall and its viewBox keeps the 24px glyph centred in it */
.title-with-icon { display: flex; align-items: flex-start; gap: var(--space-2); }
.title-with-icon > svg { height: 1lh; }
/* "What is BlueBuzzah?" features: icon beside a bold line and a muted line, centred on the bold line */
.feature { display: flex; align-items: flex-start; gap: var(--space-3); }
.feature > svg { height: 1lh; }
/* text then features below (features 1 column <600px, 2 columns from 600px via .grid-2);
   from 900px the features move beside the text as one column, centred against it */
.about-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-12); align-items: center; }
  .about-features { grid-template-columns: minmax(0, 1fr); }
}
.title-link .bb-icon { display: inline-block; vertical-align: middle; }
/* outlined like the secondary Button beside them, with the same hover/pressed border states (bundle.css .bb-btn--secondary) */
.download-badge {
  display: inline-block; border-radius: var(--radius-md); line-height: 0; overflow: hidden;
  border: var(--border-control) solid var(--brand);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.download-badge:hover { border-color: var(--brand-hover); }
.download-badge:active { border-color: var(--brand-pressed); }
/* the guide button matches the outlined badges' height, even when it wraps to its own line */
.download-row { --badge-height: 60px; } /* the badge images' intrinsic height (width/height attributes) */
.download-row .bb-btn { min-height: calc(var(--badge-height) + 2 * var(--border-control)); }

/* Long-form pages (privacy) ------------------------------------------- */
.stack-lg > * + * { margin-top: var(--space-10); }
.prose ul { padding-left: var(--space-6); }