/* UI-scoped overrides. Kept as a real <link>ed CSS file (not an inline
   <style> in the SSR tree) because inline <style> text gets its `>` escaped to
   &gt; on the server, causing a hydration mismatch. */

/* Brand logo reads too small at the base 40px/32px sizes — render it at 48×48. */
.navbar-brand img, .footer-brand img { height: 48px; width: auto; }

/* Contact button: `.navbar-links a` (muted) had higher specificity than
   `.btn-primary{color:#fff}`, so the nav Contact button showed gray-on-indigo
   and looked disabled. Bump specificity to restore white + no underline. */
.navbar-links a.btn-primary { color: #fff; text-decoration: none; }

/* /components catalog: components-page.css is light-toned but the site is dark,
   so re-tone catalog text so titles/icons are readable on the dark background. */
.component-page-section > h2 { color: #fff; }
.component-demo-frame > h3 { background: #18181b; color: #e4e4e7; }
.component-demo-desc { color: #a1a1aa; }
.filter-demo { color: #e4e4e7; }
.component-page-card { background: #18181b; border-color: rgba(255,255,255,.12); color: #e4e4e7; }
.component-page-card code { background: #27272a; color: #e4e4e7; }

/* Catalog header reuses the design-system PageHero; scope its spacing (no fixed
   navbar here, so drop the navbar-clearance top gap). */
.component-page .page-hero { padding: 4.5rem 0 2.5rem; }
.component-page-toc { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.component-page-toc a { color: #a1a1aa; }
.component-page-toc a:hover { color: #fff; }

/* Bring the page-hero title closer to the breadcrumb on crumbed pages. The
   breadcrumb already clears the fixed navbar (`.breadcrumbs{padding:7rem 0 0}`),
   so stacking `.page-hero{padding:10rem 0 3rem}` right after it leaves a huge
   empty gap. Shrink the hero's top padding only when a breadcrumb precedes it,
   so crumbed pages sit as close to the header as the no-crumb pages (Team/About). */
.breadcrumbs + #page-content .page-hero { padding-top: 2.5rem; }

/* Home hero: top-anchor the banner so it sits at the same header distance as
   every other page's PageHero (instead of a full-viewport vertically-centered
   section that pushes content ~145px too far down). */
.hero { min-height: auto; padding: 6rem 0 3rem; }
.hero-split { min-height: auto; }
.hero-content { justify-content: flex-start; padding: 1.5rem 3.5rem 3rem; }
.hero-content .hero-badge { margin-bottom: 1.25rem; }