/*
Theme Name: SBC Theme
Theme URI: https://sbclebanon.com
Author: SBC Development Team
Description: A custom WordPress theme for the Spotlight Broadcast Channel (SBC) network. This theme embraces a dark aesthetic inspired by LTX Studio with Eames‑style scroll effects and is designed to work seamlessly with Elementor. It includes global styles, header and footer templates, news ticker support, YouTube API integration and pre‑created categories in Arabic and English.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbc-theme
Tags: custom-background, custom-logo, custom-menu, dark, entertainment, news, one-column, two-columns, right-sidebar, translation-ready
*/

/* -----------------------------------------------------------------------------
   Root variables
   ----------------------------------------------------------------------------- */

:root {
    --sbc-background: #0B0B0C;
    --sbc-surface:    #111215;
    --sbc-text-primary: #EDEDED;
    --sbc-text-secondary: #B9BCC2;
    --sbc-accent: #B3B3B3;
    --sbc-grid:   #222429;
    --sbc-transition: 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Global typography and resets
   ----------------------------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--sbc-background);
    color: var(--sbc-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

a {
    color: var(--sbc-accent);
    text-decoration: none;
    transition: color var(--sbc-transition);
}
a:hover,
a:focus {
    color: var(--sbc-text-secondary);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: var(--sbc-text-primary);
    font-weight: 800;
    line-height: 1.2;
}

p {
    margin-bottom: 1.1rem;
    color: var(--sbc-text-secondary);
    font-weight: 400;
    font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Grid pattern background
   Apply .sbc-grid class to any container where a subtle grid line pattern
   is desired. Uses two linear gradients to draw vertical and horizontal lines.
   ----------------------------------------------------------------------------- */
.sbc-grid {
    background-image: linear-gradient(var(--sbc-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--sbc-grid) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* -----------------------------------------------------------------------------
   Layout wrappers
   ----------------------------------------------------------------------------- */
.sbc-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -----------------------------------------------------------------------------
   Header styles
   ----------------------------------------------------------------------------- */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color var(--sbc-transition), transform var(--sbc-transition), box-shadow var(--sbc-transition);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    padding: 0 1rem;
}

#site-header.shrink .header-inner {
    height: 74px;
}

#site-header .logo img {
    display: block;
    max-height: 56px;
    width: auto;
    transition: max-height var(--sbc-transition);
}

#site-header.shrink .logo img {
    max-height: 48px;
}

.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
    font-weight: 600;
}

.primary-nav li a {
    color: var(--sbc-text-primary);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    position: relative;
    padding: 0.25rem 0;
}

.primary-nav li a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--sbc-accent);
    transition: width var(--sbc-transition);
}

.primary-nav li a:hover:after,
.primary-nav li.current-menu-item a:after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions .search-trigger {
    background: none;
    border: none;
    color: var(--sbc-text-primary);
    font-size: 1.2rem;
    cursor: pointer;
}

.header-actions .start-watching {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--sbc-accent);
    color: var(--sbc-background);
    font-weight: 600;
    border-radius: 4px;
    transition: transform var(--sbc-transition), box-shadow var(--sbc-transition);
}
.header-actions .start-watching:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Top ticker bar */
.sbc-ticker {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    color: var(--sbc-text-primary);
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.85rem;
    height: 32px;
    display: flex;
    align-items: center;
}

.sbc-ticker .ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Footer */
.site-footer {
    background-color: var(--sbc-surface);
    padding: 2rem 0;
    margin-top: 3rem;
    color: var(--sbc-text-secondary);
    font-size: 0.875rem;
}

.site-footer a { color: var(--sbc-accent); }

.site-footer .social-icons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.site-footer .social-icons a {
    font-size: 1.2rem;
    color: var(--sbc-text-secondary);
    transition: color var(--sbc-transition);
}

.site-footer .social-icons a:hover {
    color: var(--sbc-accent);
}

/* General utility classes */
.hidden { display: none !important; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.gap-2 { gap: 2rem; }
.gap-1 { gap: 1rem; }

/* -----------------------------------------------------------------------------
   Video grid styles used by [sbc_videos] shortcode
   ----------------------------------------------------------------------------- */
.sbc-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}
.sbc-video-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.sbc-video-item h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--sbc-text-primary);
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-inner {
        height: 64px;
    }
    #site-header.shrink .header-inner {
        height: 56px;
    }
    .primary-nav {
        display: none;
    }
    .mobile-menu-toggle {
        display: inline-block;
        font-size: 1.5rem;
        color: var(--sbc-text-primary);
        cursor: pointer;
    }
    .mobile-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100%;
        background-color: var(--sbc-surface);
        padding: 2rem;
        transition: right var(--sbc-transition);
        z-index: 1200;
    }
    .mobile-drawer.open {
        right: 0;
    }
    .mobile-drawer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .mobile-drawer a {
        color: var(--sbc-text-primary);
        font-size: 1.1rem;
        font-weight: 600;
    }
}