/* SFAF Calendar Frontend Styles */

:root {
    /* Approved SFAF brand palette (brand guide v3.0, p.9). */
    --uc-teal: #16BECF;         /* Pantone 7710 UP — fills, borders, accents */
    --uc-dark: #373433;         /* Cool Gray 11 CP */
    --uc-warm: #F04937;         /* Red, Pantone 179 CP */
    --uc-green: #8CC745;        /* Pantone 3561 UP */
    --uc-yellow: #FFD900;       /* Pantone 109 CP */
    --uc-purple: #8D54A2;       /* Pantone 258 CP */
    /* Darkened teal for TEXT only (p.18 permits darker variations). The brand
       teal is 2.26:1 on white and fails as text; this is 4.63:1 and passes.
       Fills, borders and accent bars keep #16BECF. */
    --uc-teal-text: #0E818C;
    --uc-bg: #F7F8FA;
    --uc-border: #E2E5EA;
    --uc-text: #1A1D21;
    --uc-muted: #9CA3AF;
    --uc-secondary: #6B7280;

    /* Web brand typefaces (brand guide v3.0, p.10): Montserrat for headings and
       UI chrome, Merriweather reserved for body prose. The host theme already
       loads these — the plugin only references them, never enqueues them. */
    --uc-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --uc-font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
}

/* ===========================================================================
 * SCOPED RESET (2.10.1)
 *
 * The embed renders inside a stylesheet we do not control and cannot see. On
 * sfaf.org the host theme was supplying underlined links, a yellow table
 * header, no cell borders and its own font sizing, all of which reached our
 * markup because we had never said otherwise: an unstyled element inherits the
 * host, and "we didn't set it" is not the same as "it is unset".
 *
 * So everything the month grid depends on is now declared rather than assumed.
 *
 * ON SPECIFICITY, NOT !important. Each rule is scoped to one of our roots
 * (.uc-calendar, .uc-sidebar, .uc-upcoming-widget), which puts it at (0,2,x)
 * against a theme's typical (0,1,x) element or single-class rule. That is
 * enough to win without an escalation war, and it leaves a host free to
 * deliberately override us if they ever need to. The one exception is [hidden]
 * below, and it is explained there.
 * ======================================================================== */

.uc-calendar, .uc-sidebar, .uc-upcoming-widget {
    font-family: var(--uc-font-heading);
    font-size: 15px;
    line-height: 1.5;
    color: var(--uc-text);
    text-align: left;
    box-sizing: border-box;
}
.uc-calendar *, .uc-sidebar *, .uc-upcoming-widget * { box-sizing: border-box; }

/* Links. The host's underline-everything rule was the most visible bleed. */
.uc-calendar a, .uc-sidebar a, .uc-upcoming-widget a {
    text-decoration: none;
    box-shadow: none;
    border-bottom: 0;
}
.uc-calendar a:hover, .uc-sidebar a:hover, .uc-upcoming-widget a:hover { text-decoration: none; }

/* Headings inside our blocks are ours, not the theme's article headings. */
.uc-calendar h2, .uc-calendar h3, .uc-calendar h4,
.uc-sidebar h2, .uc-sidebar h3, .uc-sidebar h4 {
    margin: 0;
    padding: 0;
    font-family: var(--uc-font-heading);
    color: var(--uc-text);
    text-transform: none;
    letter-spacing: normal;
    border: 0;
}

/* Lists. Themes routinely add bullets, margins and indents to every ul. */
.uc-calendar ul, .uc-calendar ol, .uc-sidebar ul, .uc-upcoming-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.uc-calendar li, .uc-sidebar li, .uc-upcoming-widget li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
}
.uc-calendar li::before, .uc-calendar li::marker { content: none; }

/* Paragraphs. */
.uc-calendar p, .uc-sidebar p { margin: 0; }

/* Tables. The theme owned all of this: header background, cell padding,
   striping, and the border model itself. */
.uc-calendar table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    background: none;
    font-size: inherit;
}
.uc-calendar caption { caption-side: top; text-align: left; }
.uc-calendar th, .uc-calendar td {
    background: none;
    text-align: left;
    vertical-align: top;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.uc-calendar tr:nth-child(even) th, .uc-calendar tr:nth-child(even) td,
.uc-calendar tr:nth-child(odd) th, .uc-calendar tr:nth-child(odd) td { background: none; }

/* Buttons. A theme button rule would otherwise repaint every control we ship. */
.uc-calendar button, .uc-sidebar button, .uc-upcoming-widget button {
    font-family: inherit;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    text-shadow: none;
    width: auto;
    min-height: 0;
    border-radius: 0;
    margin: 0;
}

/* Images inside our blocks never exceed their box, whatever the theme says. */
.uc-calendar img, .uc-sidebar img, .uc-upcoming-widget img { max-width: 100%; height: auto; border: 0; }

/* THE ONE !important, and the reason for it.
 *
 * The view panels are shown and hidden with the plain HTML `hidden` attribute.
 * That works through a user-agent rule of `[hidden] { display: none }`, which
 * ANY author rule setting display on a matching element beats: a theme with
 * `.uc-calendar div { display: block }`, or even `div { display: flex }`, would
 * silently reveal both panels at once and the toggle would appear to do
 * nothing. There is no specificity available that reliably outranks an unknown
 * selector on the same element, so this restores the behaviour the attribute is
 * supposed to have. It is enforcing the HTML spec, not winning an argument. */
.uc-calendar [hidden], .uc-sidebar [hidden] { display: none !important; }


/* Calendar container */
.uc-calendar { max-width: 900px; margin: 0 auto; font-family: var(--uc-font-heading); }

/* ---------------------------------------------------------------------------
   Brand typography (p.10). Set explicitly rather than by inheritance: an
   inherited font-family loses to any direct theme rule on h1/h3/p, and form
   controls don't inherit font-family at all.
   --------------------------------------------------------------------------- */
.uc-card-title, .uc-compact-title, .uc-upcoming-title,
.uc-single-title, .uc-faq-heading, .uc-faq-q, .uc-series-heading { font-family: var(--uc-font-heading); }
.uc-calendar button, .uc-calendar input, .uc-calendar select, .uc-calendar textarea,
.uc-upcoming-widget button, .uc-upcoming-widget input, .uc-upcoming-widget select { font-family: var(--uc-font-heading); }
.uc-card-excerpt, .uc-single-body, .uc-single-body p { font-family: var(--uc-font-body); }

/* Icon set — inherits currentColor, sits on the text baseline. */
.sfaf-icon { display: inline-block; vertical-align: -0.135em; flex-shrink: 0; }

/* Filters */
.uc-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--uc-border); margin-bottom: 16px; }
.uc-search-wrap { flex-shrink: 0; }
.uc-search { padding: 8px 14px; border: 1px solid var(--uc-border); border-radius: 8px; font-size: 14px; width: 200px; outline: none; transition: border-color 0.2s; }
.uc-search:focus { border-color: var(--uc-teal); box-shadow: 0 0 0 3px rgba(22,190,207,0.1); }

