/* ============================================================================
   CoreConsept · Components
   Canonical building blocks. Every component consumes tokens.
   No raw colors, no raw font sizes, no raw spacings.
   ============================================================================ */

/* ===========================================================================
   .cc-eyebrow · Mono caps label with optional rule + numeric prefix
   Replaces: cc-section-eyebrow, cc-letterhead-eyebrow, cc-cd-eyebrow,
             cc-rec-status, cc-reg-hero__eyebrow, cc-formsection__num
   =========================================================================== */
.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    margin: 0;
}
.cc-eyebrow::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--cc-orange);
    flex-shrink: 0;
}
.cc-eyebrow--orange { color: var(--cc-orange); }
.cc-eyebrow--ink    { color: var(--cc-ink); }
.cc-eyebrow--no-rule::before { display: none; }
.cc-eyebrow--num::before { display: none; }
.cc-eyebrow--num .cc-eyebrow__num {
    color: var(--cc-orange);
    font-weight: 700;
}
.cc-on-dark .cc-eyebrow { color: rgba(255,255,255,.62); }
.cc-on-dark .cc-eyebrow--orange { color: var(--cc-orange); }


/* ===========================================================================
   .cc-rule · Hairline divider (orange or neutral)
   =========================================================================== */
.cc-rule {
    width: 32px; height: 1px;
    background: var(--cc-orange);
    border: 0; margin: 0;
}
.cc-rule--full {
    width: 100%;
    height: var(--cc-border-rule);
    background: var(--cc-line);
}
.cc-rule--orange-full { width: 100%; background: var(--cc-orange); }


/* ===========================================================================
   .cc-stamp · Editorial stamp glyph + label (✦ CoreConsept · …)
   =========================================================================== */
.cc-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--cc-orange);
    background: var(--cc-paper);
    color: var(--cc-orange);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
}
.cc-stamp::before { content: "✦"; font-size: 12px; }


/* ===========================================================================
   .cc-btn · Unified button system
   Replaces: cc-submit, cc-reg-submit, cc-cd-event__cta, cc-cd-tool,
             cc-cd-ondemand a, cc-quick__cta, cc-search-cta, cc-course-cta,
             btn-main, btn-primary
   Variants: --primary (orange fill), --dark (ink fill), --ghost (outline),
             --link (text + arrow)
   =========================================================================== */

/* Base — applies to <a>, <button>, <input type="submit">.
   Uses [class*=" cc-btn"] selector chain so legacy aliases below inherit. */
.cc-btn,
a.cc-btn,
button.cc-btn,
input.cc-btn[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    border: 1.5px solid transparent;
    border-radius: var(--cc-radius-0);
    background: var(--cc-ink);
    color: var(--cc-paper);
    font-family: var(--cc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--cc-dur) var(--cc-ease),
        color           var(--cc-dur) var(--cc-ease),
        border-color    var(--cc-dur) var(--cc-ease),
        transform       var(--cc-dur) var(--cc-ease),
        box-shadow      var(--cc-dur) var(--cc-ease);
    position: relative;
    isolation: isolate;
}
.cc-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
[dir="rtl"] .cc-btn svg, .direction-rtl .cc-btn svg { transform: scaleX(-1); }
.cc-btn:focus-visible {
    outline: 2px solid var(--cc-orange);
    outline-offset: 3px;
}
.cc-btn[disabled],
.cc-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Default = .cc-btn--dark (ink fill, hover orange) */
.cc-btn,
a.cc-btn,
.cc-btn--dark,
a.cc-btn--dark {
    background: var(--cc-ink);
    color: var(--cc-paper);
    border-color: var(--cc-ink);
}
.cc-btn:hover,
a.cc-btn:hover,
.cc-btn--dark:hover,
a.cc-btn--dark:hover {
    background: var(--cc-orange);
    color: var(--cc-paper);
    border-color: var(--cc-orange);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-cta);
}

/* --primary (orange fill, hover deep orange) */
.cc-btn--primary,
a.cc-btn--primary {
    background: var(--cc-orange);
    color: var(--cc-paper);
    border-color: var(--cc-orange);
}
.cc-btn--primary:hover,
a.cc-btn--primary:hover {
    background: var(--cc-orange-deep);
    color: var(--cc-paper);
    border-color: var(--cc-orange-deep);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-cta);
}

/* --ghost (transparent + ink border, hover ink fill) */
.cc-btn--ghost,
a.cc-btn--ghost {
    background: transparent;
    color: var(--cc-ink);
    border-color: var(--cc-ink);
}
.cc-btn--ghost:hover,
a.cc-btn--ghost:hover {
    background: var(--cc-ink);
    color: var(--cc-cream);
    border-color: var(--cc-ink);
}

/* On dark surfaces, ghost flips to orange-on-orange */
.cc-on-dark .cc-btn--ghost,
.cc-on-dark a.cc-btn--ghost {
    color: var(--cc-orange);
    border-color: var(--cc-orange);
    background: transparent;
}
.cc-on-dark .cc-btn--ghost:hover,
.cc-on-dark a.cc-btn--ghost:hover {
    background: var(--cc-orange);
    color: var(--cc-ink);
    border-color: var(--cc-orange);
}

/* --link (text + arrow, no padding/border) */
.cc-btn--link,
a.cc-btn--link {
    background: transparent;
    color: var(--cc-orange);
    border: 0;
    padding: 0;
    transform: none !important;
    box-shadow: none !important;
}
.cc-btn--link svg { transition: transform var(--cc-dur) var(--cc-ease); }
.cc-btn--link:hover { color: var(--cc-orange-deep); background: transparent; }
.cc-btn--link:hover svg { transform: translateX(4px); }
[dir="rtl"] .cc-btn--link:hover svg,
.direction-rtl .cc-btn--link:hover svg { transform: scaleX(-1) translateX(4px); }

/* Sizes */
.cc-btn--sm { padding: 10px 18px; font-size: 11px; }
.cc-btn--lg { padding: 20px 40px; font-size: 13px; letter-spacing: 0.24em; }

/* ─── Aliases — legacy classes inherit .cc-btn behaviour ─────────────── */
/* This lets old markup keep working while we migrate templates over.
   Note: .cc-course-cta is intentionally NOT in this list — on category.php
   it's an underline-style link (not a filled button), styled under .cc-courselist. */
.cc-submit,
.cc-reg-submit,
.cc-cd-event__cta,
.cc-cd-ondemand > a,
.cc-receipt__print,
.cc-quick__cta,
.btcourse {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    border: 1.5px solid var(--cc-ink);
    border-radius: var(--cc-radius-0);
    background: var(--cc-ink);
    color: var(--cc-paper);
    /* Type */
    font-family: var(--cc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--cc-dur) var(--cc-ease),
        color           var(--cc-dur) var(--cc-ease),
        border-color    var(--cc-dur) var(--cc-ease),
        transform       var(--cc-dur) var(--cc-ease),
        box-shadow      var(--cc-dur) var(--cc-ease);
}
.cc-submit:hover,
.cc-reg-submit:hover,
.cc-cd-event__cta:hover,
.cc-cd-ondemand > a:hover,
.cc-receipt__print:hover,
.cc-quick__cta:hover,
.btcourse:hover {
    background: var(--cc-orange);
    color: var(--cc-paper);
    border-color: var(--cc-orange);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-cta);
}

/* .cc-quick__cta is a "link with arrow" pattern, not a filled button — restore.
   These rules were written `a.cc-quick__cta`, but contact.php renders the CTA as
   a <span> inside the <a class="cc-quick"> tile, so the whole block matched
   nothing (querySelectorAll('a.cc-quick__cta').length === 0). The filled-button
   styling from the .cc-btn alias group above therefore survived, and head.php's
   global `span { color: var(--cc-ink) !important }` beat its `color: var(--cc-paper)`
   — leaving #1a1a1a text and a currentColor arrow on a #1a1a1a fill. The CTA was
   invisible on /contact in both languages. Unqualified so it matches either tag. */
.cc-quick__cta {
    background: transparent;
    /* !important is required: head.php's global colour rule still lists a bare
       `span` with !important, and !important beats specificity outright. */
    color: var(--cc-orange) !important;
    border: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
}
.cc-quick__cta:hover {
    background: transparent;
    color: var(--cc-orange-deep);
    border: 0;
    transform: none;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--cc-orange);
    text-underline-offset: 4px;
}
.cc-quick__cta svg { transition: transform var(--cc-dur) var(--cc-ease); }
.cc-quick:hover .cc-quick__cta svg { transform: translateX(3px); }
[dir="rtl"] .cc-quick:hover .cc-quick__cta svg,
.direction-rtl .cc-quick:hover .cc-quick__cta svg { transform: translateX(-3px); }

/* Bootstrap remnants → adopt cc-btn--primary look (orange fill) */
.btn-main,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--cc-orange) !important;
    color: var(--cc-paper) !important;
    border: 1.5px solid var(--cc-orange) !important;
    border-radius: var(--cc-radius-0) !important;
    font-family: var(--cc-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: var(--cc-tracking-eyebrow) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition:
        background-color var(--cc-dur) var(--cc-ease),
        transform        var(--cc-dur) var(--cc-ease),
        box-shadow       var(--cc-dur) var(--cc-ease) !important;
}
.btn-main:hover,
.btn-primary:hover {
    background: var(--cc-orange-deep) !important;
    color: var(--cc-paper) !important;
    border-color: var(--cc-orange-deep) !important;
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-cta) !important;
}


/* ===========================================================================
   .cc-banner · Status banner (replaces Bootstrap .alert)
   Aliases .cc-rec-banner* (registerReceive.php legacy markup).
   =========================================================================== */
.cc-banner,
.cc-rec-banner {
    margin: var(--cc-sp-5) 0 0;
    padding: 22px 28px;
    border-left: 4px solid var(--cc-info);
    background: var(--cc-cream);
    font-family: var(--cc-body);
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-snug);
    color: var(--cc-ink);
}
.cc-banner__label,
.cc-rec-banner__label {
    display: block;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    margin-bottom: 6px;
}
.cc-banner--ok,   .cc-rec-banner--ok   { border-left-color: var(--cc-ok); }
.cc-banner--warn, .cc-rec-banner--warn { border-left-color: var(--cc-warn); }
.cc-banner--err,  .cc-rec-banner--err  { border-left-color: var(--cc-err); }
.cc-banner--info, .cc-rec-banner--info { border-left-color: var(--cc-info); }


/* ===========================================================================
   .cc-detail-hero · Detail-page hero with radial-gradient flourish
   Shared by city detail (c.php) + event detail (event.php).
   Aliases: .cc-city-hero, .cc-event-hero
   =========================================================================== */
.cc-detail-hero {
    background: var(--cc-cream);
    padding: clamp(72px, 10vw, 120px) 0 clamp(48px, 6vw, 72px);
    position: relative; overflow: hidden;
    border-bottom: 1.5px solid var(--cc-line);
}
.cc-detail-hero::before {
    content: ''; position: absolute; top: -200px; right: -160px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(241,91,41,0.08) 0%, transparent 65%);
    pointer-events: none;
}
[dir="rtl"] .cc-detail-hero::before { right: auto; left: -160px; }
.cc-detail-hero .container { position: relative; z-index: 2; }

