/* =========================================================
   DESIGN SYSTEM ARCHITECTURE - OOP / Hierarchical CSS
   Layers (using @layer for cascade control - inheritance like)
   - tokens (Atomic base)
   - base
   - objects (layout primitives - reusable, polymorphic)
   - components (Atomic > Compound > Composite > Complex)
   - utilities (Functional, responsive)
   No hardcodes. All via tokens. 100% responsive with clamp/%, ratios.
   Site-wide consistency. No redundant/obsolete/orphan blocks.
========================================================= */

@layer design-tokens, base, objects, components, utilities;

@import url("./base/tokens.css") layer(design-tokens);
@import url("./base/reset.css") layer(base);
@import url("./layout/container.css") layer(objects);
@import url("./components/buttons.css") layer(components);
@import url("./components/forms.css") layer(components);
@import url("./components/header.css") layer(components);
@import url("./components/footer.css") layer(components);
@import url("./components/hero.css") layer(components);
@import url("./components/cards.css") layer(components);
@import url("./components/sections.css") layer(components);
@import url("./components/admin.css") layer(components);
@import url("./components/admin-messages.css") layer(components);
@import url("./components/admin-seo.css") layer(components);
@import url("./utilities/responsive.css") layer(utilities);

/* Project-level overrides */
@layer components {
  main {
    min-height: 100vh;
  }
}

/* Unlayered: beat Bootstrap reboot for header navigation color */
.site-header .site-nav a,
.site-header .site-nav a:hover,
.site-header .site-nav a:focus,
.site-header .site-nav a.is-active {
  color: #000 !important;
}

/* Unlayered: site-wide card heading size (beats Bootstrap h3/h2 defaults) */
.site-card__title,
.outcome-card__body > h3,
.framework-step > h3,
.process-step__title,
.card-grid .card > h3,
.contact-trust-card__body > h2,
.contact-form-card__heading h2 {
  font-size: var(--text-card-title) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.contact-form-card__heading h2 {
  font-size: var(--text-card-title-lg) !important;
}