/* ==========================================================================
   THETVAPP THEME  -  thetvapp-theme-v-5
   Light skin for the PageDrop theme, matching the original TheTVApp palette:
   clean white surfaces, deep navy text, signature blue actions, red live accent.
   Drop-in: overrides PageDrop CSS variables and restyles core components.
   Includes the CSS-built TheTVApp logo and full light header/nav/footer fixes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (light palette, original TheTVApp colors)
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces - white first, cool gray steps */
    --bg-primary: #ffffff;
    --bg-secondary: #f4f7fb;
    --bg-card: #ffffff;
    --bg-elevated: #eef3f9;
    --bg-input: #f4f7fb;

    /* Text - deep navy, never pure black */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #7b8494;
    --text-heading: #0f1e35;

    /* Brand blue - the TheTVApp action color */
    --accent: #1d6ef2;
    --accent-hover: #0f57cc;
    --accent-light: rgba(29, 110, 242, 0.10);
    --accent-glow: rgba(29, 110, 242, 0.28);

    /* Live red - the "on air" signal color */
    --live: #e5342c;
    --live-soft: rgba(229, 52, 44, 0.12);

    /* Status colors tuned for light surfaces */
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;

    /* Borders and lines */
    --border: #dfe6ef;
    --border-light: #ecf1f7;

    /* Shadows - soft blue-gray, not black */
    --shadow-sm: 0 1px 2px rgba(15, 30, 53, 0.06);
    --shadow-md: 0 4px 14px rgba(15, 30, 53, 0.08);
    --shadow-lg: 0 12px 34px rgba(15, 30, 53, 0.12);
    --shadow-glow: 0 0 0 3px var(--accent-light), 0 8px 24px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   2. BASE SURFACES
   -------------------------------------------------------------------------- */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    text-wrap: balance; /* modern: no orphan words in headings */
}

p, li {
    text-wrap: pretty; /* modern: better rag on paragraphs */
}

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

::selection {
    background: var(--accent);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid var(--accent-glow);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. HERO  -  light sky wash with subtle grid, blue title gradient
   -------------------------------------------------------------------------- */
.hero,
.hero-lg {
    background:
        radial-gradient(60rem 24rem at 50% -8rem, rgba(29, 110, 242, 0.10), transparent 70%),
        linear-gradient(180deg, #f8fbff 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-light);
}

.hero h1,
.hero-lg h1 {
    background: linear-gradient(92deg, #0f1e35 0%, #14346b 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); /* fluid type */
    letter-spacing: -0.02em;
}

.hero .lead,
.hero-lg .lead {
    color: var(--text-secondary);
    font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. THE CSS-BUILT LOGO  -  no image file, pure CSS
   Usage:
     <span class="tvapp-logo"><span class="tvapp-logo-mark"></span>
       <span class="tvapp-logo-text">The<b>TV</b>App</span></span>
   Sizes: add .tvapp-logo-sm or .tvapp-logo-lg to the wrapper.
   -------------------------------------------------------------------------- */
.tvapp-logo {
    --logo-size: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    line-height: 1;
    text-decoration: none;
    user-select: none;
}
.tvapp-logo-sm { --logo-size: 28px; }
.tvapp-logo-lg { --logo-size: 64px; }

/* The mark: rounded TV screen, blue gradient, white play triangle, red live dot */
.tvapp-logo-mark {
    position: relative;
    width: var(--logo-size);
    height: calc(var(--logo-size) * 0.78);
    background: linear-gradient(135deg, var(--accent) 0%, #0f57cc 60%, #0b3f96 100%);
    border-radius: calc(var(--logo-size) * 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 calc(var(--logo-size) * 0.06) calc(var(--logo-size) * 0.22) var(--accent-glow);
    flex: none;
}
/* play triangle, centered, drawn with clip-path */
.tvapp-logo-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(var(--logo-size) * 0.34);
    height: calc(var(--logo-size) * 0.38);
    background: #ffffff;
    clip-path: polygon(8% 0%, 100% 50%, 8% 100%);
    transform: translateX(6%);
    filter: drop-shadow(0 1px 2px rgba(11, 63, 150, 0.45));
}
/* live dot, top-right corner, breathing */
.tvapp-logo-mark::after {
    content: "";
    position: absolute;
    top: calc(var(--logo-size) * -0.07);
    right: calc(var(--logo-size) * -0.07);
    width: calc(var(--logo-size) * 0.24);
    height: calc(var(--logo-size) * 0.24);
    background: var(--live);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    animation: tvapp-pulse 2.2s ease-in-out infinite;
}

/* The wordmark: The(navy) TV(blue gradient) App(navy) */
.tvapp-logo-text {
    font-weight: 800;
    font-size: calc(var(--logo-size) * 0.62);
    letter-spacing: -0.02em;
    color: var(--text-heading);
    white-space: nowrap;
}
.tvapp-logo-text b {
    font-weight: 900;
    color: var(--accent); /* solid blue TV, crisp at all sizes */
    padding: 0 0.03em;
}

/* Hover life on linked logos */
/* Linked logo: colors stay fixed on hover (subtle lift only, no color change) */
a.tvapp-logo { transition: transform var(--transition, 0.2s ease); }
a.tvapp-logo:hover { transform: translateY(-1px); }

@keyframes tvapp-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--live-soft); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 6px transparent; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS  -  blue primary with sheen sweep, clean outline secondary
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-md, 10px);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #2e7bff 0%, var(--accent) 55%, var(--accent-hover) 100%);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #ffffff;
}
.btn-primary:active { transform: translateY(0); }

/* sheen sweep on hover - pure CSS, no script */
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.45s ease;
}
.btn-primary:hover::after { left: 120%; }

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-heading);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background: #e3ebf5;
    border-color: var(--accent);
    color: var(--accent-hover);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}
