/*
 * radiogutscheine: only what theme tokens cannot express
 * (docs/superpowers/specs/2026-10-03-whitelabel-radiogutscheine-tenant-design.md §4.5).
 * Loaded through tenant.cssOverride. Every selector starts with :root, which adds one class's
 * worth of specificity, so it beats the app's single-class rules whatever the stylesheet order
 * (in dev, Vite injects the app CSS late). Against two-class app rules it only ties, and the later
 * stylesheet wins: e.g. .sf-container.sf-auth-page (_auth.scss) keeps /login's 24rem column over
 * :root .sf-container below because the app CSS loads after this file.
 * Measurements in the comments are the legacy shop's (demostore.urlaubsgutschein.kaufen).
 */

/* Square corners throughout: the theme's radius is 0px, and the one radius that adds to it
   (cards: calc(var(--radius) + 4px)) is zeroed too. */
:root:root {
  --radius-xl: 0px;
}

/* Header: solid white, 80px tall with a 36px logo and a soft shadow instead of the rule. */
:root .sf-header {
  background: var(--background);
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
}

:root .sf-header__inner {
  height: 80px;
}

:root .sf-header__logo img {
  height: 36px;
}

/* Legacy's 1152px content width (Bulma widescreen), so all header items fit at 1280px. */
:root .sf-container {
  max-width: 1200px;
}

/* Bold navigation links and buttons, headings in Open Sans 700. Not every <a>: result rows are
   links wrapping whole cards, and their copy would turn bold. */
:root .ds-btn,
:root .sf-header__link,
:root .sf-header__nav a,
:root .sf-footer__link,
:root .sf-prose a {
  font-weight: 700;
}

:root :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
}

/* Hero: the copy sits near the top of the band; the two labels touch (a flex row drops the
   space between them, which stays in the h1's text for screen readers). */
:root .sf-home-hero__inner {
  justify-content: flex-start;
  padding-block: 3.5rem 2rem;
}

:root .sf-home-hero__heading {
  /* Flex makes each label a block, which turns off the app's per-line label wrapping; fine for short copy. */
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  line-height: 1.35;
  margin-block: 0;
}

:root .sf-home-hero__accent,
:root .sf-home-hero__title {
  padding: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

:root .sf-home-hero__subtitle {
  padding: 0.3rem 0.5rem;
  font: 400 1.25rem / 1.3 var(--font-sans);
}

/* The result row's CTA is a solid orange bar, like legacy's "Zum Angebot" button. */
:root .sf-row__cta {
  justify-content: center;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}

:root .sf-row:hover .sf-row__cta {
  text-decoration: none;
  background: color-mix(in oklch, var(--primary) 88%, black);
}

/* Hover darkens the fill instead of lightening it (the app mixes in 10% var(--background),
   white here), so white text keeps WCAG AA: 6.27:1 instead of 3.93:1 on the #b35c00 primary. */
:root .ds-btn--primary:hover,
:root .ds-chip[aria-pressed="true"]:hover {
  background: color-mix(in oklch, var(--primary) 88%, black);
}

@media (min-width: 1081px) {
  :root .sf-row__price .sf-row__cta { align-self: stretch; }
}

/* The footer is dark (#383838): muted text and rules derive from its white foreground. */
:root .sf-footer {
  --text-muted: rgb(255 255 255 / 0.75);
  --border: rgb(255 255 255 / 0.2);
}

@media (max-width: 767px) {
  :root .sf-header__inner { height: 64px; }
  :root .sf-header__logo img { height: 28px; }
  :root .sf-home-hero__inner { padding-block: 1.5rem; }
  :root .sf-home-hero__heading { justify-content: center; font-size: 1.5rem; }
  :root .sf-home-hero__accent,
  :root .sf-home-hero__title { padding-inline: 1rem; }
  /* Legacy shows only the two labels on phones. */
  :root .sf-home-hero__subtitle { display: none; }
}