.cc-detail-hero__eyebrow,
.cc-event-eyebrow {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-orange);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.cc-detail-hero__eyebrow::after,
.cc-event-eyebrow::after {
    content: ''; width: 40px; height: 1.5px; background: var(--cc-orange);
}

.cc-detail-hero__title,
.cc-event-title {
    font-family: var(--cc-display) !important;
    font-size: clamp(38px, 6vw, 72px) !important;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--cc-ink) !important;
    margin: 0 0 18px;
    max-width: 1080px;
}
.cc-detail-hero__title em,
.cc-event-title em {
    font-style: italic;
    color: var(--cc-orange);
    font-weight: 500;
}

.cc-detail-hero__sub,
.cc-event-sub {
    font-family: var(--cc-body);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.6;
    color: var(--cc-ink-soft);
    max-width: 720px;
    margin: 0;
}

/* Apply same base to .cc-event-hero so event.php gets free upgrade */
.cc-event-hero {
    background: var(--cc-cream);
    padding: clamp(72px, 10vw, 116px) 0 clamp(48px, 6vw, 72px);
    position: relative; overflow: hidden;
    border-bottom: 1.5px solid var(--cc-line);
}
.cc-event-hero::before {
    content: ''; position: absolute; top: -200px; right: -160px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(241,91,41,0.08) 0%, transparent 65%);
    pointer-events: none;
}
[dir="rtl"] .cc-event-hero::before { right: auto; left: -160px; }
.cc-event-hero .container { position: relative; z-index: 2; }


/* ===========================================================================
   .cc-confirm-hero · Confirmation hero (Thank-you / Received page)
   Used by registerReceive, contactReceive, inquiryReceive, requestReceive.
   Aliases .cc-rec-hero / .cc-rec-status / .cc-rec-stamp / .cc-rec-title /
            .cc-rec-lead / .cc-rec-meta (registerReceive legacy markup).
   =========================================================================== */
.cc-confirm-hero,
.cc-rec-hero {
    background: var(--cc-cream);
    padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px);
    border-bottom: 1px solid var(--cc-line);
}
.cc-confirm-hero__status,
.cc-rec-status {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-orange);
    margin-bottom: 18px;
}
.cc-confirm-hero__status::before,
.cc-rec-status::before {
    content: ""; width: 32px; height: 1px; background: var(--cc-orange);
}
.cc-confirm-hero__stamp,
.cc-rec-stamp {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    padding: 8px 14px; border: 1px solid var(--cc-orange);
    color: var(--cc-orange);
    margin-bottom: 22px; background: var(--cc-paper);
}
.cc-confirm-hero__stamp::before,
.cc-rec-stamp::before { content: "✦"; font-size: 12px; }
.cc-confirm-hero__title,
.cc-rec-title {
    font-family: var(--cc-display);
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 500; line-height: 1.04;
    letter-spacing: var(--cc-tracking-display);
    color: var(--cc-ink);
    margin: 0 0 20px; max-width: 980px;
}
.cc-confirm-hero__title em,
.cc-rec-title em { font-style: italic; color: var(--cc-orange); font-weight: 400; }
.cc-confirm-hero__lead,
.cc-rec-lead {
    font-family: var(--cc-body);
    font-size: 18px; line-height: 1.55;
    color: var(--cc-ink-soft);
    max-width: 720px; margin: 0;
}
.cc-confirm-hero__meta,
.cc-rec-meta {
    display: flex; flex-wrap: wrap; gap: var(--cc-sp-5);
    margin-top: var(--cc-sp-6);
    padding-top: var(--cc-sp-5);
    border-top: 1px solid var(--cc-line);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink);
}
.cc-confirm-hero__meta strong,
.cc-rec-meta strong { color: var(--cc-ink-soft); font-weight: 500; margin-right: 6px; }

/* The "what now" block under a confirmation lead: how to reach a human, and
   somewhere to go next. Quieter than the lead so it reads as a footnote to the
   confirmation rather than competing with it.
   Logical properties (margin-inline-start, not margin-left) because these
   pages render RTL on the Arabic domain. */
.cc-confirm-hero__next {
    margin-top: var(--cc-sp-6);
    padding-top: var(--cc-sp-5);
    border-top: 1px solid var(--cc-line);
    font-family: var(--cc-body);
    font-size: 16px; line-height: 1.6;
    color: var(--cc-ink-soft);
    max-width: 720px;
}
.cc-confirm-hero__next p { margin: 0 0 6px; }
.cc-confirm-hero__next p:last-child { margin-bottom: 0; }
.cc-confirm-hero__next a {
    color: var(--cc-orange-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cc-confirm-hero__next a:hover { color: var(--cc-ink); }

/* Confirm body wrapper */
.cc-confirm-body,
.cc-rec-body {
    padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 96px);
}


/* ===========================================================================
   .cc-card · Editorial card (replaces Bootstrap .card)
   =========================================================================== */
.cc-card {
    background: var(--cc-cream);
    border: 1px solid var(--cc-line);
    padding: var(--cc-sp-6) var(--cc-sp-6);
    transition:
        border-color var(--cc-dur) var(--cc-ease),
        box-shadow   var(--cc-dur) var(--cc-ease),
        transform    var(--cc-dur) var(--cc-ease);
}
.cc-card--bordered { background: var(--cc-paper); }
.cc-card--filled   { background: var(--cc-cream); }
.cc-card--dark     { background: var(--cc-ink); color: var(--cc-cream); border-color: var(--cc-ink); }
.cc-card--hover:hover {
    border-color: var(--cc-orange);
    box-shadow: var(--cc-shadow-md);
    transform: translateY(-3px);
}
.cc-card__head {
    padding-bottom: var(--cc-sp-4);
    margin-bottom: var(--cc-sp-4);
    border-bottom: 1px solid var(--cc-line);
}
.cc-card__title {
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h3);
    font-weight: 500;
    letter-spacing: var(--cc-tracking-tight);
    margin: 0;
}
.cc-card__body { font-family: var(--cc-body); }


/* ===========================================================================
   .cc-hero · Universal editorial hero
   Replaces: cc-hero (existing), cc-cd-hero, cc-reg-hero, cc-rec-hero,
             cc-event-hero, page-title bg-1
   Surface modifiers: --cream (default), --paper, --peach, --warm
   Size modifiers: default, --lg, --sm
   =========================================================================== */
.cc-hero {
    background: var(--cc-cream);
    padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
    border-bottom: 1px solid var(--cc-line);
    position: relative;
    overflow: hidden;
}
/* Radial-gradient flourish — top-right peach glow */
.cc-hero::before {
    content: "";
    position: absolute;
    right: -160px; top: -100px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, var(--cc-peach-deep) 0%, transparent 70%);
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
}
/* Decorative orange ring — bottom-right */
.cc-hero::after {
    content: "";
    position: absolute;
    right: 7%; bottom: -120px;
    width: 280px; height: 280px;
    border: 2px solid var(--cc-orange);
    opacity: 0.12;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
[dir="rtl"] .cc-hero::before,
.direction-rtl .cc-hero::before { right: auto; left: -160px; }
[dir="rtl"] .cc-hero::after,
.direction-rtl .cc-hero::after { right: auto; left: 7%; }
@media (max-width: 768px) {
    .cc-hero::before, .cc-hero::after { display: none; }
}

.cc-hero--paper { background: var(--cc-paper); }
.cc-hero--peach { background: var(--cc-peach); }
.cc-hero--warm  { background: var(--cc-warm); }
.cc-hero--lg    { padding: clamp(80px, 10vw, 140px) 0 clamp(56px, 6vw, 88px); }
.cc-hero--sm    { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); }

.cc-hero .container {
    /* Was var(--cc-page-width) (1280px) while every section below uses the
       legacy Bootstrap .container (1140px, or 1300px on this theme), so above
       ~1330px the page's left edge visibly jogged at the hero/body boundary.
       .cc-container — the class the token was written for — is not in the
       markup anywhere, so the hero was the token's only consumer. */
    position: relative;
    z-index: 2;
}

.cc-hero__eyebrow {
    margin-bottom: var(--cc-sp-4);
}

.cc-hero__title {
    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);
    max-width: 980px;
}
.cc-hero--lg .cc-hero__title { font-size: var(--cc-fs-display); }
.cc-hero__title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cc-orange);
}

.cc-hero__lead {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-lead);
    line-height: var(--cc-lh-body);
    color: var(--cc-ink-soft);
    max-width: var(--cc-prose-width);
    margin: 0 0 var(--cc-sp-5);
}

.cc-hero__meta {
    margin-top: var(--cc-sp-5);
}

.cc-hero__crumbs {
    margin-top: var(--cc-sp-5);
}
.cc-hero__crumbs ol,
.cc-hero__crumbs ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}
.cc-hero__crumbs a { color: var(--cc-ink-soft); text-decoration: none; }
.cc-hero__crumbs a:hover { color: var(--cc-orange); }


/* ===========================================================================
   .cc-finder · The search / filter bar
   ---------------------------------------------------------------------------
   Moved here from an inline <style> block in themes/coreconsept/layouts/search.php.
   That partial is included on BOTH /search and the home page (via
   layouts/homeslider.php), so ~6KB of component CSS was re-downloaded uncached
   on the site's two most visited pages, and the primary search component was
   invisible to the design system that cc-tokens.css declares as the single
   source of truth.

   Everything below consumes tokens. That is not tidiness: cc-rtl.css corrects
   Arabic by REDEFINING tokens on html[dir="rtl"] (fonts to Tajawal, all
   letter-spacing to 0, small mono sizes bumped). Any hard-coded literal
   silently escapes that whole correction layer — which is exactly how the
   finder ended up with Latin letter-spacing on joined Arabic script.
   =========================================================================== */
.cc-finder {
    background: var(--cc-cream);
    padding: var(--cc-sp-6) 0;
    border-block: var(--cc-border-hairline, 1px) solid var(--cc-line);
}
/* The hero already draws a bottom hairline and the home hero a 1.5px one;
   meeting the finder's top border made a doubled rule on a single surface. */
.cc-hero + .cc-finder,
.cc-home-hero + .cc-finder { border-top: 0; }

.cc-finder .cc-eyebrow { margin-bottom: var(--cc-sp-4); }

.cc-finder__card {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
    /* The gap IS the hairline grid — one background showing through, so it
       cannot double up when fields wrap and needs no RTL mirroring. */
    gap: var(--cc-border-hairline, 1px);
    background: var(--cc-line);
    border: var(--cc-border-rule, 2px) solid var(--cc-ink);
    border-radius: var(--cc-radius-0);
}
.cc-finder__field {
    position: relative;
    background: var(--cc-paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--cc-sp-2);
    padding: var(--cc-sp-3) var(--cc-sp-4);
    min-width: 0;
    transition: background var(--cc-dur) var(--cc-ease);
}
.cc-finder__field:focus-within { background: var(--cc-orange-tint); }

