/* SK Video Player Styles */

:root {
    --sk-primary: #0066cc;
    --sk-gold: #c0a45f;
    --sk-gold-dark: #af8b4a;
    --sk-gold-tint: #f7f1e3;
    --sk-border: #e5e5e5;
    --sk-bg-light: #f5f5f5;
    --sk-bg-lighter: #f9f9f9;
    --sk-text-dark: #000;
    --sk-text-light: #666;
    --sk-text-lighter: #999;
}

/* Main Container */
.sk-video-player-container {
    width: 100%;
    max-width: 1400px;
    /* Flush left against the page's own content column (matching the page
       title above it), never auto-centered. */
    margin: 0;
    padding: 0;
}

/* The standalone trays section ([sk_video_trays], no player attached)
   lives in its own full-width row, not the narrower column the player
   sits in -- it should fill that row rather than being capped at the
   same 1400px the player uses. */
.sk-video-player-container.sk-trays-only {
    max-width: none;
}

/*
 * Player + description as ONE block, full width -- no side-by-side chat
 * column here (see the header comment in class-video-player-shortcodes.php
 * for why: a real chat widget already exists elsewhere on the page, so a
 * fake placeholder column was redundant, not a real pending feature).
 * The description is a child of this same box, not a separately-centered
 * element elsewhere on the page -- that split was exactly what made it
 * drift out of alignment with the player before.
 */
.sk-player-block {
    width: 100%;
    margin-bottom: 32px;
}

/* Admin-selectable alternative to the default stacked layout above --
   puts the title/description beside the player instead of under it, in
   roughly the same proportions the adult homepage's chat column uses
   (see player_config.description_position in class-video-player-module.php).
   Meant for instances/pages with no chat widget occupying that space. */
.sk-player-block--side {
    /* !important throughout this rule and the two below it -- confirmed
       broken specifically when embedded inside an Elementor page (fine
       on a plain page with identical HTML/CSS), pointing at Elementor
       or the active theme applying its own broad flex/wrap reset to
       generic descendants of its own containers, beating these at equal
       specificity. Forcing our values to win outright is the standard
       fix for that, without needing to know the exact external rule.
       NOT flex-wrap: wrap -- the explicit @media (max-width: 900px)
       block below is the ONLY thing that switches this back to stacked;
       letting flexbox wrap on its own instead let the layout flip AFTER
       first paint (a scrollbar appearing once the page's height
       settled, nudging the measured width just under the two columns'
       combined min-width) -- the "loads aligned, then drops below the
       headline" flash from earlier testing. */
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px;
}

.sk-player-block--side .sk-main-player {
    flex: 1 1 65% !important;
    min-width: 280px;
}

.sk-player-block--side .sk-video-info {
    flex: 1 1 30% !important;
    min-width: 240px;
    margin-top: 0;
}

/* The title's own line-height leaves a bit of space above its visible
   text (normal for a heading), which reads as "not quite lined up with
   the player" now that it sits directly beside the iframe instead of
   comfortably below it. Tightening just the line-height (not touching
   margin, which is already 0) pulls the visible glyph top much closer to
   the iframe's own top edge without changing the title's font size. */
.sk-player-block--side .sk-video-title {
    /* Was briefly bumped to margin-top: 25px to fix a perceived
       misalignment, but that tuning happened while the CSS enqueue bug
       (see maybe_enqueue_assets()) meant this rule wasn't even reliably
       loading everywhere it was being judged from -- on the real page,
       with the actual fix in place, margin-top: 0 is what lines the
       title's first line up with the video's top edge. */
    margin-top: 0;
    line-height: 1.05;
}

@media (max-width: 900px) {
    /* Falls back to the normal stacked layout below ~900px -- a 30%-wide
       description column has no usable room left once the player itself
       needs to stay reasonably sized. !important is required here now --
       the base rule's own display:flex was hardened to !important
       (fixing an unrelated Elementor conflict) after this was written,
       and !important always wins over a later plain declaration
       regardless of media query, which is exactly what was keeping the
       side-by-side layout stuck on mobile instead of falling back. */
    .sk-player-block--side {
        display: block !important;
    }
    .sk-player-block--side .sk-video-info {
        margin-top: 16px;
    }
}