.btn-outline:hover {
    background: var(--accent);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   6. CARDS  -  white, lifted on hover, blue top edge reveal
   -------------------------------------------------------------------------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
    background: linear-gradient(90deg, var(--accent), #6aa5ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: #cdd9e8;
}
.card:hover::before { transform: scaleX(1); }

.card-title { color: var(--text-heading); }
.card-text { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   7. BADGES AND TAGS  -  light pills, live-red variant, hoverable channel tags
   -------------------------------------------------------------------------- */
.badge {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full, 999px);
    font-weight: 600;
}
.badge-success { background: color-mix(in srgb, var(--success) 12%, white); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, white); }
.badge-warning { background: color-mix(in srgb, var(--warning) 12%, white); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, white); }
.badge-danger  { background: var(--live-soft); color: var(--live); border-color: color-mix(in srgb, var(--live) 30%, white); }
.badge-info    { background: color-mix(in srgb, var(--info) 12%, white); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, white); }

/* LIVE badge with breathing dot:  <span class="badge badge-danger badge-live">LIVE</span> */
.badge-live::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.45em;
    border-radius: 50%;
    background: var(--live);
    animation: tvapp-pulse 1.6s ease-in-out infinite;
    vertical-align: 0.05em;
}

.tag {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full, 999px);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.tag:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
    cursor: default;
}

/* --------------------------------------------------------------------------
   8. TABLES  -  the comparison and status tables
   -------------------------------------------------------------------------- */
table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
th {
    background: linear-gradient(180deg, #f2f6fc, #e9f0f9);
    color: var(--text-heading);
    border-bottom: 2px solid var(--border);
}
td { border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }
tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--accent-light); }
tbody tr:nth-child(even) { background: #fafcff; }
tbody tr:nth-child(even):hover { background: var(--accent-light); }

/* --------------------------------------------------------------------------
   9. LISTS, DIVIDERS, QUOTES
   -------------------------------------------------------------------------- */
.list-check li::marker { content: ""; }
.list-check li {
    position: relative;
    padding-left: 1.7em;
    list-style: none;
}
.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    background: var(--accent-light);
}
.list-check li::after {
    content: "";
    position: absolute;
    left: 0.28em;
    top: 0.52em;
    width: 0.5em;
    height: 0.28em;
    border-left: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    transform: rotate(-45deg);
}

.divider { border-color: var(--border); }
.divider-accent {
    border: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 3px;
}

blockquote {
    background: var(--bg-secondary);
    border-left: 4px solid var(--accent);
    color: var(--text-secondary);
    border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
}

/* --------------------------------------------------------------------------
   10. LINK UNDERLINE  -  animated gradient underline
   -------------------------------------------------------------------------- */