.uc-filter-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.uc-filter-btn { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--uc-border); background: #fff; color: var(--uc-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.uc-filter-btn:hover { border-color: var(--uc-teal); color: var(--uc-teal-text); }
.uc-filter-btn.active { border-color: var(--uc-teal); background: rgba(22,190,207,0.08); color: var(--uc-teal-text); }

.uc-organizer-select { padding: 8px 12px; border: 1px solid var(--uc-border); border-radius: 8px; font-size: 13px; color: var(--uc-secondary); background: #fff; }

/* Event count */
.uc-event-count { font-size: 14px; color: var(--uc-muted); margin-bottom: 12px; }
.uc-count-number { font-weight: 700; }

/* Event list */
.uc-event-list { display: flex; flex-direction: column; gap: 14px; }

/* Event card */
/* ===========================================================================
 * LIST CARD (3.1.0 redesign)
 *
 * SCOPE. These rules are the LIST display mode and nothing else. The month
 * grid tiles, the sidebar rows and the mobile day-detail list have their own
 * selectors further down and are deliberately untouched.
 *
 * EVERY RULE IS SCOPED TO .uc-calendar, AND THAT IS NOT TIDINESS. The same
 * markup renders inside sfaf.org's stylesheet through the embed, where an
 * unstyled property does not mean "unset", it means "whatever the host theme
 * says". So this card states its colours, sizes, link decoration, image
 * sizing and button appearance rather than inheriting any of them. Scoping to
 * .uc-calendar puts each rule at (0,2,x) or better against a theme's typical
 * (0,1,x), which wins on specificity. There is no !important anywhere in
 * here, so a host that genuinely needs to override us still can.
 *
 * THE COLOUR CUSTOM PROPERTIES come from the card's own style attribute:
 * --uc-cat, --uc-cat-tint, --uc-cat-media and --uc-cat-ink, resolved per
 * category in sfaf_category_shades(). The fallbacks below are teal's, so a
 * card that somehow arrives without them is still legible rather than
 * transparent-on-transparent.
 *
 * NO IMAGE SCRIM. The old banner sat a date chip over the photo and needed a
 * gradient underneath it to stay readable. Nothing sits on the image now, so
 * there is nothing to rescue: the gradient is gone rather than reduced.
 * ======================================================================== */
.uc-calendar .uc-event-card { display: block; padding: 18px; background: #fff; border-radius: 14px; border: 1px solid var(--uc-border); position: relative; overflow: hidden; transition: box-shadow 0.18s ease, border-color 0.18s ease; }

/* HOVER MOVES NOTHING. The old card lifted itself 1px, which is a paint
   change on one card but a moving target for the pointer that is on it. The
   only hover effects on this card are colour and shadow; the single thing
   that changes size is the arrow inside the button, and it grows into the
   footer's own free space. No card ever changes row height, and no card ever
   shifts its neighbours. */
.uc-calendar .uc-event-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.07); border-color: #D5D9E0; transform: none; }

/* --- Header row: who and when ------------------------------------------- */
.uc-calendar .uc-lc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.uc-calendar .uc-lc-ident { min-width: 0; }

/* The chip is a coloured pill with words in it, so it has to be readable as
   text: category tint behind, the darkest stop of that same colour family in
   front. Never black, never grey: the colour IS the information. Measured
   pairs and their ratios are in sfaf_category_shades(). */
.uc-calendar .uc-lc-chip { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 99px; background: var(--uc-cat-tint, #E3F7F9); color: var(--uc-cat-ink, #0C666F); font-family: var(--uc-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; }
.uc-calendar .uc-lc-byline { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--uc-secondary); }

/* --uc-secondary, not --uc-muted: muted is #9CA3AF, which is 2.54:1 on white
   and fails as text at any size. Secondary is 4.83:1. */
.uc-calendar .uc-lc-date { flex-shrink: 0; text-align: right; }
.uc-calendar .uc-lc-dow { display: block; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase; color: var(--uc-secondary); }
.uc-calendar .uc-lc-md { display: block; font-size: 26px; font-weight: 500; line-height: 1.08; color: var(--uc-text); white-space: nowrap; }

/* --- Media: inset and rounded, not bled to the card edge -----------------
 *
 * 16:9, NOT A FIXED HEIGHT. The box used to be 150px tall at whatever width
 * the column happened to be, so its shape changed with the layout: nearer 3:1
 * in a wide single column, nearer 4:3 in a narrow three-up grid. With
 * object-fit: cover that meant the same photograph was cropped differently in
 * different places, and a portrait-ish photo in a wide card lost everything
 * above and below a thin band, which is how a group shot ends up cropped
 * through the faces.
 *
 * A ratio fixes the shape and lets the height follow the width, so the crop is
 * the same everywhere and predictable enough to supply a picture for.
 * Landscape 16:9 is the shape the images are, the shape the event page's own
 * image already uses (.uc-single-image below), and the shape Open Graph share
 * previews want, so one upload at 1200x675 is correct in all three.
 *
 * cover stays. A ratio decides the box; cover decides that the box is filled
 * rather than letterboxed, and both are needed.
 */
.uc-calendar .uc-lc-media { display: grid; margin-top: 14px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--uc-bg); }

/* GRID, FOR ONE ITEM, ON PURPOSE. A percentage height resolves against a
   parent's computed height, and a box sized by aspect-ratio still computes
   `height: auto`, so the link's `height: 100%` alone is not reliably a
   height at all. As the single item of a grid it stretches to fill the box
   whatever the ratio works out to, which gives the image underneath it a real
   height to cover. */
.uc-calendar .uc-lc-media > a { display: block; width: 100%; height: 100%; min-width: 0; }
.uc-calendar .uc-event-card .uc-lc-img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; border: 0; border-radius: 0; }

