/*
 * 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%;
    }
}