.link-underline {
    background: linear-gradient(90deg, var(--accent), #6aa5ff) left bottom / 0% 2px no-repeat;
    transition: background-size 0.25s ease, color 0.15s ease;
    padding-bottom: 2px;
    text-decoration: none;
}
.link-underline:hover {
    background-size: 100% 2px;
    color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   11. SECTION RHYTHM AND REVEAL
   -------------------------------------------------------------------------- */
.bg-secondary { background: var(--bg-secondary); }
.bg-card { background: var(--bg-card); }
.bg-elevated { background: var(--bg-elevated); }

.section { border-color: var(--border-light); }

/* fade-in cooperates with the theme's scroll trigger; graceful without it */
.fade-in {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* sticky-header friendliness for in-page anchors, without scroll properties */
h2[id], h3[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   12. FORMS AND SEARCH
   -------------------------------------------------------------------------- */
input, textarea, select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-md, 10px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    outline: none;
}
::placeholder { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. IMAGES
   -------------------------------------------------------------------------- */
.img-shadow { box-shadow: var(--shadow-lg); }
.img-border { border: 1px solid var(--border); }
.img-glow { box-shadow: 0 10px 30px var(--accent-glow); }
.img-rounded { border-radius: var(--radius-lg, 14px); }

/* --------------------------------------------------------------------------
   14. ACCESSIBILITY AND PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .btn, .hero .btn-group { display: none; }
    body { background: #ffffff; }
}

/* ==========================================================================
   15. HEADER, NAV AND FOOTER FIXES  (v-2)
   The base PageDrop theme hardcodes a dark header background; on the light
   palette that left dark text on a dark bar. These overrides make the whole
   chrome light: white glass header, readable nav, two-tone wordmark, light
   mobile chip bar, light dropdown, light footer.
   ========================================================================== */

/* Header bar: white glass instead of dark glass */
.site-header {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 10px rgba(15, 30, 53, 0.05);
}

/* Logo link readable on light bar */
.site-logo,
.site-logo a {
    color: var(--text-heading);
}
.site-logo:hover {
    color: var(--text-heading); /* fixed: logo does not change color on hover */
}
.site-logo img {
    max-height: 40px;
    width: auto;
}

/* Site-title wordmark.
   A raw text node cannot be split by glyph with a gradient (percentage stops
   do not line up with letter edges, which bled blue onto "The" and "App").
   Solution: use REAL SPANS. Recommended: set the header logo to custom HTML
   (PageDrop > Customizer > logo HTML, or a text widget) using:

     <a href="/" class="tvapp-wordmark">The<span>TV</span>App</a>

   That guarantees ONLY "TV" is blue. If you keep the plain site title instead,
   it renders in solid navy (clean, just single-color) via the fallback below. */
/* AUTO WORDMARK - works with the PLAIN site title, no HTML changes needed.
   PageDrop prints the raw site name inside .site-title-text; HTML spans cannot
   be injected there. Trick: hide the real text (font-size 0 keeps it readable
   for screen readers and SEO) and rebuild the three segments with flex-ordered
   pseudo elements: ::before "The" (navy) + title's own ::before "TV" (blue)
   + ::after "App" (navy). Result: The TV App in exact colors, automatically. */
.site-logo {
    gap: 0; /* segments sit flush */
}
.site-title-text {
    font-size: 0; /* hides raw title text, keeps it accessible */
    letter-spacing: normal;
    order: 2;
}
.site-logo::before,
.site-logo::after,
.site-title-text::before {
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    line-height: 1;
}
.site-logo::before {
    content: "The";
    color: var(--text-heading);
    order: 1;
}
.site-title-text::before {
    content: "TV";
    color: var(--accent);
}
.site-logo::after {
    content: "App";
    color: var(--text-heading);
    order: 3;
}
/* Colors stay fixed on hover */
.site-logo:hover::before,
.site-logo:hover::after {
    color: var(--text-heading);
}
.site-logo:hover .site-title-text::before {
    color: var(--accent);
}
/* If an image logo is enabled instead of the text title, disable the auto
   wordmark by removing the pseudo text next to it */
.site-logo:has(img)::before,
.site-logo:has(img)::after {
    content: none;
}

/* The correct two-tone wordmark, driven by a real span around TV */
.tvapp-wordmark {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    text-decoration: none;
    white-space: nowrap;
}
.tvapp-wordmark span {
    color: var(--accent);
}
.site-logo:hover .tvapp-wordmark,
.tvapp-wordmark:hover {
    color: var(--text-heading); /* fixed on hover */
}
.site-logo:hover .tvapp-wordmark span,
.tvapp-wordmark:hover span {
    color: var(--accent); /* TV stays blue on hover */
}

/* Desktop nav links: readable gray, blue pill on hover and current */
.site-nav-desktop a {
    color: var(--text-secondary);
}
.site-nav-desktop a:hover,
.site-nav-desktop .current-menu-item a,
.site-nav-desktop .current_page_item a {
    color: var(--accent-hover);
    background: var(--accent-light);
}

/* "More" overflow dropdown: light panel, soft shadow */
.site-nav-more-toggle {
    color: var(--text-secondary);
}
.site-nav-more-toggle:hover,
.site-nav-more.active .site-nav-more-toggle {
    color: var(--accent-hover);
    background: var(--accent-light);
}
.site-nav-more-menu {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.site-nav-more-menu a {
    color: var(--text-secondary);
}
.site-nav-more-menu a:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
}

/* Mobile chip bar: light strip, white chips, blue active chip */
@media (max-width: 768px) {
    .site-nav-chips {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
    }
    .site-nav-chips a {
        background: #ffffff;
        border: 1px solid var(--border);
        color: var(--text-secondary);
    }
    .site-nav-chips a:hover {
        border-color: var(--accent);
        color: var(--accent-hover);
    }
    .site-nav-chips .current-menu-item a,
    .site-nav-chips .current_page_item a {
        background: var(--accent);
        border-color: var(--accent);
        color: #ffffff;
    }
}

/* Footer: light alt surface, readable links */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}
.site-footer,
.site-footer p,
.site-footer .footer-text {
    color: var(--text-secondary);
}
.site-footer a,
.site-footer .footer-links a {
    color: var(--text-secondary);
}
.site-footer a:hover,
.site-footer .footer-links a:hover {
    color: var(--accent-hover);
}

/* Centered-logo header variant inherits the same light treatment */
.site-header-centered {
    background: rgba(255, 255, 255, 0.92);
}