/* ───────────────────────────────────────────────────────────────────────────
   FEATURED EVENT — shortcode block styling
   Pairs with cc-featured-event.php. Styles the APPEARANCE of each fe_* block
   (type, color, spacing, badge, button). Deliberately does NOT set layout or
   positioning between blocks — those are arranged with the block editor's
   native grid/columns on the homepage, and this stylesheet must not fight it.

   Font families are intentionally inherited from the theme (Blocksy global
   typography), so every block matches the surrounding page automatically and
   stays consistent between the homepage and the event's own page.

   Retune the whole feature from the variables below — change --fe-accent once
   and every blue updates.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --fe-accent:        #1D4F8C;   /* club blue — buttons, badge, accents      */
    --fe-accent-dark:   #163e6e;   /* hover/active state for accent            */
    --fe-ink:           #1a1a1a;   /* primary text (titles)                    */
    --fe-muted:         #5a6473;   /* secondary text (address, meta)           */
    --fe-badge-text:    #ffffff;   /* members-only badge text                  */
    --fe-radius:        4px;       /* shared corner radius                     */
    --fe-gap:           0.5rem;    /* vertical rhythm inside multi-line blocks  */
}


/* ─── TITLE — [fe_title] ─────────────────────────────────────────────────── */
/* Largest type in the set; the anchor of whichever cell it sits in.          */

.cc-featured-event-title {
    display: block;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--fe-ink);
    text-decoration: none;
}

/* Linked variant ([fe_title link="yes"]) — same look, accent on hover.       */
a.cc-featured-event-title:hover,
a.cc-featured-event-title:focus-visible {
    color: var(--fe-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ─── FEATURED IMAGE — [fe_image] ────────────────────────────────────────── */
/* State the cell width, keep aspect ratio, soften the corner.                 */

.cc-featured-event-image {
    display: block;
    width: 75%;
    height: auto;
    border-radius: var(--fe-radius);
}


/* ─── CATEGORY — [fe_category] ───────────────────────────────────────────── */
/* Treated as an eyebrow: a small, spaced, uppercase label that classifies    */
/* the event. The eyebrow encodes real information (the category), not decor.  */

.cc-featured-event-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fe-accent);
}


/* ─── DESCRIPTION — [fe_description] ─────────────────────────────────────── */
/* Plain readable body copy. Capped measure for legibility; inherits font.    */

.cc-featured-event-description {
    color: var(--fe-ink);
    line-height: 1.6;
    max-width: 60ch;
}

.cc-featured-event-description p {
    margin: 0 0 0.85em;
}

.cc-featured-event-description p:last-child {
    margin-bottom: 0;
}


/* ─── MEMBERS ONLY BADGE — [fe_members_only] ─────────────────────────────── */
/* Compact solid pill. Small, uppercase, high-contrast — reads as a status.   */

.cc-featured-event-members-only-badge {
    display: inline-block;
    padding: 0.25em 0.7em;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fe-badge-text);
    background: var(--fe-accent);
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}


/* ─── DATE + TIME — [fe_datetime] ────────────────────────────────────────── */

.cc-featured-event-datetime {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fe-ink);
}


/* ─── VENUE — [fe_venue] ─────────────────────────────────────────────────── */
/* Name on top (emphasis), address beneath (muted). Wrapper stacks them.      */

.cc-featured-event-venue {
    display: block;
}

.cc-featured-event-venue-name {
    display: flex;
	justify-content: center;
    font-weight: 600;
    color: var(--fe-ink);
}

.cc-featured-event-venue-address {
    display: block;
    margin-top: 0.15em;
    font-size: 0.9rem;
    color: var(--fe-muted);
}


/* ─── COST — [fe_cost] ───────────────────────────────────────────────────── */

.cc-featured-event-cost {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fe-ink);
}


/* ─── VIEW EVENT BUTTON — [fe_link] ──────────────────────────────────────── */
/* Solid accent button. Note the .button class is also output, so the theme   */
/* may already style it — these rules are scoped to the combined selector to   */
/* win predictably without an !important arms race.                            */

.cc-featured-event-link.button,
a.cc-featured-event-link {
    display: inline-block;
    padding: 0.7em 1.4em;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: var(--fe-accent);
    border: 0;
    border-radius: var(--fe-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cc-featured-event-link.button:hover,
a.cc-featured-event-link:hover,
.cc-featured-event-link.button:focus-visible,
a.cc-featured-event-link:focus-visible {
    background: var(--fe-accent-dark);
    color: #ffffff;
}

/* Visible keyboard focus — accessibility floor, independent of theme.         */
a.cc-featured-event-link:focus-visible {
    outline: 2px solid var(--fe-accent-dark);
    outline-offset: 2px;
}


/* ─── FULL EMBED — [fe_full] ─────────────────────────────────────────────── */
/* Wrapper only. The inner content keeps the event's own real block styling,  */
/* so we add spacing/containment around it but don't restyle its internals.   */

.cc-featured-event-full {
    margin: 0;
}


/* ─── TICKET FORM — [fe_tickets] ─────────────────────────────────────────── */
/* Wrapper only. Event Tickets renders and styles the form itself; this just  */
/* gives the embed breathing room within its cell.                            */

.cc-featured-event-tickets {
    margin: 0;
}

/* .cc-featured-event-admin-notice is styled inline in PHP (it must read even  */
/* with no stylesheet loaded), so it is intentionally not restyled here.       */