.sk-main-player {
    width: 100%;
}

.sk-player-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: none;
    display: block;
}

.sk-player-empty {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: var(--sk-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sk-text-lighter);
}

.sk-video-info {
    margin-top: 16px;
    text-align: left;
}

.sk-video-title {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--sk-vp-video-title, var(--sk-text-dark));
}

.sk-video-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-vp-video-description, var(--sk-text-dark));
}

.sk-video-description p {
    margin: 0 0 12px 0;
}

/* Read More/Less: a no-op on desktop, where there's room for the full
   text -- only takes effect inside the max-width: 768px block below.
   !important alone on the plain .sk-description-toggle selector still
   lost on the live Elementor pages (confirmed still showing as a solid
   gold pill button on desktop) -- whatever theme/Elementor rule is
   colliding with it is apparently scoped specifically enough to beat a
   single-class !important tie on specificity. Chaining the container
   class (.sk-video-player-container .sk-description-toggle) bumps
   specificity without needing to know the exact competing selector. */
.sk-video-player-container .sk-description-toggle {
    display: none !important;
}

/* Trays Section */
.sk-trays-section {
    width: 100%;
}

.sk-section {
    margin-bottom: 32px;
}

.sk-section-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--sk-vp-section-heading, var(--sk-text-dark));
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sk-border);
}

/*
 * Accordion -- full-width box (the previous border-left-accent treatment
 * visually shrank/weakened it, reverted). Gold appears only on the header
 * text/icon, consistently in both open and closed states, so there's no
 * black flash and no jarring background swap.
 */
.sk-accordion {
    width: 100%;
    background: #fff;
    border: 1px solid var(--sk-border);
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}

/* A "group" (e.g. Common Ground Chronicles - Previous Seasons) is the same
   full-width accordion treatment, just with a tinted background so it
   reads as the outer/parent level once its child tray accordions are
   nested inside it. */
.sk-accordion--group {
    background: var(--sk-vp-tray-bg, var(--sk-gold-tint));
    border-color: var(--sk-gold);
}

/* Nested tray accordions inside a group: indented and given their own
   white background so the nesting is legible without shrinking their
   width or relying on a border accent. */
.sk-accordion--group .sk-accordion-content {
    padding-left: 20px;
    padding-right: 12px;
}

.sk-accordion--group .sk-accordion--tray {
    background: #fff;
}

/* The header is the accordion's main visible surface -- a solid filled
   bar, not a plain text row on a white box -- so "Accordion color" means
   THIS background, not .sk-accordion's own (mostly invisible) card
   background above. */
.sk-accordion-header {
    width: 100%;
    padding: 14px 18px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.15s ease;
}

/* !important + the chained container-class selector -- this is a real
   <button> element, same theme-default-button-styling conflict
   .sk-description-toggle had (confirmed: admin-configured Accordion
   color/hover values weren't visibly changing anything on the live
   page, still showing the hardcoded gold/black fallbacks regardless of
   what was saved). Non-!important rules on a <button> lose to the
   theme's own generic button defaults. */