/* THE PLACEHOLDER IS A DELIBERATE TILE, NOT A FAILED IMAGE. Roughly half of
   imported GoFundMe Pro events will never have a picture, because their API
   does not expose one, so this is the normal case and has to look like it was
   meant. Category tint, the category's icon, the category's name. */
.uc-calendar .uc-lc-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; padding: 12px; text-align: center; background: var(--uc-cat-media, #D5F3F6); color: var(--uc-cat-ink, #0C666F); }
.uc-calendar .uc-lc-ph-icon { display: block; line-height: 0; }
.uc-calendar .uc-lc-ph-name { display: block; font-family: var(--uc-font-heading); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; }

/* --- Title and summary --------------------------------------------------- */
.uc-calendar .uc-event-card .uc-card-title { margin: 14px 0 0; font-family: var(--uc-font-heading); font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--uc-text); }
.uc-calendar .uc-event-card .uc-card-title a { color: inherit; text-decoration: none; }
.uc-calendar .uc-event-card .uc-card-title a:hover { color: var(--uc-teal-text); text-decoration: underline; }

/* One line, clamped. A summary that wraps to three lines on one card and one
   on the next turns a scannable column into a ragged one. */
.uc-calendar .uc-event-card .uc-card-excerpt { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 5px 0 0; font-family: var(--uc-font-body); font-size: 13px; line-height: 1.5; color: var(--uc-secondary); }

/* --- Meta rows: icon then text, stacked ---------------------------------- */
.uc-calendar .uc-event-card .uc-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--uc-secondary); }
.uc-calendar .uc-event-card .uc-meta-item { display: flex; align-items: flex-start; gap: 7px; white-space: normal; font-weight: 400; color: var(--uc-secondary); }
.uc-calendar .uc-event-card .uc-meta-item > .sfaf-icon { margin-top: 2px; color: var(--uc-cat-ink, var(--uc-teal-text)); }

/* The series row names the series, so the link makes sense read out of
   context. "see all dates" is the promise; the name is what it is about. */
.uc-calendar .uc-event-card .uc-lc-series { color: var(--uc-teal-text); text-decoration: none; }
.uc-calendar .uc-event-card .uc-lc-series:hover { text-decoration: underline; }
.uc-calendar .uc-event-card .uc-lc-series-name { font-weight: 600; }
.uc-calendar .uc-event-card .uc-lc-series-all { color: var(--uc-secondary); font-weight: 400; }
.uc-calendar .uc-event-card .uc-lc-series-all::before { content: ", "; }

/* --- Fundraising progress ------------------------------------------------ */
.uc-calendar .uc-event-card .uc-lc-fund, .uc-single .uc-lc-fund { margin-top: 12px; }
.uc-calendar .uc-event-card .uc-lc-fund-bar, .uc-single .uc-lc-fund-bar { display: block; height: 4px; border-radius: 99px; background: #E5E7EB; overflow: hidden; }
.uc-calendar .uc-event-card .uc-lc-fund-fill, .uc-single .uc-lc-fund-fill { display: block; height: 100%; border-radius: 99px; background: var(--uc-green); }
.uc-calendar .uc-event-card .uc-lc-fund-text, .uc-single .uc-lc-fund-text { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--uc-secondary); }

/* --- Footer: supporting text left, one action right ---------------------- */
.uc-calendar .uc-event-card .uc-lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--uc-border); }

/* Truncates rather than wraps, so the button growing on hover can never push
   this onto a second line and change the card's height. */
.uc-calendar .uc-event-card .uc-lc-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.4; color: var(--uc-secondary); }

/* ===========================================================================
 * THE BUTTON FAMILY, AND IT IS ONE FAMILY EVERYWHERE.
 *
 * .uc-actionbtn is every primary action this plugin renders: the card's View
 * event and Donate, the event page's RSVP, Donate and Sign Up to Volunteer,
 * and the map's Show map. Before 3.2.0 those were five different buttons with
 * five different shapes, and a visitor moving from the list to an event page
 * met a new button language on arrival.
 *
 * SCOPED TO THREE ROOTS, NOT ONE. The card lives in .uc-calendar and the
 * event page in .uc-single, so both are named here. .uc-sidebar is included
 * for the same reason it always is: the embed renders inside a stylesheet we
 * do not control, so anything we do not state is whatever the host says.
 *
 * TWO WEIGHTS, MEASURED.
 *
 *   secondary  Navigation. 1px --uc-teal-text #0E818C border and label on
 *              white: 4.63:1 for the text, and 4.63:1 for the boundary, which
 *              is what WCAG 1.4.11 asks 3:1 of. Brand teal #16BECF was tried
 *              for the border and measures 2.26:1 against a white card, so it
 *              would have failed the check the outline exists to pass. The
 *              darkened teal is a variation the brand guide permits (p.18).
 *              On hover the brand teal arrives as a fill with the label in
 *              brand Dark Gray #373433 at 5.47:1.
 *
 *   primary    The action with a consequence: Donate, RSVP, Sign Up. Solid
 *              #0E818C with a white label, 4.63:1, which is why the fill is
 *              the darkened teal and not brand teal: white on #16BECF is
 *              2.26:1 and fails AA at 13px outright. Hover deepens to
 *              #0B666F, 6.68:1.
 *
 * They do not compete. A card with a donation link shows View event as the
 * outline and Donate as the fill, so the eye is offered one answer and one
 * alternative rather than two equals.
 * ======================================================================== */
