/*
 * Cross-snippet custom properties -- ported with local fallbacks.
 *
 * This stylesheet came from Code Snippets Pro snippet #66, which used two custom
 * properties it does not define:
 *
 *   --rlc-red            defined in snippet #38 ("RLC. Custom Styles")
 *   --bp--border-radius  defined in snippet #32 ("Styles. Global Convenience Classes")
 *
 * Both of those snippets stay ACTIVE through the cutover -- only #66/#68/#77/#107 are
 * retired -- so neither variable actually disappears. The fallbacks below exist so the
 * plugin degrades to something sane rather than to `border: 3px solid <invalid>` if it is
 * ever installed somewhere those snippets are not, which is the whole point of it being a
 * plugin. See LIVESTREAM-FIX-PLAN.md section 3d.
 *
 * The --bp--border-radius fallback prefers the theme's own spacing preset before the
 * literal 20px, which is the radius #77's inline styles already hardcode.
 *
 * NOTE: the brand red is genuinely ambiguous in the source -- #66 uses #D93634 while #77's
 * inline styles use #cf2128. #D93634 is used here because that is what --rlc-red resolves
 * to today; picking one deliberately is tracked in TODO.md, not decided here.
 */

/* Base container styles
-------------------------------------------------- */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Remove duplicate width declaration */
    height: 100%;
    aspect-ratio: 16/9;
    border: 0;
    transition: width 0.5s ease, height 0.5s ease;
}

/* Main livestream container layout
-------------------------------------------------- */
.rlc-livestream-container {
    --container-gap: 1.5rem;
    --min-component-width: 300px;
    
    border: 3px solid var(--rlc-red, #D93634);
    border-radius: var(--bp--border-radius, var(--wp--preset--spacing--20, 20px));
    display: flex;
    flex-wrap: wrap;
    gap: var(--container-gap);
    align-items: center;
    min-height: 100%;
    padding: 0.5rem;
    text-decoration: none;
    color: black;
}

/* Reset margins and padding for all container elements */
.rlc-livestream-container * {
    margin: 0;
    padding: 0;
}

/* Hide container when inside paragraphs */
p > .rlc-livestream-container {
    display: none !important;
}

/* Image container styles
-------------------------------------------------- */
.rlc-image-container {
    flex: 1;
    max-width: 40%;
    min-width: var(--min-component-width);
    height: 100%;
}

.rlc-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--bp--border-radius, var(--wp--preset--spacing--20, 20px));
}

/* Content container styles
-------------------------------------------------- */
.rlc-content-container {
    flex: 1;
    min-width: var(--min-component-width);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transform: scale(0.9);
    transform-origin: left center;
}

/* Typography
-------------------------------------------------- */
.rlc-livestream-container h2 {
    font-size: 130%;
    font-weight: 600;
}

.rlc-livestream-container h3 {
    font-size: 90%;
    font-weight: 300;
    margin-bottom: 0.3rem;
}

.rlc-reload-notice {
    font-style: italic;
}

/* Button styles
-------------------------------------------------- */
.tribe-event-tags a {
    background: white;
    text-decoration: none;
    font-weight: 300;
    padding: 1px 5px;
    border-radius: 3px;
}

a.tribe-events-virtual-link-button {
    padding: .6em 1rem !important;
    display: inline-block;
    background: white;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 500;
}

a.tribe-events-virtual-link-button svg path {
    fill: #333;
}

.rlc-button.wp-block-button__link.has-background-color.has-text-color.wp-element-button {
    padding: 0.3rem;
}

/* animation for the button only mode */
a.rlc-button-only.wp-block-button__link.has-background-color.has-text-color.wp-element-button {
    border-radius: 10px;
    height: 100%;
	width: unset!important;
    padding: 0rem 0.6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    animation: liveButtonPulse 2s infinite;
}

