/*
Theme Name: Hello Elementor Child — It Girl in the City
Theme URI: https://itgirlinthecity.com
Description: Dark editorial child theme for It Girl in the City. Sky-blue + pastel-fuchsia accents on dark. Pairs with ITC Core plugin.
Author: It Girl in the City
Author URI: https://itgirlinthecity.com
Template: hello-elementor
Version: 1.2.8
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
Tags: elementor, custom-logo, custom-menu, blog, portfolio
*/

/* ==========================================================================
   IT GIRL IN THE CITY — BRAND GLOBALS — v1.2.0
   Dark editorial palette. Soft pastel sky blue (primary accent) + soft pastel
   peach (complementary). To change the palette, change it here once — it
   propagates through every Elementor page and ITC Core widget.
   ========================================================================== */
:root {
    /* Backgrounds */
    --itc-bg:           #1a1a1a;     /* page bg — soft black, lets photos and accents breathe */
    --itc-bg-elevated:  #232323;     /* cards, inputs, elevated surfaces */

    /* Type */
    --itc-text:         #ebe3d2;     /* warm off-white — primary body text */
    --itc-text-strong:  #f5efe6;     /* slightly brighter — headings, emphasis */
    --itc-text-muted:   #8a8478;     /* meta labels, eyebrows */

    /* Accents */
    --itc-accent:       #a1cae4;     /* soft pastel sky blue — primary accent (cool/structural) */
    --itc-accent-warm:  #e483b3;     /* saturated soft fuchsia — secondary accent (warm/personality) v1.2.7 — bumped from pastel to 20% visibility level, matches logo family */
    --itc-accent-vivid: #ec1f7d;     /* vivid fuchsia for big graphic moments — matches the logo wordmark color */

    /* Lines */
    --itc-line:         #2e2e2e;     /* hairlines, dividers */

    /* Typography stack */
    --itc-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --itc-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Sizing */
    --itc-radius: 4px;

    /* Elementor color overrides — Pro reads these for the Site Settings palette */
    --e-global-color-primary:    #f5efe6;     /* light cream as primary on dark bg */
    --e-global-color-secondary:  #a1cae4;     /* sky blue */
    --e-global-color-text:       #ebe3d2;
    --e-global-color-accent:     #e483b3;     /* saturated soft fuchsia (v1.2.7) */

    /* Legacy aliases — keep ITC Core plugin CSS rendering correctly without rewriting it.
       Old code uses --itc-cream as "the light color" and --itc-black as "the dark color" —
       in dark mode those still semantically point to light/dark respectively. */
    --itc-cream:    #f5efe6;     /* still the light color */
    --itc-beige:    #232323;     /* "soft surface" — now elevated dark */
    --itc-olive:    #a1cae4;     /* repurposed as the brand accent */
    --itc-brown:    #ebe3d2;     /* "warm secondary text" — now warm light text */
    --itc-black:    #1a1a1a;     /* still the dark color */
    --itc-muted:    #8a8478;
}

/* ==========================================================================
   BASELINE TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--itc-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--itc-text);
    background: var(--itc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--itc-font-serif);
    font-weight: 400;
    color: var(--itc-text-strong);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1, .elementor-heading-title.elementor-size-xxl,
.elementor-heading-title.elementor-size-xl {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-style: italic;
    font-weight: 400;
}

h2, .elementor-heading-title.elementor-size-large {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}

h3, .elementor-heading-title.elementor-size-medium {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

p { margin: 0 0 1em; }

a {
    color: var(--itc-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}
a:hover {
    color: var(--itc-accent-warm);
    border-bottom-color: currentColor;
}

/* ==========================================================================
   GLOBAL BUTTON STYLE — v1.2.3
   Hairline-outline default. No fill in either state.
   Normal: 2px cream border, cream text.
   Hover:  2px sky-blue border, cream text (border shifts color, text holds).
   Applies to both legacy Elementor buttons (.elementor-button) AND V4 atomic
   button widgets (.e-atomic-button / .e-button) so the rule is global across
   the site regardless of which widget version was used.
   ========================================================================== */

