/**
 * PsyPlay v47.2 — Breadcrumbs (full redesign)
 *
 * v47.2 changelog (the duplicate "/" fix):
 *
 *   The PHP renderer no longer outputs the Bootstrap `breadcrumb` class on
 *   the <ol>, so Bootstrap's `.breadcrumb > li + li:before { content:"/\00a0" }`
 *   simply never matches. That is the *real* fix. The CSS overrides below
 *   stay as a safety belt in case any other plugin or compiled stylesheet
 *   ever re-adds a `breadcrumb` class to the list, or if a page builder
 *   wraps the markup with that class.
 *
 * Original goals (still valid):
 *
 *  1. Kill EVERY duplicate separator — both the Bootstrap `/` AND any
 *     other CSS-injected separator. Our PHP renderer outputs a single
 *     configurable inline separator (`›` by default) and that should be
 *     the only one visible.
 *
 *  2. Replace the previous orange `.ann-home` gradient bar (which the
 *     single-movie template was using as the breadcrumb wrapper) with a
 *     subtle, theme-matching card that works in both light and dark
 *     skins.
 *
 *  3. Honor the previous spacing request — desktop margin is 1px
 *     (was 8px), mobile is 1px too.
 *
 *  4. Force breadcrumbs to render on mobile (the base theme has
 *     `#bread { display:none }` at <=640px which we override).
 *
 *  5. Keep the small mobile-header-logo alignment fix from v47.
 *
 * The wrapper structure produced by `psythemes_breadcrumbs()` is now:
 *
 *     <div class="psy-bc psy-bc--card">
 *         <nav class="psy-breadcrumbs"> ... <ol class="psy-breadcrumb-list"> ... </ol> </nav>
 *         OR
 *         <p id="breadcrumbs" class="psy-bc-yoast"> Home » ... </p>
 *     </div>
 */


/* =====================================================================
 * (A) Kill duplicate separators — safety belt.
 *
 *     The primary fix lives in PHP: we no longer emit `class="breadcrumb"`
 *     on the <ol>, so Bootstrap's selector cannot match. These rules below
 *     are belt-and-suspenders for any environment where some other layer
 *     (page cache plugin, page builder, theme compiler) re-introduces the
 *     class or injects its own pseudo-element separator.
 *
 *     `content: none` is stronger than `content: ""` — it removes the
 *     pseudo-element from the rendering tree entirely, instead of leaving
 *     an empty inline box behind.
 * ===================================================================== */
.psy-bc .breadcrumb > li + li:before,
.psy-bc .breadcrumb > li + li:after,
.psy-bc .psy-breadcrumb-list > li + li:before,
.psy-bc .psy-breadcrumb-list > li + li:after,
.psy-bc ol > li + li:before,
.psy-bc ol > li + li:after,
.psy-bc nav ol > li + li:before,
.psy-bc nav ol > li + li:after,
.psy-bc li:before,
.psy-bc li:after,
.psy-breadcrumbs .breadcrumb > li + li:before,
.psy-breadcrumbs .breadcrumb > li + li:after,
.psy-breadcrumbs .psy-breadcrumb-list > li + li:before,
.psy-breadcrumbs .psy-breadcrumb-list > li + li:after,
.psy-breadcrumbs ol > li + li:before,
.psy-breadcrumbs ol > li + li:after,
.psy-breadcrumbs li:before,
.psy-breadcrumbs li:after,
#bread .breadcrumb > li + li:before,
#bread .breadcrumb > li + li:after,
#bread ol > li + li:before,
#bread ol > li + li:after,
#bread li:before,
#bread li:after,
#breadcrumbs > span + span:before,
#breadcrumbs > span + span:after {
    content: none !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* But DO keep our own configurable separator visible — it's a real
 * <span class="psy-breadcrumb-sep">, not a pseudo-element, so it isn't
 * affected by the rules above. This rule just makes sure no inherited
 * `display:none` or zero-sizing trickles down into it. Block (E) below
 * is the authoritative styling source for color/margin/font. */
.psy-bc .psy-breadcrumb-sep,
.psy-breadcrumbs .psy-breadcrumb-sep {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}