@keyframes liveButtonPulse {
	0% {
		background-color: var(--rlc-red, #D93634);
		color: #000000;
	}
	50% {
		background-color: #000000;
		color: #ffffff;
	}
	100% {
		background-color: var(--rlc-red, #D93634);
		color: #000000;
	}
}

/* menu links */
/* Default state */
.rlc-livestream-link .wp-block-navigation-item__label::before {
    content: "▶️";
    margin-right: 0.3em;
}

/* Live now state */
body.currently-livestreaming .rlc-livestream-link .wp-block-navigation-item__label::before {
    content: "🔴";
}

/* Coming soon state */
body.livestreaming-soon .rlc-livestream-link .wp-block-navigation-item__label::before {
    content: "⏰";
}

/* Past event message styles
-------------------------------------------------- */
.rlc-past-event-message {
    max-width: 800px;
    margin: 2em auto;
    padding: 1.5em;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    color: #666;
}

.rlc-past-event-message a {
    color: #D93634;
    text-decoration: none;
    font-weight: 500;
}

.rlc-past-event-message a:hover {
    text-decoration: underline;
}

/* "This event has begun" — swapped in for the countdown on Home and event pages
   when an event starts, so the visitor is told what happened instead of watching
   the countdown silently disappear. See rlcShowEventStarted() in the inline script.
-------------------------------------------------- */
.rlc-event-started {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.rlc-event-started-text {
    font-weight: 600;
    margin: 0;
}

/* The card layout centres its contents; the event-page layout doesn't. */
.rlc-simplified-countdown .rlc-event-started {
    align-items: center;
}

.rlc-event-started-link {
    display: inline-block;
}

/* Loading state animations
-------------------------------------------------- */
.begins-in {
    visibility: hidden;
    opacity: 0;
    transition: all 0s linear 0.3s, opacity 0.3s ease-out;
}

.begins-in.loaded {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Tribe Events Widget customizations
-------------------------------------------------- */
#rlc-upcoming-livestreams {
    .tribe-common-g-col.tribe-events-widget-featured-venue__event-date-tag {
        width: 33%;
        max-width: 80px;
    }

    .tribe-events-widget-featured-venue__events-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }

    .tribe-common-b1.tribe-common-b2--min-medium.tribe-events-widget-featured-venue__view-more,
    .tribe-events-widget-featured-venue__venue {
        display: none;
    }

    header.tribe-events-widget-featured-venue__header {
        margin-bottom: 2rem;
    }
}

/* Responsive styles
-------------------------------------------------- */
@media (max-width: 768px) {
    .rlc-livestream-container {
        flex-direction: column;
    }

    .rlc-image-container {
        max-width: 100%;
        width: 100%;
    }
}


/* ==================================================================================
   Shortcode markup -- lifted out of inline style="" attributes in 6.42.0
   (LIVESTREAM-FIX-PLAN.md section 3).

   These rules used to live in style="" attributes on the markup that
   [rlc_virtual_livestream] prints, where no stylesheet rule -- and so no media query --
   could override them. The values are unchanged; only their home moved. Every selector
   carries two classes so it outranks the theme's single-class block rules the same way
   the inline attributes did.

   --rlc-livestream-highlight is the red of the event-title highlight and the live
   button. It is deliberately NOT --rlc-red: that is #D93634, this has always been
   #cf2128, and which one is "the" brand red is Brandon's call (TODO.md). One variable
   now carries it, so settling that question is a one-line change.
   ================================================================================== */
:root {
    --rlc-livestream-highlight: #cf2128;
    --rlc-livestream-card-bg: #ebebeb;
    --rlc-livestream-card-radius: 20px;
}

/* The whole card is a link */
a.rlc-event-link.rlc-event-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.rlc-live-block.wp-block-columns {
    margin: 0;
    padding: 1rem;
    gap: 0.6rem;
    background-color: var(--rlc-livestream-card-bg);
    border-radius: var(--rlc-livestream-card-radius);
    transition: background-color 0.2s ease;
}

/*
 * The 1/3 : 2/3 split. Core's column CSS resets every column to flex-basis 0 / grow 1
 * from 782px up, and exempted these two only because of its
 * `.wp-block-column[style*=flex-basis] { flex-grow: 0 }` rule -- which keys off the inline
 * style attribute that is now gone. So restate both, at a specificity above core's, and
 * only where core applies them. Below 782px core stacks columns with
 * `flex-basis: 100% !important`, exactly as it did over the inline values.
 */
@media (min-width: 782px) {
    .rlc-live-block.wp-block-columns > .wp-block-column.rlc-live-block__media {
        flex-basis: 33.33%;
        flex-grow: 0;
    }

    .rlc-live-block.wp-block-columns > .wp-block-column.rlc-live-block__body {
        flex-basis: 66.66%;
        flex-grow: 0;
    }
}

.rlc-live-block .rlc-live-block__figure {
    margin: 0;
    padding: 0;
    max-width: 90%;
}

.rlc-live-block .rlc-live-block__image {
    margin: 0;
    padding: 0;
    max-width: 100%;
    border-color: #000000;
    border-width: 3px;
    border-radius: var(--rlc-livestream-card-radius);
}

.rlc-live-block .rlc-live-block__body {
    padding: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.rlc-live-block .rlc-live-block__content {
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rlc-live-block .rlc-live-block__headings {
    margin: 0 0 0.9rem;
    padding: 0;
}

.rlc-live-block .rlc-main-header {
    margin: 0 0 0.4rem 0;
    padding: 0;
}

.rlc-live-block .rlc-event-title {
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
}

.rlc-live-block .rlc-event-title__mark {
    background-color: var(--rlc-livestream-highlight);
    margin: 0;
    padding: 0;
}

.rlc-live-block .begins-in,
.rlc-live-block .rlc-countdown-text,
.rlc-live-block .rlc-countdown-wrap,
.rlc-live-block .rlc-datetime,
.rlc-live-block .rlc-datetime p,
.rlc-live-block .rlc-notice-wrap,
.rlc-live-block .rlc-notice {
    margin: 0;
    padding: 0;
}

.rlc-live-block .rlc-datetime__mark {
    background-color: #000000;
}

.rlc-live-block .rlc-live-action-button {
    text-align: center;
    background-color: var(--rlc-livestream-highlight);
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

.rlc-live-block .rlc-live-action-button__label {
    color: #ffffff;
    font-weight: bold;
}

/* Event-page layout (get_simplified_event_display) */
.rlc-simplified.rlc-simplified {
    text-align: center;
    margin: 2rem 0;
}

.rlc-simplified .rlc-simplified-text {
    font-size: 1.2rem;
}

.rlc-simplified .rlc-simplified-live .rlc-simplified-text {
    margin-bottom: 1rem;
}

.rlc-simplified .rlc-simplified-countdown .rlc-simplified-text {
    margin-bottom: 0.5rem;
}

.rlc-simplified .begins-in {
    margin-bottom: 1.5rem;
}

.rlc-simplified .rlc-countdown {
    font-size: 1.5rem;
    font-weight: bold;
    justify-content: center;
}

.rlc-simplified .rlc-simplified-button {
    display: inline-block;
}

.rlc-simplified .rlc-simplified-live .rlc-simplified-button {
    margin: 10px 0;
}

/* Replay, replay-search link, and the Virtual Events fallback player */
.rlc-past-event-replay,
.rlc-ve-fallback-embed {
    margin: 2rem 0;
}

.rlc-past-event-youtube {
    text-align: center;
    margin: 2rem 0;
}

/* Embed footer; the social-links line has always been hidden */
.livestream-footer p {
    margin: 0;
}

.livestream-footer .livestream-footer__social {
    display: none;
}

.rlc-dev-mode-notice.notice {
    padding: 10px;
    margin: 10px 0;
}

/* ==================================================================================
   Mobile (6.42.0) -- only possible now that the inline styles are gone.
   Checked against the live /livestream and event pages at 360 / 390 / 430px on
   2026-09-29 before writing any of it.
   ================================================================================== */

/* The countdown wraps between units, never inside one. */
.rlc-countdown {
    flex-wrap: wrap;
    column-gap: 0.5em;
}

.rlc-countdown__unit {
    white-space: nowrap;
}

/* Keep "Thursday, October 1, 2026" and "9:00 am EDT" each on one line. */
.rlc-live-block .rlc-datetime__mark {
    white-space: nowrap;
}

/* Stacked card (core stacks the columns below 782px): centre the poster instead of
   leaving it hanging left at 90% width, and trim it so the countdown is not pushed
   below the fold by a tall portrait poster. */
@media (max-width: 781px) {
    .rlc-live-block .rlc-live-block__figure {
        max-width: min(90%, 320px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .rlc-live-block.wp-block-columns {
        padding: 0.75rem;
    }
}