/* site-theme.css: default site-level polish over the Theme Studio blocks.

   Ships with every new full-mode (Theme Studio) site and is registered in
   config/site.php "site_css". It gives a fresh site a designed look on day one,
   a soft branded hero band, card depth + a brand top-accent + hover lift, a
   light-on-dark readable footer, and page rhythm, instead of bare blocks on
   white. Edit it freely per site, or delete an override you do not want.

   TOKEN-DRIVEN: every value reads from the Theme Studio --ts-* design tokens
   (or derives from them via color-mix), so this polish adapts automatically to
   whatever palette the Theme tab sets. There are no hard-coded brand colors.

   CASCADE RULE (do NOT remove the `body.ts-page` prefix): the engine emits
   site_css BEFORE the per-block <style>, so an equal-specificity rule here
   would LOSE to the block rule (which comes later in source order). Scoping
   every override under `body.ts-page` (the class the Theme Studio public render
   puts on <body>) raises specificity above the block rules, so these win
   regardless of source order. Drop the prefix and the footer/card/hero
   overrides silently stop working. */

:root {
  /* Translucent surface the sticky-nav blur expects; not one of the registry
     tokens, so it is defined here (white at ~82% opacity). */
  --ts-color-surface-1-translucent: rgba(255, 255, 255, 0.82);
}

/* Faint page tint so white sections and cards read as layered. */
body.ts-page {
  background-color: var(--ts-color-surface-2);
}

/* Navigation: subtle lift + a clear divider under the bar. */
body.ts-page .ts-nav-light-blur-sticky {
  box-shadow: var(--ts-shadow-sm);
  border-bottom-color: var(--ts-color-border);
}
body.ts-page .ts-nav-light-blur-sticky .ts-nav-cta {
  box-shadow: var(--ts-shadow-sm);
}

/* Hero (minimal text): a soft branded band instead of plain white. The tint is
   derived from the primary color via color-mix, so it follows the palette; the
   solid background-color above it is the fallback if color-mix is unsupported. */
body.ts-page .ts-hero-minimal-text-only {
  background-color: var(--ts-color-surface-1);
  background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--ts-color-primary) 8%, var(--ts-color-surface-1)) 0%,
      var(--ts-color-surface-2) 100%);
  border-bottom: 1px solid var(--ts-color-border);
  padding-top: calc(var(--ts-space-xl) * 1.35);
  padding-bottom: calc(var(--ts-space-xl) * 1.35);
}
body.ts-page .ts-hero-minimal-text-only .ts-hero-cta {
  box-shadow: var(--ts-shadow-md);
}

/* Section heading: a short brand-colored rule under cards-section headings. */
body.ts-page .ts-cards-3up .ts-cards-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--ts-space-sm) auto 0;
  background-color: var(--ts-color-primary);
  border-radius: 2px;
}

/* Cards: white surface, hairline border, brand top-accent, soft shadow, hover
   lift, applied to every card style (surface/outlined/elevated) so the polish
   shows whichever variant the page picks. The three-selector form clears the
   block's own per-variant border/box-shadow rules on specificity. */
body.ts-page .ts-cards-3up.ts-card-surface .ts-card,
body.ts-page .ts-cards-3up.ts-card-outlined .ts-card,
body.ts-page .ts-cards-3up.ts-card-elevated .ts-card {
  background-color: var(--ts-color-surface-1);
  border: 1px solid var(--ts-color-border);
  border-top: 3px solid var(--ts-color-primary);
  box-shadow: var(--ts-shadow-md);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
body.ts-page .ts-cards-3up.ts-card-surface .ts-card:hover,
body.ts-page .ts-cards-3up.ts-card-outlined .ts-card:hover,
body.ts-page .ts-cards-3up.ts-card-elevated .ts-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ts-shadow-lg);
}

/* Footer: the dark background now comes from the --ts-color-footer-bg token in
   the footer block itself; here we just soften the divider above the bottom bar
   so it reads as a hairline on the dark band. */
body.ts-page .ts-footer-three-column .ts-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}
