/* ------------------------------------------------------------------
   Site-level CSS (token-only). Linked AFTER the vendored DS styles.css
   in BaseLayout, so these site overrides win over DS defaults without
   editing the read-only Design System.

   Rules here cover two seams the DS v0.1 doesn't handle for a marketing
   site: (1) ghost buttons placed on DARK surfaces (DS ghost uses dark
   text, invisible on dark), and (2) the site header tint. Token-only —
   no raw hex, no arbitrary px. Flag missing tokens to the Director.
   ------------------------------------------------------------------ */

/* (1) Ghost buttons on dark surfaces (hero + dark sections).
   DS .asc-btn--ghost is themed for light surfaces (color: --text-body),
   which is unreadable on dark. Re-theme for dark contexts only; the
   descendant selector also raises specificity above the DS single class. */
.asc-hero .asc-btn--ghost,
.asc-section--dark .asc-btn--ghost {
  color: var(--text-a-strong);
  border: 1px solid var(--rule-a);
}
.asc-hero .asc-btn--ghost:hover,
.asc-section--dark .asc-btn--ghost:hover {
  background: var(--ink-700);
  color: var(--text-a-strong);
  border-color: var(--steel);
}

/* (2) Site header — keep the translucent blur, but tint it brand-blue so
   the bar always reads as a surface over both dark and light pages.
   color-mix keeps it token-derived; !important overrides the DS scoped
   rule (which carries an attribute selector). backdrop-filter is left to
   the DS rule and still applies. */
header.asc-site-header {
  background: color-mix(in srgb, var(--blue-950) 82%, transparent) !important;
  border-bottom: 1px solid var(--rule-a) !important;
}

/* (3) Hero title on small screens. The DS hero title is fixed at --text-6xl
   (76px), which overflows a 390px phone viewport ("delivered", "specialists"
   clip at the right edge). Step it down with the same tokens the DS uses;
   the lede and padding follow. Scoped to the hero so section headings keep
   their own page-level rules. !important for the same reason as (2):
   the DS Hero's styles are Astro-scoped (attribute selector) and outrank a
   plain class. */
@media (max-width: 60rem) {
  .asc-hero__title { font-size: var(--text-5xl) !important; }
}
@media (max-width: 40rem) {
  .asc-hero__title { font-size: var(--text-4xl) !important; line-height: var(--leading-tight) !important; }
  .asc-hero__lede { font-size: var(--text-lg) !important; }
  .asc-hero__inner { padding-top: var(--space-10) !important; padding-bottom: var(--space-8) !important; }
}

/* (4) Button-links on hover. DS tokens/base.css has `a:hover { color: var(--blue-700) }`
   (specificity 0,1,1), which outranks the single-class button variants (0,1,0) —
   so an <a class="asc-btn asc-btn--primary"> turns blue text on a blue background
   the moment it is hovered. Re-assert each variant's own text colour with an
   `a.` prefix (0,2,1). Values are the DS's own. */
a.asc-btn--primary:hover { color: var(--text-on-brand); }
a.asc-btn--accent:hover,
a.asc-btn--danger:hover { color: var(--text-on-brand); }
a.asc-btn--secondary:hover,
a.asc-btn--ghost:hover { color: var(--text-strong); }
a.asc-btn--link:hover { color: var(--blue-700); }

/* (5) Hero aside carrying the service arc (Services page). The DS aside draws
   its own top rule and padding; the arc draws the rule itself (it needs the
   nodes on it), so drop the aside's when an arc is inside. !important for the
   same reason as (2). */
.asc-hero__aside:has(.arc) { border-top: 0 !important; padding-top: 0 !important; }
.asc-hero__aside > .arc { width: 100%; }