/* ============================================================
   BOWMAN WEB SERVICES — Design Tokens & Base Styles
   ============================================================
   Colors, typography, spacing, and foundational element styles.
   This file loads BEFORE all other stylesheets.
   ============================================================ */

/* ===== COLOR TOKENS ===== */
:root {
    /* Primary palette */
    --slate: #0F172A;          /* Nav, footer, headers */
    --blue: #2563EB;           /* Links */
    --blue-hover: #1D4ED8;     /* Link hover */
    --blue-light: #DBEAFE;     /* Light blue backgrounds */
    --green: #10B981;          /* Metrics, results numbers */
    --green-light: #ECFDF5;    /* Light green background */
    --amber: #F59E0B;          /* CTA buttons ONLY */
    --amber-hover: #D97706;    /* CTA button hover */
    --off-white: #F8FAFC;      /* Body background */
    --light-gray: #F1F5F9;     /* Alternating section backgrounds */
    --white: #FFFFFF;

    /* Text */
    --text: #1E293B;
    --text-mid: #475569;
    --text-light: #64748B;

    /* Borders */
    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* Shadows */
    --radius: 10px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --transition: 0.25s ease;

    /* Typography */
    --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --container-max: 1140px;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BODY ===== */
body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.7;
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY — Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--slate);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2.75rem;
    font-weight: 400; /* DM Serif Display only has 400 */
}

h2 {
    font-size: 2.25rem;
    font-weight: 400;
}

h3 {
    font-size: 1.5rem;
    font-weight: 400;
}

h4 {
    font-size: 1.25rem;
    font-weight: 400;
}

h5 {
    font-size: 1.1rem;
    font-weight: 400;
}

h6 {
    font-size: 1rem;
    font-weight: 400;
}

/* ===== LINKS ===== */
a {
    color: var(--blue);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--blue-hover);
}

/* ===== IMAGES ===== */
img {
    max-width: 100%;
    height: auto;
}

/* ===== CONTAINERS ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn-primary {
    background: var(--amber);
    color: var(--slate);
}

.btn-primary:hover {
    background: var(--amber-hover);
    color: var(--slate);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.3);
}

.btn-secondary:hover {
    border-color: var(--white);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
}

.btn-outline:hover {
    background: var(--blue);
    color: var(--white);
}

/* ===== METRIC / RESULTS CARDS ===== */
.stat-number,
.cs-card-hero,
.footer-stat {
    color: var(--green);
}

.metric-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}

.metric-card .metric-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--green);
    line-height: 1.1;
}

.metric-card .metric-label {
    font-family: var(--font-body);
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ===== RESULTS BOX ===== */
.results-box {
    background: var(--green-light);
    border: 1px solid var(--green);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.results-box .results-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--green);
}

/* ===== SECTION BACKGROUNDS ===== */
section {
    padding: 5rem 0;
}

section.alt,
section:nth-of-type(even) {
    background: var(--light-gray);
}

section:nth-of-type(odd) {
    background: var(--white);
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--slate);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.section-title-center {
    text-align: center;
}

.section-subtitle {
    font-family: var(--font-body);
    color: var(--text-light);
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.7;
}

.section-subtitle-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    section {
        padding: 3.5rem 0;
    }

    .section-title {
        font-size: 1.75rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    h1 {
        font-size: 1.65rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

/* ============================================================
   NUCLEAR CENTERING — BWS STANDARD (added 2026-04-08)
   Forces every text element to center alignment.
   Excludes header nav, mega menus, dropdowns, and form fields
   which need their own internal alignment.
   ============================================================ */

body { text-align: center; }

main, section, footer,
main h1, main h2, main h3, main h4, main h5, main h6,
main p, main li, main blockquote, main td, main th, main dl, main dt, main dd,
section h1, section h2, section h3, section h4, section h5, section h6,
section p, section li, section blockquote, section td, section th,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer li, footer span, footer div {
    text-align: center;
}

/* Override .page-content text-align: left from earlier rule */
.page-content,
.page-content p,
.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6,
.page-content ul, .page-content ol, .page-content li,
.page-content blockquote, .page-content table,
.page-content td, .page-content th {
    text-align: center !important;
}

/* Center list bullets — remove indent so centered lists look right */
.page-content ul,
.page-content ol,
footer ul,
footer ol {
    list-style-position: inside;
    padding-left: 0 !important;
}

/* Footer columns: center their content */
.footer-col,
.footer-col h4,
.footer-col p,
.footer-col ul,
.footer-col li,
.footer-col span,
.footer-col .footer-logo,
.footer-col .footer-tagline {
    text-align: center !important;
}

.footer-col .social-icons {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

/* Restore left/flex alignment ONLY for the header nav */
.site-header,
.site-header *,
.mega-menu,
.mega-menu *,
.dropdown-menu,
.dropdown-menu *,
.mobile-menu,
.mobile-menu * {
    text-align: left;
}

/* Mega menu column titles need their original alignment */
.mega-col-title { text-align: left !important; }
.mega-menu a { text-align: left !important; }
.dropdown-menu a { text-align: left !important; }

/* Form inputs/textareas keep left text */
input, textarea, select { text-align: left; }

/* Card headings and body text centered */
.card, .card *,
.svc-card, .svc-card *,
.cs-card, .cs-card * {
    text-align: center !important;
}

/* Service card icon block needs flex centering */
.svc-card { align-items: center; }
.svc-card-icon { margin-left: auto; margin-right: auto; }

/* Tables in content: center headers and cells */
.page-content thead th { text-align: center !important; }
.page-content tbody td { text-align: center !important; }