/* Elementor V3 / classic button — boosted specificity + !important to beat
   Elementor's frontend.css, which loads after the child theme. */
.elementor-button,
.elementor-button-link,
.elementor-button-wrapper .elementor-button,
.elementor .elementor-button,
.elementor-widget-button .elementor-button,
.elementor .elementor-widget-container .elementor-button,
body .elementor-button {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--itc-text-strong) !important;
    font-family: var(--itc-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 14px 32px !important;
    border: 1px solid var(--itc-text-strong) !important;
    border-radius: 5px !important;
    fill: var(--itc-text-strong) !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}
.elementor-button:hover,
.elementor-button-link:hover,
.elementor-button-wrapper .elementor-button:hover,
.elementor .elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.elementor .elementor-widget-container .elementor-button:hover,
body .elementor-button:hover {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--itc-text-strong) !important;
    border-color: var(--itc-accent) !important;
    text-decoration: none !important;
}

/* Elementor V4 atomic button */
.e-atomic-button,
a.e-atomic-button,
.e-atomic-button-link,
.e-button,
a.e-button,
.elementor-element[data-widget_type="e-button.default"] a,
.elementor-element[data-widget_type="atomic-button.default"] a {
    background-color: transparent;
    color: var(--itc-text-strong);
    font-family: var(--itc-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border: 1px solid var(--itc-text-strong);
    border-radius: 5px;
    display: inline-block;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.e-atomic-button:hover,
a.e-atomic-button:hover,
.e-atomic-button-link:hover,
.e-button:hover,
a.e-button:hover,
.elementor-element[data-widget_type="e-button.default"] a:hover,
.elementor-element[data-widget_type="atomic-button.default"] a:hover {
    background-color: transparent;
    color: var(--itc-text-strong);
    border-color: var(--itc-accent);
    text-decoration: none;
}

/* Inner span/text node — Elementor wraps button text in spans
   (V3: .elementor-button-content-wrapper, .elementor-button-text;
    V4: generic spans). Force inheritance so parent button styles win. */
.e-atomic-button > span,
.e-button > span,
.elementor-button > span,
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* ==========================================================================
   SECTION SPACING DEFAULTS
   ========================================================================== */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

@media (max-width: 768px) {
    h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* ==========================================================================
   IMAGE CINEMATIC GRADE
   Subtle warm filter on all content images so every page reads as cinematic
   even before her LUT'd photos arrive. Override per-image with !important if needed.
   ========================================================================== */
.elementor-widget-image img,
.itc-reel-thumb {
    filter: contrast(1.02) saturate(0.94);
}

/* ==========================================================================
   FORM INPUT BASELINE (covers Elementor Pro forms + ITC form)
   ========================================================================== */
.elementor-field-textual,
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group textarea {
    font-family: var(--itc-font-sans);
    background: var(--itc-bg-elevated);
    border: 1px solid var(--itc-line);
    border-radius: var(--itc-radius);
    color: var(--itc-text);
}
.elementor-field-textual::placeholder,
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder {
    color: var(--itc-text-muted);
}
.elementor-field-textual:focus {
    outline: none;
    border-color: var(--itc-accent);
}

/* ==========================================================================
   SELECTION COLOR
   ========================================================================== */
::selection {
    background: var(--itc-accent);
    color: var(--itc-bg);
}
::-moz-selection {
    background: var(--itc-accent);
    color: var(--itc-bg);
}

/* ==========================================================================
   SINGLE SPOT TEMPLATE — /the-list/{slug}/
   Editorial layout, dark theatrical, refined minimalism.
   ========================================================================== */

.itc-spot-single {
    background: var(--itc-bg);
    color: var(--itc-text);
    min-height: 100vh;
    padding-bottom: 120px;
}

/* Hero — full-bleed featured image with edge fade to bg */
.itc-spot-hero {
    position: relative;
    width: 100%;
    height: clamp(280px, 55vh, 560px);
    margin: 0 0 80px;
    overflow: hidden;
}
.itc-spot-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.95) contrast(1.02);
    animation: itcSpotFade 1.2s ease-out;
}
.itc-spot-hero-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(26, 26, 26, 0.35) 100%),
        linear-gradient(180deg, transparent 60%, rgba(26, 26, 26, 0.45) 100%);
}

