/* ============================================================================
   CoreConsept · Utilities
   Single-purpose helpers. Composable. Consume tokens only.
   ============================================================================ */

/* ─── Color flips on dark surfaces ───────────────────────────────────── */
/* Wrap any block with .cc-on-dark to switch text/link colors to the
   cream/orange palette suited for dark backgrounds. Replaces the
   :not(.bg-dark a):not(.cc-on-dark a)... chains. */
.cc-on-dark { color: var(--cc-cream); }
.cc-on-dark a,
.cc-on-dark a:link,
.cc-on-dark a:visited { color: var(--cc-orange); }
.cc-on-dark a:hover { color: var(--cc-paper); }
.cc-on-dark .cc-mono,
.cc-on-dark .cc-eyebrow { color: rgba(255,255,255,.62); }

/* ─── Text color utilities ───────────────────────────────────────────── */
.cc-text-orange { color: var(--cc-orange); }
.cc-text-ink    { color: var(--cc-ink); }
.cc-text-soft   { color: var(--cc-ink-soft); }
.cc-text-muted  { color: var(--cc-ink-muted); }
.cc-text-cream  { color: var(--cc-cream); }
.cc-text-paper  { color: var(--cc-paper); }

/* ─── Background utilities ───────────────────────────────────────────── */
.cc-bg-cream  { background: var(--cc-cream); }
.cc-bg-peach  { background: var(--cc-peach); }
.cc-bg-warm   { background: var(--cc-warm); }
.cc-bg-paper  { background: var(--cc-paper); }
.cc-bg-ink    { background: var(--cc-ink); color: var(--cc-cream); }
.cc-bg-orange { background: var(--cc-orange); color: var(--cc-paper); }

/* ─── Vertical rhythm (Heydon Pickering's Stack) ─────────────────────── */
.cc-flow > * + * { margin-top: var(--cc-flow-space, var(--cc-sp-4)); }
.cc-flow--tight  { --cc-flow-space: var(--cc-sp-2); }
.cc-flow--loose  { --cc-flow-space: var(--cc-sp-6); }

/* ─── Cluster (horizontal flex, wraps) ───────────────────────────────── */
.cc-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cc-cluster-gap, var(--cc-sp-3));
}
.cc-cluster--tight { --cc-cluster-gap: var(--cc-sp-2); }
.cc-cluster--loose { --cc-cluster-gap: var(--cc-sp-5); }

/* ─── Stack (vertical flex) ──────────────────────────────────────────── */
.cc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cc-stack-gap, var(--cc-sp-3));
}

/* ─── Visually hidden (accessible) ───────────────────────────────────── */
.cc-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Ratios ─────────────────────────────────────────────────────────── */
.cc-ratio { aspect-ratio: var(--cc-ratio, 16 / 9); overflow: hidden; }
.cc-ratio > img,
.cc-ratio > video,
.cc-ratio > iframe { width: 100%; height: 100%; object-fit: cover; }

/* ─── Layout helpers ─────────────────────────────────────────────────── */
.cc-center { text-align: center; }
.cc-right  { text-align: right; }
.cc-left   { text-align: left; }

/* ─── Spacing utilities (use sparingly — prefer component spacing) ───── */
.cc-mt-0 { margin-top: 0; }
.cc-mt-3 { margin-top: var(--cc-sp-3); }
.cc-mt-5 { margin-top: var(--cc-sp-5); }
.cc-mt-7 { margin-top: var(--cc-sp-7); }
.cc-mb-0 { margin-bottom: 0; }
.cc-mb-3 { margin-bottom: var(--cc-sp-3); }
.cc-mb-5 { margin-bottom: var(--cc-sp-5); }
.cc-mb-7 { margin-bottom: var(--cc-sp-7); }

/* ─── Logical icon gap ────────────────────────────────────────────────────
   Replaces Bootstrap 4's physical `mr-1` on inline icons. Bootstrap 4 has no
   logical spacing utilities (`me-*` arrived in v5), so `mr-1` put the gap on
   the icon's TRAILING edge in Arabic — the icon ended up touching its label
   while 4px was stranded on the far side. `margin-inline-end` follows the
   writing direction, so one class serves both languages. */
.cc-icon-gap { margin-inline-end: 6px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Neutralising the legacy agile-era sheet
   ---------------------------------------------------------------------------
   style.min.css / style-ar.min.css load 2nd, before the whole design system,
   but several of their rules carry !important — which beats source order. The
   corrections below are the minimum needed to stop them reaching CoreConsept
   components, and each one says which legacy declaration it is answering.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Legacy: `.img-fluid { width: 100% !important; height: auto !important }`.
   Bootstrap's own .img-fluid is `max-width: 100%` — it constrains an image
   without ENLARGING it. Forcing `width: 100%` stretches every .img-fluid image
   to its container, which is why the footer logo (authored at 155x46) rendered
   several times its intended size. Restore the Bootstrap semantics. */
.img-fluid {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Legacy: `.corsesDescription, .eventDescription, .fcoursescolortext {
            box-shadow: rgb(0 0 0 / 35%) 0 5px 15px !important }`.
   A 35%-black drop shadow on the main body column of every event and course
   page. CoreConsept is a flat editorial surface — no drop shadows anywhere in
   cc-components.css except the two deliberate --cc-shadow-* CTA tokens. */
.corsesDescription,
.eventDescription,
.fcoursescolortext {
    box-shadow: none !important;
}

/* Legacy: `.eventbac { box-shadow: … !important; border: 1px solid #dee2e6 !important }`.
   Same soft shadow and the same cold Bootstrap grey hairline as the old
   sidebar shell, on the mobile/tablet copy of the course-details panel. */
.eventbac {
    box-shadow: none !important;
    border-color: var(--cc-line) !important;
}

/* Legacy: `input.datepicker, select { background: #f4f9fc; height: 55px;
            border-radius: 8px; border-color: rgba(0,0,0,.05) }`.
   A bare element selector, so it reaches every native <select> on the site —
   cold blue-white fill, 8px radius, 55px tall. The design system's fields are
   square, cream and hairline-ruled. Scoped to .cc-form and the finder so the
   admin-facing and third-party widgets keep whatever they had.
   select2 renders its own .select2-selection instead of the native control,
   so this only affects selects the theme actually shows. */
.cc-form select,
.cc-finder select,
.courses-page select,
input.datepicker {
    background: var(--cc-paper) !important;
    border: 1px solid var(--cc-line) !important;
    border-radius: var(--cc-radius-0, 0) !important;
    height: auto !important;
    min-height: 42px;
    padding: 8px 12px;
    font-family: var(--cc-body);
    color: var(--cc-ink);
}

/* The footer lockup gets the same explicit sizing the header logo already has
   (.cc-nav__logo, cc-components.css:1565). It had none, so it depended entirely
   on .img-fluid — which the legacy sheet had turned into `width: 100%`, blowing
   it up to the full column (350px wide against an authored 155px). */
/* Both declarations need !important: the legacy `.img-fluid` rule carries
   `height: auto !important`, and important always beats specificity. With the
   height falling back to auto AND width auto, logo.svg — which has a viewBox
   but no intrinsic width/height — resolved against max-width and filled the
   whole column (370x187 instead of 111x56). */
.footer .logo img,
.cc-footer-logo { height: 56px !important; width: auto !important; max-width: 100%; }