/* ============================================================================
   CoreConsept · Base
   Minimal reset, body defaults, type scale, focus rings.
   Consumes tokens from cc-tokens.css. No component logic here.
   ============================================================================ */

/* ─── Box-sizing reset (additive — won't break Bootstrap) ─────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Body ────────────────────────────────────────────────────────────── */
body {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-body);
    color: var(--cc-ink);
    background: var(--cc-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── Default heading scale (consumed by .cc-hero, .cc-section h2 etc) ─ */
h1, .cc-h1 {
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h1);
    font-weight: 500;
    line-height: var(--cc-lh-display);
    letter-spacing: var(--cc-tracking-display);
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-4);
}
h2, .cc-h2 {
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h2);
    font-weight: 500;
    line-height: var(--cc-lh-tight);
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-4);
}
h3, .cc-h3 {
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h3);
    font-weight: 500;
    line-height: var(--cc-lh-snug);
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-3);
}
h4, .cc-h4 {
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h4);
    font-weight: 600;
    line-height: var(--cc-lh-snug);
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-2);
}

/* Italic emphasis inside display headings is ALWAYS orange — site signature */
.cc-h1 em, .cc-h2 em, .cc-h3 em,
h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--cc-orange);
}

/* ─── Lead paragraph (used under hero titles) ─────────────────────────── */
.cc-lead {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-lead);
    line-height: var(--cc-lh-body);
    color: var(--cc-ink-soft);
    margin: 0 0 var(--cc-sp-4);
    max-width: var(--cc-prose-width);
}

/* ─── Mono caps utility (for eyebrows, labels, meta strips) ──────────── */
.cc-mono {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-soft);
}

/* ─── Image / media defaults ──────────────────────────────────────────── */
img, svg, video { max-width: 100%; height: auto; display: block; }
img { vertical-align: middle; }

/* Inline icons are the ONE exception to `svg { display: block }` above.
   The legacy markup (event, course, city, footer) writes Bootstrap Icons as
   inline <svg class="bi bi-*"> sitting next to text — a block SVG pushes that
   text onto the next line, which is why an event's date and city rendered
   underneath their calendar and pin icons instead of beside them.
   `height: 1em` because the reset's `height: auto` also discards the width/height
   attributes, so the icon stopped tracking the surrounding font size. */
svg.bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.145em;
    flex-shrink: 0;
}

/* ─── Focus rings (visible for keyboard nav, hidden for mouse) ───────── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--cc-orange);
    outline-offset: 3px;
}
/* Form fields get an inset focus ring on hairline-bottom inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--cc-orange);
}

/* ─── Skip link (a11y) ───────────────────────────────────────────────── */
.cc-skip-link {
    position: absolute;
    top: -100px; left: 0;
    background: var(--cc-ink); color: var(--cc-paper);
    padding: 12px 20px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    z-index: var(--cc-z-overlay);
    transition: top var(--cc-dur) var(--cc-ease);
}
/* The colour is restated on :focus because something in the legacy sheet
   repaints a focused link orange — 5.20:1 on this ink plate, which passes, but
   it is the wrong direction for a focus affordance: the state that exists to
   be noticed ended up lower-contrast than the resting one (17.40:1). Stated
   here so it does not depend on which sheet wins, since the legacy CSS is
   loaded with rel=preload and swapped in by JS. */
.cc-skip-link:focus,
.cc-skip-link:focus-visible {
    top: 0;
    color: var(--cc-paper);
    outline: 3px solid var(--cc-orange);
    outline-offset: 0;
}

/* ─── Selection ───────────────────────────────────────────────────────── */
::selection { background: var(--cc-orange); color: var(--cc-paper); }

/* ─── Container ──────────────────────────────────────────────────────── */
.cc-container {
    max-width: var(--cc-page-width);
    margin: 0 auto;
    padding-left: var(--cc-sp-4);
    padding-right: var(--cc-sp-4);
}

/* ─── Direction helpers (canonical home for these utilities) ─────────── */
.direction-ltr, .phone { direction: ltr; }
.direction-rtl         { direction: rtl; }

/* ─── Default link in white area
   Phase 3 cleanup left the simplified rule in head.php's inline <style>
   (uses class-pattern :not() chain). Migration target is for that to move here. */


/* ============================================================================
   Motion · Page-load reveal + scroll-aware transitions
   Respects prefers-reduced-motion (handled globally in cc-tokens.css).
   ============================================================================ */

/* Hero entrance — staggered fade-up on each child */
@keyframes cc-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc-hero__eyebrow,
.cc-hero__title,
.cc-hero__lead,
.cc-hero__meta,
.cc-hero__crumbs,
.cc-confirm-hero__status,
.cc-confirm-hero__stamp,
.cc-confirm-hero__title,
.cc-confirm-hero__lead,
.cc-rec-status,
.cc-rec-stamp,
.cc-rec-title,
.cc-rec-lead,
.cc-rec-meta {
    animation: cc-fade-up var(--cc-dur-slow) var(--cc-ease-out) both;
}
.cc-hero__eyebrow,
.cc-confirm-hero__status,
.cc-rec-status      { animation-delay: 0.05s; }
.cc-hero__title,
.cc-confirm-hero__stamp,
.cc-rec-stamp       { animation-delay: 0.15s; }
.cc-hero__lead,
.cc-confirm-hero__title,
.cc-rec-title       { animation-delay: 0.25s; }
.cc-hero__meta,
.cc-confirm-hero__lead,
.cc-rec-lead        { animation-delay: 0.35s; }
.cc-hero__crumbs,
.cc-rec-meta        { animation-delay: 0.45s; }

/* Subtle hover lift on interactive cards / event rows */
.cc-card,
.cc-eventrow,
.cc-event-row,
.cc-search-row,
.cc-cd-event {
    transition:
        background-color var(--cc-dur) var(--cc-ease),
        border-color     var(--cc-dur) var(--cc-ease),
        transform        var(--cc-dur) var(--cc-ease),
        padding          var(--cc-dur) var(--cc-ease);
}

@media (prefers-reduced-motion: reduce) {
    .cc-hero__eyebrow,
    .cc-hero__title,
    .cc-hero__lead,
    .cc-hero__meta,
    .cc-hero__crumbs,
    .cc-confirm-hero__status,
    .cc-confirm-hero__stamp,
    .cc-confirm-hero__title,
    .cc-confirm-hero__lead,
    .cc-rec-status,
    .cc-rec-stamp,
    .cc-rec-title,
    .cc-rec-lead,
    .cc-rec-meta {
        animation: none;
        opacity: 1;
        transform: none;
    }
}