/* ACN Red Wednesday v2 — front-end styles
   Scoped under .acn-redw-v2 to avoid leaking into the rest of the theme. */

.acn-redw-v2 {
    --redw-red: #b30000;
    --redw-red-soft: #f6e6e6;
    --redw-text: #1f1f1f;
    --redw-muted: #6b6b6b;
    --redw-line: #e7e7e7;
    --redw-bg: #ffffff;
    --redw-bg-soft: #faf7f5;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--redw-text);
    line-height: 1.5;
    margin: 24px 0;
}

.acn-redw-v2 *,
.acn-redw-v2 *::before,
.acn-redw-v2 *::after { box-sizing: border-box; }

/* Header */
.acn-redw-v2 .redw-header { margin-bottom: 16px; }
.acn-redw-v2 .redw-title {
    display: flex; gap: 12px; align-items: center;
}
.acn-redw-v2 .redw-title h2 {
    margin: 0; font-size: 22px; font-weight: 700;
}
.acn-redw-v2 .redw-subtitle {
    margin: 2px 0 0 0; color: var(--redw-muted); font-size: 14px;
}
.acn-redw-v2 .redw-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--redw-red); flex-shrink: 0;
}
.acn-redw-v2 .redw-dot-tiny {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--redw-red); margin-right: 6px;
}

