/*
Theme Name: TVpass Light
Version: 1.0.0
Description: Light theme matching the original TVpass look. White cards on light gray, blue headings, indigo CTA buttons. Upload via PageDrop > Theme Switcher.
*/

/* ============================================
   ROOT VARIABLE OVERRIDES (light palette)
   ============================================ */
:root {
    --bg-primary: #f0f2f5;
    --bg-secondary: #e8eaef;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;

    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-heading: #2563eb;

    --accent: #5b4fe0;
    --accent-hover: #4a3fd0;
    --accent-light: rgba(91, 79, 224, 0.12);
    --accent-glow: rgba(91, 79, 224, 0.25);

    --border: #e5e7eb;
    --border-light: #eef0f3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 16px var(--accent-glow);
}

/* ============================================
   COMPONENT FIXES (dark-hardcoded areas)
   ============================================ */

/* Header: dark rgba background hardcoded in base theme */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border);
}

/* Logo and nav readable on light header */
.site-logo,
.site-logo a {
    color: #1f2937;
}

.site-nav a {
    color: #4b5563;
}

.site-nav a:hover {
    color: var(--accent);
}

/* Footer on light alt background */
.site-footer {
    background: #e8eaef;
    border-top: 1px solid var(--border);
}

.site-footer,
.site-footer a {
    color: #4b5563;
}

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

/* Cards: white with soft shadow like the original channel cards */
.card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Buttons: white text stays readable on indigo */
.btn-primary {
    color: #ffffff;
}

.btn-outline {
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #ffffff;
}

/* Body text should not inherit heading blue */
p, li, td {
    color: var(--text-primary);
}

/* Inputs and forms on light background */
input, textarea, select {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid var(--border);
}

/* Blockquote and code blocks: light neutral instead of dark */
blockquote {
    background: #f6f7f9;
    color: #374151;
}

pre {
    background: #f3f4f6;
    color: #1f2937;
    border: 1px solid var(--border);
}

code {
    background: #eef0f3;
    color: #4338ca;
}

/* Tables */
table {
    background: #ffffff;
    border: 1px solid var(--border);
}

th {
    background: #f3f4f6;
    color: #1f2937;
}

tbody tr:hover {
    background: #f6f7f9;
}

/* Hero areas: soft light gradient instead of dark glow */
.hero, .hero-lg {
    background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
}

/* Badges keep readable contrast */
.badge {
    color: #ffffff;
}

/* Mobile menu drawer, if dark-hardcoded */
.site-nav-mobile, .mobile-menu {
    background: #ffffff;
    color: #1f2937;
}


/* ============================================
   TEXT LOGO WORDMARK (v1.0.1)
   Two-tone site title: "TV" dark + "pass" indigo,
   matching the brand logo. Requires: Customizer >
   logo image OFF, site title ON.
   ============================================ */
.site-title-text {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    color: #1f2937; /* fallback: solid dark if clip unsupported */
    background-image: linear-gradient(90deg, #1f2937 0%, #1f2937 37%, #5b4fe0 37%, #5b4fe0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* If the logo image is ever re-enabled, keep it tidy next to text */
.site-logo img {
    max-height: 44px;
    width: auto;
}