.sk-video-player-container .sk-accordion-header {
    background: var(--sk-vp-accordion-bg, var(--sk-gold)) !important;
    color: var(--sk-vp-accordion-text, #fff) !important;
}

.sk-video-player-container .sk-accordion-header:hover,
.sk-video-player-container .sk-accordion-header:focus-visible {
    background: var(--sk-vp-accordion-hover, #000) !important;
}

.sk-video-player-container .sk-accordion-header:focus-visible {
    outline: 2px solid var(--sk-vp-accordion-hover, #000) !important;
    outline-offset: -2px;
}

/*
 * Inline SVG chevron, not a Unicode glyph or a border-triangle. A Unicode
 * character like "▼" can render via a colored emoji-fallback font that
 * ignores `color` entirely; a border-triangle can just as easily get zeroed
 * out by a sitewide `button * { border: none }`-style reset, which is a
 * real risk on a heavily-customized theme with a lot of accumulated custom
 * CSS. `stroke="currentColor"` on an inline SVG path is about as hard to
 * accidentally override as this gets.
 */
/*
 * Forced visible on every relevant property, not just on :hover. Verified
 * server-side that both the HTML and this CSS file were actually reaching
 * the browser correctly (ruled out caching), so a prior stroke-only
 * outline icon was most likely getting its `stroke` zeroed out by some
 * sitewide icon-reset rule targeting svg/path elements generally -- my
 * earlier opacity/visibility overrides never touched fill/stroke at all,
 * so they wouldn't have rescued it from that. This is now a solid filled
 * triangle forcing both fill AND stroke !important, on both the svg and
 * its path, so it survives either kind of external reset.
 */
/*
 * A plain CSS ::before character, not an SVG or border-triangle -- both of
 * those failed even after forcing every color/fill/stroke/visibility
 * property I could think of, while this exact technique (content + color)
 * is proven working elsewhere on this same page: the scroll-button chevrons
 * below use it and render fine, which is why the accordion arrow specifically
 * not showing (while those do) points at something SVG/border-specific
 * getting reset, not a general "icons are hidden" issue. Reusing the same
 * '›' character the scroll buttons use, for one proven-working glyph.
 */
/*
 * The toggle indicator itself (a small filled-dot/open-ring circle) is no
 * longer styled here at all -- every stylesheet-based approach tried here
 * (Unicode glyph, SVG, border-triangle, ::after content, background-color)
 * checked out correctly in every server-side review but was confirmed only
 * visible on :hover in the actual browser, meaning some other rule on this
 * page reveals content inside buttons on hover and beat all of them
 * regardless of specificity/!important. It's now rendered via an inline
 * style attribute directly in class-video-player-shortcodes.php's
 * render_accordion() (and kept in sync on click by video-player.js),
 * which beats any external stylesheet rule, !important or not, in every
 * major browser -- see that method's doc comment for the full reasoning.
 */

.sk-accordion-content {
    padding: 0 18px 18px 18px;
}

.sk-accordion-content.hidden {
    display: none;
}

.sk-tray-empty {
    color: var(--sk-text-lighter);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.sk-tray-scroller {
    width: 100%;
}

/*
 * Small pagination buttons in their own row BELOW the video grid -- NOT
 * full-height bars beside it. The previous absolutely-positioned, full-
 * height version was too visually heavy ("big bars that overwhelm the
 * cards"), especially once mobile cards got taller.
 */
.sk-tray-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.sk-tray-scroll-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

/* !important + chained selector -- also a real <button>, same
   theme-default-button conflict as the accordion header above. The
   established look here (confirmed against the live, long-standing
   adult page) is a SOLID color-filled circle with a white arrow, not a
   white circle with a colored border -- that solid-fill look was
   actually coming from the theme's own default button styling all
   along, which is exactly why it disappeared the moment these rules
   started actually taking effect. Matching it explicitly, rather than
   the white-circle/colored-border design this had before, is what
   keeps the untouched (adult, no custom color) case pixel-equivalent
   to how it's always looked. */
.sk-video-player-container .sk-tray-scroll-btn {
    background: var(--sk-vp-pagination-color, var(--sk-gold)) !important;
    border: 1px solid var(--sk-vp-pagination-color, var(--sk-gold)) !important;
    color: #fff !important;
}

.sk-video-player-container .sk-tray-scroll-btn:hover {
    filter: brightness(0.92);
}

.sk-tray-scroll-btn[hidden] {
    display: none;
}

/* The arrow glyphs used to live here as ::before content -- moved to a
   real inline-styled <span> in render_scrollable_grid() (PHP) instead,
   same fix as the accordion's Show/Hide indicator: this theme strips
   ::before/::after content on buttons via some global reset, which
   only became visible once the stylesheet-enqueue bug elsewhere was
   fixed and this area started actually being styled at all. */

/*
 * Tray grid: fixed-fraction card width so roughly 5-6 cards are visible in
 * the available row at once (independent of whatever the actual container
 * width ends up being on this page/theme), scrolling horizontally to
 * reveal more -- up to 20 -- before ever wrapping to a second row.
 */
.sk-tray-grid {
    /* !important on the structural properties here (not just the ones
       already forced at breakpoints below) -- confirmed broken
       specifically when this shortcode is embedded inside an Elementor
       page and NOT on a plain page, even though nothing here changes
       between the two. That points at Elementor (or the active theme)
       applying its own broad flex/wrap reset to generic descendants of
       its own containers/widgets, beating these rules at equal or lower
       specificity. Forcing our own values to win outright is the
       standard fix for third-party content losing a CSS fight with a
       page builder's global styles, without needing to know the exact
       external rule responsible. */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
}

/*
 * Admin-configurable alternative to the endless-scrolling row above
 * (grid_max_per_row in Player Settings): once a tray has more videos than
 * this, the rest wrap onto new rows instead. Higher specificity + the
 * same !important the breakpoint overrides below use, so this wins at
 * every width when active -- 0/unset (grid-wrap="0") leaves the
 * scrolling-row behavior above completely untouched, which is the
 * default for every instance created before this existed.
 */
.sk-video-player-container[data-grid-wrap="1"] .sk-tray-grid {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}

.sk-video-player-container[data-grid-wrap="1"] .sk-tray-pagination {
    display: none !important;
}

.sk-video-player-container[data-grid-wrap="1"] .sk-video-card {
    flex: 0 0 calc((100% - (var(--sk-vp-grid-max-per-row, 1) - 1) * 12px) / var(--sk-vp-grid-max-per-row, 1)) !important;
}

.sk-video-card {
    flex: 0 0 calc((100% - 5 * 12px) / var(--sk-vp-grid-desktop, 5.5)) !important;
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    background: var(--sk-bg-light);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.sk-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sk-video-card.active {
    border-color: var(--sk-vp-now-playing, var(--sk-gold));
    /* The border already followed the configured "Now playing highlight"
       color, but this background tint was still a flat hardcoded pale
       gold regardless -- color-mix() ties it to the same variable so a
       custom highlight color tints the whole card, not just its edge.
       Mixing the *same* default (--sk-gold) at this ratio approximates,
       but won't pixel-match, the original #fbf6ec -- an acceptable,
       barely perceptible difference in the untouched default case, for
       a fix that otherwise couldn't work for a custom color at all. */
    background: color-mix(in srgb, var(--sk-vp-now-playing, var(--sk-gold)) 12%, white);
}

.sk-card-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sk-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-card-thumbnail-placeholder {
    font-size: 26px;
    color: var(--sk-text-lighter);
}

.sk-card-thumbnail::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.sk-video-card:hover .sk-card-thumbnail::after {
    opacity: 1;
}

.sk-video-card.active .sk-card-thumbnail::after {
    opacity: 0;
}

.sk-video-card.active .sk-card-thumbnail::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--sk-vp-now-playing, var(--sk-gold));
    border-radius: 50%;
    z-index: 2;
}

/* [sk_video_player]/[sk_video_trays] add data-indicator="off" on the
   container when the admin has turned off the currently-playing dot for
   this instance (player_config.currently_playing_indicator_enabled). */
.sk-video-player-container[data-indicator="off"] .sk-video-card.active .sk-card-thumbnail::before {
    display: none;
}

/* Card Info: title + short description, both always visible, in normal document flow. */
.sk-card-info {
    padding: 8px 10px 10px 10px;
    flex: 1;
}

.sk-card-title {
    margin: 0 0 4px 0;
    font-weight: 500;
    font-size: 12px;
    color: var(--sk-vp-card-title, var(--sk-text-dark));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.sk-card-description {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--sk-vp-card-description, var(--sk-text-light));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 2 lines only fit ~40-50 characters at this font size/card width --
       nowhere near the admin's 150-character guidance. 4 lines gets much
       closer to actually showing the full 150 rather than silently
       clipping most of it. */
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* Standalone Tray (for [sk_video_tray] shortcode) */
.sk-tray-standalone {
    background: #fff;
    padding: 24px;
}

.sk-tray-standalone .sk-tray-title {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tablet: its own breakpoint (there wasn't one before -- everything above
   768px used to just fall through to the desktop ~5.5-visible fraction).
   Default of 3.2 is a new value (no prior tablet-specific behavior to
   preserve here), configurable per-instance same as the other two. */
@media (min-width: 769px) and (max-width: 1024px) {
    .sk-video-card {
        flex-basis: calc((100% - 12px) / var(--sk-vp-grid-tablet, 3.2)) !important;
    }
}

/* Mobile / Tablet Responsive */
@media (max-width: 768px) {
    /*
     * Tray grid: same scrolling-row BEHAVIOR as desktop (not a wrapping
     * grid). Card WIDTH still needs its own mobile value though -- desktop's
     * ~5.5-cards-visible fraction, applied to a ~375px phone width instead
     * of a ~1400px desktop container, produces cards around 55px wide.
     * That's the actual bug from last round: removing the old mobile
     * override also silently removed mobile's own card-width rule, not
     * just the unwanted 2-column wrapping. This shows ~2.2 cards (a
     * deliberate partial peek of the next one, hinting it scrolls).
     */
    /* Bigger this round -- 2.2 cards visible was still too small to read
       the title on a phone. ~1.6 visible means one full card plus a clear
       peek of the next, each one noticeably larger. */
    .sk-video-card {
        flex-basis: calc((100% - 12px) / var(--sk-vp-grid-mobile, 1.6)) !important;
    }

    /* Collapsed by default on mobile -- long descriptions were pushing
       the trays section too far down the page. Expands in place (no
       layout jump elsewhere) when "Read More" is tapped. */
    .sk-video-description {
        max-height: 4.8em !important; /* ~3 lines at line-height: 1.6 */
        overflow: hidden !important;
    }

    .sk-video-description.sk-description-expanded {
        max-height: none !important;
    }

    /* !important + the chained container-class selector -- same
       theme-default-button conflict as the desktop display:none above.
       Without forcing all of these, the button rendered as a solid gold
       filled pill (theme default) instead of the plain underlined text
       link intended here, and the clamp above was losing the same way,
       showing the full description AND the toggle at once with nothing
       left to expand. */
    .sk-video-player-container .sk-description-toggle {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: inline-block !important;
        margin-top: 8px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: none !important;
        color: var(--sk-gold, #C0A45F) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
        cursor: pointer !important;
    }

    .sk-tray-scroll-btn {
        width: 24px;
        height: 24px;
    }

    .sk-accordion-content {
        padding: 0 14px 14px 14px;
    }

    .sk-accordion--group .sk-accordion-content {
        padding-left: 14px;
        padding-right: 10px;
    }
}

/* Elementor gives a handful of specific widget types (empty, Google Maps,
   video, swiper) an explicit width:100% inside a flex container -- ours
   (shortcode) isn't on that list, so it's left at width:auto and sized to
   its own fit-content instead. That shrink-to-fit calculation resolves our
   nested percentage-based flex children (.sk-player-block--side) very
   differently between Chrome and Firefox at the exact same viewport width
   (confirmed via DevTools: Chrome rendered the player ~13% narrower than
   Firefox with identical CSS). Forcing the wrapping widget itself to fill
   the row removes that ambiguous step entirely. */
.elementor-widget:has(.sk-video-player-container) {
    width: 100% !important;
    flex: 1 1 100% !important;
}