.uc-calendar .uc-actionbtn,
.uc-single .uc-actionbtn,
.uc-sidebar .uc-actionbtn {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 8px 16px;
    -webkit-appearance: none; appearance: none;
    border: 1px solid var(--uc-teal-text); border-radius: 99px;
    background: #fff; color: var(--uc-teal-text);
    font-family: var(--uc-font-heading); font-size: 13px; font-weight: 600; line-height: 1.2;
    text-align: center; text-transform: none; letter-spacing: normal; text-decoration: none;
    white-space: nowrap; box-shadow: none; cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.uc-calendar .uc-actionbtn-secondary:hover, .uc-calendar .uc-actionbtn-secondary:focus-visible,
.uc-single .uc-actionbtn-secondary:hover, .uc-single .uc-actionbtn-secondary:focus-visible,
.uc-sidebar .uc-actionbtn-secondary:hover, .uc-sidebar .uc-actionbtn-secondary:focus-visible {
    background: var(--uc-teal); color: var(--uc-dark); border-color: var(--uc-teal-text);
}

.uc-calendar .uc-actionbtn-primary,
.uc-single .uc-actionbtn-primary,
.uc-sidebar .uc-actionbtn-primary {
    background: var(--uc-teal-text); color: #fff; border-color: var(--uc-teal-text);
}
.uc-calendar .uc-actionbtn-primary:hover, .uc-calendar .uc-actionbtn-primary:focus-visible,
.uc-single .uc-actionbtn-primary:hover, .uc-single .uc-actionbtn-primary:focus-visible,
.uc-sidebar .uc-actionbtn-primary:hover, .uc-sidebar .uc-actionbtn-primary:focus-visible {
    background: #0B666F; color: #fff; border-color: #0B666F;
}

/* THE ARROW SLIDES IN, AND THE BUTTON GROWS LEFTWARD.
 *
 * It starts at zero width and zero opacity, nudged 6px left, and animates to
 * its full 15px on hover and on keyboard focus. On a card the button is the
 * right-hand item in a space-between footer, so the extra width is taken from
 * the footer's own slack: the right edge never moves, the row never changes
 * height, and no neighbouring card is touched.
 *
 * It is aria-hidden and purely decorative. There is no hover on a touch
 * screen, so the label (View event, Donate, RSVP, Sign Up to Volunteer, Show
 * map) carries the meaning by itself and the arrow only ever adds emphasis.
 * Pure CSS, no JS. */
.uc-calendar .uc-actionbtn-arrow,
.uc-single .uc-actionbtn-arrow,
.uc-sidebar .uc-actionbtn-arrow {
    display: inline-flex; align-items: center;
    max-width: 0; margin-left: 0; opacity: 0; overflow: hidden;
    transform: translateX(-6px);
    transition: max-width 0.18s ease, opacity 0.18s ease, transform 0.18s ease, margin-left 0.18s ease;
}
.uc-calendar .uc-actionbtn:hover .uc-actionbtn-arrow, .uc-calendar .uc-actionbtn:focus-visible .uc-actionbtn-arrow,
.uc-single .uc-actionbtn:hover .uc-actionbtn-arrow, .uc-single .uc-actionbtn:focus-visible .uc-actionbtn-arrow,
.uc-sidebar .uc-actionbtn:hover .uc-actionbtn-arrow, .uc-sidebar .uc-actionbtn:focus-visible .uc-actionbtn-arrow {
    max-width: 18px; margin-left: 6px; opacity: 1; transform: translateX(0);
}

.uc-calendar .uc-actionbtn:focus-visible,
.uc-single .uc-actionbtn:focus-visible,
.uc-sidebar .uc-actionbtn:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: 2px; border-radius: 99px; }

/* The card footer's two buttons. View event first in the source order, so it
   is what a keyboard reaches first; Donate carries the weight visually. */
.uc-calendar .uc-event-card .uc-lc-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

/* FOCUS IS VISIBLE, NOT JUST HOVER. Every interactive thing on the card takes
   the same ring, so a keyboard user can see where they are on the image link,
   the title, the series link and the buttons alike. */
.uc-calendar .uc-event-card a:focus-visible,
.uc-calendar .uc-event-card button:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: 2px; border-radius: 4px; }

/* Badges survive for the single event template, which still uses them. */
.uc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--badge-color, var(--uc-teal)) 12%, transparent); color: var(--badge-color, var(--uc-teal)); }
.uc-badge-recurrence { background: #f3f4f6; color: var(--uc-secondary); font-size: 11px; --badge-color: var(--uc-secondary); }

.uc-card-title { font-size: 18px; font-weight: 700; color: var(--uc-text); margin: 0 0 6px; line-height: 1.3; }
.uc-card-title a { color: inherit; text-decoration: none; }
.uc-card-title a:hover { color: var(--uc-teal-text); }

.uc-card-excerpt { font-size: 14px; color: var(--uc-secondary); margin: 0 0 10px; line-height: 1.5; }

.uc-card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--uc-secondary); flex-wrap: wrap; align-items: center; }
.uc-meta-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }

