/* =====================================================================
   RISE & RUN DESIGN KIT — shared, modular brand language (task-281)
   ---------------------------------------------------------------------
   The SINGLE source of truth for the Rise & Run visual language used by
   every public surface: the brand page (.bd-*), the partner page (.pb-*/.ppx-*)
   and the event-detail page (.events-page). Loaded site-wide right after
   design-system/tokens.css, so:
     - one teal/gold/navy palette,
     - one set of "squared, professional" radii,
     - one canonical button (.rr-btn) reused across pages,
     - per-page stylesheets consume these tokens instead of hardcoding.

   Why this exists: before task-281 the teal #138577 was hardcoded in three
   files, button radii differed per page (0 / 3 / 10 / 12px), and
   event-detail.css even defined a CONFLICTING blue accent (#1d4ed8). This
   file ends that drift. Editorial, not "AI website": flat fills, hairline
   rules, restrained shadows, sharp-ish corners.
   ===================================================================== */

:root {
    /* --- Brand palette (canonical home; partner-brand.css mirrors these) --- */
    --rr-accent:        #138577;   /* primary: links, CTA fill, focus      */
    --rr-accent-deep:   #0f6f64;   /* hover / active                        */
    --rr-accent-bright: #2bb3a3;   /* decorative graphic fills (no text)    */
    --rr-accent-soft:   #e8f5f3;   /* tint backgrounds                      */
    --rr-accent-rgb:    19, 133, 119;

    --rr-gold:          #d4a24c;   /* secondary accent (featured, on dark)  */
    --rr-gold-deep:     #c08f33;
    --rr-gold-soft:     #f6edda;

    --rr-ink:           #1e3a5f;   /* navy text / dark sections             */
    --rr-ink-deep:      #0f2744;
    --rr-paper:         #ffffff;

    /* --- Typography: the brand-page voice (Space Grotesk display + Inter body) ---
       The brand page (which is the design reference) uses Space Grotesk for headings.
       Every related page (partner, run-club) consumes --rr-display so the whole family
       reads with ONE typographic voice instead of Playfair on some pages. (task-283) */
    --rr-display:       'Space Grotesk', 'Inter', system-ui, sans-serif;
    --rr-text:          'Inter', system-ui, sans-serif;

    /* --- Squared, professional radii (one scale, every page) --- */
    --rr-radius-btn:    6px;       /* buttons — squared, not pill           */
    --rr-radius-card:   10px;      /* cards / tiles                         */
    --rr-radius-chip:   999px;     /* pills / flags only                    */
    --rr-radius-sharp:  0;         /* editorial hairline grids              */

    /* --- Shared button shadow (teal-tinted, restrained) --- */
    --rr-btn-shadow:      0 6px 18px rgba(19, 133, 119, .26);
    --rr-btn-shadow-hover: 0 10px 24px rgba(19, 133, 119, .32);
}

/* =====================================================================
   CANONICAL BUTTON  (.rr-btn) — reuse this on any new markup.
   Existing page buttons (.bd-btn / .pb-btn / .btn-register) are aligned to
   the same tokens in their own stylesheets, so the whole site reads as one.
   ===================================================================== */
.rr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    border-radius: var(--rr-radius-btn);
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rr-btn:hover { transform: translateY(-2px); text-decoration: none; }
.rr-btn:focus-visible { outline: 3px solid var(--rr-accent-soft); outline-offset: 2px; }

.rr-btn--primary {
    background: var(--rr-accent);
    color: #fff;
    box-shadow: var(--rr-btn-shadow);
}
.rr-btn--primary:hover { background: var(--rr-accent-deep); color: #fff; box-shadow: var(--rr-btn-shadow-hover); }

.rr-btn--ghost {
    background: transparent;
    color: var(--rr-accent);
    border-color: var(--rr-accent);
}
.rr-btn--ghost:hover { background: var(--rr-accent); color: #fff; }

/* Ghost on a dark / photo background (white outline). */
.rr-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.rr-btn--ghost-light:hover { background: #fff; color: var(--rr-ink); border-color: #fff; }

.rr-btn--gold { background: var(--rr-gold); color: var(--rr-ink-deep); }
.rr-btn--gold:hover { background: var(--rr-gold-deep); color: var(--rr-ink-deep); }

.rr-btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    .rr-btn { transition: none; }
    .rr-btn:hover { transform: none; }
}

/* =====================================================================
   UNIFORM LOGO CELL  (.rr-logo-cell) — standardize logos of wildly
   different source dimensions to ONE visual scale on a hairline tile.
   Used by the brand sponsor wall so every partner logo reads consistent.
   The cell height is fixed; the logo is contained within it.
   ===================================================================== */
.rr-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2.4vw, 28px);
    background: var(--rr-paper);
    border-radius: var(--rr-radius-card);
}
.rr-logo-cell img {
    max-width: 100%;
    max-height: var(--rr-logo-h, 56px);
    width: auto;
    object-fit: contain;
}

/* =====================================================================
   CANONICAL PUBLIC MODAL  (.rr-modal) — task-333
   ---------------------------------------------------------------------
   ONE modal language for every public-facing Bootstrap-4 modal
   (.modal.fade + data-toggle / data-dismiss). Moved here from
   partner-brand.css §7 (task-293 sponsor-request modal was the first
   consumer) because modals now span ≥2 page families: registration
   (privacy informativa), event detail (planimetry / kit / gallery) and
   the partner page. Zones: navy branded header + white body & footer.

   Variants:
     .rr-modal--doc    text-heavy legal content — scrollable body
                       (max-height 70vh), readable measure, h6 headings
     .rr-modal--media  image content — dark surface, edge-to-edge image
     .rr-modal--full   full-viewport media (photo gallery lightbox)
   ===================================================================== */

/* The public site ships NO Bootstrap CSS (only the BS4 JS bundle) — modal
   layout otherwise comes from the legacy static/css/modal.css (a fixed .modal
   overlay plus a 500px padded .modal-content). The shell therefore (re)defines
   everything it needs, including .modal-dialog-centered (a no-op without
   Bootstrap CSS), and neutralizes the legacy .modal-content box. */
body.modal-open { overflow: hidden; }

.rr-modal .modal-dialog {
    position: relative;
    width: auto;
    max-width: min(520px, calc(100vw - 1.5rem));
    margin: 1.75rem auto;
}
.rr-modal .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.rr-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
    border-radius: var(--rr-radius-card, 10px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 29, 51, .28);
}