/* =====================================================================
 * (B) Outer card (replaces the old `.ann-home alert` wrapper)
 *     — gives the breadcrumb a clean, low-key surface that fits the
 *       theme without competing visually with the movie title or hero.
 * ===================================================================== */
.psy-bc {
    margin: 1px 0;                              /* per request: 1px desktop */
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #5a5a6b;
    overflow: hidden;
}

.psy-bc.psy-bc--card {
    background: linear-gradient(
        135deg,
        rgba(255, 94, 58, 0.04) 0%,
        rgba(255, 42, 109, 0.04) 100%
    );
    border-color: rgba(255, 94, 58, 0.12);
}


/* =====================================================================
 * (C) Inner list — flex row, no extra padding
 * ===================================================================== */
.psy-bc .psy-breadcrumbs {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
}

.psy-bc .psy-breadcrumbs #bread {
    padding: 0;
    background: transparent;
}

.psy-bc .psy-breadcrumb-list,
.psy-bc ol.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    gap: 0;
}


/* =====================================================================
 * (D) Items — icons, links, hover, current
 * ===================================================================== */
.psy-bc .psy-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    color: #6c6c80;
    max-width: 100%;
}

.psy-bc .psy-breadcrumb-item a {
    color: #4a4a5a;
    text-decoration: none;
    transition: color .15s ease;
    border-bottom: 1px solid transparent;
}

.psy-bc .psy-breadcrumb-item a:hover {
    color: #ff5e3a;
    text-decoration: none;
    border-bottom-color: rgba(255, 94, 58, 0.3);
}

/* Home pin icon for the first item */
.psy-bc .psy-breadcrumb-item:first-child a:before {
    content: "\f015";                           /* fa-home */
    font-family: 'FontAwesome';
    font-size: 11px;
    margin-right: 6px;
    color: #ff5e3a;
    opacity: .85;
}

/* Current page (last crumb) — gradient text feel */
.psy-bc .psy-breadcrumb-item.active span,
.psy-bc .psy-breadcrumb-item span[aria-current="page"] {
    color: #ff5e3a;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================================================================
 * (E) Separator — single, configurable, themed
 *     The PHP renderer emits `<span class="psy-breadcrumb-sep">› </span>`
 *     between items. Bootstrap's pseudo separator was killed in (A).
 * ===================================================================== */
.psy-bc .psy-breadcrumb-sep {
    margin: 0 8px;
    color: #ff5e3a;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    user-select: none;
    opacity: .55;
}


/* =====================================================================
 * (F) Yoast variant — when admin defers to Yoast, the markup is
 *     `<p id="breadcrumbs">...» Home »...</p>`. Style it the same.
 * ===================================================================== */
.psy-bc .psy-bc-yoast,
.psy-bc #breadcrumbs {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #6c6c80;
    background: transparent;
}

.psy-bc .psy-bc-yoast a,
.psy-bc #breadcrumbs a {
    color: #4a4a5a;
    text-decoration: none;
    transition: color .15s ease;
}

.psy-bc .psy-bc-yoast a:hover,
.psy-bc #breadcrumbs a:hover {
    color: #ff5e3a;
}

.psy-bc .psy-bc-yoast .breadcrumb_last,
.psy-bc #breadcrumbs .breadcrumb_last {
    color: #ff5e3a;
    font-weight: 600;
}