.cc-finder__field-label {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-xs);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    line-height: 1;
}
.cc-finder__control {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    /* was height:26px — under half the ~44px touch target, and the native
       selects were already being forced to 42px by cc-utilities.css, so the
       row was internally inconsistent as well as too small. */
    min-height: var(--cc-target);
    line-height: var(--cc-lh-snug, 1.3);
    font-family: var(--cc-body);
    font-size: var(--cc-fs-body);
    color: var(--cc-ink);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.cc-finder__control::placeholder { color: var(--cc-ink-muted); opacity: 1; }

/* Caret for NATIVE selects, drawn from two borders so it inherits the token
   colour. appearance:none strips the platform arrow, and the Select2 init
   explicitly tolerates failure — without this a fallback select was
   indistinguishable from a text input. Physical borders on purpose: a
   down-caret points down in every writing direction. */
.cc-finder__field--select::after {
    content: '';
    position: absolute;
    inset-inline-end: var(--cc-sp-4);
    inset-block-start: 50%;
    width: 8px; height: 8px;
    border-right:  var(--cc-border-rule, 2px) solid var(--cc-ink);
    border-bottom: var(--cc-border-rule, 2px) solid var(--cc-ink);
    transform: translateY(-25%) rotate(45deg);
    pointer-events: none;
}
/* Set by the Select2 init on success; hides the native caret when the enhanced
   widget draws its own. */
.cc-finder__field--select.is-enhanced::after { display: none; }

.cc-finder__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-sp-2);
    padding: 0 var(--cc-sp-6);
    min-height: var(--cc-target);
    border: 0;
    cursor: pointer;
    background: var(--cc-orange);
    border-radius: var(--cc-radius-0);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    transition: background var(--cc-dur) var(--cc-ease);
}
.cc-finder__submit:hover { background: var(--cc-ink); color: var(--cc-paper); }
.cc-finder__submit svg { width: 1.15em; height: 1.15em; }
[dir="rtl"] .cc-finder__submit svg,
.direction-rtl .cc-finder__submit svg { transform: scaleX(-1); }
.cc-finder__submit:focus-visible {
    outline: var(--cc-border-rule, 2px) solid var(--cc-ink);
    outline-offset: 2px;
}

/* ONE breakpoint, the theme's dominant 720px. The finder used to stack at
   880px while the results below collapsed at 800px, so between those widths
   the page ran two different layout logics at once. The 1.4fr keyword column
   is what makes a single breakpoint viable — the selects still fit their
   labels at 721px. */
@media (max-width: 720px) {
    .cc-finder__card   { grid-template-columns: 1fr; }
    .cc-finder__submit { padding: var(--cc-sp-4); }
}


/* ===========================================================================
   .cc-form · Editorial form system
   Extracted from register.php as the canonical source of truth.
   Replaces: per-page form CSS in register/contact/inquiry/request-training.
   =========================================================================== */

/* Section header — numbered eyebrow + display title + optional hint
   Aliases .cc-formsection* (no hyphen) for register.php legacy markup. */
.cc-form-section,
.cc-formsection {
    margin-bottom: clamp(36px, 5vw, 56px);
}
.cc-form-section:last-of-type,
.cc-formsection:last-of-type { margin-bottom: var(--cc-sp-5); }
.cc-form-section__head,
.cc-formsection__head {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: var(--cc-sp-5);
    padding-bottom: var(--cc-sp-3);
    border-bottom: 1px solid var(--cc-line);
}
.cc-form-section__num,
.cc-formsection__num {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    color: var(--cc-orange);
}
.cc-form-section__title,
.cc-formsection__title {
    font-family: var(--cc-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    margin: 0;
}
.cc-form-section__hint,
.cc-formsection__hint {
    margin-left: auto;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-soft);
}
[dir="rtl"] .cc-form-section__hint,
[dir="rtl"] .cc-formsection__hint,
.direction-rtl .cc-form-section__hint,
.direction-rtl .cc-formsection__hint { margin-left: 0; margin-right: auto; }

/* Field grid — 1/2/3 column responsive */
.cc-fieldgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cc-sp-5) var(--cc-sp-6);
}
.cc-fieldgrid--two { grid-template-columns: repeat(2, 1fr); }
.cc-fieldgrid--full > .cc-field { grid-column: 1 / -1; }
.cc-field--span2 { grid-column: span 2; }
.cc-field--full  { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .cc-fieldgrid,
    .cc-fieldgrid--two { grid-template-columns: 1fr; }
    .cc-field--span2 { grid-column: span 1; }
}

/* Field — label + control (hairline-bottom input style) */
.cc-field { display: flex; flex-direction: column; }
.cc-field label,
.cc-field > label {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink);
    margin-bottom: var(--cc-sp-2);
}
.cc-field label .req { color: var(--cc-orange); margin-inline-start: 4px; }
.cc-field label .opt {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-xs);
    letter-spacing: 0.18em;
    color: var(--cc-ink-soft);
    text-transform: uppercase;
    font-weight: 500;
    margin-left: 6px;
}

/* Hairline-bottom controls — applies to every input/select/textarea inside .cc-form */
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form input[type="number"],
.cc-form input[type="date"],
.cc-form input[type="url"],
.cc-form input[type="search"],
.cc-form select,
.cc-form textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-radius: var(--cc-radius-0) !important;
    border-bottom: 1.5px solid var(--cc-line) !important;
    padding: 10px 0 !important;
    font-family: var(--cc-body) !important;
    font-size: 16px !important;
    color: var(--cc-ink) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color var(--cc-dur) var(--cc-ease);
    height: auto !important;
}
.cc-form input::placeholder,
.cc-form textarea::placeholder { color: var(--cc-ink-faint); font-style: italic; }
.cc-form input:focus,
.cc-form select:focus,
.cc-form textarea:focus {
    border-bottom-color: var(--cc-orange) !important;
    border-bottom-width: 2px !important;
}
.cc-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23f15b29' d='M0 0l6 8 6-8z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    padding-right: 24px !important;
}
[dir="rtl"] .cc-form select,
.direction-rtl .cc-form select {
    background-position: left 4px center !important;
    padding-right: 0 !important;
    padding-left: 24px !important;
}
.cc-form textarea { min-height: 120px; resize: vertical; }

/* Foot — terms checkbox + submit
   Aliases .cc-reg-foot / .cc-reg-terms for register.php legacy markup. */
.cc-form-foot,
.cc-reg-foot {
    margin-top: var(--cc-sp-3);
    padding-top: var(--cc-sp-6);
    border-top: 1px solid var(--cc-line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cc-sp-5);
    align-items: center;
}
@media (max-width: 720px) {
    .cc-form-foot,
    .cc-reg-foot { grid-template-columns: 1fr; }
}
/* The consent row is a <label>, so `.cc-form label` in coreconsept-static.css
   also matches it — and at (0,1,1) that selector outranks a bare
   `.cc-form-terms` (0,1,0). Every one of these declarations was therefore being
   lost inside a real form: the row fell back to display:block and picked up the
   FIELD-label typography (10px JetBrains Mono, 0.22em tracking, uppercase).
   Without flex the text was no longer a sibling box beside the checkbox, so in
   Arabic its line box started at the right edge and painted the first letter on
   top of the checkbox. Matching the `.cc-form` context (0,2,0) wins cleanly —
   note the type properties must be re-stated here, not just `display`. */
.cc-form-terms,
.cc-reg-terms,
.cc-form .cc-form-terms,
.cc-form .cc-reg-terms {
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--cc-body);
    font-size: var(--cc-fs-meta);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cc-ink-soft);
    line-height: var(--cc-lh-snug);
}
.cc-form-terms input[type="checkbox"],
.cc-reg-terms input[type="checkbox"] {
    /* style.min.css and style-ar.min.css both carry a flattened Bootstrap-4
       rule — `input[type=checkbox], input[type=radio] { position: absolute;
       margin-{left|right}: -1.25rem }` — that applies to EVERY checkbox on the
       site rather than only `.form-check-input`. Out of flow, the box stops
       being a flex item and the consent text renders underneath it: in Arabic
       the mirrored -1.25rem drags the box right into the middle of the words.
       Putting it back in flow is what makes the flex row above work at all. */
    position: static;
    padding: 0;
    width: 18px !important; height: 18px !important;
    margin: 2px 0 0; flex-shrink: 0;
    accent-color: var(--cc-orange);
}
.cc-form-terms a,
.cc-reg-terms a {
    color: var(--cc-ink);
    text-decoration: underline;
    text-decoration-color: var(--cc-orange);
    text-underline-offset: 3px;
}


/* ===========================================================================
   .cc-dossier · Summary card (sidebar pattern)
   Extracted from register.php. Reusable on event/c/course detail pages
   for any "course at a glance" sidebar.
   =========================================================================== */
.cc-dossier {
    background: var(--cc-cream);
    border: 1px solid var(--cc-line);
    padding: var(--cc-sp-6) var(--cc-sp-5);
}
.cc-dossier__stamp {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-orange-text);
    margin-bottom: var(--cc-sp-5);
    display: flex; align-items: center; gap: 8px;
}
.cc-dossier__stamp::before { content: "✦"; color: var(--cc-orange-text); font-size: 14px; }
.cc-dossier__code {
    font-family: var(--cc-mono);
    font-size: 12px;
    color: var(--cc-ink);
    letter-spacing: 0.06em;
    padding-bottom: var(--cc-sp-4);
    border-bottom: 1px solid var(--cc-line);
    margin-bottom: var(--cc-sp-4);
}
.cc-dossier__row {
    display: flex; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cc-line);
    font-size: 14px;
}
.cc-dossier__row:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-dossier__label {
    flex: 0 0 86px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    padding-top: 3px;
    line-height: 1.5;
}
.cc-dossier__value {
    flex: 1; min-width: 0;
    font-family: var(--cc-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cc-ink);
}
.cc-dossier__value strong { font-weight: 600; }
.cc-dossier__price {
    margin-top: var(--cc-sp-5);
    padding: 18px 20px;
    background: var(--cc-ink);
    color: var(--cc-paper);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cc-dossier__price-label {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.cc-dossier__price-amount {
    font-family: var(--cc-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--cc-paper);
}
.cc-dossier__price-amount span {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: 0.16em;
    color: var(--cc-orange);
    /* Logical: the currency symbol trails the amount in both directions. */
    margin-inline-start: 6px;
}


/* ===========================================================================
   .cc-receipt · Printable confirmation receipt
   Extracted from registerReceive.php as canonical source.
   Reused by contactReceive, inquiryReceive, requestReceive.
   =========================================================================== */
.cc-receipt {
    max-width: 920px; margin: 0 auto;
    background: var(--cc-paper);
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-md);
}
.cc-receipt__head {
    padding: var(--cc-sp-5) var(--cc-sp-6);
    background: var(--cc-ink); color: var(--cc-paper);
    display: grid; grid-template-columns: 1fr auto; gap: var(--cc-sp-4); align-items: center;
}
@media (max-width: 600px) { .cc-receipt__head { grid-template-columns: 1fr; } }
.cc-receipt__cat {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-orange);
    margin-bottom: 6px;
}
.cc-receipt__title {
    font-family: var(--cc-display);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 500;
    line-height: var(--cc-lh-tight);
    margin: 0;
}
.cc-receipt__code {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.6);
    margin-top: 6px;
}
/* .cc-receipt__print picks up .cc-btn aliases above for fill/hover */
.cc-receipt__print { padding: 10px 18px !important; }