/* Smooth, slightly-raised entrance (Bootstrap toggles .show on open). */
.rr-modal.fade .modal-dialog {
    transition: transform var(--duration-normal, .25s) var(--ease-out, ease),
                opacity var(--duration-normal, .25s) var(--ease-out, ease);
    transform: translateY(16px) scale(.98);
    opacity: 0;
}
.rr-modal.show .modal-dialog { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .rr-modal.fade .modal-dialog { transition: none; transform: none; }
}

/* ── Branded header (navy) ── */
.rr-modal__header {
    position: relative;
    background: var(--rr-ink, #1e3a5f);
    color: #fff;
    padding: 1.5rem 1.6rem 1.35rem;
}
.rr-modal__eyebrow {
    margin: 0 0 .5rem;
    font-family: var(--rr-text);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rr-gold, #d4a24c);
}
.rr-modal__title {
    margin: 0;
    padding-right: 2rem;   /* clear the close button */
    font-family: var(--rr-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}
.rr-modal__highlight { color: var(--rr-gold, #d4a24c); }
.rr-modal__subtitle {
    margin: .55rem 0 0;
    font-size: .9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}
.rr-modal__close {
    position: absolute;
    top: .85rem; right: .9rem;
    width: 2rem; height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-fast, .15s) var(--ease-out, ease);
}
.rr-modal__close:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.rr-modal__close:focus-visible { outline: 2px solid var(--rr-gold, #d4a24c); outline-offset: 2px; }

/* ── Body ── */
.rr-modal__body { padding: 1.5rem 1.6rem; }

/* Accent teaser strip (e.g. selected package in the sponsor modal). */
.rr-modal__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    margin: 0 0 1.25rem;
    padding: .8rem 1rem;
    background: var(--rr-accent-soft, #e8f5f3);
    border: 1px solid var(--rr-line, #e2e8f0);
    border-left: 4px solid var(--rr-accent, #138577);
    border-radius: 4px;
}

/* ── States ── */
.rr-modal__error {
    margin: .4rem 0 0;
    color: #b42318;
    font-size: .85rem;
    font-weight: 600;
}
/* The success/summary/error states toggle via the `hidden` attribute — keep the
   author display rules from overriding it (else the success state shows on open). */
.rr-modal__success[hidden],
.rr-modal__summary[hidden],
.rr-modal__error[hidden] { display: none; }
.rr-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 1.75rem 1rem;
}
.rr-modal__success i { font-size: 2.6rem; color: var(--rr-accent, #138577); }
.rr-modal__success h3 {
    margin: 0;
    font-family: var(--rr-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rr-ink, #1e3a5f);
}
.rr-modal__success p { margin: 0; color: var(--rr-ink-soft, #475569); }

/* ── Footer ── */
.rr-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1.1rem 1.6rem;
    border-top: 1px solid var(--rr-line, #e2e8f0);
    background: #fff;
}

/* ── Variant: text-heavy legal document (privacy informativa, …) ── */
.rr-modal--doc .modal-dialog { max-width: min(680px, calc(100vw - 1.5rem)); }
.rr-modal--doc .rr-modal__body {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.5rem 1.75rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--rr-ink-soft, #475569);
}
.rr-modal--doc .rr-modal__body > * { max-width: 65ch; }
.rr-modal--doc .rr-modal__body p { margin: 0 0 .85rem; }
.rr-modal--doc .rr-modal__body p:last-child { margin-bottom: 0; }
.rr-modal--doc .rr-modal__body h6 {
    margin: 1.4rem 0 .4rem;
    font-family: var(--rr-text);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rr-ink, #1e3a5f);
}
.rr-modal--doc .rr-modal__body h6:first-child { margin-top: 0; }
.rr-modal--doc .rr-modal__body strong { color: var(--rr-ink, #1e3a5f); }
.rr-modal--doc .rr-modal__body a {
    color: var(--rr-accent, #138577);
    text-decoration: underline;
}
.rr-modal--doc .rr-modal__body a:hover { color: var(--rr-accent-deep, #0f6f64); }

/* ── Variant: media viewer (planimetry, photos) — dark, edge-to-edge ── */
/* The legacy .modal overlay carries the dim layer itself, so the media
   variant can deepen its own backdrop without touching other modals. */
.rr-modal--media.modal { background-color: rgba(6, 10, 16, .78); }
.rr-modal--media .modal-dialog { max-width: min(1100px, calc(100vw - 2rem)); }
.rr-modal--media .modal-content { background: #0f1722; }
.rr-modal--media .rr-modal__body {
    padding: 0;
    background: #0f1722;
    text-align: center;
}
.rr-modal--media .rr-modal__body img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    margin: 0 auto;
}
.rr-modal--media .rr-modal__caption {
    margin: 0;
    padding: .8rem 1rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
}

/* ── Variant: full-viewport media (gallery lightbox) ── */
.rr-modal--full .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.rr-modal--full .modal-content {
    flex: 1;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.rr-modal--full .rr-modal__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rr-modal--full .rr-modal__body img { max-height: 100%; }
.rr-modal--full .rr-modal__header { padding: 1rem 1.25rem .9rem; }
.rr-modal--full .rr-modal__title { font-size: 1.1rem; padding-right: 9.5rem; /* clear controls + close */ }
/* Inline media controls (prev / counter / next) beside the close button. */
.rr-modal__controls {
    position: absolute;
    top: .85rem; right: 3.4rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
}
.rr-modal__controls .rr-modal__nav {
    width: 2rem; height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-fast, .15s) var(--ease-out, ease);
}
.rr-modal__controls .rr-modal__nav:hover { background: rgba(255, 255, 255, .18); }
.rr-modal__controls .rr-modal__nav:focus-visible { outline: 2px solid var(--rr-gold, #d4a24c); outline-offset: 2px; }

/* ── Dark mode (registration / event pages toggle html.dark-mode) ── */
html.dark-mode .rr-modal .modal-content {
    background: #111927;
    color: #e2e8f0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html.dark-mode .rr-modal__footer {
    background: #111927;
    border-top-color: rgba(255, 255, 255, .1);
}
html.dark-mode .rr-modal__summary {
    background: rgba(43, 179, 163, .1);
    border-color: rgba(255, 255, 255, .12);
}
html.dark-mode .rr-modal__success h3 { color: #f1f5f9; }
html.dark-mode .rr-modal__success p { color: #cbd5e1; }
html.dark-mode .rr-modal--doc .rr-modal__body { color: #cbd5e1; }
html.dark-mode .rr-modal--doc .rr-modal__body h6,
html.dark-mode .rr-modal--doc .rr-modal__body strong { color: #f1f5f9; }
html.dark-mode .rr-modal--doc .rr-modal__body a { color: var(--rr-accent-bright, #2bb3a3); }
html.dark-mode .rr-modal--doc .rr-modal__body a:hover { color: #4ecabb; }
html.dark-mode .rr-modal .rr-btn--ghost {
    color: var(--rr-accent-bright, #2bb3a3);
    border-color: var(--rr-accent-bright, #2bb3a3);
}

/* ── Mobile — near-full-width dialog, stacked footer buttons ── */
@media (max-width: 560px) {
    .rr-modal .modal-dialog { max-width: none; margin: .5rem; }
    .rr-modal--full .modal-dialog { margin: 0; }
    .rr-modal__header { padding: 1.25rem 1.15rem 1.1rem; }
    .rr-modal__title { font-size: 1.2rem; }
    .rr-modal__body { padding: 1.2rem 1.15rem; }
    .rr-modal--doc .rr-modal__body { max-height: 62vh; padding: 1.2rem 1.15rem; }
    .rr-modal--media .rr-modal__body { padding: 0; }
    .rr-modal__footer { flex-direction: column; padding: 1rem 1.15rem; }
    .rr-modal__footer .rr-btn { width: 100%; justify-content: center; }
}