/* Counters */
.acn-redw-v2 .redw-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.acn-redw-v2 .redw-counter {
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.acn-redw-v2 .redw-counter strong {
    display: block;
    font-size: 26px;
    color: var(--redw-red);
    font-weight: 700;
    line-height: 1;
}
.acn-redw-v2 .redw-counter span {
    font-size: 12px;
    color: var(--redw-muted);
    margin-top: 4px;
    display: block;
}

/* Toolbar */
.acn-redw-v2 .redw-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Radio buttons (used by both Map/Table and Parish/Individual toggles) */
.acn-redw-v2 .redw-radio-group {
    display: inline-flex;
    gap: 18px;
    border: 0;
    padding: 0;
    margin: 0;
}
.acn-redw-v2 .redw-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--redw-text);
    user-select: none;
}
.acn-redw-v2 .redw-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--redw-line);
    border-radius: 50%;
    background: var(--redw-bg);
    margin: 0;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: border-color 0.12s ease;
    flex-shrink: 0;
}
.acn-redw-v2 .redw-radio input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--redw-red);
    transform: scale(0);
    transition: transform 0.12s ease;
}
.acn-redw-v2 .redw-radio input[type="radio"]:checked {
    border-color: var(--redw-red);
}
.acn-redw-v2 .redw-radio input[type="radio"]:checked::before {
    transform: scale(1);
}
.acn-redw-v2 .redw-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--redw-red);
    outline-offset: 2px;
}
.acn-redw-v2 .redw-radio input[type="radio"]:checked + span {
    font-weight: 600;
}
.acn-redw-v2 .redw-near-me {
    background: var(--redw-bg);
    color: var(--redw-text); /* explicit — themes can set inherited color to white */
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.acn-redw-v2 .redw-near-me:hover,
.acn-redw-v2 .redw-near-me:focus {
    background: var(--redw-bg-soft);
    color: var(--redw-text);
    border-color: var(--redw-red);
}

/* "Events near me" result notice — appears between toolbar and filters
   when the closest event is farther than the threshold (40 km), or when
   no events are registered close enough at all. Includes a CTA that
   scrolls to the existing "Invite Your Parish" section on the page. */
.acn-redw-v2 .redw-near-result {
    background: var(--redw-red-soft);
    border: 1px solid #e6c8c8;
    border-left: 4px solid var(--redw-red);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
/* Respect the [hidden] attribute even though display:flex above is more
   specific than the browser default `[hidden] { display: none }`. The
   notice should only appear after the user clicks "Events near me". */
.acn-redw-v2 .redw-near-result[hidden] { display: none !important; }
.acn-redw-v2 .redw-near-result-msg {
    margin: 0;
    flex: 1;
    color: var(--redw-text);
    line-height: 1.5;
    font-size: 14px;
}
.acn-redw-v2 .redw-near-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.acn-redw-v2 .redw-near-cta {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 9px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
}
.acn-redw-v2 .redw-near-cta:hover,
.acn-redw-v2 .redw-near-cta:focus { background: #8b0000; color: #fff; }
.acn-redw-v2 .redw-near-close {
    background: transparent;
    border: 0;
    color: var(--redw-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.acn-redw-v2 .redw-near-close:hover,
.acn-redw-v2 .redw-near-close:focus { color: var(--redw-red); }
@media (max-width: 720px) {
    .acn-redw-v2 .redw-near-result { flex-direction: column; align-items: stretch; }
    .acn-redw-v2 .redw-near-result-actions { width: 100%; justify-content: space-between; }
}

/* "Invite Your Parish" template panel — opens inline below the 40-km
   notice when the user clicks "See how to invite your parish". Shows
   the explanatory intro plus a copyable email template the visitor can
   send to their parish priest. Hidden until user action. */
.acn-redw-v2 .redw-invite-template {
    background: #fff;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    padding: 22px 26px 24px;
    margin: 4px 0 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
/* Same defensive override we use on .redw-near-result — display:block on
   the section above is more specific than the [hidden] default, so we
   force it back. The panel must only appear after the user clicks. */
.acn-redw-v2 .redw-invite-template[hidden] { display: none !important; }
.acn-redw-v2 .redw-invite-template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.acn-redw-v2 .redw-invite-template-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--redw-red);
    line-height: 1.25;
}
.acn-redw-v2 .redw-invite-close {
    background: transparent;
    border: 0;
    color: var(--redw-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.acn-redw-v2 .redw-invite-close:hover,
.acn-redw-v2 .redw-invite-close:focus { color: var(--redw-red); }
.acn-redw-v2 .redw-invite-template p {
    margin: 0 0 10px 0;
    line-height: 1.55;
    color: var(--redw-text);
    font-size: 14.5px;
}
.acn-redw-v2 .redw-invite-to-copy {
    margin: 16px 0 8px !important;
    font-weight: 600;
    color: var(--redw-text);
}
.acn-redw-v2 .redw-invite-letter-box {
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    padding: 14px 16px;
}
.acn-redw-v2 .redw-invite-letter-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.acn-redw-v2 .redw-invite-copy {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}
.acn-redw-v2 .redw-invite-copy:hover,
.acn-redw-v2 .redw-invite-copy:focus { background: #8b0000; color: #fff; }
.acn-redw-v2 .redw-copy-status {
    font-size: 13px;
    color: var(--redw-muted);
    transition: color 0.15s ease;
}
.acn-redw-v2 .redw-copy-status.is-success { color: #1f8a3a; font-weight: 600; }
.acn-redw-v2 .redw-copy-status.is-error   { color: var(--redw-red);  font-weight: 600; }
.acn-redw-v2 .redw-invite-letter {
    /* Preserve the line breaks we wrote with \n in PHP. white-space:
       pre-wrap also keeps soft-wrapping at word boundaries when the
       column is narrow. */
    white-space: pre-wrap;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--redw-text);
    background: #fff;
    padding: 14px 16px;
    border-radius: 6px;
    border: 1px solid var(--redw-line);
}
@media (max-width: 720px) {
    .acn-redw-v2 .redw-invite-template { padding: 16px 18px 18px; }
    .acn-redw-v2 .redw-invite-letter-actions {
        justify-content: space-between;
    }
}

/* Filters */
.acn-redw-v2 .redw-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.acn-redw-v2 .redw-filters select,
.acn-redw-v2 .redw-filters input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    background: var(--redw-bg);
    font-size: 14px;
}

/* Stage */
.acn-redw-v2 .redw-stage { position: relative; }
.acn-redw-v2 .redw-map {
    width: 100%;
    height: 520px;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    overflow: hidden;
    /* Create an isolated stacking context so Leaflet's internal
       z-index values (panes at 200-700, controls at 1000) don't
       compete with the site's sticky header. Without this, marker
       pins and the +/- zoom controls render above the ACN Canada
       top bar when the user scrolls past the map. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}
/* Gesture hint overlay — fades in when the user scrolls over the map
   without holding Ctrl/Cmd. Google-Maps-style: dims the tiles slightly
   and shows a centered "Use Ctrl + scroll to zoom" toast. pointer-events
   is none so the +/- zoom controls under the overlay remain clickable. */
.acn-redw-v2 .redw-map-gesture-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    /* Sits above Leaflet tiles/markers and the +/- controls; pointer-events
       none lets clicks fall through to the controls. */
    z-index: 1200;
    /* Inherit the rounded corners from .redw-map */
    border-radius: inherit;
}
.acn-redw-v2 .redw-map-gesture-hint.is-visible {
    opacity: 1;
}
.acn-redw-v2 .redw-map-gesture-hint-msg {
    max-width: 480px;
}
.acn-redw-v2 .redw-map-gesture-hint kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 1px 8px;
    margin: 0 2px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    vertical-align: baseline;
}
@media (prefers-reduced-motion: reduce) {
    .acn-redw-v2 .redw-map-gesture-hint { transition: none; }
}

.acn-redw-v2 .redw-empty {
    text-align: center;
    color: var(--redw-muted);
    padding: 24px;
}

/* Table */
.acn-redw-v2 .redw-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
}
.acn-redw-v2 .redw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.acn-redw-v2 .redw-table th,
.acn-redw-v2 .redw-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--redw-line);
    vertical-align: top;
    /* Themes / Elementor sometimes inherit word-break: break-all globally
       and break inside words ("Toron|to", "Montr|éal"). Force normal word
       wrapping inside the table so breaks happen only at spaces. */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}
.acn-redw-v2 .redw-table th {
    background: var(--redw-bg-soft);
    font-weight: 600;
    white-space: nowrap;
}
/* Short columns shouldn't wrap at all — date, time, and province codes are
   compact strings that look broken on two lines. Column order in the
   header: 1=Parish, 2=Event, 3=Date, 4=Time, 5=City, 6=Province,
   7=Address, 8=Website. */
.acn-redw-v2 .redw-table td:nth-child(3),
.acn-redw-v2 .redw-table td:nth-child(4),
.acn-redw-v2 .redw-table td:nth-child(6) {
    white-space: nowrap;
}
.acn-redw-v2 .redw-table tr:last-child td { border-bottom: 0; }
.acn-redw-v2 .redw-table a {
    color: var(--redw-red);
    text-decoration: none;
    font-weight: 500;
}
.acn-redw-v2 .redw-table a:hover { text-decoration: underline; }

/* "Invite Your Parish" CTA bridge — sits between the stage (map/table) and
   the register section. Always visible (unlike the 60-km notice and the
   template panel, which only appear after a click). Visually echoes the
   notice's red left border so the colour cue connects the two surfaces, but
   sits on a soft background so it doesn't compete with the red CTA inside
   the template panel itself. */
.acn-redw-v2 .redw-invite-cta {
    margin-top: 18px;
    padding: 18px 22px;
    background: var(--redw-bg-soft);
    border: 1px solid var(--redw-line);
    border-left: 4px solid var(--redw-red);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.acn-redw-v2 .redw-invite-cta-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--redw-text);
    line-height: 1.3;
}
.acn-redw-v2 .redw-invite-cta-p {
    margin: 0;
    color: var(--redw-text);
    font-size: 14px;
    line-height: 1.55;
}
.acn-redw-v2 .redw-invite-cta-button {
    background: var(--redw-red);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.2;
    margin-top: 2px;
}
.acn-redw-v2 .redw-invite-cta-button:hover,
.acn-redw-v2 .redw-invite-cta-button:focus { background: #8b0000; color: #fff; }
@media (max-width: 720px) {
    .acn-redw-v2 .redw-invite-cta { padding: 14px 16px; }
    .acn-redw-v2 .redw-invite-cta-button { width: 100%; text-align: center; }
}

/* Register section */
.acn-redw-v2 .redw-register {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    background: var(--redw-bg);
}
.acn-redw-v2 .redw-register-title {
    margin: 0 0 4px 0;
    font-size: 18px;
}
.acn-redw-v2 .redw-register-subtitle {
    margin: 0 0 14px 0;
    color: var(--redw-muted);
    font-size: 14px;
}
/* Legacy h3 styling kept for any custom override; the new title uses
   .redw-register-title above. */
.acn-redw-v2 .redw-register h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
}
.acn-redw-v2 .redw-radio-group--register {
    margin-bottom: 14px;
}

/* ---------- Register accordion (2026-05-22) ----------
   Replaces the old Parish/Individual radio group + pre-rendered
   Typebot iframe. The two .redw-register-trigger buttons are
   disclosure-style toggles; clicking one opens the matching
   .redw-register-panel-wrap underneath. The other panel closes if it
   was open (mutex behavior — only one panel visible at a time).
   The Typebot iframe is lazy-mounted in JS on the first click of the
   Parish trigger (see wireRegisterAccordion in redw-v2.js); before this
   change the iframe loaded on first paint and hurt LCP for visitors
   who never scrolled to this section. */
.acn-redw-v2 .redw-register-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
@media (max-width: 720px) {
    .acn-redw-v2 .redw-register-choices {
        grid-template-columns: 1fr;
    }
}
.acn-redw-v2 .redw-register-trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "label chevron" "desc desc";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 16px 18px;
    background: #ffffff;
    color: var(--redw-text, #4a4a4a);
    border: 2px solid var(--redw-line);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease,
                background-color .18s ease, transform .18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.acn-redw-v2 .redw-register-trigger:hover {
    border-color: var(--redw-red);
    box-shadow: 0 4px 14px rgba(187, 37, 37, 0.10);
    transform: translateY(-1px);
}
.acn-redw-v2 .redw-register-trigger:focus-visible {
    outline: 3px solid rgba(187, 37, 37, 0.35);
    outline-offset: 2px;
}
.acn-redw-v2 .redw-register-trigger[aria-expanded="true"] {
    border-color: var(--redw-red);
    background: #fff6f6;
    box-shadow: 0 4px 14px rgba(187, 37, 37, 0.15);
}
.acn-redw-v2 .redw-register-trigger-label {
    grid-area: label;
    font-weight: 600;
    font-size: 16px;
    color: var(--redw-red);
}
.acn-redw-v2 .redw-register-trigger-desc {
    grid-area: desc;
    font-size: 13px;
    color: var(--redw-muted);
    line-height: 1.4;
}
.acn-redw-v2 .redw-register-trigger-chevron {
    grid-area: chevron;
    width: 22px;
    height: 22px;
    color: var(--redw-red);
    transition: transform .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.acn-redw-v2 .redw-register-trigger-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}
.acn-redw-v2 .redw-register-trigger[aria-expanded="true"] .redw-register-trigger-chevron {
    transform: rotate(180deg);
}

/* The animated panel wrap uses grid-template-rows 0fr → 1fr, which
   animates from collapsed (zero height) to natural content height
   without needing a fixed max-height. Supported in modern browsers
   (Chrome/Edge 117+, Firefox 117+, Safari 17.4+). In older browsers
   the property is ignored and the panel just snaps open — acceptable
   fallback. */
.acn-redw-v2 .redw-register-panel-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease, margin .35s ease,
                opacity .25s ease;
    opacity: 0;
    margin: 0;
}
.acn-redw-v2 .redw-register-panel-wrap[data-state="open"] {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
}
.acn-redw-v2 .redw-register-panel-inner {
    overflow: hidden;
    min-height: 0;
}
/* When motion is reduced, skip the animation but keep the open/closed
   states functional via display semantics. */
@media (prefers-reduced-motion: reduce) {
    .acn-redw-v2 .redw-register-panel-wrap {
        transition: none;
    }
}

/* Typebot iframe mount */
.acn-redw-v2 .redw-typebot-mount {
    margin-top: 12px;
    border: 1px solid var(--redw-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--redw-bg-soft);
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acn-redw-v2 .redw-typebot-mount iframe {
    width: 100%;
    height: 720px;
    border: 0;
    display: block;
    background: var(--redw-bg);
}
.acn-redw-v2 .redw-typebot-loading {
    color: var(--redw-muted);
    font-size: 14px;
    margin: 0;
    padding: 24px;
}
.acn-redw-v2 .redw-cta {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.acn-redw-v2 .redw-cta:hover { filter: brightness(0.95); }
.acn-redw-v2 .redw-hint {
    color: var(--redw-muted);
    font-size: 13px;
    margin-top: 8px;
}

/* Form */
.acn-redw-v2 .redw-individual-form .redw-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.acn-redw-v2 .redw-individual-form label {
    display: block;
    font-size: 13px;
    color: var(--redw-muted);
}
.acn-redw-v2 .redw-individual-form label > span { display: block; margin-bottom: 4px; }
.acn-redw-v2 .redw-individual-form input[type="text"],
.acn-redw-v2 .redw-individual-form input[type="email"],
.acn-redw-v2 .redw-individual-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--redw-line);
    border-radius: 8px;
    font-size: 14px;
    background: var(--redw-bg);
    color: var(--redw-text);
}
.acn-redw-v2 .redw-individual-form .redw-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--redw-text);
    font-size: 13px;
}
.acn-redw-v2 .redw-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.acn-redw-v2 .redw-form-status {
    font-size: 13px;
    color: var(--redw-muted);
}
.acn-redw-v2 .redw-form-status.is-error { color: var(--redw-red); }
.acn-redw-v2 .redw-form-status.is-success { color: #1f8a3a; }

/* Province participant bubbles — overlaid on the Leaflet map for every
   province with at least one individual sign-up. Sized in JS based on the
   count; styling is here so it can be tweaked without touching the JS. */
.leaflet-marker-icon.redw-province-bubble-wrap {
    background: transparent;
    border: 0;
}
.redw-province-bubble {
    background: var(--redw-red, #b30000);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: default;
    user-select: none;
}
.redw-province-bubble .redw-province-bubble-count {
    display: inline-block;
    line-height: inherit;
}

/* Featured event card — rendered by [acn_redw_v2_featured].
   Visually prominent so it can sit above the map/list as the page anchor.
   Single card; if no event is flagged, the shortcode returns nothing and
   the Elementor section just shows whatever else is in it (or nothing). */
.acn-redw-v2.redw-featured { margin: 24px 0; }
.acn-redw-v2 .redw-featured-card {
    position: relative;
    background: var(--redw-bg);
    border: 1px solid var(--redw-line);
    border-left: 6px solid var(--redw-red);
    border-radius: 10px;
    padding: 22px 24px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.acn-redw-v2 .redw-featured-tag {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.acn-redw-v2 .redw-featured-title {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--redw-text);
    line-height: 1.25;
}
.acn-redw-v2 .redw-featured-parish {
    margin: 0 0 12px 0;
    color: var(--redw-muted);
    font-size: 14px;
}
.acn-redw-v2 .redw-featured-meta {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.acn-redw-v2 .redw-featured-meta li {
    font-size: 14px;
    color: var(--redw-text);
}
.acn-redw-v2 .redw-featured-meta strong {
    display: inline-block;
    min-width: 70px;
    color: var(--redw-muted);
    font-weight: 600;
    margin-right: 4px;
}
.acn-redw-v2 .redw-featured-cta {
    display: inline-block;
    background: var(--redw-red);
    color: #fff;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s ease;
}
.acn-redw-v2 .redw-featured-cta:hover,
.acn-redw-v2 .redw-featured-cta:focus {
    background: #8b0000;
    color: #fff;
}

/* Featured event — optional image slot (2026-05-26)
   When the admin fills the Image URL field on the featured row, the card
   switches to a split layout: image on the left, content on the right.
   With no image, the card stays in its single-column form. Mobile always
   stacks. Image fills its slot via object-fit cover so portraits or wide
   shots both look intentional. */
.acn-redw-v2 .redw-featured-card--with-image {
    display: grid;
    grid-template-columns: minmax(220px, 38%) 1fr;
    gap: 22px;
    padding: 0; /* image goes edge-to-edge; body keeps its own padding */
    overflow: hidden;
}
.acn-redw-v2 .redw-featured-image {
    margin: 0;
    align-self: stretch;
    background: #f0eae5;
    min-height: 220px;
}
.acn-redw-v2 .redw-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.acn-redw-v2 .redw-featured-card--with-image .redw-featured-body {
    padding: 22px 24px 20px;
}

/* Responsive */
@media (max-width: 720px) {
    .acn-redw-v2 .redw-counters { grid-template-columns: 1fr 1fr; }
    .acn-redw-v2 .redw-filters { grid-template-columns: 1fr; }
    .acn-redw-v2 .redw-individual-form .redw-row { grid-template-columns: 1fr; }
    .acn-redw-v2 .redw-map { height: 380px; }
    .acn-redw-v2 .redw-featured-card { padding: 18px 18px 16px; }
    .acn-redw-v2 .redw-featured-title { font-size: 19px; }
    .acn-redw-v2 .redw-featured-card--with-image {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .acn-redw-v2 .redw-featured-image { min-height: 180px; }
    .acn-redw-v2 .redw-featured-image img { aspect-ratio: 16 / 9; }
    .acn-redw-v2 .redw-featured-card--with-image .redw-featured-body {
        padding: 18px 18px 16px;
    }
}

/* Panel definition on tinted host sections.
   When the shortcode sits inside an Elementor section with a neutral
   background (e.g. Surface #F5F5F5), the soft cream #faf7f5 of the
   internal cards was visually identical to the host. These overrides:
   1) push card backgrounds to pure white for clear separation,
   2) strengthen shadows so each surface owns its footprint,
   3) keep the table header with its own tint so it still reads as a
      header against the now-white cells. */

.acn-redw-v2 .redw-counter,
.acn-redw-v2 .redw-invite-letter-box,
.acn-redw-v2 .redw-invite-cta,
.acn-redw-v2 .redw-typebot-mount {
    background: #ffffff;
}

.acn-redw-v2 .redw-featured-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.acn-redw-v2 .redw-register {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.acn-redw-v2 .redw-invite-cta {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.acn-redw-v2 .redw-counter {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.acn-redw-v2 .redw-invite-letter-box {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Table — clean rounded corners and uniform row rendering.
   `border-collapse: separate` (with spacing 0) prevents cell borders
   from bleeding into the wrap's rounded edge — that's what made the
   corners look "cut" and the last row feel like it disappeared.
   `overflow: hidden` on the wrap clips all four corners cleanly so the
   header tint and the last row both end at the radius.
   `overflow-x: auto` is preserved for mobile (wide table can scroll
   horizontally), and `overflow-y` is hidden so vertical content
   never escapes the rounded frame. */
.acn-redw-v2 .redw-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.acn-redw-v2 .redw-table {
    border-collapse: separate;
    border-spacing: 0;
}
.acn-redw-v2 .redw-table th {
    background: #f5efe9;
    border-bottom: 1px solid var(--redw-line);
}
.acn-redw-v2 .redw-table td {
    border-bottom: 1px solid var(--redw-line);
}
.acn-redw-v2 .redw-table tr:last-child td {
    border-bottom: 0;
}

/* Anchor scroll offset — the ACN Canada site has a sticky header that
   overlaps the top ~80px of the viewport. Without an offset, anchor
   links (e.g. hero "Register your event" → #redw-register, or
   "Find an event near you" → #redw-map) land flush to viewport top
   and the section title gets hidden behind the header.
   Applied to both anchors so future-Claude doesn't have to debug the
   same symptom twice. */
#redw-register,
#redw-map,
.acn-redw-v2 .redw-register {
    scroll-margin-top: 110px;
}

/* Back-to-top floating button. Position is fixed to the viewport
   regardless of where the .acn-redw-v2 wrapper sits in the document.
   Hidden by default (via [hidden] attribute) and faded in via the
   `is-visible` class once the user scrolls past the JS threshold
   (~600px). Lives on the right; site's Donate badge already occupies
   the left side, so the two don't fight for space. */
.acn-redw-v2 .redw-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--redw-red);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.acn-redw-v2 .redw-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.acn-redw-v2 .redw-back-to-top:hover,
.acn-redw-v2 .redw-back-to-top:focus {
    background: #8b1b1b;
    outline: none;
}
.acn-redw-v2 .redw-back-to-top:focus-visible {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25),
                0 0 0 3px rgba(187, 37, 37, 0.35);
}
.acn-redw-v2 .redw-back-to-top svg {
    width: 22px;
    height: 22px;
}
@media (max-width: 720px) {
    .acn-redw-v2 .redw-back-to-top {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   FAQ "balloon cards" — Elementor Accordion decoration (2026-05-26)
   Targets the Elementor Accordion widget when it carries the CSS class
   `redw-faq-card`. Loads with this file (already enqueued whenever the
   page has the [acn_redw_v2] shortcode — which both /red-wednesday/ and
   /fr/mercredi-rouge/ have via the register/map block). No Elementor Pro
   needed, no extra plugin. Rules are NOT scoped under .acn-redw-v2
   because the FAQ section lives outside the shortcode wrapper.
   To revert: remove this block; widget falls back to default look.
   ───────────────────────────────────────────────────────────────────── */

.redw-faq-card .elementor-accordion {
    border: 0 !important;
    background: transparent;
}

.redw-faq-card .elementor-accordion .elementor-accordion-item {
    background: #ffffff;
    border: 0 !important;
    border-left: 3px solid #BB2525;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.redw-faq-card .elementor-accordion .elementor-accordion-item:last-child {
    margin-bottom: 0;
}

.redw-faq-card .elementor-accordion .elementor-accordion-item:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.redw-faq-card .elementor-accordion .elementor-tab-title {
    border: 0 !important;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.redw-faq-card .elementor-accordion .elementor-tab-title.elementor-active {
    background: #fdf3f3;
}

.redw-faq-card .elementor-accordion .elementor-tab-content {
    border: 0 !important;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .redw-faq-card .elementor-accordion .elementor-accordion-item {
        transition: none;
    }
}

/* Hero buttons — altura uniforme mesmo quando o texto quebra em 2 linhas
   (FR). Classe aplicada via Advanced → CSS Classes nos 3 botões do hero
   EN+FR (2026-06-12).

   2026-06-17: cor de fundo + borda também migradas pra cá. Antes vinham da
   config de borda/fundo de CADA widget no Elementor, que resetava ao editar
   a seção do hero/vídeo (a borda já sumiu uma vez). Agora os 3 botões EN+FR
   ficam unificados no vermelho vivo #c8102e + borda branca, hover #a40e25
   (decisão do Felipe: antes os botões 2/3 eram #a40e25 mais escuro).
   !important porque o Elementor injeta background/border por-elemento com a
   mesma especificidade desta regra. */
.redw-hero-btn .elementor-button {
    min-height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #c8102e !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    transition: background-color .18s ease;
}
.redw-hero-btn .elementor-button:hover,
.redw-hero-btn .elementor-button:focus {
    background-color: #a40e25 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Hero buttons — grid de 3 colunas perfeitamente iguais (2026-06-17).
   As colunas .elementor-col-33 são itens flex e estavam INCHANDO conforme
   o tamanho do texto (EN e principalmente FR: "Participer au Mercredi
   Rouge" empurrava a coluna do meio), deixando botões e vãos desiguais
   (ex.: vãos 12px vs 6px, colunas 219/212/204). Aqui forçamos:
   1) largura de coluna igual (33.333%) + min-width:0 pra o conteúdo não
      esticar a coluna;
   2) padding lateral simétrico (6px de cada lado) → vãos iguais de 12px e
      botões de largura idêntica;
   3) botão preenchendo 100% da coluna.
   Tudo via CSS (com :has(), suportado nos navegadores de 2026) pra NÃO
   depender da config de coluna do Elementor, que reseta ao editar a seção.
   Casa com a classe .redw-hero-btn já aplicada nos 6 botões EN+FR. */
.elementor-column:has(.redw-hero-btn) {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    min-width: 0 !important;
}
.elementor-column:has(.redw-hero-btn) > .elementor-element-populated {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.redw-hero-btn .elementor-button {
    width: 100% !important;
}

/* "6 ways to participate" — hybrid link in the individual form + graphic
   on success. */
.redw-ways {
    margin-top: 16px;
    text-align: center;
}
/* Plain text "link" with a little caret (like the accordion header), not a button. */
.redw-ways-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px;
    font: inherit;
    font-size: 15px; /* was 13px — Liane pediu maior (11/jun/2026) */
    font-weight: 600;
    color: var(--redw-red);
    text-decoration: none;
    cursor: pointer;
}
.redw-ways-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor; /* filled red triangle, points down */
    transition: transform .15s;
}
.redw-ways-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.redw-ways-toggle,
.redw-ways-toggle:link,
.redw-ways-toggle:visited,
.redw-ways-toggle:hover,
.redw-ways-toggle:focus { text-decoration: none; }
.redw-ways-toggle:hover { color: #8f0000; }
.redw-ways-toggle:focus-visible {
    outline: 2px solid var(--redw-red);
    outline-offset: 2px;
    border-radius: 3px;
}
.redw-ways-figure {
    margin: 12px 0 0;
}
.redw-ways-figure[hidden] { display: none; }
.redw-ways-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}