.cc-receipt__sect {
    padding: var(--cc-sp-6) clamp(24px, 4vw, 40px);
    border-top: 1px solid var(--cc-line);
}
.cc-receipt__sect:first-of-type { border-top: 0; }
.cc-receipt__secthead {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: var(--cc-sp-5);
}
.cc-receipt__sectnum {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    color: var(--cc-orange);
}
.cc-receipt__secttitle {
    font-family: var(--cc-display);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cc-ink);
    margin: 0;
}
.cc-receipt__rows {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
@media (max-width: 720px) { .cc-receipt__rows { grid-template-columns: 1fr; } }
.cc-receipt__row {
    padding: 14px 0;
    border-bottom: 1px solid var(--cc-line);
    display: flex; gap: 14px; align-items: baseline;
}
.cc-receipt__row:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 720px) {
    .cc-receipt__row { border-bottom: 1px solid var(--cc-line); }
    .cc-receipt__row:last-child { border-bottom: 0; }
}
.cc-receipt__rowlabel {
    flex: 0 0 140px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-xs);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-soft);
    padding-top: 3px;
}
.cc-receipt__rowval {
    flex: 1; min-width: 0;
    font-family: var(--cc-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cc-ink);
    word-break: break-word;
}
.cc-receipt__rowval--empty { color: var(--cc-ink-faint); font-style: italic; }

@media print {
    body * { visibility: hidden; }
    .cc-receipt, .cc-receipt * { visibility: visible; }
    .cc-receipt { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; }
    .cc-receipt__print { display: none; }
    .cc-receipt__head { background: var(--cc-paper) !important; color: var(--cc-ink) !important; }
    .cc-receipt__cat { color: var(--cc-ink) !important; }
    .cc-receipt__code { color: var(--cc-ink-soft) !important; }
}


/* ===========================================================================
   .cc-pagination · Editorial pagination
   Extracted from course.php as canonical source.
   Reused by /search, /cities, listings.
   =========================================================================== */
.cc-pagination,
.cc-cd-pagination {
    margin-top: clamp(40px, 5vw, 64px) !important;
    padding-top: clamp(24px, 3vw, 32px) !important;
    border-top: 1px solid var(--cc-line) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;
    gap: var(--cc-sp-5) !important;
    background: transparent !important;
}
.cc-pagination__info,
.cc-cd-pagination__info {
    justify-self: start;
    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);
    line-height: 1.4;
}
.cc-pagination__summary,
.cc-cd-pagination__summary {
    justify-self: end;
    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);
    line-height: 1.4;
}
.cc-pagination__info strong,
.cc-pagination__summary strong,
.cc-cd-pagination__info strong,
.cc-cd-pagination__summary strong {
    color: var(--cc-ink);
    font-weight: 700;
}
.cc-pagination__list,
.cc-cd-pagination__list {
    justify-self: center;
    display: inline-flex;
    gap: 6px; padding: 0; margin: 0;
    list-style: none;
}
/* !important on the color trio below overrides the off-theme navy/pink
   `.page-link { … !important }` rules in assets/css/faceted-search.css. */
.cc-pagination .page-item .page-link,
.cc-pagination__list .page-item .page-link,
.cc-cd-pagination .page-item .page-link,
.cc-cd-pagination__list .page-item .page-link {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 12px;
    background: transparent !important;
    border: 1px solid var(--cc-line) !important;
    color: var(--cc-ink) !important;
    font-family: var(--cc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: var(--cc-radius-0);
    text-decoration: none;
    box-shadow: none !important;
    transition: background-color var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease);
}
.cc-pagination .page-item .page-link:hover,
.cc-pagination__list .page-item .page-link:hover,
.cc-cd-pagination .page-item .page-link:hover,
.cc-cd-pagination__list .page-item .page-link:hover {
    background: var(--cc-ink) !important; color: var(--cc-cream) !important; border-color: var(--cc-ink) !important;
}
.cc-pagination .page-item.active .page-link,
.cc-pagination__list .page-item.active .page-link,
.cc-cd-pagination .page-item.active .page-link,
.cc-cd-pagination__list .page-item.active .page-link {
    background: var(--cc-orange) !important;
    color: var(--cc-paper) !important;
    border-color: var(--cc-orange) !important;
    box-shadow: var(--cc-shadow-cta) !important;
    cursor: default;
}
.cc-pagination .page-item.disabled .page-link,
.cc-pagination__list .page-item.disabled .page-link,
.cc-cd-pagination .page-item.disabled .page-link,
.cc-cd-pagination__list .page-item.disabled .page-link {
    background: transparent !important;
    border-color: var(--cc-line-faint) !important;
    color: var(--cc-ink-faint) !important;
    cursor: not-allowed;
}
@media (max-width: 720px) {
    .cc-pagination, .cc-cd-pagination { grid-template-columns: 1fr; justify-items: center; gap: 14px !important; }
    .cc-pagination__info, .cc-pagination__summary,
    .cc-cd-pagination__info, .cc-cd-pagination__summary { justify-self: center; text-align: center; }
    .cc-pagination__summary, .cc-cd-pagination__summary { order: 3; }
}


/* ===========================================================================
   .cc-eventrow · Editorial event listing row
   Replaces: cc-cd-event (course detail). Reusable on /c/{city}, /search,
   any page that lists scheduled events.
   Layout: huge orange day numeral · course name · meta · duration chip · price · register CTA
   =========================================================================== */
.cc-eventrow,
.cc-cd-event {
    display: grid;
    grid-template-columns: 110px 1fr auto auto auto;
    gap: var(--cc-sp-5);
    align-items: center;
    padding: var(--cc-sp-5) 0;
    border-bottom: 1px solid var(--cc-line);
    transition: padding var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease);
}
.cc-eventrow:hover,
.cc-cd-event:hover {
    padding-left: 8px; padding-right: 8px;
    background: var(--cc-orange-tint);
}
[dir="rtl"] .cc-eventrow:hover,
[dir="rtl"] .cc-cd-event:hover { padding-left: 0; padding-right: 8px; }

/* Date column — Fraunces day numeral + mono month */
.cc-eventrow__date,
.cc-cd-event__date {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: 0.06em;
    color: var(--cc-ink);
    line-height: 1.4;
}
.cc-eventrow__date strong,
.cc-cd-event__date strong {
    display: block;
    font-family: var(--cc-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--cc-orange);
    line-height: 1;
    margin-bottom: 4px;
}
.cc-eventrow__date small,
.cc-cd-event__date small {
    display: block;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-xs);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    margin-top: 4px;
}

/* Title (course / event name) */
.cc-eventrow__title,
.cc-cd-event__location {
    font-family: var(--cc-display);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 500;
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    margin: 0 0 4px;
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-eventrow:hover .cc-eventrow__title,
.cc-cd-event:hover .cc-cd-event__location { color: var(--cc-orange); }

.cc-eventrow__title-link,
.cc-cd-event__location-link { text-decoration: none; color: inherit; display: block; }

/* Meta line under the title */
.cc-eventrow__meta,
.cc-cd-event__meta {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    display: flex; gap: 14px; align-items: center;
}
.cc-eventrow__meta-mode,
.cc-cd-event__meta-mode { color: var(--cc-orange); }

/* Duration chip */
.cc-eventrow__duration,
.cc-cd-event__duration {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cc-ink);
    border: 1px solid var(--cc-line);
    padding: 6px 12px;
    white-space: nowrap;
}

/* Price — orange Fraunces */
.cc-eventrow__price,
.cc-cd-event__price {
    font-family: var(--cc-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--cc-orange);
    letter-spacing: var(--cc-tracking-tight);
    white-space: nowrap;
}

/* CTA — uses .cc-btn alias (defined above), here we just lock smaller padding */
.cc-eventrow__cta,
a.cc-eventrow__cta {
    padding: 12px 18px !important;
    font-size: 11px !important;
}

/* Mobile collapse */
@media (max-width: 900px) {
    .cc-eventrow,
    .cc-cd-event {
        grid-template-columns: 90px 1fr;
        gap: 16px;
    }
    .cc-eventrow__duration,
    .cc-eventrow__price,
    .cc-eventrow__cta,
    .cc-cd-event__duration,
    .cc-cd-event__price,
    .cc-cd-event__cta { grid-column: 2; justify-self: start; }
    .cc-eventrow__price,
    .cc-cd-event__price { font-size: 20px; }
}

/* ─── Minimal variant — used on /c/{city} and /search results ──────── */
/* Aliases .cc-event-row* (c.php) and .cc-search-row* (search.php).
   Differences from default: smaller day numeral, underline-style CTA, no duration chip,
   Lora price (not Fraunces orange). */
/* The GRID LIVES ON THE LINK, not the article.
   It used to be on the article with `display: contents` on the <a>, which
   generates no box — so no focus ring could ever paint and a keyboard user
   tabbing through results had no idea which row Enter would open. Moving the
   grid onto the link gives it a real box, which is both the focus target and
   the hover plate. */
.cc-event-row,
.cc-search-row {
    border-bottom: var(--cc-border-hairline, 1px) solid var(--cc-line);
}
.cc-event-row > a.cc-event-link,
.cc-search-row > a.cc-search-link {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: var(--cc-sp-5);
    align-items: center;
    padding: var(--cc-sp-5) var(--cc-sp-3);
    /* Bleed the hover plate past the text edge so it reads as a band, without
       the row changing size. The old hover animated padding-left — a physical
       property that needed an RTL patch, and animating padding reflows the
       whole list on every mouse move. */
    margin-inline: calc(var(--cc-sp-3) * -1);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--cc-dur) var(--cc-ease);
}
.cc-event-row > a.cc-event-link:hover,
.cc-search-row > a.cc-search-link:hover { background: var(--cc-orange-tint); }
.cc-event-row > a.cc-event-link:focus-visible,
.cc-search-row > a.cc-search-link:focus-visible {
    background: var(--cc-orange-tint);
    /* Inset so the ring is never clipped by the neighbouring rows' hairlines. */
    outline: var(--cc-border-rule, 2px) solid var(--cc-orange);
    outline-offset: calc(var(--cc-border-rule, 2px) * -1);
}
/* The list terminates on its own; without this the last row draws a hairline
   directly above the pagination and reads as a broken table edge. */
.cc-search-list > .cc-search-row:last-child { border-bottom: 0; }