/* RSVP section */
.uc-card-rsvp { margin-top: 14px; padding: 12px 14px; background: var(--uc-bg); border-radius: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.uc-capacity-bar { flex: 1; min-width: 120px; height: 6px; background: #E5E7EB; border-radius: 99px; overflow: hidden; }
.uc-capacity-fill { height: 100%; background: linear-gradient(90deg, var(--uc-green), var(--uc-teal)); border-radius: 99px; transition: width 0.5s ease; }

.uc-capacity-text { font-size: 12px; color: var(--uc-muted); white-space: nowrap; }


/* RSVP Modal */
.uc-rsvp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.uc-rsvp-modal-overlay.active { opacity: 1; pointer-events: all; }

.uc-rsvp-modal { background: #fff; border-radius: 16px; padding: 32px; width: 420px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.uc-rsvp-modal h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--uc-text); }
.uc-rsvp-modal .uc-modal-subtitle { font-size: 14px; color: var(--uc-muted); margin: 0 0 20px; }

.uc-rsvp-form { display: flex; flex-direction: column; gap: 14px; }
.uc-rsvp-form label { font-size: 13px; font-weight: 600; color: var(--uc-text); display: block; margin-bottom: 4px; }
.uc-rsvp-form input { width: 100%; padding: 10px 14px; border: 1px solid var(--uc-border); border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; }
.uc-rsvp-form input:focus { border-color: var(--uc-teal); box-shadow: 0 0 0 3px rgba(22,190,207,0.1); }

.uc-rsvp-submit { padding: 12px 0; border-radius: 10px; border: none; background: var(--uc-teal); color: var(--uc-dark); font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; transition: background 0.2s; }
.uc-rsvp-submit:hover { background: #13a8b8; }
.uc-rsvp-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.uc-rsvp-cancel { padding: 10px 0; border-radius: 8px; border: 1px solid var(--uc-border); background: #fff; color: var(--uc-secondary); font-size: 13px; cursor: pointer; width: 100%; }

.uc-rsvp-success { text-align: center; padding: 20px 0; }
.uc-rsvp-success .uc-check { font-size: 48px; margin-bottom: 12px; }
.uc-rsvp-success p { font-size: 16px; color: var(--uc-text); font-weight: 600; }
.uc-rsvp-error { color: var(--uc-warm); font-size: 13px; text-align: center; }

/* The subscribe bar (.uc-subscribe / .uc-subscribe-btn) was removed in 2.11.0
   along with its markup: calendar feed subscription is out of scope, and the
   three buttons pointed at a query string nothing handled. Per-event "Add to
   Calendar" is a different feature and is still here. */

/* RSVP form: consent and disclaimer */
.uc-rsvp-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--uc-secondary); }
.uc-rsvp-optin { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 2px; font-size: 13px; line-height: 1.45; color: var(--uc-text); cursor: pointer; }
.uc-rsvp-optin input { margin: 2px 0 0; flex: 0 0 auto; }

/* No events */
.uc-no-events { padding: 40px; text-align: center; color: var(--uc-muted); }

/* Upcoming Events Widget */
.uc-upcoming-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.uc-upcoming-title { font-size: 18px; font-weight: 700; color: var(--uc-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--uc-teal); }

.uc-upcoming-list { display: flex; flex-direction: column; gap: 8px; }

.uc-compact-card { display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 10px; border: 1px solid var(--uc-border); text-decoration: none; position: relative; overflow: hidden; transition: box-shadow 0.2s; }
.uc-compact-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.uc-compact-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }

.uc-compact-date { min-width: 44px; text-align: center; flex-shrink: 0; padding-left: 6px; }
.uc-compact-month { display: block; font-size: 11px; font-weight: 700; color: var(--uc-teal-text); text-transform: uppercase; }
.uc-compact-day { display: block; font-size: 22px; font-weight: 800; color: var(--uc-text); line-height: 1.1; }

.uc-compact-info { min-width: 0; }
.uc-compact-title { font-size: 14px; font-weight: 600; color: var(--uc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-compact-meta { font-size: 12px; color: var(--uc-muted); margin-top: 2px; }

/* Social share */
.uc-share { display: flex; align-items: center; gap: 6px; }
.uc-share-label { font-size: 12px; color: var(--uc-muted); font-weight: 600; }
.uc-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--uc-border); background: #fff; color: var(--uc-secondary); text-decoration: none; font-size: 13px; font-weight: 700; transition: all 0.2s; }
.uc-share-btn:hover { border-color: var(--uc-teal); color: var(--uc-teal-text); transform: translateY(-1px); }
.uc-share-icon { line-height: 1; }
.uc-share-facebook:hover { border-color: #1877F2; color: #1877F2; }
.uc-share-linkedin:hover { border-color: #0A66C2; color: #0A66C2; }
.uc-share-x:hover { border-color: #000; color: #000; }

/* Donate block. The figures come from the same renderer the card uses, so
   there is one set of .uc-lc-fund rules and this block only spaces them. The
   button is .uc-actionbtn like every other primary action. */
.uc-donate-block { margin-top: 14px; padding: 16px; background: var(--uc-bg); border: 1px solid var(--uc-border); border-radius: 12px; }
.uc-single .uc-donate-block .uc-lc-fund { margin: 0 0 12px; }

/* Add to Calendar dropdown */
.uc-addcal { position: relative; }
.uc-addcal-toggle { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--uc-border); background: #fff; color: var(--uc-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.uc-addcal-toggle:hover { border-color: var(--uc-teal); color: var(--uc-teal-text); }
.uc-addcal-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 190px; background: #fff; border: 1px solid var(--uc-border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); padding: 6px; display: none; }
.uc-addcal.open .uc-addcal-menu { display: block; }
.uc-addcal-menu a { display: block; padding: 9px 12px; font-size: 13px; color: var(--uc-text); text-decoration: none; border-radius: 6px; }
.uc-addcal-menu a:hover { background: var(--uc-bg); color: var(--uc-teal-text); }

/* Reminder button */
.uc-reminder-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--uc-border); background: #fff; color: var(--uc-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.uc-reminder-btn:hover { border-color: var(--uc-teal); color: var(--uc-teal-text); }

/* Card style variations (set via Branding). The minimal variant no longer
   nudges its left padding: it was aligning content with the 4px category
   accent bar, and that bar went with the 3.1.0 card. */
.sfaf-card-minimal .uc-event-card { border-color: transparent; box-shadow: none; background: transparent; }
.sfaf-card-minimal .uc-event-card:hover { box-shadow: none; transform: none; }
.sfaf-card-shadow .uc-event-card { border-color: transparent; box-shadow: 0 6px 24px rgba(0,0,0,0.08); }

/* Single event template */
.uc-single { --event-color: var(--uc-teal); padding: 32px 16px 60px; font-family: var(--uc-font-heading); }
.uc-single-inner { max-width: 980px; margin: 0 auto; }
.uc-single-brand { margin-bottom: 16px; }
.uc-single-logo { max-height: 48px; width: auto; }
.uc-single-back { display: inline-block; margin-bottom: 16px; font-size: 13px; color: var(--uc-muted); text-decoration: none; }
.uc-single-back:hover { color: var(--uc-teal-text); }
.uc-single-header { border-left: 4px solid var(--event-color); padding-left: 18px; margin-bottom: 28px; }
.uc-single-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.uc-single-title { font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--uc-text); margin: 0 0 8px; }
.uc-single-organizer { font-size: 15px; color: var(--uc-secondary); margin: 0; }
.uc-single-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.uc-single-image img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 20px; }
.uc-single-body { font-size: 16px; line-height: 1.7; color: var(--uc-text); }
.uc-single-body p { margin: 0 0 1em; }
.uc-single-sidebar { position: sticky; top: 24px; }
.uc-single-card { background: #fff; border: 1px solid var(--uc-border); border-radius: 14px; padding: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.uc-single-facts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.uc-single-facts li { display: flex; gap: 10px; font-size: 14px; color: var(--uc-text); align-items: flex-start; }
.uc-fact-icon { flex-shrink: 0; }
.uc-single-card .uc-card-rsvp { margin-top: 0; }
.uc-single-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.uc-single-actions .uc-addcal, .uc-single-actions .uc-addcal-toggle, .uc-single-actions .uc-reminder-btn { width: 100%; }
.uc-single-actions .uc-addcal-toggle, .uc-single-actions .uc-reminder-btn { text-align: center; }
.uc-single-card .uc-share { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--uc-border); }
.uc-single-card .uc-donate-block { margin-top: 16px; }

/* Responsive */
@media (max-width: 600px) {
    .uc-filters { flex-direction: column; align-items: stretch; }
    .uc-search { width: 100%; }
    .uc-calendar .uc-lc-md { font-size: 22px; }
    /* No media override here any more. The box is a ratio now, so it shrinks
       with the card on its own; a height here would only put the old
       shape-changes-with-width problem back at one breakpoint. */
    .uc-single-grid { grid-template-columns: 1fr; }
    .uc-single-sidebar { position: static; }
    .uc-single-title { font-size: 26px; }
}

/* Series link + list. .uc-series-link is the single event template's badge;
   the list card has its own row, styled with the card above. */
.uc-series-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--uc-teal-text); background: rgba(22,190,207,0.08); padding: 3px 10px; border-radius: 99px; text-decoration: none; }
.uc-series-link:hover { background: rgba(22,190,207,0.16); }
.uc-single-series-link { margin: 8px 0 0; }

.uc-series-box { margin-top: 28px; padding: 20px; background: var(--uc-bg); border: 1px solid var(--uc-border); border-radius: 14px; }
.uc-series-heading { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.uc-series-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uc-series-list li a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--uc-border); border-radius: 10px; text-decoration: none; color: var(--uc-text); transition: border-color 0.2s; }
.uc-series-list li a:hover { border-color: var(--uc-teal); }
.uc-series-date { font-weight: 700; color: var(--uc-teal-text); min-width: 52px; }
.uc-series-title { flex: 1; font-weight: 600; }
.uc-series-time { font-size: 13px; color: var(--uc-muted); }