/* =====================================================================
 * (G) Dark skin — the theme provides `theme.main.dark.css` which sets
 *     a near-black body. Re-tune the breadcrumb so it reads on dark
 *     backgrounds. We scope under `body` selectors that the dark
 *     stylesheet uses (background:#0a0a0f) using the dark theme's
 *     existing global classes — but we also expose a manual override
 *     via .dark-mode for safety.
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
    .psy-bc {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.06);
        color: #b0b0c0;
    }
    .psy-bc.psy-bc--card {
        background: linear-gradient(
            135deg,
            rgba(255, 94, 58, 0.08) 0%,
            rgba(255, 42, 109, 0.08) 100%
        );
        border-color: rgba(255, 94, 58, 0.18);
    }
    .psy-bc .psy-breadcrumb-item,
    .psy-bc .psy-bc-yoast,
    .psy-bc #breadcrumbs {
        color: #b0b0c0;
    }
    .psy-bc .psy-breadcrumb-item a,
    .psy-bc .psy-bc-yoast a,
    .psy-bc #breadcrumbs a {
        color: #d0d0d8;
    }
}

/* Explicit dark-mode body class fallback (some skins toggle this) */
body.dark-mode .psy-bc,
body.is-dark .psy-bc {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: #b0b0c0;
}
body.dark-mode .psy-bc.psy-bc--card,
body.is-dark .psy-bc.psy-bc--card {
    background: linear-gradient(
        135deg,
        rgba(255, 94, 58, 0.08) 0%,
        rgba(255, 42, 109, 0.08) 100%
    );
    border-color: rgba(255, 94, 58, 0.18);
}
body.dark-mode .psy-bc .psy-breadcrumb-item a,
body.is-dark .psy-bc .psy-breadcrumb-item a,
body.dark-mode .psy-bc .psy-bc-yoast a,
body.is-dark .psy-bc .psy-bc-yoast a,
body.dark-mode .psy-bc #breadcrumbs a,
body.is-dark .psy-bc #breadcrumbs a {
    color: #d0d0d8;
}


/* =====================================================================
 * (H) Mobile — force visibility, shrink margins, ellipsis the last
 *     crumb so a long movie title doesn't break the row.
 * ===================================================================== */
@media (max-width: 640px) {
    /* Base theme has `#bread { display:none }` below 640px — override.
       We DO NOT touch any other #bread on the page; only ours, which is
       always inside `.psy-bc`. */
    .psy-bc,
    .psy-bc .psy-breadcrumbs,
    .psy-bc .psy-breadcrumbs #bread,
    .psy-bc nav.psy-breadcrumbs #bread {
        display: block !important;
    }

    .psy-bc {
        margin: 1px 0;                          /* per request: 1px mobile */
        padding: 6px 10px;
        font-size: 12px;
    }

    .psy-bc .psy-breadcrumbs {
        font-size: 12px;
    }

    .psy-bc .psy-breadcrumb-list,
    .psy-bc ol.breadcrumb {
        padding: 0;
        flex-wrap: nowrap;                      /* keep on one line */
        overflow: hidden;
    }

    .psy-bc .psy-breadcrumb-sep {
        margin: 0 5px;
    }

    .psy-bc .psy-breadcrumb-item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }

    /* The Home item should never collapse */
    .psy-bc .psy-breadcrumb-item:first-child {
        flex-shrink: 0;
    }

    /* The current/last item gets all remaining space and ellipses
       gracefully when the title is long. */
    .psy-bc .psy-breadcrumb-item:last-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .psy-bc .psy-breadcrumb-item:last-child span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
        vertical-align: bottom;
    }

    /* Hide the home icon on very narrow screens to save space */
    .psy-bc .psy-breadcrumb-item:first-child a:before {
        margin-right: 4px;
    }
}

@media (max-width: 360px) {
    .psy-bc {
        padding: 5px 8px;
    }
    .psy-bc .psy-breadcrumb-sep {
        margin: 0 4px;
    }
    /* On the smallest screens, drop the "Home" text and keep only the icon
       so the actual page title gets the room. */
    .psy-bc .psy-breadcrumb-item:first-child span {
        display: none;
    }
}


/* =====================================================================
 * (I) Mobile header logo alignment fix — preserved from v47
 *
 * Base theme rules at mobile breakpoints use a hard-coded `top` value
 * that only vertically-centers the original 27px logo. Custom logos
 * with a different height end up looking misaligned vs. the menu and
 * search buttons. We replace the hard-coded offset with transform-Y
 * centering that works for any logo height.
 * ===================================================================== */
@media (max-width: 991px) {
    header .header-logo {
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 0 !important;
    }
    header .mobile-menu,
    header .mobile-search {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 991px) {
    header .mobile-menu.active,
    header .mobile-search.active {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}