.cc-event-date,
.cc-search-date {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-meta);
    font-weight: 500;
    /* Was the literal 0.05em. cc-rtl.css corrects Arabic by redefining
       --cc-tracking-mono to 0, and a literal is unreachable from there, so
       Arabic month names in this column rendered with gaps between joined
       letterforms — precisely the defect cc-rtl.css exists to prevent.
       Tokenising fixes it at the root; adding .cc-search-date to that file's
       !important override list would only have papered over it. */
    letter-spacing: var(--cc-tracking-mono);
    color: var(--cc-ink);
    line-height: 1.4;
}
.cc-event-date strong,
.cc-search-date strong {
    display: block;
    font-family: var(--cc-display);
    font-size: var(--cc-fs-h3);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-orange);
    margin-bottom: 2px;
}

.cc-event-name,
.cc-search-name {
    font-family: var(--cc-display);
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 500;
    letter-spacing: var(--cc-tracking-tight);
    line-height: 1.25;
    color: var(--cc-ink);
    margin: 0 0 6px;
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-event-row:hover .cc-event-name,
.cc-search-row:hover .cc-search-name { color: var(--cc-orange); }

.cc-event-cat,
.cc-search-city {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}

.cc-event-price,
.cc-search-price {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-meta);
    color: var(--cc-ink-soft);
    white-space: nowrap;
}

.cc-event-cta,
.cc-search-cta {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink);
    border-bottom: 1.5px solid var(--cc-ink);
    padding-bottom: 3px;
    white-space: nowrap;
    transition: color var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease);
    text-decoration: none !important;
}
.cc-event-row:hover .cc-event-cta,
.cc-search-row:hover .cc-search-cta { color: var(--cc-orange); border-color: var(--cc-orange); }

.cc-event-empty,
.cc-search-empty {
    font-family: var(--cc-display);
    font-style: italic;
    font-size: 22px;
    color: var(--cc-ink-soft);
    padding: 64px 0;
    text-align: center;
}

/* Search-results meta strip (counts + page indicator) */
.cc-search-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cc-sp-5);
    padding: 24px 0;
    border-bottom: 1px solid var(--cc-line);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cc-search-meta__count {
    font-family: var(--cc-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    color: var(--cc-ink);
    margin: 0;
}
.cc-search-meta__count strong { color: var(--cc-orange-text); font-weight: 600; }
.cc-search-meta__page {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}

/* 720px, the theme's dominant breakpoint. This was 800px while the finder
   stacked at 880px, so between those two widths the page showed a stacked
   form above a four-column results table. */
@media (max-width: 720px) {
    .cc-event-row > a.cc-event-link,
    .cc-search-row > a.cc-search-link { grid-template-columns: 90px 1fr; gap: var(--cc-sp-4); }
    .cc-event-price, .cc-event-cta,
    .cc-search-price, .cc-search-cta { grid-column: 2; }
    .cc-event-cta,
    .cc-search-cta { margin-top: var(--cc-sp-1); justify-self: start; }
}


/* ===========================================================================
   .cc-faq · <details> accordion with mono numeral prefix
   Aliases programs.php's .cc-faq-item / .cc-faq-item-num / .cc-faq-answer
   so existing markup picks up the canonical styling.
   =========================================================================== */
.cc-faq { display: flex; flex-direction: column; }

.cc-faq__item,
.cc-faq-item {
    border-top: 1px solid var(--cc-line);
    padding: var(--cc-sp-5) 0;
}
.cc-faq__item:last-child,
.cc-faq-item:last-child { border-bottom: 1.5px solid var(--cc-orange); }

.cc-faq__item summary,
.cc-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--cc-sp-5);
    font-family: var(--cc-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 500;
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-faq__item summary::-webkit-details-marker,
.cc-faq-item summary::-webkit-details-marker { display: none; }
.cc-faq__item summary:hover,
.cc-faq-item summary:hover { color: var(--cc-orange); }
.cc-faq__item[open] summary,
.cc-faq-item[open] summary { color: var(--cc-orange); }

/* Plus / minus toggle on the right (legacy programs.php pattern) */
.cc-faq-item summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--cc-mono);
    font-size: 24px;
    font-weight: 300;
    color: var(--cc-orange);
    line-height: 1;
    transition: transform var(--cc-dur) var(--cc-ease);
}
[dir="rtl"] .cc-faq-item summary::after,
.direction-rtl .cc-faq-item summary::after { margin-left: 0; margin-right: auto; }
.cc-faq-item[open] summary::after { content: "−"; }

/* Numbered prefix */
.cc-faq__num,
.cc-faq-item-num {
    font-family: var(--cc-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    color: var(--cc-orange);
    flex-shrink: 0;
    min-width: 30px;
}

/* Answer */
.cc-faq__answer,
.cc-faq-answer {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-body);
    line-height: 1.7;
    color: var(--cc-ink-soft);
    margin: var(--cc-sp-4) 0 0 54px;
    max-width: var(--cc-prose-width);
}
[dir="rtl"] .cc-faq__answer,
[dir="rtl"] .cc-faq-answer,
.direction-rtl .cc-faq__answer,
.direction-rtl .cc-faq-answer { margin: var(--cc-sp-4) 54px 0 0; }
@media (max-width: 600px) {
    .cc-faq__answer,
    .cc-faq-answer { margin-left: 0; margin-right: 0; }
}


/* ===========================================================================
   .cc-toolbar · Action toolbar (download / share / brochure buttons row)
   Replaces: cc-cd-toolbar (course only). Reusable on event/c pages.
   =========================================================================== */
.cc-toolbar,
.cc-cd-toolbar {
    display: flex; flex-wrap: wrap;
    gap: var(--cc-sp-3);
    margin-bottom: var(--cc-sp-7);
}
.cc-toolbar__group {
    display: flex; flex-wrap: wrap;
    gap: var(--cc-sp-2);
}


/* ===========================================================================
   .cc-nav · Editorial primary navigation
   Replaces Bootstrap navbar (collapse/dropdown). Mobile uses <details>
   drawer — no JS needed. Drops dependency on coreconsept.min.css.
   =========================================================================== */
.cc-nav {
    background: var(--cc-orange);
    /* The bar is now a coloured surface, so the hairline that separated a white
       bar from a cream page has nothing to do; a deeper tone of the same orange
       keeps the edge without introducing a second colour. */
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    padding: var(--cc-sp-3) 0;
    position: relative;
    z-index: var(--cc-z-sticky);
}
/* ── Everything that sits on the orange bar ──────────────────────────────
   The link colour is set with !important because that is how the ink version
   was written (head.php's global colour rules reach .cc-nav__link), so the
   override has to match. */
.cc-nav .cc-nav__link,
.cc-nav .cc-nav__link:link,
.cc-nav .cc-nav__link:visited {
    /* Ink, not paper. White on the orange bar measures 3.35:1 — under the 4.5
       every nav label owes as normal-size text, and only just over the 3.0 that
       large text would owe. Ink on the same orange is 5.20:1. The two were the
       candidates and the accessible one wins; the bar still reads as orange
       because the bar is the colour, not the words on it. */
    color: var(--cc-ink) !important;
}
.cc-nav .cc-nav__link:hover,
.cc-nav .cc-nav__link:focus-visible {
    /* Hover is an underline rather than a colour change: swapping to paper here
       would put the hovered link — the one being read — at 3.35:1, which is the
       problem above in a different place. */
    color: var(--cc-ink) !important;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.cc-nav .cc-nav__toggle { color: var(--cc-ink); }
.cc-nav :focus-visible { outline-color: var(--cc-ink); }
/* The submenu stays a light panel — a menu that drops out of a coloured bar
   reads better as paper. Its links need their ink restated, because .cc-on-dark
   on the <nav> exempts everything inside it from the global link colour. */
.cc-nav .cc-nav__sub {
    background: var(--cc-paper);
    border-color: rgba(0, 0, 0, .12);
}
.cc-nav .cc-nav__sub a,
.cc-nav .cc-nav__sub a:link,
.cc-nav .cc-nav__sub a:visited { color: var(--cc-ink) !important; }
.cc-nav .cc-nav__sub a:hover   { color: var(--cc-orange) !important; }

/* Below the breakpoint the drawer list is also a paper panel over the bar. */
@media (max-width: 880px) {
    .cc-nav .cc-nav__list { background: var(--cc-paper); }
    .cc-nav .cc-nav__list .cc-nav__link,
    .cc-nav .cc-nav__list .cc-nav__link:link,
    .cc-nav .cc-nav__list .cc-nav__link:visited { color: var(--cc-ink) !important; }
    .cc-nav .cc-nav__list .cc-nav__link:hover   { color: var(--cc-orange) !important; }
}
.cc-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-sp-5);
}
.cc-nav__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none !important;
}
.cc-nav__logo { height: 56px; width: auto; display: block; }

/* The drawer is a <details> — collapsed by default on mobile, always-open on desktop. */
.cc-nav__drawer { position: relative; }
.cc-nav__drawer summary { list-style: none; cursor: pointer; }
.cc-nav__drawer summary::-webkit-details-marker { display: none; }

.cc-nav__toggle {
    display: none; /* hidden on desktop — only shows on mobile */
    align-items: center; justify-content: center;
    color: var(--cc-ink);
    padding: 6px;
}
.cc-nav__toggle svg { display: block; }
.cc-nav__toggle-close { display: none; }
.cc-nav__drawer[open] .cc-nav__toggle-open { display: none; }
.cc-nav__drawer[open] .cc-nav__toggle-close { display: block; }

.cc-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: var(--cc-sp-5);
}
.cc-nav__item { position: relative; }
.cc-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink) !important;
    text-decoration: none !important;
    padding: 10px 0;
    transition: color var(--cc-dur) var(--cc-ease);
    white-space: nowrap;
}
.cc-nav__link:hover { color: var(--cc-orange) !important; }

/* Submenu — shown on hover/focus on desktop, always rendered on mobile */
.cc-nav__sub {
    list-style: none;
    margin: 0; padding: 0;
    position: absolute;
    top: 100%; left: 0;
    background: var(--cc-cream);
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-md);
    min-width: 200px;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease),
                visibility var(--cc-dur) var(--cc-ease);
    z-index: var(--cc-z-raised);
}
.cc-nav__item--has-sub:hover .cc-nav__sub,
.cc-nav__item--has-sub:focus-within .cc-nav__sub {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}
.cc-nav__sub a {
    display: block;
    padding: 10px 18px;
    font-family: var(--cc-body);
    font-size: 14px;
    color: var(--cc-ink) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--cc-line);
    transition: background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease);
}
.cc-nav__sub li:last-child a { border-bottom: 0; }
.cc-nav__sub a:hover { background: var(--cc-orange); color: var(--cc-paper) !important; }

/* RTL flip for submenu position */
[dir="rtl"] .cc-nav__sub { left: auto; right: 0; }