/* Galaxy Digital volunteer needs */
.uc-badge-volunteer { background: rgba(123,97,255,0.12); color: var(--uc-purple); --badge-color: var(--uc-purple); }
.uc-galaxy-block { margin-top: 14px; padding: 14px 16px; background: var(--uc-bg); border: 1px solid var(--uc-border); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.uc-galaxy-spots { font-size: 13px; font-weight: 600; color: var(--uc-text); display: inline-flex; align-items: center; gap: 6px; }

/* Compact / single-event thumbnails. The list card's own image is the inset
   .uc-lc-media box at the top of this file and takes no rules from here. */
.uc-compact-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--uc-bg); }
.uc-compact-thumb img, .uc-compact-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-single-image { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.uc-single-image img, .uc-single-image svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ accordion */
.uc-faq { margin-top: 28px; }
.uc-faq-heading { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--uc-text); }
.uc-faq-item { border: 1px solid var(--uc-border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.uc-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--uc-text); text-align: left; }
.uc-faq-q:hover { color: var(--uc-teal-text); }
.uc-faq-toggle { font-size: 22px; line-height: 1; color: var(--uc-teal-text); flex-shrink: 0; }
.uc-faq-a { display: none; padding: 0 16px 16px; font-size: 14px; color: var(--uc-secondary); line-height: 1.6; }
.uc-faq-item.open .uc-faq-a { display: block; }
.uc-faq-a p { margin: 0 0 0.8em; }

/* Pagination */
.uc-pagination { margin: 24px 0 8px; display: flex; justify-content: center; align-items: center; }
.uc-load-more { padding: 11px 28px; border-radius: 8px; border: none; background: var(--uc-teal); color: var(--uc-dark); font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.uc-load-more:hover { background: #13a8b8; }
.uc-load-more:disabled { opacity: 0.6; cursor: default; }
.uc-pagination-pages { gap: 6px; flex-wrap: wrap; }
.uc-page-numbers { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.uc-page-link, .uc-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--uc-border); border-radius: 8px; background: #fff; color: var(--uc-secondary); font-size: 13px; font-weight: 600; text-decoration: none; }
.uc-page-link:hover, .uc-page-num:hover { border-color: var(--uc-teal); color: var(--uc-teal-text); }
.uc-page-num.current { background: var(--uc-teal); border-color: var(--uc-teal); color: var(--uc-dark); }
.uc-pagination-infinite { flex-direction: column; }
.uc-infinite-sentinel { width: 100%; height: 1px; }
.uc-loading-indicator { font-size: 13px; color: var(--uc-muted); padding: 12px; display: none; }
.uc-pagination-infinite.is-loading .uc-loading-indicator { display: block; }

/* ---------------------------------------------------------------------------
   Embeds

   The same stylesheet is loaded by embed.js on other sites, so everything above
   applies there too. What follows covers the few things that only exist in an
   embed: the block's own wrapper, its loading and failure states, and the
   controls that are links there but buttons here.
   --------------------------------------------------------------------------- */

.sfaf-calendar-embed { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.sfaf-embed-loading { padding: 24px 0; color: var(--uc-secondary); font-size: 14px; }
.sfaf-embed-error { padding: 20px; border: 1px solid var(--uc-border); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--uc-text); }
.sfaf-embed-error p { margin: 0 0 8px; }
.sfaf-embed-error p:last-child { margin-bottom: 0; }
.sfaf-embed-error a { color: var(--uc-teal-text); font-weight: 600; }

/* RSVP and reminders are links to the event page in an embed (they can't post
   cross-origin) — give the anchors the button shape their classes imply. */
.uc-embed-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }

/* Numbered pagination renders as buttons in an embed rather than links. */
.uc-pagination-pages button.uc-page-link,
.uc-pagination-pages button.uc-page-num { cursor: pointer; font-family: inherit; }

/* ===========================================================================
 * VIEW TOGGLE, MONTH GRID AND SIDEBAR (2.10.0)
 *
 * Shared by the shortcode on this site and the cross-domain embed, because
 * both render from SFAF_Shortcodes. One stylesheet, one set of rules, no
 * chance of the two drifting apart visually.
 * ======================================================================== */

.uc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- View bar and toggle ---------- */
.uc-view-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.uc-view-bar .uc-event-count { margin: 0; }

/* Icons only, right-aligned. The label lives on aria-label/title. */
.uc-calendar .uc-view-toggle { display: inline-flex; margin-left: auto; border: 1px solid var(--uc-border); border-radius: 8px; overflow: hidden; background: #fff; }
.uc-calendar .uc-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px;
    padding: 0; border: 0; background: #fff; color: var(--uc-secondary); cursor: pointer; }
.uc-calendar .uc-view-btn + .uc-view-btn { border-left: 1px solid var(--uc-border); }
.uc-calendar .uc-view-btn:hover { background: var(--uc-bg); color: var(--uc-teal-text); }
/* Pressed = filled AND inset, so it survives greyscale and forced colours. */
.uc-calendar .uc-view-btn.active { background: var(--uc-dark); color: var(--uc-yellow); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.uc-calendar .uc-view-btn:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: -3px; }

/* ---------- Month header ---------- */
.uc-month { position: relative; }
.uc-month-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.uc-month-heading { min-width: 0; }
.uc-calendar .uc-month-label { font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--uc-text); }
.uc-calendar .uc-month-range { margin: 2px 0 0; font-size: 12px; color: var(--uc-secondary); }
.uc-month-count { position: relative; margin-left: 10px; padding-left: 11px; }
.uc-month-count::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; margin-top: -1px;
    border-radius: 50%; background: var(--uc-muted); }

