/*
Theme Name: Sierraloaded TV
Theme URI: https://tv.sierraloaded.sl/
Author: Sierraloaded
Description: Lightweight custom video-first WordPress theme for Sierraloaded TV.
Version: 1.4.2
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: sierraloaded-tv
*/

:root{
  --sl-bg:#0b0d10;
  --sl-surface:#12161b;
  --sl-surface-2:#1a1f25;
  --sl-text:#f5f7fa;
  --sl-muted:#9da6b2;
  --sl-border:#262d35;
  --sl-accent:#e31b23;
  --sl-max:1280px;
  --sl-radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sl-bg);color:var(--sl-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input{font:inherit}
.site{min-height:100vh}
.container{width:min(calc(100% - 32px),var(--sl-max));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,13,16,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--sl-border)}
.header-inner{height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:22px;white-space:nowrap}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--sl-accent);font-size:13px}
.brand-tv{color:var(--sl-accent);margin-left:2px}
.main-nav{display:flex;gap:22px;align-items:center;flex:1}
.main-nav a{font-size:14px;color:#d7dce2;font-weight:650}
.main-nav a:hover,.main-nav .current-menu-item>a{color:#fff}
.header-actions{display:flex;align-items:center;gap:10px}
.search-toggle,.menu-toggle{border:0;background:var(--sl-surface-2);color:#fff;width:40px;height:40px;border-radius:10px;cursor:pointer}
.menu-toggle{display:none}
.hero{padding:28px 0 10px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:22px}
.hero-player,.video-player{background:#000;border-radius:var(--sl-radius);overflow:hidden;aspect-ratio:16/9}
.hero-copy{padding:8px 2px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-accent)}
.hero-title{font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 14px}
.hero-excerpt{color:var(--sl-muted);max-width:700px}
.meta{display:flex;flex-wrap:wrap;gap:9px 14px;color:var(--sl-muted);font-size:13px}
.live-strip{margin:26px 0 10px;padding:15px 18px;border:1px solid rgba(227,27,35,.35);background:linear-gradient(90deg,rgba(227,27,35,.12),transparent);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.live-dot:before{content:"";width:9px;height:9px;background:#e31b23;border-radius:50%;box-shadow:0 0 0 5px rgba(227,27,35,.13)}
.section{padding:30px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:16px}
.section-title{font-size:22px;letter-spacing:-.03em;margin:0}
.view-all{font-size:13px;color:var(--sl-muted);font-weight:700}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.video-card{min-width:0}
.thumb{position:relative;background:var(--sl-surface);aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.video-card:hover .thumb img{transform:scale(1.035)}
.play-badge{position:absolute;left:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.78);display:grid;place-items:center}
.duration{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.82);font-size:11px;padding:3px 6px;border-radius:5px}
.video-card-title{font-size:15px;line-height:1.35;margin:10px 0 6px;font-weight:750;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12px;color:var(--sl-muted)}
.category-band{border-top:1px solid var(--sl-border)}
.site-footer{margin-top:50px;border-top:1px solid var(--sl-border);padding:42px 0;color:var(--sl-muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footer-title{color:#fff;font-weight:800;margin-bottom:10px}
.single-wrap{padding:35px 0}
.single-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.55fr);gap:28px}
.single-title{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.045em;margin:20px 0 12px}
.content{color:#d5dae0;font-size:16px}
.content a{color:#fff;text-decoration:underline}
.sidebar{background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:var(--sl-radius);padding:18px}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;background:var(--sl-surface);border:1px solid var(--sl-border);color:#fff;border-radius:10px;padding:11px 12px}
.search-form button{background:var(--sl-accent);color:#fff;border:0;border-radius:10px;padding:0 16px;font-weight:800}
.pagination{display:flex;justify-content:center;gap:8px;padding:35px 0}
.pagination a,.pagination span{padding:9px 13px;border:1px solid var(--sl-border);border-radius:8px}
.pagination .current{background:var(--sl-accent);border-color:var(--sl-accent)}
.empty{padding:50px 20px;text-align:center;background:var(--sl-surface);border-radius:var(--sl-radius);color:var(--sl-muted)}
@media(max-width:1000px){
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .main-nav{gap:14px}
}
@media(max-width:780px){
  .container{width:min(calc(100% - 24px),var(--sl-max))}
  .header-inner{height:64px}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:12px;right:12px;top:64px;background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:12px;padding:14px;flex-direction:column;align-items:stretch}
  .main-nav.is-open{display:flex}
  .hero-grid,.single-layout{grid-template-columns:1fr}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding-top:16px}
}
@media(max-width:420px){
  .video-grid{grid-template-columns:1fr}
  .brand{font-size:19px}
}

.live-strip-active{border-color:rgba(227,27,35,.5)}
.live-strip-active .live-link{font-weight:800;color:#fff}
.meta-sep{margin:0 6px;color:#66717d}
.sidebar .thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:780px){.live-strip{align-items:flex-start;flex-direction:column}}

/* ================================
   LIVE TV
   ================================ */

.live-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}

.live-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .live-player {
        border-radius: 8px;
    }
}

/* Live TV page — full-width player */
.live-page .container {
    max-width: 1200px;
}

.live-page .live-player {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.live-page .live-player iframe {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 768px) {
    .live-page .container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

/* =========================================================
   LIVE PAGE - FINAL PLAYER OVERRIDE
   ========================================================= */

.live-page {
    width: 100%;
}

.live-page .container {
    width: min(calc(100% - 32px), 1200px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.live-page .live-player {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    background: #000;
    overflow: hidden;
    border-radius: 14px;
    margin: 0 auto;
}

.live-page .live-player iframe {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 768px) {

    .live-page .container {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .live-page .live-player {
        border-radius: 10px;
    }

}


/* ============================================================
   HOMEPAGE LAYOUT
   Keep homepage content aligned to the same max-width as
   the original Sierraloaded TV layout.
   ============================================================ */

.site-home {
    width: 100%;
    overflow: hidden;
}

.site-home > .hero {
    width: 100%;
}

.site-home .homepage-content {
    width: min(calc(100% - 32px), 1200px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-home .homepage-category {
    width: 100%;
}

.site-home .video-grid {
    width: 100%;
}

@media (max-width: 780px) {

    .site-home .homepage-content {
        width: calc(100% - 24px);
        max-width: none;
    }

}


/* =========================================================
   HOMEPAGE HERO: LIVE / FEATURED SWITCH (v1.2.0)
   ========================================================= */

[hidden] { display: none !important; }

.hero-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.hero-live .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}


/* =========================================================
   v1.3.0: LOGO, HEADER SEARCH, FULL-WIDTH LIVE PLAYER
   ========================================================= */

/* Logo image */
.brand-logo,
.brand .custom-logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}
.brand .custom-logo-link { display: block; }

/* Header search */
.header-actions { position: relative; }
.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.search-toggle svg { width: 20px; height: 20px; }
.search-toggle[aria-expanded="true"] { background: var(--sl-accent); }
.header-search {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(420px, calc(100vw - 24px));
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.search-page-form { margin-bottom: 22px; max-width: 560px; }

/* Full-width live player */
.hero-player--live {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}
.hero-player--live video,
.hero-player--live iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    object-fit: contain;
}
.hero-live-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.hero-live-title {
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 6px 0 0;
}
.hero-live-link {
    flex-shrink: 0;
    background: var(--sl-accent);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: 10px;
}
.hero-live-link:hover { filter: brightness(1.1); }

@media (max-width: 780px) {
    .hero-live-bar { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   v1.4.0: MOBILE HEADER, LIVE PAGE
   ========================================================= */

.menu-toggle svg { width: 22px; height: 22px; }

@media (max-width: 780px) {
    /* menu | logo (centred) | search */
    .header-inner {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        align-items: center;
        gap: 12px;
    }
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .menu-toggle[aria-expanded="true"] { background: var(--sl-accent); }
    .brand { justify-self: center; }
    .brand-logo, .brand .custom-logo { height: 34px; max-width: 190px; }
    .header-actions { position: static; justify-self: end; }
    .header-search {
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        width: auto;
    }
    .main-nav a { padding: 8px 4px; font-size: 16px; }
}

/* Live page */
.live-stage { position: relative; }
.live-offline {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 35%, #1d232b 0%, var(--sl-surface) 70%);
    border: 1px solid var(--sl-border);
}
.live-offline-inner { max-width: 460px; }
.live-offline-inner h2 {
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -.03em;
    margin: 8px 0 8px;
}
.live-offline-inner p { color: var(--sl-muted); margin: 0 0 18px; }
.live-offline .hero-live-link { display: inline-block; }
.live-status-offline {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sl-muted);
}


/* =========================================================
   v1.4.2: PAGINATION, WORDPRESS MENUS
   ========================================================= */

/* Hide text meant only for screen readers (e.g. "Posts navigation") */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pagination: one horizontal row of buttons */
.pagination { display: block; padding: 35px 0; }
.pagination .nav-links,
.pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination ul.page-numbers li { margin: 0; padding: 0; }
.pagination a.page-numbers,
.pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--sl-border);
    border-radius: 10px;
    background: var(--sl-surface);
    color: #d7dce2;
    font-weight: 700;
    line-height: 1;
    transition: border-color .15s, color .15s, background .15s;
}
.pagination a.page-numbers:hover { border-color: #fff; color: #fff; }
.pagination span.page-numbers.current {
    background: var(--sl-accent);
    border-color: var(--sl-accent);
    color: #fff;
}
.pagination span.page-numbers.dots {
    background: none;
    border-color: transparent;
    min-width: 24px;
    padding: 0 4px;
}

/* Header menu from Appearance → Menus */
.main-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav .nav-menu li { position: relative; margin: 0; }
.main-nav .nav-menu > li > a { display: block; padding: 8px 0; }
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_item > a { color: #fff; }

/* Dropdowns (menu items placed under another item) */
.main-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}
.main-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    z-index: 60;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    white-space: nowrap;
}
.main-nav .sub-menu a:hover { background: var(--sl-surface-2); }

@media (max-width: 1000px) {
    .main-nav .nav-menu { gap: 14px; }
}

@media (max-width: 780px) {
    .main-nav .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .main-nav .nav-menu > li > a { padding: 10px 6px; font-size: 16px; }
    /* On phones, sub-items are always shown, indented under their parent */
    .main-nav .sub-menu {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 6px 14px;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .main-nav .sub-menu a { padding: 8px 6px; font-size: 15px; color: var(--sl-muted); }
    .main-nav .menu-item-has-children > a::after { display: none; }
}