/* Mobile drawer (under 880px) */
@media (max-width: 880px) {
    .cc-nav__toggle { display: inline-flex; }
    .cc-nav__list {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--cc-paper);
        border-bottom: 1px solid var(--cc-line);
        box-shadow: var(--cc-shadow-md);
        padding: var(--cc-sp-3) 0;
    }
    .cc-nav__drawer[open] .cc-nav__list { display: flex; }
    .cc-nav__link {
        padding: 14px var(--cc-sp-4);
        border-bottom: 1px solid var(--cc-line);
    }
    .cc-nav__item:last-child .cc-nav__link { border-bottom: 0; }
    .cc-nav__sub {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        background: var(--cc-cream);
        border: 0;
        box-shadow: none;
    }
    .cc-nav__sub a { padding: 10px var(--cc-sp-7); font-size: 13px; }
}


/* ─── The <details> drawer, corrected at both ends ────────────────────────

   DESKTOP (>=881px): the primary navigation was completely unreachable.
   `.cc-nav__toggle` is display:none above the breakpoint, and the drawer is a
   <details> that is only ever opened by a click on that toggle — so on desktop
   it stayed closed. A closed <details> hides its content, and modern engines do
   that with `::details-content { content-visibility: hidden }`. Unlike the old
   `details:not([open]) > :not(summary) { display: none }` UA rule, an author
   `display: flex` on the child CANNOT override content-visibility, so
   `.cc-nav__list { display: flex }` had no effect: six links, no toggle, no way
   in — on every page, in both languages. Un-hiding the pseudo above the
   breakpoint restores the desktop row and keeps the no-JS design intact.
   Browsers without ::details-content fall back to the old UA rule, which the
   existing `.cc-nav__list { display: flex }` already overrides. */
@media (min-width: 881px) {
    .cc-nav__drawer::details-content {
        content-visibility: visible;
        display: contents;
    }
}

/* MOBILE (<=880px): `.cc-nav__list` is `position: absolute; left: 0; right: 0`,
   and its containing block was `.cc-nav__drawer` — a <details> no wider than
   its ~40px summary button. The open menu was therefore 40px wide and every
   label spilled out of it. Making the drawer static hands the containing block
   to `.cc-nav` (position: relative), which spans the full header width.
   Safe for the submenus: `.cc-nav__sub` is already `position: static` here. */
@media (max-width: 880px) {
    .cc-nav__drawer { position: static; }
}


/* ===========================================================================
   .cc-topbar · Dark navy top strip with brand stamp + scrolling marquee
   + email + language switcher.  Wrapped in .cc-on-dark so links auto-flip orange.
   =========================================================================== */
.cc-topbar {
    background: var(--cc-ink);
    color: var(--cc-orange);
    padding: 10px 0;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(241, 91, 41, 0.22);
}
.cc-topbar a {
    color: var(--cc-orange);
    text-decoration: none;
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-topbar a:hover { color: var(--cc-paper); }

.cc-topbar__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cc-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-5);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.cc-topbar__brand {
    color: var(--cc-orange);
    font-weight: 600;
    white-space: nowrap;
}
.cc-topbar__brand::before { content: '✦  '; }

.cc-topbar__rotator {
    overflow: hidden;
    white-space: nowrap;
    color: var(--cc-orange);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.cc-topbar__rotator span { display: inline-block; }
.cc-topbar__cities {
    display: inline-flex;
    gap: 18px;
    animation: cc-cities-scroll 32s linear infinite;
    padding-right: 32px;
}
@keyframes cc-cities-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
[dir="rtl"] .cc-topbar__cities { animation-direction: reverse; }

/* The global force-ink rule `span{color:var(--cc-ink)!important}` (head.php) would
   paint the brand stamp + city marquee ink-on-ink (invisible). Reassert the intended
   orange, scoped to the topbar surface and sized to out-specify that !important. */
.cc-topbar.cc-on-dark .cc-topbar__brand { color: var(--cc-orange) !important; }
.cc-topbar.cc-on-dark .cc-topbar__rotator,
/* Full strength, not an alpha: --cc-orange on the ink ground is 5.20:1, and
   every fraction of it fell under AA (0.7 -> 3.15, 0.8 -> 3.75, 0.85 -> 4.08). */
.cc-topbar.cc-on-dark .cc-topbar__cities span { color: var(--cc-orange) !important; }

/* Systemic net: any non-anchor text inside a .cc-on-dark surface stays legible
   (cream) instead of being force-inked to dark-on-dark. Component rules above
   (topbar brand/marquee, .footer.cc-on-dark roles) use higher specificity to
   reassert their accent colors, so this only rescues otherwise-unstyled text. */
.cc-on-dark p,
.cc-on-dark li,
.cc-on-dark span,
.cc-on-dark .text,
.cc-on-dark h1, .cc-on-dark h2, .cc-on-dark h3,
.cc-on-dark h4, .cc-on-dark h5, .cc-on-dark h6 { color: var(--cc-cream) !important; }

.cc-topbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.cc-topbar__email {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-topbar__email svg { opacity: 0.7; }
.cc-topbar__lang {
    border: 1px solid rgba(241, 91, 41, 0.4);
    padding: 4px 10px;
    transition: border-color var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease);
}
/* Lang hover handled by exemption in head.php (orange-fill on ink-text) */

@media (max-width: 700px) {
    .cc-topbar { font-size: 10px; padding: 8px 0; }
    .cc-topbar__rotator, .cc-topbar__email { display: none; }
}


/* ===========================================================================
   .cc-footer-btm · Footer colophon strip (stamp + legal + copyright)
   .cc-backtop · Floating "back to top" pill
   =========================================================================== */
.cc-footer-btm {
    margin-top: 56px;
    padding: 28px 0;
    border-top: 1px solid rgba(241, 91, 41, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-sp-5);
    flex-wrap: wrap;
}
.cc-footer-stamp {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-orange);
}
.cc-footer-stamp::before { content: '✦  '; }
.cc-footer-issue {
    font-family: var(--cc-display);
    font-style: italic;
    font-size: 12px;
    color: var(--cc-orange);
}
.cc-footer-legal {
    display: flex;
    gap: var(--cc-sp-5);
    flex-wrap: wrap;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
}
.cc-footer-legal a { color: var(--cc-orange) !important; text-decoration: none; }
.cc-footer-legal a:hover { color: var(--cc-paper) !important; }
.cc-footer-copy {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Not an alpha: 0.65 of the orange on the ink footer is 2.88:1. Full
       strength is 5.20:1. (The earlier pass fixed the spaced variant of this
       value elsewhere in the file and missed this unspaced one.) */
    color: var(--cc-orange);
}
.cc-backtop {
    position: fixed;
    bottom: 92px; right: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cc-orange);
    color: var(--cc-paper) !important;
    display: flex; align-items: center; justify-content: center;
    z-index: var(--cc-z-sticky);
    transition: background var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease);
}
.cc-backtop:hover { background: var(--cc-ink); transform: translateY(-3px); }
/* RTL: move the pill to the inline-start (left) corner in Arabic. The footer
   carries class .direction-rtl in Arabic; [dir=rtl] is belt-and-suspenders. */
[dir="rtl"] .cc-backtop,
.footer.direction-rtl .cc-backtop { right: auto; left: 24px; }

/* ===========================================================================
   .footer.cc-on-dark · Restored ink editorial footer (per-role recolor)
   The footer's artifacts (white email/phone, orange colophon, two-tone logo)
   were all authored for a dark surface. We paint <footer> ink and re-assign
   each text role by token. All overrides are scoped to .footer.cc-on-dark and
   sized to win over the head.php force-ink !important text rule on specificity.
   =========================================================================== */
.footer.cc-on-dark { background: var(--cc-ink); margin-top: 0; }
/* RTL: the fixed-width orange divider bar has no logical margin, so it can stay on
   the physical-left edge in Arabic. Push the block to the start (right) edge. */
.footer.direction-rtl .divider { margin-left: auto; margin-right: 0; }
/* Intro brand blurb → dimmed cream body copy */
.footer.cc-on-dark p.footer { color: rgba(251, 248, 241, 0.72) !important; }
/* Section headings → orange accent */
.footer.cc-on-dark .text-capitalize { color: var(--cc-orange) !important; }
/* Category links → cream, orange underline on hover */
.footer.cc-on-dark .footer-menu a {
    color: var(--cc-cream) !important;
    text-decoration: none;
    transition: color .2s, text-decoration-color .2s;
}
.footer.cc-on-dark .footer-menu a:hover {
    color: var(--cc-orange) !important;
    text-decoration: underline;
    text-decoration-color: var(--cc-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
/* Contact block: address + values cream, icons orange accent */
.footer.cc-on-dark .footer-contact-block .text { color: var(--cc-cream) !important; }
.footer.cc-on-dark .footer-contact-block a { color: var(--cc-cream) !important; text-decoration: none; }
.footer.cc-on-dark .footer-contact-block a:hover {
    color: var(--cc-orange) !important;
    text-decoration: underline;
    text-decoration-color: var(--cc-orange);
    text-underline-offset: 4px;
}
.footer.cc-on-dark .footer-contact-block a[href^="mailto"],
.footer.cc-on-dark .footer-contact-block .phone a { direction: ltr; }
.footer.cc-on-dark .footer-contact-block .icon svg { color: var(--cc-orange); }
/* Social icon pills intensify to deep orange on hover */
.footer.cc-on-dark .footer-socials li a:hover { background: var(--cc-orange-deep); }


/* ===========================================================================
   .cc-home-hero · Homepage editorial hero (replaces legacy Slick slider)
   Markup: issue mark + display headline + lead + next-event meta strip
   =========================================================================== */
.cc-home-hero {
    position: relative;
    background: var(--cc-cream);
    padding: 96px 0 84px;
    overflow: hidden;
    border-bottom: 1.5px solid var(--cc-line);
}
.cc-home-hero::before {
    content: '';
    position: absolute;
    top: -260px; right: -180px;
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(241, 91, 41, 0.08) 0%, transparent 65%);
    z-index: 1;
    pointer-events: none;
}
.cc-home-hero::after {
    content: '';
    position: absolute;
    right: 6%; bottom: -160px;
    width: 320px; height: 320px;
    border: 1.5px solid rgba(241, 91, 41, 0.18);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
[dir="rtl"] .cc-home-hero::before { right: auto; left: -180px; }
[dir="rtl"] .cc-home-hero::after  { right: auto; left: 6%; }
.cc-home-hero .container { position: relative; z-index: 2; }

/* Issue mark — masthead-style brand strip above the headline */
.cc-issue-mark {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 56px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cc-line);
}
.cc-issue-mark__brand {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-ink);
    font-weight: 600;
}
.cc-issue-mark__brand::before { content: '✦  '; color: var(--cc-orange); }
.cc-issue-mark__date {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-stamp);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    margin-left: auto;
}
[dir="rtl"] .cc-issue-mark__date { margin-left: 0; margin-right: auto; }