/* Previous / Today / Next as one segmented control. */
.uc-month-nav-group { display: inline-flex; margin-left: auto; border: 1px solid var(--uc-border); border-radius: 8px; overflow: hidden; background: #fff; }
.uc-calendar .uc-month-nav { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 34px;
    padding: 0 10px; border: 0; background: #fff; font-size: 13px; font-weight: 700; color: var(--uc-secondary); cursor: pointer; }
.uc-calendar .uc-month-nav + .uc-month-nav { border-left: 1px solid var(--uc-border); }
.uc-calendar .uc-month-nav:hover { background: var(--uc-bg); color: var(--uc-teal-text); }
.uc-calendar .uc-month-nav:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: -3px; }
.uc-calendar .uc-month-prev span, .uc-calendar .uc-month-next span { font-size: 19px; line-height: 1; }

/* ---------- The grid ----------
 *
 * A dense, fully bordered month. border-collapse plus a border on every cell
 * gives real gridlines on all four sides rather than row rules only, and the
 * outer radius is clipped by the wrapper because a collapsed table cannot round
 * its own corners.
 */
.uc-month-wrap { border: 1px solid var(--uc-border); border-radius: 10px; overflow: hidden; background: #fff; }
.uc-calendar .uc-month-grid { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.uc-calendar .uc-month-grid th { padding: 7px 6px; background: var(--uc-bg); border: 1px solid var(--uc-border);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--uc-secondary); text-align: center; }
.uc-calendar .uc-month-grid th abbr { text-decoration: none; border: 0; }
.uc-day-name-min { display: none; }

/* VARIABLE ROW HEIGHT. A minimum, never a maximum: a cell with three events
   makes its row taller and its whole week grows with it. Nothing truncates. */
.uc-calendar .uc-month-grid td { vertical-align: top; padding: 4px; border: 1px solid var(--uc-border);
    height: 92px; width: 14.285%; background: #fff; }
.uc-calendar .uc-month-grid td:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: -2px; }

/* Date number, top-left. Today is a filled pill, which is a shape change as
   well as a colour, and the cell also announces "Today" to a screen reader. */
.uc-day-num { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px;
    padding: 0 5px; margin-bottom: 3px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--uc-text); }
.uc-day-today .uc-day-num { background: var(--uc-dark); color: var(--uc-yellow); font-weight: 800; }
.uc-day-out { background: var(--uc-bg); }
.uc-calendar .uc-month-grid td.uc-day-out { background: var(--uc-bg); }
.uc-day-out .uc-day-num { color: var(--uc-muted); font-weight: 600; }
.uc-day-selected { box-shadow: inset 0 0 0 2px var(--uc-teal-text); }

/* Events: small bordered blocks, tight leading, title first then time. */
.uc-calendar .uc-day-events { display: flex; flex-direction: column; gap: 3px; }
.uc-calendar .uc-day-event a { display: block; padding: 3px 5px; border: 1px solid var(--uc-border);
    border-left: 3px solid var(--cat-color, var(--uc-teal)); border-radius: 4px; background: #fff;
    font-size: 11px; line-height: 1.25; color: var(--uc-text); text-decoration: none; overflow: hidden; }
.uc-calendar .uc-day-event a:hover { background: var(--uc-bg); border-color: var(--cat-color, var(--uc-teal)); }
.uc-day-event-title { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-day-event-time { display: block; font-weight: 600; font-size: 10px; color: var(--uc-secondary); }

/* Dots are the MOBILE treatment. Hidden here on purpose: this rule not
   reaching the embed is what put a stray dot after every date on sfaf.org. */
.uc-day-dots { display: none; }

/* Loading, failure and genuinely-empty are three different states and must
   never be mistaken for one another. */
.uc-month-loading { position: relative; }
.uc-month-loading .uc-month-wrap { opacity: .45; }
.uc-month-loading::after { content: "Loading"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    padding: 8px 16px; border-radius: 8px; background: rgba(26,29,33,.88); color: #fff; font-size: 13px; font-weight: 600; }
.uc-month-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
    padding: 10px 14px; border-radius: 8px; background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 600; }
.uc-calendar .uc-month-retry { padding: 5px 12px; border: 1px solid #92400e; border-radius: 6px; background: #fff;
    color: #92400e; font-size: 12px; font-weight: 700; cursor: pointer; }
.uc-calendar .uc-month-empty { margin: 10px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--uc-bg);
    color: var(--uc-secondary); font-size: 13px; }

/* Day panel: hidden on desktop, where the events are already in the cells. */
.uc-month-day-panel { display: none; }

/* ---------- Sidebar ---------- */
.uc-sidebar { font-family: var(--uc-font-heading); max-width: 380px; }
.uc-sidebar-list { display: flex; flex-direction: column; gap: 2px; }
.uc-sidebar-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 8px;
    border-left: 3px solid var(--cat-color, var(--uc-teal)); text-decoration: none; color: inherit; background: #fff; }
.uc-sidebar-row:hover { background: var(--uc-bg); }
.uc-sidebar-date { flex: 0 0 38px; text-align: center; }
.uc-sidebar-mon { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--uc-teal-text); }
.uc-sidebar-day { display: block; font-size: 19px; font-weight: 800; line-height: 1.05; color: var(--uc-text); }
.uc-sidebar-body { min-width: 0; }
.uc-sidebar-title { display: block; font-size: 13px; font-weight: 700; color: var(--uc-text); line-height: 1.35; }
.uc-sidebar-time { display: block; font-size: 12px; color: var(--uc-secondary); margin-top: 2px; }
.uc-sidebar-empty { margin: 0; padding: 16px 8px; font-size: 13px; color: var(--uc-secondary); }
.uc-sidebar-all { display: inline-block; margin-top: 10px; padding: 8px 2px; font-size: 13px; font-weight: 700; color: var(--uc-teal-text); text-decoration: none; }
.uc-sidebar-all:hover { text-decoration: underline; }

/* ---------- Mobile: the Outlook pattern ----------
 *
 * Seven columns do not work at phone width, so each cell drops to its date
 * number and one dot per event, and the tapped day events render in full
 * underneath the grid. No expand/collapse gesture: at three events on the
 * busiest day it would be effort spent on the fiddliest part of the pattern.
 */
@media (max-width: 640px) {
    /* SPECIFICITY MUST MATCH THE DESKTOP RULES ABOVE.
     *
     * Those are scoped .uc-calendar .uc-month-grid td (0,2,1); an unscoped
     * .uc-month-grid td here would be (0,1,1) and simply lose, leaving the
     * phone layout with desktop cell heights and every event block still
     * visible. A media query changes when a rule applies, never how strongly.
     */
    .uc-calendar .uc-month-grid td { height: auto; min-height: 44px; padding: 4px 2px; text-align: center; }
    .uc-calendar .uc-month-grid th { padding: 6px 2px; letter-spacing: 0; }
    .uc-day-name-full { display: none; }
    .uc-day-name-min { display: inline; }
    .uc-calendar .uc-day-events { display: none; }
    .uc-day-num { margin-bottom: 2px; }

    /* Dots replace the event blocks at this width, one per event. */
    .uc-day-dots { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; min-height: 8px; }
    .uc-day-dot { width: 5px; height: 5px; border-radius: 50%; display: block; }

    /* The tapped day, rendered in full below the grid. */
    .uc-month-day-panel { display: block; margin-top: 16px; }
    .uc-calendar .uc-day-panel-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--uc-text); }
    .uc-calendar .uc-day-panel-empty { margin: 0; font-size: 13px; color: var(--uc-secondary); }
    .uc-calendar .uc-month-day-panel .uc-day-events { display: flex; gap: 6px; }
    .uc-calendar .uc-month-day-panel .uc-day-event a { padding: 10px 12px; font-size: 14px; text-align: left; }
    .uc-calendar .uc-month-day-panel .uc-day-event-title { white-space: normal; }
    .uc-calendar .uc-month-day-panel .uc-day-event-time { font-size: 12px; }

    .uc-month-head { align-items: flex-start; }
}


