/* ============================================================
   St Barbara — Liturgical Year Wheel (2026-08-05 redesign)

   Two-column desktop layout (wheel+list / detail panel), the season
   list as a real always-available selector rather than a hidden
   mobile-only fallback, larger wheel geometry with less wasted
   margin, and a text-based "Today" marker so the current season
   isn't identified by color alone.
   ============================================================ */

.wheel-today-line {
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: var(--muted, #666);
    margin-bottom: 28px;
}

.wheel-today-line strong {
    color: var(--midnight);
}

/* ---- Two-column layout ---- */

.wheel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.wheel-layout-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* More breathing room between the wheel and the panel once there's
   genuinely enough width to spare it — not applied by default so
   narrower desktop/laptop widths keep the tighter 32px gap. */
@media (min-width: 1440px) {
    .wheel-layout {
        gap: 56px;
    }
}

@media (max-width: 1200px) {
    .wheel-layout {
        grid-template-columns: 1fr;
    }
}

/* ---- Wheel ---- */

.year-wheel {
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.year-wheel svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ---- Season arcs ---- */

.wheel-arc {
    transition: opacity .3s, stroke-width .3s, filter .2s;
    cursor: pointer;
}

.wheel-arc--active {
    filter: drop-shadow(0 0 8px rgba(139, 30, 45, .25));
}

.wheel-arc.wheel-selectable:hover,
.wheel-arc.wheel-selectable:focus-visible {
    opacity: 1;
    stroke-width: 26px;
}

/* A thin curved path renders an outline unpredictably across
   browsers, so focus is indicated with a stronger visual weight
   instead — consistent in effect with the point/list-item focus
   states, just achieved differently for this specific shape. */
.wheel-arc.wheel-selectable:focus-visible {
    filter: drop-shadow(0 0 0 3px var(--gold-dark, #9E7C2E)) drop-shadow(0 0 6px rgba(158, 124, 46, .5));
}

/* ---- Centre text ---- */

.wheel-centre-today-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: var(--gold-dark, #9E7C2E);
}

.wheel-centre-season {
    font-family: 'Cinzel', serif;
    font-size: 19px;
    font-weight: 700;
    fill: var(--midnight);
}

.wheel-centre-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    fill: var(--muted, #888);
}

.wheel-centre-countdown {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: #8B1E2D;
}

.wheel-centre-status {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    fill: var(--midnight);
}

.wheel-centre-next {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--gold-text, #8C6B22);
}

.wheel-title {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    fill: var(--midnight);
    font-weight: 700;
}

/* ---- Points and labels ---- */

.wheel-point {
    cursor: pointer;
}

.wheel-point circle {
    transition: r .25s, opacity .25s;
}

.wheel-point:hover circle {
    r: 16;
    opacity: 1;
}

/* Visible focus ring — distinct from hover, not just a size change,
   so keyboard users get a clear, unambiguous focus indicator. */
.wheel-point:focus-visible circle {
    r: 16;
    opacity: 1;
}

.wheel-point:focus-visible {
    outline: 3px solid var(--gold-dark, #9E7C2E);
    outline-offset: 4px;
    border-radius: 50%;
}

.wheel-point--selected circle {
    r: 16;
    stroke: var(--midnight);
    stroke-width: 3;
}

.wheel-point--selected .wheel-point-name {
    font-weight: 700;
}

.wheel-point--active circle {
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .65; }
}

.wheel-point-name {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 600;
    fill: var(--midnight);
}

.wheel-point-dates {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    fill: var(--muted, #777);
}

/* Text marker for the current season — deliberately not relying on
   the active color/pulse alone to communicate "this one is now". */
.wheel-point-today-flag {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    fill: #8B1E2D;
}

@media (max-width: 900px) {
    .wheel-point-name { font-size: 13px; }
    .wheel-point-dates { font-size: 11px; }
}

/* Below this width the wheel becomes a visual overview only — outer
   text labels get crowded and hard to tap precisely at this size, so
   they're hidden here; the always-visible .wheel-list below becomes
   the actual full-width, easy-to-tap selector instead. The colored
   arcs/points/needle stay visible as the "shape of the year" this
   still needs to communicate at a glance. */
@media (max-width: 640px) {
    .wheel-point-name,
    .wheel-point-dates,
    .wheel-point-today-flag {
        display: none;
    }

    /* Arc touch target — visible stroke-width (22-30px in the SVG
       markup) widened here specifically for touch, without changing
       the drawn appearance elsewhere (desktop/tablet untouched,
       since this rule only applies under this breakpoint). CSS can
       override an SVG element's stroke-width the same as any other
       presentation attribute. */
    .wheel-arc {
        stroke-width: 40px !important;
    }
    .wheel-arc.wheel-arc--active {
        stroke-width: 44px !important;
    }

    /* Tighter spacing so the season list reads clearly as the
       wheel's legend rather than a separate, disconnected block —
       and to cut unnecessary vertical space on a page that's
       already stacking wheel + list + panel in sequence. */
    .wheel-layout-visual {
        gap: 6px;
    }

    .wheel-list-heading {
        margin-bottom: 2px;
    }

    .wheel-list-instruction {
        margin-bottom: 8px;
    }

    .year-wheel {
        margin-bottom: 0;
        /* Bleeds slightly past the standard .container side padding
           (92% width, ~4% per side) so the wheel renders a bit
           larger within the same viewport — a safe, ordinary layout
           widening rather than a transform/scale trick, and well
           clear of the actual viewport edge (checked against the
           container's real padding value, not guessed). */
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
    }
}

/* ---- Today needle ---- */

.today-needle {
    stroke: #8B1E2D;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: .4;
}

.today-needle-dot {
    fill: #8B1E2D;
    stroke: #fff;
    stroke-width: 3;
}

/* ---- Info panel ---- */

.wheel-information {
    padding: 32px 35px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    text-align: left;
    transition: box-shadow .3s;
    position: sticky;
    top: 100px;
    /* Approximates the wheel's own rendered height on typical desktop
       widths (the SVG viewBox is square, and the wheel column is
       ~63% of the layout width) so the two columns read as balanced
       — capped against the viewport height too so it can't grow past
       a safe bound on a shorter screen regardless. */
    max-height: min(720px, calc(100vh - 190px));
    overflow-y: auto;
}

.wheel-information--active {
    box-shadow: 0 8px 40px rgba(0,0,0,.1);
}

.wheel-information-kicker {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gold-dark, var(--gold));
    margin-bottom: 8px;
    min-height: 1.2em;
}

.wheel-information h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    margin-bottom: 14px;
    color: var(--midnight);
}

.wheel-information p {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--muted, #555);
}

.wheel-information-meta {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    color: #8B1E2D;
    margin-top: 16px;
    min-height: 1.4em;
}

.wheel-information-next {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e5e0d8);
    font-family: 'Inter', sans-serif;
    color: var(--midnight);
}

.wheel-information-next strong,
.wheel-information-next span,
.wheel-information-next small {
    display: block;
}

.wheel-information-next strong {
    margin-bottom: 5px;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold-text, #8C6B22);
}

.wheel-information-next span {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.wheel-information-next small {
    margin-top: 3px;
    font-size: .82rem;
    color: var(--muted, #777);
}

.wheel-information-fasting,
.wheel-information-prayer,
.wheel-information-scripture,
.wheel-information-reflection {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    color: var(--muted, #555);
    background: var(--stone-pale, #F4F1EC);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}

.wheel-information-fasting strong,
.wheel-information-prayer strong,
.wheel-information-scripture strong,
.wheel-information-reflection strong {
    color: var(--midnight);
    display: block;
    margin-bottom: 4px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.wheel-information-link {
    margin-top: 16px;
}

/* The neutral/current-status calendar action is intentionally more compact
   than a full CTA button. Keep the 44px touch target, but prevent the long
   label from turning into an oversized full-card action on desktop/mobile. */
.wheel-information-link .button {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    font-size: .84rem;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .wheel-information {
        position: static;
        max-width: 680px;
        max-height: none;
        overflow-y: visible;
        margin: 0 auto;
        text-align: center;
    }
}

/* ---- Season list / selector ----
   A real, always-available control — not a mobile-only fallback
   swapped in via display:none toggling. Compact under the wheel on
   desktop; becomes the full-width primary selector on mobile once
   the wheel's own outer labels are hidden above. */

.wheel-list-heading {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--midnight);
    text-align: center;
    margin-bottom: 4px;
}

.wheel-list-instruction {
    max-width: 680px;
    margin: 0 auto 16px;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted, #777);
    text-align: center;
}

/* The SVG centre remains the primary desktop/tablet status. On small
   screens this compact text summary repeats the same date/state in
   normal HTML after the wheel, where it remains comfortably readable
   even though the outer SVG labels are intentionally hidden. */
.wheel-mobile-status {
    display: none;
}

.wheel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
}

.wheel-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    color: var(--midnight);
    cursor: pointer;
    text-align: left;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.wheel-list-item:hover {
    border-color: var(--gold);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.wheel-list-item:focus-visible {
    outline: 3px solid var(--gold-dark, #9E7C2E);
    outline-offset: 2px;
}

.wheel-list-item--today {
    border-color: #8B1E2D;
    border-width: 2px;
    background: rgba(139, 30, 45, .03);
}

/* Selected state — the row's own background/border, deliberately
   separate from and more prominent than the small "Now" badge alone.
   Combined selector (.wheel-list-item.wheel-point--selected) so this
   reliably wins over --today styling when a row is both, regardless
   of which rule comes first in the file. */
.wheel-list-item.wheel-point--selected {
    background: var(--gold-pale, #FAF3E3);
    border-color: var(--gold-dark, #9E7C2E);
    border-width: 2px;
    box-shadow: 0 2px 10px rgba(158, 124, 46, .12);
}

.wheel-list-item.wheel-point--selected::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border-radius: 50%;
    background: var(--gold-dark, #9E7C2E);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 12px no-repeat;
}

.wheel-list-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wheel-list-item-text small {
    font-size: .78rem;
    color: var(--muted, #888);
}

.wheel-list-today-tag {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8B1E2D;
    background: rgba(139, 30, 45, .1);
    padding: 3px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ---- Mobile card carousel ----
   Default state: hidden. Only shown under the max-width:640px query
   below, where .wheel-list is hidden in its place — the two are
   alternate presentations of the exact same season data/selection
   behavior (both use .wheel-selectable, so main.js's existing
   click/keydown handler already covers the carousel cards with no
   extra wiring), never both visible at once. */
.wheel-carousel {
    display: none;
}

.wheel-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 5%;
    -webkit-overflow-scrolling: touch;
    padding: 4px 5% 4px;
    margin: 0 -5%;
    /* Native CSS scroll-snap does the swipe gesture — no custom
       touch-event math needed for the drag/swipe itself. */
}

.wheel-carousel-track::-webkit-scrollbar {
    display: none;
}

.wheel-carousel-card {
    flex: 0 0 90%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: #fff;
    border: none;
    border-top: 4px solid var(--gold, #C8A24D);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    cursor: pointer;
    font-family: inherit;
}

.wheel-carousel-dates {
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gold-text, var(--gold, #8C6B22));
    margin-bottom: 6px;
}

.wheel-carousel-title {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: var(--midnight);
    margin-bottom: 8px;
}

.wheel-carousel-text {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted, #666);
}

.wheel-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.wheel-carousel-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--midnight);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wheel-carousel-dot {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-carousel-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--stone, #ddd);
    transition: width .2s ease, background .2s ease;
}

.wheel-carousel-dot--active::before {
    width: 22px;
    border-radius: 999px;
    background: var(--midnight);
}

.wheel-carousel-hint {
    text-align: center;
    font-size: .78rem;
    color: var(--muted, #888);
    margin-top: 16px;
    padding: 0 12px;
}

@media (max-width: 640px) {
    .wheel-mobile-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        max-width: 340px;
        margin: 2px auto 12px;
        padding: 0 8px;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: .82rem;
        line-height: 1.4;
        color: var(--muted, #666);
    }

    .wheel-mobile-status > strong {
        color: var(--gold-text, #8C6B22);
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .wheel-mobile-status span strong {
        color: var(--midnight);
    }

    .wheel-list-heading {
        margin-top: 2px;
    }

    .wheel-list-instruction {
        max-width: 360px;
        margin-bottom: 12px;
        padding-inline: 8px;
        font-size: .8rem;
    }

    .wheel-list {
        max-width: none;
    }

    .wheel-list-item {
        padding: 16px 20px;
    }

    /* Tighter padding and less space between the labeled callout
       boxes (fasting/prayer/scripture/reflection) to keep the page
       from running unnecessarily long when several are filled in —
       body text size itself is untouched so it stays comfortably
       readable. */
    .wheel-information {
        padding: 24px 22px;
    }

    .wheel-information-link {
        margin-top: 14px;
    }

    .wheel-information-link .button {
        padding: 8px 12px;
        font-size: .8rem;
    }

    .wheel-information-fasting,
    .wheel-information-prayer,
    .wheel-information-scripture,
    .wheel-information-reflection {
        margin-top: 10px;
        padding: 12px 14px;
    }

    /* The carousel replaces the plain list as the mobile chooser —
       same underlying data and selection behavior, just the swipeable
       card layout instead. */
    .wheel-list {
        display: none;
    }

    .wheel-carousel {
        display: block;
    }
}

/* ---- Dark mode ---- */

body.theme-dark .wheel-information {
    background: var(--surface-2, #1a1a2e);
}

body.theme-dark .wheel-information h3 {
    color: #fff;
}

body.theme-dark .wheel-information-fasting,
body.theme-dark .wheel-information-prayer,
body.theme-dark .wheel-information-scripture,
body.theme-dark .wheel-information-reflection {
    background: rgba(255,255,255,.06);
}


body.theme-dark .wheel-information-next {
    border-top-color: rgba(255,255,255,.12);
}

body.theme-dark .wheel-information-next span {
    color: #fff;
}

/* Mobile floating wheel label — see main.js showWheelMobileLabel().
   Desktop/tablet never create or show this element (mediaQuery-gated
   in JS), so this CSS has no effect above 640px regardless. */
.wheel-mobile-label {
    position: absolute;
    transform: translate(-50%, calc(-100% - 10px));
    background: var(--midnight);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}
.wheel-mobile-label.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 16px));
}
.wheel-mobile-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--midnight);
}


/* The wheel remains fully usable with motion disabled. Selection and
   state changes are immediate; only decorative pulse/transitions are
   removed. */
@media (prefers-reduced-motion: reduce) {
    .wheel-arc,
    .wheel-point circle,
    .wheel-list-item,
    .wheel-carousel-dot::before,
    .wheel-mobile-label {
        transition: none !important;
    }

    .wheel-point--active circle {
        animation: none !important;
    }
}

/* Mobile-only guidance: the full radial Church Wheel is most legible on larger screens. */
.wheel-mobile-experience-note {
    display: none;
}

@media (max-width: 640px) {
    .wheel-mobile-experience-note {
        display: block;
        margin: 0 0 1rem;
        padding: .8rem .9rem;
        border-left: 3px solid var(--gold, #c7a34b);
        border-radius: 0 8px 8px 0;
        background: rgba(199, 163, 75, .075);
        color: var(--muted, #6b7280);
        font-size: .86rem;
        line-height: 1.5;
    }
}