/* Content wrap */
.itc-spot-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}
.itc-spot-wrap.no-hero {
    padding-top: 100px;
}

/* Header — eyebrow, title, vibes */
.itc-spot-head {
    margin: 0 0 72px;
}
.itc-spot-eyebrow {
    font-family: var(--itc-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--itc-text-muted);
    margin: 0 0 24px;
    animation: itcSpotRise 0.7s 0.05s ease-out backwards;
}
.itc-spot-title {
    font-family: var(--itc-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(48px, 8vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--itc-text-strong);
    margin: 0 0 32px;
    animation: itcSpotRise 0.8s 0.15s ease-out backwards;
}
.itc-spot-vibes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: itcSpotRise 0.8s 0.3s ease-out backwards;
}
.itc-spot-vibes li {
    font-family: var(--itc-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border: 1px solid var(--itc-accent);
    color: var(--itc-accent);
    border-radius: 999px;
    background: transparent;
}

/* Her Take — the centerpiece. Centered italic, framed by hairlines. */
.itc-spot-take {
    margin: 0 0 80px;
    text-align: center;
}
.itc-spot-rule {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--itc-text-muted);
    opacity: 0.4;
    margin: 0 auto 36px;
}
.itc-spot-take-quote {
    font-family: var(--itc-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.45;
    color: var(--itc-text-strong);
    padding: 0;
    quotes: none;
    max-width: 620px;
    margin: 0 auto 36px;
}
.itc-spot-take-quote::before,
.itc-spot-take-quote::after {
    content: '';
}

/* Meta — two-column grid, generous gap, hairline below */
.itc-spot-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin: 0 0 80px;
    padding: 0 0 80px;
    border-bottom: 1px solid var(--itc-line);
}
.itc-spot-meta-label {
    font-family: var(--itc-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--itc-text-muted);
    margin: 0 0 14px;
}
.itc-spot-meta-text {
    font-family: var(--itc-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--itc-text);
    margin: 0 0 12px;
}
.itc-spot-meta-text:last-child {
    margin-bottom: 0;
}
.itc-spot-meta-text a {
    color: var(--itc-text);
    text-decoration: none;
    border-bottom: 1px solid var(--itc-accent);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.itc-spot-meta-text a:hover {
    color: var(--itc-accent-warm);
    border-bottom-color: var(--itc-accent-warm);
}
.itc-spot-meta-links {
    font-family: var(--itc-font-sans);
    font-size: 14px;
    color: var(--itc-text-muted);
    margin: 8px 0 0;
}
.itc-spot-meta-links a {
    color: var(--itc-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.itc-spot-meta-links a:hover {
    color: var(--itc-accent-warm);
    border-bottom-color: currentColor;
}
.itc-spot-meta-links span {
    margin: 0 8px;
    color: var(--itc-text-muted);
}

/* Body content — sparse, magazine-like */
.itc-spot-body {
    font-family: var(--itc-font-sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--itc-text);
    margin: 0 0 64px;
}
.itc-spot-body p {
    margin: 0 0 1.4em;
}
.itc-spot-body p:last-child {
    margin-bottom: 0;
}

/* Footer — back-link to neighborhood archive */
.itc-spot-footer {
    margin: 0;
}
.itc-spot-back {
    font-family: var(--itc-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--itc-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.itc-spot-back:hover {
    color: var(--itc-accent-warm);
    border-bottom-color: currentColor;
}

/* Mobile */
@media (max-width: 720px) {
    .itc-spot-hero {
        margin-bottom: 56px;
        height: clamp(240px, 45vh, 400px);
    }
    .itc-spot-wrap.no-hero {
        padding-top: 60px;
    }
    .itc-spot-head {
        margin-bottom: 56px;
    }
    .itc-spot-title {
        font-size: clamp(38px, 11vw, 56px);
    }
    .itc-spot-take {
        margin-bottom: 64px;
    }
    .itc-spot-meta {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 56px;
        margin-bottom: 56px;
    }
}

/* Reveal animations */
@keyframes itcSpotFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes itcSpotRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .itc-spot-hero-img,
    .itc-spot-eyebrow,
    .itc-spot-title,
    .itc-spot-vibes {
        animation: none;
    }
}

/* ==========================================================================
   FUCHSIA ACCENTS — v1.2.7
   Bring fuchsia into 20% visibility across every page (was 1% before).
   Touchpoints: body links, text selection, hairline rules, list bullets,
   blockquote rule, inline emphasis, header-bottom hairline.
   ========================================================================== */

/* Inline body links — underlined in fuchsia, hover shifts color */
.entry-content a:not(.elementor-button):not(.e-button):not(.elementor-button-link),
.itc-spot-content a:not(.elementor-button):not(.e-button) {
    color: var(--itc-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--itc-accent-warm);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.entry-content a:not(.elementor-button):not(.e-button):not(.elementor-button-link):hover,
.itc-spot-content a:not(.elementor-button):not(.e-button):hover {
    color: var(--itc-accent-warm);
    text-decoration-color: var(--itc-accent-warm);
}

/* Text selection — fuchsia highlight (visible on every page) */
::selection {
    background: var(--itc-accent-warm);
    color: var(--itc-bg);
}
::-moz-selection {
    background: var(--itc-accent-warm);
    color: var(--itc-bg);
}

/* HR / divider rules — fuchsia hairline */
hr,
.elementor-divider-separator {
    border: none;
    border-top: 1px solid var(--itc-accent-warm);
    opacity: 0.65;
    margin: 32px 0;
}

/* Blockquote — fuchsia left-rule + italic Cormorant */
blockquote,
.entry-content blockquote {
    border-left: 2px solid var(--itc-accent-warm);
    padding-left: 24px;
    font-family: var(--itc-font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--itc-text-strong);
    margin: 32px 0;
}

/* List bullets — fuchsia markers */
.entry-content ul {
    list-style: none;
    padding-left: 0;
}
.entry-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.65em;
    width: 6px; height: 6px;
    background: var(--itc-accent-warm);
    border-radius: 50%;
}

/* Inline em / strong — fuchsia emphasis option, opt-in via .is-pink class */
em.is-pink, strong.is-pink, .is-pink {
    color: var(--itc-accent-warm);
}

/* Header bottom hairline — fuchsia, very subtle, sets header off from page */
.site-header,
header.site-header,
.elementor-location-header {
    border-bottom: 1px solid var(--itc-accent-warm);
    border-bottom-color: var(--itc-accent-warm) !important;
}

/* Nav menu link hover — was sky blue, add fuchsia option for menu items
   marked with class .nav-fuchsia-hover, otherwise stays sky blue */
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a,
nav .elementor-item:hover {
    color: var(--itc-accent-warm) !important;
}

/* Period punctuation accent — for section headlines ending in period.
   Add CSS class "itc-period-pink" to a Heading widget and the trailing
   period in the markup will be auto-styled fuchsia via this rule.
   For Elementor's V4 heading widget the period needs to be wrapped manually
   (e.g. "Work with her<span class='itc-period'>.</span>") OR you can just
   add this class and the WHOLE heading color goes — your call. */
.itc-period-pink .itc-period,
.itc-period-pink::after {
    color: var(--itc-accent-warm);
}

/* Pillar tag — when we add pole / movement category labels on Spot/Event
   single pages, the pillar pill background uses fuchsia. */
.itc-pillar-pole,
.itc-pillar-movement,
.itc-pillar-tag[data-pillar="pole"] {
    background: var(--itc-accent-warm);
    color: var(--itc-bg);
}

/* ==========================================================================
   SINGLE EVENT TEMPLATE — v1.2.8
   Layout for /shows/{slug}/ single event pages.
   Matches single-spot editorial rhythm: full-bleed hero, eyebrow, big italic
   title, pillar pills, content, credits in italic centered block, cast,
   RSVP button (upcoming only), address link, back link.
   ========================================================================== */
.itc-event-single {
    color: var(--itc-text);
    font-family: var(--itc-font-sans);
    line-height: 1.65;
}

.itc-event-hero {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    margin-bottom: 56px;
    background: var(--itc-bg-elevated);
}
.itc-event-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
    animation: itcEventFade 0.9s ease both;
}

.itc-event-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 100px;
    text-align: center;
}

.itc-event-eyebrow {
    font-family: var(--itc-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--itc-accent);
    margin-bottom: 24px;
    animation: itcEventRise 0.7s ease 0.1s both;
}
.itc-event-cancelled {
    color: var(--itc-accent-warm);
}

.itc-event-title {
    font-family: var(--itc-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--itc-text-strong);
    margin: 0 0 32px;
    animation: itcEventRise 0.8s ease 0.2s both;
}

.itc-event-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 48px;
}
.itc-pillar-pill {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--itc-line);
    border-radius: 99px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--itc-text-muted);
    background: transparent;
    font-family: var(--itc-font-sans);
}
.itc-pillar-pill.itc-pillar-pole {
    background: var(--itc-accent-warm);
    color: var(--itc-bg);
    border-color: var(--itc-accent-warm);
    font-weight: 500;
}