.cc-home-hero__title {
    font-family: var(--cc-display) !important;
    font-size: clamp(40px, 7vw, 92px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 0.98;
    color: var(--cc-ink) !important;
    margin: 0 0 28px;
    max-width: 1080px;
    font-feature-settings: 'kern', 'liga', 'ss01';
}
.cc-home-hero__title em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
    color: var(--cc-orange);
    font-weight: 500;
}

.cc-home-hero__lead {
    font-family: var(--cc-body);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.6;
    color: var(--cc-ink-soft);
    max-width: 640px;
    margin: 0 0 38px;
}

.cc-home-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--cc-line);
    margin-top: 12px;
}
.cc-home-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-home-hero__meta-label {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    font-weight: 500;
}
.cc-home-hero__meta-value {
    font-family: var(--cc-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--cc-ink);
}
.cc-home-hero__meta-value a { color: var(--cc-ink); text-decoration: none; }
.cc-home-hero__meta-value a:hover { color: var(--cc-orange); }

@media (max-width: 600px) {
    .cc-home-hero { padding: 64px 0 48px; }
    .cc-issue-mark { margin-bottom: 36px; }
    .cc-home-hero__meta { gap: 24px; }
}


/* ===========================================================================
   .cc-cities · Editorial city listing (used on /cities and as homepage widget)
   Layout: 80px index numeral · city name + country · description · arrow CTA
   =========================================================================== */
.cc-cities { background: var(--cc-cream); }
.cc-cities__head { margin-bottom: var(--cc-sp-7); }
.cc-cities__head .cc-eyebrow { margin-bottom: var(--cc-sp-3); }
.cc-cities__head h2 {
    font-family: var(--cc-display);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--cc-ink);
    margin: 0;
    line-height: 1.05;
    max-width: 820px;
}

.cc-city-row {
    display: grid;
    grid-template-columns: 80px minmax(280px, 1fr) minmax(280px, 1.4fr) auto;
    gap: var(--cc-sp-6);
    align-items: start;
    padding: var(--cc-sp-6) 0;
    border-top: 1px solid var(--cc-line);
    transition: padding var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease);
}
.cc-city-row:last-child { border-bottom: 1.5px solid var(--cc-orange); }
.cc-city-row:hover { padding-left: 8px; padding-right: 8px; }
[dir="rtl"] .cc-city-row:hover { padding-left: 0; padding-right: 8px; }

.cc-city-row a.cc-city-link {
    display: contents;
    text-decoration: none;
    color: inherit;
}

.cc-city-num {
    font-family: var(--cc-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-orange-text);
    letter-spacing: 0.08em;
    padding-top: 8px;
}

.cc-city-name {
    font-family: var(--cc-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--cc-ink);
    line-height: 1.05;
    margin: 0 0 8px;
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-city-row:hover .cc-city-name {
    color: var(--cc-orange);
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.cc-city-country {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
}

.cc-city-desc {
    font-family: var(--cc-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--cc-ink-soft);
    margin: 0;
    max-width: 540px;
}

.cc-city-cta {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink) !important;
    border-bottom: 1.5px solid var(--cc-ink);
    padding-bottom: 3px;
    align-self: center;
    transition: color var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease);
    white-space: nowrap;
    text-decoration: none !important;
}
.cc-city-row:hover .cc-city-cta {
    color: var(--cc-orange) !important;
    border-color: var(--cc-orange);
}

.cc-city-empty {
    font-family: var(--cc-display);
    font-style: italic;
    font-size: 22px;
    color: var(--cc-ink-soft);
    padding: var(--cc-sp-7) 0;
    text-align: center;
}

@media (max-width: 900px) {
    .cc-city-row {
        grid-template-columns: 50px 1fr;
        gap: 16px;
    }
    .cc-city-desc, .cc-city-cta { grid-column: 2; }
    .cc-city-cta { margin-top: 8px; }
    .cc-city-name { font-size: 24px; }
}


/* ===========================================================================
   .cc-cat-card · 3D flip-card category tile (homepage)
   Aliases legacy .cat-flip-wrap / .cat-flip-inner / .cat-face / .cat-face-front /
   .cat-face-back / .cat-icon / .cat-name from catogrey.php.
   =========================================================================== */
.cc-cat-card,
.cat-flip-wrap {
    perspective: 1000px;
    height: 260px;
}
.cc-cat-card__inner,
.cat-flip-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    cursor: pointer;
}
.cc-cat-card:hover .cc-cat-card__inner,
.cat-flip-wrap:hover .cat-flip-inner { transform: rotateY(180deg); }

.cc-cat-card__face,
.cat-face {
    position: absolute;
    inset: 0;
    border-radius: var(--cc-radius-0); /* was 14px — the largest radius on the site, in a square system */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 24px;
    text-align: center;
}
.cc-cat-card__face--front,
.cat-face-front {
    background: var(--cc-cream);
    border: 1.5px solid var(--cc-line);
    box-shadow: var(--cc-shadow-sm);
}
.cc-cat-card__face--back,
.cat-face-back {
    background: var(--cc-orange);
    border: 1.5px solid var(--cc-orange-deep);
    box-shadow: var(--cc-shadow-cta); /* was a hard-coded orange glow */
    transform: rotateY(180deg);
}

.cc-cat-card__icon,
.cat-icon {
    width: 88px; height: 88px;
    object-fit: contain;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.cc-cat-card__face--back .cc-cat-card__icon,
.cat-face-back .cat-icon { filter: brightness(0) invert(1); }

.cc-cat-card__name,
.cat-name {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-meta);
    font-weight: 700;
    color: var(--cc-ink);
    line-height: 1.4;
    margin: 0;
}
.cc-cat-card__face--back .cc-cat-card__name,
.cat-face-back .cat-name { color: var(--cc-ink) !important; }

/* Playing-card corner pip — magazine signature ✦ */
.cc-cat-card__face::before,
.cat-face::before {
    content: '✦';
    position: absolute;
    top: 10px; left: 14px;
    font-size: 11px;
    opacity: 0.25;
}
.cc-cat-card__face::after,
.cat-face::after {
    content: '✦';
    position: absolute;
    bottom: 10px; right: 14px;
    font-size: 11px;
    opacity: 0.25;
    transform: rotate(180deg);
}
.cc-cat-card__face--back::before, .cc-cat-card__face--back::after,
.cat-face-back::before, .cat-face-back::after { color: var(--cc-paper); opacity: 0.4; }


/* ===========================================================================
   .cc-upcoming-grid · Auto-fit card grid for the homepage upcoming widget
   =========================================================================== */
.cc-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cc-sp-5);
}
.cc-upcoming-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0; /* override .cc-card default padding — body gets its own */
}
.cc-upcoming-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cc-cream);
}
.cc-upcoming-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--cc-dur-slow) var(--cc-ease);
}
.cc-upcoming-card:hover .cc-upcoming-card__media img { transform: scale(1.04); }

.cc-upcoming-card__body {
    padding: var(--cc-sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--cc-sp-4);
}
.cc-upcoming-card__title-link {
    text-decoration: none !important;
    color: inherit !important;
}
.cc-upcoming-card__title {
    font-family: var(--cc-display);
    font-size: clamp(18px, 1.6vw, 21px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: var(--cc-tracking-tight);
    color: var(--cc-ink);
    margin: 0;
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-upcoming-card:hover .cc-upcoming-card__title { color: var(--cc-orange); }

.cc-upcoming-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--cc-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--cc-ink-soft);
    display: grid;
    gap: 4px;
}
.cc-upcoming-card__meta strong {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    /* Logical, not physical: in Arabic `margin-right` put the gap on the
       label's leading edge, so the label ran into its own value. */
    margin-inline-end: 6px;
}

.cc-upcoming-card__cta {
    margin-top: auto;
    display: flex;
    gap: var(--cc-sp-2);
    flex-wrap: wrap;
}
.cc-upcoming-card__cta .cc-btn { flex: 1; min-width: 0; }


/* ===========================================================================
   .cc-yt · YouTube embed wrapper (16:9 responsive padding-trick)
   =========================================================================== */
.cc-yt {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid var(--cc-line);
    background: var(--cc-ink);
}
.cc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ===========================================================================
   .cc-client-grid · Logo wall (auto-fill grid, hairline gutters)
   =========================================================================== */
.cc-client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1px;
    background: var(--cc-line);
    border: 1px solid var(--cc-line);
}
.cc-client {
    background: var(--cc-cream);
    padding: var(--cc-sp-5) 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    transition: background var(--cc-dur) var(--cc-ease);
}
.cc-client:hover { background: var(--cc-peach); }
.cc-client img {
    max-width: 100%;
    max-height: 60px;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--cc-dur) var(--cc-ease),
                opacity var(--cc-dur) var(--cc-ease);
}
.cc-client:hover img { filter: grayscale(0); opacity: 1; }


/* ===========================================================================
   .cc-pullquote · Editorial pull-quote (testimonials page)
   Layout: numbered prefix + italic Fraunces blockquote + attribution
   =========================================================================== */
.cc-pullquote {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--cc-sp-6);
    padding: var(--cc-sp-7) 0;
    border-top: 1px solid var(--cc-line);
}
.cc-pullquote:last-child { border-bottom: 1.5px solid var(--cc-orange); }
.cc-pullquote__num {
    font-family: var(--cc-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--cc-orange-text);
    letter-spacing: 0.08em;
}
.cc-pullquote__body { min-width: 0; }
.cc-pullquote__quote {
    font-family: var(--cc-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-5);
    max-width: 880px;
    border-left: 3px solid var(--cc-orange);
    padding-left: var(--cc-sp-5);
}
[dir="rtl"] .cc-pullquote__quote {
    border-left: 0;
    border-right: 3px solid var(--cc-orange);
    padding-left: 0;
    padding-right: var(--cc-sp-5);
}
.cc-pullquote__author {
    padding-left: var(--cc-sp-5);
}
[dir="rtl"] .cc-pullquote__author { padding-left: 0; padding-right: var(--cc-sp-5); }
.cc-pullquote__name {
    font-family: var(--cc-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--cc-ink);
}
.cc-pullquote__role {
    display: block;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    margin-top: 4px;
}
@media (max-width: 600px) {
    .cc-pullquote { grid-template-columns: 1fr; gap: var(--cc-sp-3); }
}


/* ===========================================================================
   .cc-courselist · Two-column course-listing row (category page)
   Left: course title + sub + CTA.  Right: compact upcoming-dates table.
   =========================================================================== */
.cc-courselist { background: var(--cc-cream); }

.cc-course-row {
    padding: var(--cc-sp-6) 0;
    border-bottom: 1px solid var(--cc-line);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}
.cc-course-row:first-of-type { border-top: 1px solid var(--cc-line); }
.cc-course-row:last-child { border-bottom: 2px solid var(--cc-orange); }

.cc-course-num {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-orange);
    margin-bottom: 8px;
    display: block;
}