/* The arrow still appears on hover and focus, because it is an affordance
   rather than an ornament. It just arrives at once instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    .uc-event-card { transition: none; }
    .uc-event-card:hover { transform: none; }
    .uc-calendar .uc-event-card { transition: none; }
    .uc-calendar .uc-actionbtn, .uc-single .uc-actionbtn, .uc-sidebar .uc-actionbtn,
    .uc-calendar .uc-actionbtn-arrow, .uc-single .uc-actionbtn-arrow, .uc-sidebar .uc-actionbtn-arrow { transition: none; }
    .uc-calendar .uc-actionbtn-arrow, .uc-single .uc-actionbtn-arrow, .uc-sidebar .uc-actionbtn-arrow { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Inline email validation (public forms). See public/js/sfaf-email.js.
 *
 * The mark on the field and the message below it are two separate signals on
 * purpose: colour alone fails for anyone who cannot see it, and a message
 * alone leaves six identical inputs with no indication of which one is meant.
 * ------------------------------------------------------------------------ */
.uc-rsvp-form input.uc-invalid,
.uc-calendar input.uc-invalid,
input.uc-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 1px #dc2626; }
input.uc-invalid:focus { outline: 2px solid #dc2626; outline-offset: 1px; }
.uc-field-error { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: #b91c1c; font-weight: 600; }

/* ===========================================================================
 * EVENT PAGE MAP
 *
 * SCOPED, THOUGH IT IS NOT AN EMBED SURFACE. The single event template is
 * never rendered into an embed payload: SFAF_Embed::build_payload() calls
 * render_calendar_block(), render_events() or render_sidebar() and nothing
 * else, so no part of this section can reach sfaf.org through the embed. It
 * is scoped to .uc-single anyway, because the event page runs inside the host
 * theme on this site and the same rule applies there: an unstyled property is
 * whatever the theme says it is.
 *
 * THE PLACEHOLDER IS NOT A LOADING STATE. There is no iframe in the document
 * until the button is pressed, so nothing here is waiting for anything. The
 * note says what pressing it does, because a visitor deciding whether to load
 * a Google map on a page about HIV services deserves to know that is what
 * they are deciding.
 * ======================================================================== */
.uc-single .uc-map { margin-top: 28px; padding: 20px; background: var(--uc-bg); border: 1px solid var(--uc-border); border-radius: 14px; }
.uc-single .uc-map-heading { font-family: var(--uc-font-heading); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--uc-text); margin: 0 0 10px; }
.uc-single .uc-map-address { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--uc-text); }
.uc-single .uc-map-address .sfaf-icon { margin-top: 3px; color: var(--uc-teal-text); }
.uc-single .uc-map-address a { color: var(--uc-teal-text); text-decoration: none; }
.uc-single .uc-map-address a:hover { text-decoration: underline; }
.uc-single .uc-map-address a:focus-visible,
.uc-single .uc-fact-maplink:focus-visible { outline: 2px solid var(--uc-teal-text); outline-offset: 2px; border-radius: 4px; }

.uc-single .uc-fact-maplink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--uc-secondary); }
.uc-single .uc-fact-maplink:hover { color: var(--uc-teal-text); border-bottom-color: var(--uc-teal-text); }

.uc-single .uc-map-embed { margin-top: 14px; }
.uc-single .uc-map-placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: #fff; border: 1px dashed var(--uc-border); border-radius: 12px; }
.uc-single .uc-map-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--uc-secondary); }
.uc-single .uc-map-frame { border-radius: 12px; overflow: hidden; line-height: 0; }
.uc-single .uc-map-frame iframe { display: block; width: 100%; max-width: 100%; border: 0; }