/* ==========================================================================
   ClimaCore — Base styles (typography, layout, focus, sections)
   ========================================================================== */

html {
    font-family: var(--cc-font-body);
    color: var(--cc-text);
    background: var(--cc-bg);
}

body {
    font-size: var(--cc-fs-body);
    line-height: 1.6;
    font-weight: var(--cc-fw-regular);
    /* Sticky-footer flex column: short pages keep the footer pinned to the
       bottom of the viewport instead of leaving empty space below. */
    min-height: 100vh;
    min-height: 100dvh;       /* dynamic viewport — accounts for mobile chrome */
    display: flex;
    flex-direction: column;
}
#cc-main {
    flex: 1 0 auto;            /* main grows to fill available space */
}
.cc-footer {
    flex-shrink: 0;            /* footer never shrinks */
}

/* ---------- Type utilities ---------- */
.cc-display-1 { font-family: var(--cc-font-display); font-size: var(--cc-fs-display-1); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.cc-display-2 { font-family: var(--cc-font-display); font-size: var(--cc-fs-display-2); line-height: 1.1;  font-weight: 700; letter-spacing: -0.005em; }
.cc-h1        { font-family: var(--cc-font-display); font-size: var(--cc-fs-h1);        line-height: 1.15; font-weight: 700; }
.cc-h2        { font-family: var(--cc-font-display); font-size: var(--cc-fs-h2);        line-height: 1.2;  font-weight: 700; }
.cc-h3        { font-size: var(--cc-fs-h3);          line-height: 1.3;                  font-weight: var(--cc-fw-semibold); }
.cc-body-lg   { font-size: var(--cc-fs-body-lg);     line-height: 1.6;  }
.cc-body      { font-size: var(--cc-fs-body);        line-height: 1.6;  }
.cc-meta      { font-size: var(--cc-fs-meta);        line-height: 1.55; color: var(--cc-text-muted); }

.cc-eyebrow {
    font-size: var(--cc-fs-eyebrow);
    line-height: 1.3;
    font-weight: var(--cc-fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cc-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-3);
}
.cc-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}
.cc-eyebrow--inverse { color: rgba(255, 255, 255, 0.85); }
.cc-eyebrow--standalone::before { display: none; }

/* Crimson accent on <em> inside display headings — color only, no italic, no font swap */
.cc-display-1 em, .cc-display-2 em, .cc-h1 em, .cc-h2 em,
.cc-display-1 i,  .cc-display-2 i,  .cc-h1 i,  .cc-h2 i {
    font-style: normal;          /* no more italic */
    color: var(--cc-accent);
    /* same family, same weight as parent */
}

/* Stat number — sturdy slab, not italic */
.cc-stat-num {
    font-family: var(--cc-font-display);
    font-weight: 700;
    font-size: clamp(48px, 5vw + 24px, 88px);
    line-height: 1;
    color: var(--cc-accent);
    letter-spacing: -0.01em;
}
.cc-stat-label {
    margin-block-start: var(--cc-space-2);
    font-size: var(--cc-fs-meta);
    color: var(--cc-text-muted);
}

/* ---------- Body prose (for the_content() output) ---------- */
.cc-prose { max-width: var(--cc-prose-max); }
.cc-prose p { margin-block-end: var(--cc-space-4); }
.cc-prose p:last-child { margin-block-end: 0; }
.cc-prose strong { color: var(--cc-accent); font-weight: var(--cc-fw-semibold); }
.cc-prose h2 { margin-block: var(--cc-space-12) var(--cc-space-4); }
.cc-prose h3 { margin-block: var(--cc-space-8) var(--cc-space-3); }
.cc-prose ul, .cc-prose ol { margin: 0 0 var(--cc-space-4) var(--cc-space-5); }
.cc-prose li { margin-block-end: var(--cc-space-2); }

/* Legal pages (privacy / terms / cookies) use wider prose for dense long-form copy */
.page-template-page-legal .cc-container--prose,
.page-template-page-legal .cc-prose { max-width: var(--cc-content-narrow); }

/* ---------- Links ---------- */
a { color: var(--cc-link); text-underline-offset: 2px; transition: color var(--cc-dur-fast) var(--cc-ease-out); }
a:hover { color: var(--cc-accent); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--cc-link);
    outline-offset: 2px;
    border-radius: var(--cc-radius-sm);
}
.cc-input:focus-visible, .cc-textarea:focus-visible { outline: none; }

::selection { background: var(--cc-accent); color: #fff; }

/* ---------- Container ---------- */
.cc-container {
    max-width: var(--cc-content-max);
    margin: 0 auto;
    padding-inline: var(--cc-page-pad);
}
.cc-container--narrow { max-width: var(--cc-content-narrow); }
.cc-container--prose  { max-width: var(--cc-prose-max); }

/* ---------- Section utility ---------- */
.cc-section {
    padding-block: var(--cc-space-12);  /* mobile 48 */
    background: var(--cc-bg);
}
.cc-section--alt { background: var(--cc-bg-alt); }
@media (min-width: 768px) {
    .cc-section { padding-block: var(--cc-space-24); }     /* 96 tablet */
}
@media (min-width: 1024px) {
    .cc-section { padding-block: var(--cc-space-30); }     /* 120 desktop */
}

/* Section head pattern: eyebrow + h2 + intro paragraph */
.cc-section__head {
    margin-block-end: var(--cc-space-12);
    max-width: 880px;
}
.cc-section__head .cc-eyebrow { margin-block-end: var(--cc-space-3); }
.cc-section__head .cc-h2 { margin-block: var(--cc-space-1) var(--cc-space-4); }
.cc-section__head p { color: var(--cc-text-muted); max-width: var(--cc-prose-max); }

/* ---------- Grid ---------- */
.cc-grid {
    display: grid;
    gap: var(--cc-space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cc-grid { gap: var(--cc-space-8); }
    .cc-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .cc-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .cc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}