.cc-course-name {
    font-family: var(--cc-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--cc-tracking-tight);
    margin: 0 0 12px;
    color: var(--cc-ink);
    transition: color var(--cc-dur) var(--cc-ease);
}
.cc-course-row a.cc-course-link { text-decoration: none; }
.cc-course-row a.cc-course-link:hover .cc-course-name {
    text-decoration: underline;
    text-decoration-color: var(--cc-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.cc-course-sub {
    font-family: var(--cc-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--cc-ink-soft);
    margin: 0 0 var(--cc-sp-4);
    max-width: 620px;
}

/* "More dates" underline-style CTA on the course row */
.cc-courselist .cc-course-cta,
a.cc-course-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cc-mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--cc-tracking-eyebrow);
    color: var(--cc-ink) !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid var(--cc-ink);
    padding-bottom: 3px;
    background: transparent !important;
    transition: color var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease),
                gap var(--cc-dur) var(--cc-ease);
}
.cc-courselist .cc-course-cta:hover,
a.cc-course-cta:hover {
    color: var(--cc-orange) !important;
    border-color: var(--cc-orange);
    gap: 14px;
    transform: none !important;
    box-shadow: none !important;
}
.cc-course-cta-arrow {
    transition: transform var(--cc-dur) var(--cc-ease);
}
.cc-course-cta:hover .cc-course-cta-arrow { transform: translateX(2px); }
[dir="rtl"] .cc-course-cta:hover .cc-course-cta-arrow { transform: translateX(-2px); }

/* Right column — compact event mini-table */
.cc-events {
    font-family: var(--cc-body);
    font-size: 13px;
    line-height: 1.5;
}
.cc-events-head {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    font-weight: 600;
    letter-spacing: var(--cc-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    margin-bottom: 8px;
}
.cc-events table { width: 100%; border-collapse: collapse; }
.cc-events td {
    padding: 8px 8px 8px 0;
    border-bottom: 1px dotted var(--cc-line);
    color: var(--cc-ink);
}
.cc-events tr:last-child td { border-bottom: 0; }
.cc-events td a {
    color: var(--cc-ink) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cc-events td a:hover { color: var(--cc-orange) !important; }
.cc-events td.cc-events-city  { width: 40%; font-weight: 600; }
.cc-events td.cc-events-price { width: 28%; text-align: center; color: var(--cc-ink-soft); }
.cc-events td.cc-events-date  { width: 32%; text-align: right; color: var(--cc-ink-soft); }
.cc-events svg { width: 11px; height: 11px; opacity: 0.55; }

[dir="rtl"] .cc-events td.cc-events-city,
.cc-courselist[dir="rtl"] .cc-events td.cc-events-city { text-align: right; }
[dir="rtl"] .cc-events td.cc-events-date,
.cc-courselist[dir="rtl"] .cc-events td.cc-events-date { text-align: left; }

.cc-no-courses {
    font-family: var(--cc-display);
    font-style: italic;
    font-size: 24px;
    color: var(--cc-ink-soft);
    padding: 60px 0;
    text-align: center;
}

@media (max-width: 900px) {
    .cc-course-row {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: var(--cc-sp-5) 0;
    }
    .cc-course-name { font-size: 20px; }
}


/* ===========================================================================
   .cc-empty-state · Cream-bordered "on demand" CTA box
   Replaces: cc-cd-ondemand
   =========================================================================== */
.cc-empty-state,
.cc-cd-ondemand {
    margin-top: clamp(64px, 8vw, 96px);
    padding: clamp(48px, 7vw, 80px) clamp(32px, 5vw, 64px);
    border: 1.5px solid var(--cc-orange);
    background: var(--cc-cream);
    text-align: center;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
}
.cc-empty-state .cc-eyebrow,
.cc-cd-ondemand .cc-eyebrow { margin-bottom: var(--cc-sp-4); justify-content: center; }
.cc-empty-state h3,
.cc-cd-ondemand h3 {
    font-family: var(--cc-display);
    font-style: italic;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 500;
    color: var(--cc-ink);
    margin: 0 0 var(--cc-sp-3);
    letter-spacing: var(--cc-tracking-tight);
}
.cc-empty-state p,
.cc-cd-ondemand p {
    font-family: var(--cc-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--cc-ink-soft);
    margin: 0 0 var(--cc-sp-6);
    max-width: 480px;
    margin-left: auto; margin-right: auto;
}


/* ===========================================================================
   .cc-meta-strip · Mono caps strip with bullet separators
   Used under hero titles, in dossiers, in receipts
   =========================================================================== */
.cc-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-5);
    padding-top: var(--cc-sp-5);
    border-top: 1px solid var(--cc-line);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-mono);
    text-transform: uppercase;
    color: var(--cc-ink);
}
.cc-meta-strip__item strong {
    color: var(--cc-ink-soft);
    font-weight: 500;
    /* logical, not margin-right: this strip renders on the Arabic domain too,
       where a physical right margin puts the gap on the wrong side of the label */
    margin-inline-end: var(--cc-sp-1);
}
.cc-on-dark .cc-meta-strip { border-top-color: rgba(255,255,255,.18); color: var(--cc-cream); }
.cc-on-dark .cc-meta-strip__item strong { color: rgba(255,255,255,.6); }

/* --query · the strip carrying a search's active filters, each removable.
   A modifier rather than a new component: the frame, wrapping and hairline are
   already right, and duplicating them would mean keeping two things in step
   with cc-rtl.css. What genuinely differs is that the VALUE is text the visitor
   typed — it must not be uppercased or tracked like a label — and that each row
   is interactive. */
.cc-meta-strip--query { align-items: center; row-gap: var(--cc-sp-3); }
.cc-meta-strip--query .cc-meta-strip__item {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-sp-2);
    min-height: var(--cc-target);
    padding: var(--cc-sp-2) var(--cc-sp-3);
    border: var(--cc-border-hairline) solid var(--cc-line);
    background: var(--cc-paper);
}
.cc-meta-strip__value {
    font-family: var(--cc-body);
    font-size: var(--cc-fs-meta);
    letter-spacing: var(--cc-tracking-body, normal);
    text-transform: none;
    color: var(--cc-ink);
}
.cc-meta-strip__drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cc-target-min);
    min-height: var(--cc-target-min);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-meta);
    line-height: 1;
    color: var(--cc-ink-muted);
    text-decoration: none;
    transition: color var(--cc-dur) var(--cc-ease);
}
/* --cc-orange-text, not --cc-orange: this is text on a light ground, where the
   surface orange fails contrast. */
.cc-meta-strip__drop:hover,
.cc-meta-strip__drop:focus-visible { color: var(--cc-orange-text); }
.cc-meta-strip__clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--cc-target);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-eyebrow);
    letter-spacing: var(--cc-tracking-eyebrow);
    color: var(--cc-orange-text);
    text-decoration: none;
    border-bottom: var(--cc-border-hairline) solid currentColor;
}


/* ===========================================================================
   Bootstrap pagination, themed
   ---------------------------------------------------------------------------
   includes/general.php::pagination() is SHARED by all three brands, so the
   markup (.pagination / .page-item / .page-link) cannot change — but nothing
   ever styled it here, so /search and the listing pages rendered Bootstrap's
   stock control: #007bff link blue, #dee2e6 hairlines and rounded corners,
   none of which exist in this palette.
   =========================================================================== */
.pagination { gap: 6px; }
.pagination .page-item .page-link {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-0);
    background: var(--cc-paper);
    color: var(--cc-ink);
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-mono-sm);
    letter-spacing: var(--cc-tracking-mono);
    padding: 10px 14px;
    line-height: 1;
    box-shadow: none;
}
.pagination .page-item .page-link:hover {
    border-color: var(--cc-ink);
    color: var(--cc-ink);
    background: var(--cc-cream);
}
.pagination .page-item.active .page-link {
    background: var(--cc-ink);
    border-color: var(--cc-ink);
    color: var(--cc-paper);
}
.pagination .page-item .page-link:focus {
    box-shadow: 0 0 0 3px rgba(241, 91, 41, .15);
    outline: none;
}


/* ===========================================================================
   Reclaiming the hero breadcrumb from the legacy sheet
   ---------------------------------------------------------------------------
   includes/general.php:426 emits `<ol class="breadcrumbs">`, and the legacy
   style{,-ar}.min.css styles `.breadcrumbs` (and every descendant) with
   `color:#f15b29!important` plus a 13px size. That beat `.cc-hero__crumbs`,
   so the hero breadcrumb rendered as orange 13px links instead of the muted
   11px trail the design system specifies — the loudest thing in a hero whose
   job is to be quiet. !important is needed only because the legacy rule has it.
   =========================================================================== */
.cc-hero__crumbs .breadcrumbs,
.cc-hero__crumbs .breadcrumbs li,
.cc-hero__crumbs .breadcrumbs ol,
.cc-hero__crumbs .breadcrumbs a,
.cc-hero__crumbs .breadcrumbs a:link,
.cc-hero__crumbs .breadcrumbs a:visited,
.cc-hero__crumbs .breadcrumbs span {
    color: var(--cc-ink-muted) !important;
    font-size: var(--cc-fs-eyebrow) !important;
    font-family: var(--cc-mono) !important;
    background: none !important;
}
.cc-hero__crumbs .breadcrumbs a:hover {
    color: var(--cc-orange) !important;
}

/* ─── Top bar: the brand must degrade, not get sliced ─────────────────────
   `.cc-topbar__brand` is `white-space: nowrap` inside `.cc-topbar__left`
   (overflow: hidden), and on the homepage the right-hand group gains an extra
   "Download" link that steals ~80px. Below ~470px the site's own name was cut
   mid-word with no ellipsis ("CoreConsept Train"). Letting the flex item
   shrink and ellipsise turns a broken name into an obviously abbreviated one. */
.cc-topbar__brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ===========================================================================
   .cc-statement · Standalone editorial statement
   ---------------------------------------------------------------------------
   A large display-face passage with an accent rule down its leading edge:
   the homepage philosophy block, the About page's vision and mission, the
   cancellation clause on the policy page.

   It exists because these five blocks were all using .cc-pullquote, which is a
   DIFFERENT component — the testimonial card, `display: grid` with
   `grid-template-columns: 80px 1fr` for its №-and-body layout. A bare text node
   inside a grid becomes an anonymous grid item, so the text was auto-placed
   into the 80px NUMBER column and wrapped at roughly one word per line: the
   homepage statement rendered 720px wide and 1718px tall, and About's vision
   block ran 43 words down 41 lines. In both languages.

   Two components cannot share one class name. .cc-pullquote keeps the BEM
   structure it was designed for (testimonials, styleguide); everything that is
   just a statement uses this.
   =========================================================================== */
.cc-statement {
    display: block;
    font-family: var(--cc-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--cc-ink);
    border-left: 3px solid var(--cc-orange);
    padding: 12px 0 12px var(--cc-sp-5);
    margin: 32px 0;
    max-width: 720px;
}
[dir="rtl"] .cc-statement {
    border-left: 0;
    border-right: 3px solid var(--cc-orange);
    padding-left: 0;
    padding-right: var(--cc-sp-5);
}