.itc-event-content {
    font-family: var(--itc-font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--itc-text);
    max-width: 620px;
    margin: 0 auto 48px;
    text-align: left;
}
.itc-event-content p { margin: 0 0 1.2em; }
.itc-event-content p:last-child { margin-bottom: 0; }

.itc-event-credits {
    font-family: var(--itc-font-serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.5;
    color: var(--itc-text-strong);
    max-width: 660px;
    margin: 0 auto 36px;
    padding: 36px 0;
    border-top: 1px solid var(--itc-line);
    border-bottom: 1px solid var(--itc-line);
}
.itc-event-credits p { margin: 0; }

.itc-event-cast {
    margin: 0 auto 48px;
    max-width: 580px;
}
.itc-event-cast-label {
    font-family: var(--itc-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--itc-accent-warm);
    margin-bottom: 10px;
}
.itc-event-cast-names {
    font-family: var(--itc-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--itc-text);
    letter-spacing: 0.01em;
}

.itc-event-rsvp {
    margin: 48px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.itc-event-rsvp-btn {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    color: var(--itc-text-strong);
    border: 1px solid var(--itc-text-strong);
    border-radius: 5px;
    font-family: var(--itc-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.itc-event-rsvp-btn:hover {
    border-color: var(--itc-accent);
    color: var(--itc-text-strong);
}
.itc-event-time-detail {
    font-family: var(--itc-font-sans);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--itc-text-muted);
}

.itc-event-address {
    margin: 24px auto 0;
    font-family: var(--itc-font-sans);
    font-size: 14px;
    color: var(--itc-text-muted);
}
.itc-event-address a {
    color: var(--itc-text);
    text-decoration: underline;
    text-decoration-color: var(--itc-accent-warm);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.itc-event-address a:hover {
    color: var(--itc-accent-warm);
}

.itc-event-back {
    margin-top: 72px;
    padding-top: 36px;
    border-top: 1px solid var(--itc-line);
}
.itc-event-back a {
    font-family: var(--itc-font-sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--itc-text-muted);
    text-decoration: none;
}
.itc-event-back a:hover {
    color: var(--itc-accent-warm);
}

@keyframes itcEventFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes itcEventRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .itc-event-hero-img,
    .itc-event-eyebrow,
    .itc-event-title {
        animation: none;
    }
}