/* ===================================================================
   TV Guide — Common Styles (themes loaded separately)
   =================================================================== */

:root {
  --sched-channel-col-width: 140px;
  --sched-hour-width: 260px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ProximaNova, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ===================================================================
   Heading Colors (per-theme via CSS custom properties)
   =================================================================== */

h1, .h1 { color: var(--text-heading-1, var(--text-heading)); }
h2, .h2 { color: var(--text-heading-2, var(--text-heading)); }
h3, .h3 { color: var(--text-heading-3, var(--text-heading)); }
h4, .h4 { color: var(--text-heading-4, var(--text-heading)); }

/* Dynamic channel pages render the same WordPress template parts as the home
   page. These rules only establish the page flow; no header/footer colors,
   typography, spacing, or navigation styles are overridden here. */
body.tv-guide-channel-page .wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.tv-guide-channel-page .tv-guide-channel-main {
  flex: 1 0 auto;
  min-height: 1px;
}
/* Layout */
.c-layoutDefault { max-width: 1440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.c-main { flex: 1; }

/* ===================================================================
   Header
   =================================================================== */

.c-siteHeader {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-strong);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
}

.c-siteHeader_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1360px;
  margin: 0 auto;
  height: 56px;
  width: 100%;
  gap: 0;
}

.c-siteHeader_logo,
.c-siteHeader .wp-block-site-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.c-siteHeader_logo a,
.c-siteHeader .wp-block-site-title a {
  color: var(--accent);
  text-decoration: none;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.c-siteHeader_nav { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; list-style: none; margin: 0; padding: 0; flex-shrink: 0; width: auto; }
.c-siteHeader_nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; align-items: center; }
.c-siteHeader_nav li { list-style: none; margin: 0; padding: 0; }
.c-siteHeader_navLink { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); transition: color 0.2s; white-space: nowrap; text-decoration: none; }
.c-siteHeader_navLink:hover { color: var(--accent); }

/* Burger menu — hidden on desktop */
.c-siteHeader_burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.375rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.c-siteHeader_burger:hover { background: var(--bg-hover); }

/* ===================================================================
   Footer
   =================================================================== */

.c-siteFooter {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-strong);
  padding: 1rem;
  margin-top: auto;
}
.c-siteFooter_inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-siteFooter_copyright {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}
.c-siteFooter_links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem; }
.c-siteFooter_links li { margin: 0; }
.c-siteFooter_links li:not(:last-child)::after { content: '|'; margin-left: 0.75rem; color: var(--text-secondary); }
.c-siteFooter_link { font-size: 0.8125rem; color: var(--text-faint); transition: color 0.2s; }
.c-siteFooter_link:hover { color: var(--text-inverse); }

/* ===================================================================
   Breadcrumbs
   =================================================================== */

.c-breadcrumb {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
  padding: 0.5rem 1rem;
}
.c-breadcrumb_inner {
  max-width: 1360px;
  margin: 0 auto;
}
.c-breadcrumb_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.c-breadcrumb_item {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
}
.c-breadcrumb_link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.c-breadcrumb_link:hover {
  color: var(--accent);
}
.c-breadcrumb_current {
  color: var(--text-primary);
  font-weight: 600;
}
.c-breadcrumb_sep {
  display: inline-flex;
  align-items: center;
  margin: 0 0.375rem;
  color: var(--text-muted);
}

/* ===================================================================
   Channel Listing Page
   =================================================================== */

.c-pageChannels { padding: 1.5rem 1rem; }
.c-pageChannels_header { margin-bottom: 1.5rem; }
.c-pageChannels_title { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.25rem; }
.c-pageChannels_subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

.c-countryFilter { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.c-countryFilter_btn { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border: 1px solid var(--border-strong); border-radius: 20px; font-size: 0.875rem; font-weight: 700; background: var(--bg-card); color: var(--text-primary); transition: all 0.2s; }
.c-countryFilter_btn:hover { background: var(--bg-page); }
.c-countryFilter_btn--active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.c-channelGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.c-channelCard { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; padding: 1rem; transition: all 0.2s; }
.c-channelCard:hover { border-color: var(--border-hover); box-shadow: 0 4px 16px var(--shadow-card); transform: translateY(-1px); }
.c-channelCard_avatar { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-channelCard_initials { font-size: 0.875rem; font-weight: 800; color: var(--text-inverse); }
.c-channelCard_info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.c-channelCard_name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-channelCard_country { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* ===================================================================
   Channel Page
   =================================================================== */

.c-channelPage { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem 2rem; }

.c-channelHero { padding: 2rem 0 1.25rem; }
.c-channelHero_name { font-size: 1.75rem; font-weight: 700; color: var(--text-heading); margin: 0; letter-spacing: -0.02em; }
.c-channelHero_subtitle { font-size: 0.9375rem; color: var(--text-secondary); margin: 0.5rem 0 0; line-height: 1.6; }

.tv-guide-channel-content { margin-top: 2rem; padding: 1.5rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 12px; color: var(--text-primary); line-height: 1.7; }

/* Channel layout — main + sidebar
   ------------------------------------------------------------------
   Layout strategy (no CLS, no reflow, sidebar visible from first paint):
   - The flex container reserves 300px for the sidebar from the very
     first paint. The sidebar's BOX is always present and always
     measured by the flex algorithm. This means .c-channelMain always
     has the same width (100% - 300px - 2rem gap) from the very first
     paint, so program cards and inline ads NEVER move.
   - The sidebar's CONTAINER is fully visible from the first paint.
     We do NOT use opacity:0, visibility:hidden, display:none, or any
     transform on the sidebar container. The previous approach of
     hiding the container and fading it in caused Live Now and
     Related Channels to appear blank if JS failed or was delayed.
   - If async-loaded content (e.g. the Live Now list when fetched via
     the API) is not yet available, a SKELETON PLACEHOLDER is shown
     inside the sidebar instead. The placeholder occupies the same
     dimensions as the final content, so the sidebar's height never
     changes when the real data arrives — again, zero CLS.
   - We do NOT animate any layout property (width, flex-basis, gap,
     margin, height). Only opacity is animated on the skeleton
     shimmer, which is compositor-only and cannot trigger reflow.
*/
.c-channelLayout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.c-channelMain {
  flex: 1 1 0%;
  min-width: 0;
  /* NOTE: do not set width:100% here — it conflicts with flex-basis:0
     and can confuse some browsers' flex resolvers. flex:1 alone gives
     the main column all remaining horizontal space. */
}
.c-channelSidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  margin-top: 1.5rem;
  /* Always visible from first paint. No opacity, visibility, or
     display manipulation here. The sidebar's children may use
     skeletons while async data loads, but the container itself
     is never hidden. */
  /* Safety net: ensure the sidebar always has a visible vertical
     presence even if all its content fails to render. This
     prevents the flexbox from collapsing the sidebar to 0 height
     and making the main column appear to take "full page width". */
  min-height: 200px;
}

/* Sidebar sections */
.c-sidebarSection { margin-bottom: 1.5rem; width: 100%; box-sizing: border-box; }
.c-sidebarTitle {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.c-sidebarTitle_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: c-pulse 1.5s ease-in-out infinite;
}

/* Live Now cards */
.c-sidebarLiveList { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; box-sizing: border-box; }
.c-sidebarLoading { font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0; }

.c-sidebarLiveCard {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.c-sidebarLiveCard:hover {
  border-color: var(--text-faint);
  box-shadow: 0 2px 8px var(--shadow-card-subtle);
}
.c-sidebarLiveCard_channel {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.c-sidebarLiveCard_title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 0.125rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-sidebarLiveCard_time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.c-sidebarLiveCard_badge {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.375rem;
}

/* Related Channels */
.c-sidebarRelatedList {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.c-sidebarRelatedCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  text-decoration: none;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border-subtle);
}
.c-sidebarRelatedCard:last-child { border-bottom: none; }
.c-sidebarRelatedCard:hover { background: var(--bg-hover); }
.c-sidebarRelatedCard_name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}
.c-sidebarRelatedCard_arrow { color: var(--text-faint); flex-shrink: 0; }
.c-sidebarRelatedCard:hover .c-sidebarRelatedCard_arrow { color: var(--text-dim); }

/* Skeleton variant of the Live Now card. Used as a placeholder while
   the Live Now API call is in flight. Same outer dimensions as a real
   .c-sidebarLiveCard so the sidebar's height does not change when the
   real data arrives — zero CLS. */
.c-sidebarLiveCard--skeleton {
  cursor: default;
  pointer-events: none;
}
.c-sidebarLiveCard--skeleton .c-skeletonSidebarChannel,
.c-sidebarLiveCard--skeleton .c-skeletonSidebarTitle,
.c-sidebarLiveCard--skeleton .c-skeletonSidebarTime {
  border-radius: 4px;
}

/* ===================================================================
   EPG Controls (shared between channel page and schedule page)
   =================================================================== */

.c-epgControls { margin-bottom: 1.5rem; }
.c-epgControls_row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Timezone selector — pushed to far right, same height as date picker */
.c-epgTimezone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
  height: 42px;
  box-sizing: border-box;
}
.c-epgTimezone_label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.c-epgTimezone_select {
  border: none;
  border-radius: 6px;
  background: var(--bg-hover);
  padding: 0.3rem 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.c-epgTimezone_select:hover { background: var(--border-default); }
.c-epgTimezone_select:focus { outline: none; background: var(--border-default); }

.c-epgDayPicker { display: flex; align-items: center; gap: 0.25rem; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 0.375rem; overflow-x: auto; }
.c-epgDayPicker_days { display: flex; gap: 0.25rem; }
.c-epgDayBtn { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: all 0.15s; flex-shrink: 0; }
.c-epgDayBtn_icon { width: 20px; height: 20px; fill: currentColor; }
.c-epgDayBtn--nav { padding: 0.4rem; border-radius: 8px; }
.c-epgDayBtn--nav:hover { background: var(--bg-hover); color: var(--text-heading); }
.c-epgDayBtn--day { flex-direction: column; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.75rem; line-height: 1.3; min-width: 52px; font-weight: 500; }
.c-epgDayBtn--day:hover { background: var(--bg-hover); color: var(--text-heading); }
.c-epgDayBtn--active { background: var(--bg-active); color: var(--text-inverse); }
.c-epgDayBtn--active:hover { background: var(--bg-active-hover); color: var(--text-inverse); }
.c-epgDayBtn_date { font-size: 1rem; font-weight: 700; }
.c-epgDateLabel { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.75rem; text-align: center; }

/* ===================================================================
   EPG Loading / Error / Buttons (shared)
   =================================================================== */

.c-epgLoading { display: none; padding: 0; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; }
.c-scheduleLoading { display: none; }
@keyframes c-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===================================================================
   Skeleton Loading
   =================================================================== */

@keyframes c-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.c-skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: c-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

.c-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.c-skeleton-text--title {
  height: 20px;
  width: 60%;
  margin-bottom: 10px;
}
.c-skeleton-text--short {
  width: 40%;
}
.c-skeleton-text--medium {
  width: 70%;
}
.c-skeleton-text--full {
  width: 100%;
}

.c-skeleton-circle {
  border-radius: 50%;
}

/* Day picker skeleton */
.c-skeletonDayPicker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.375rem;
  overflow: hidden;
}
.c-skeletonDayBtn {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  flex-shrink: 0;
}
.c-skeletonDayBtn--nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Timezone select skeleton */
.c-skeletonTimezone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.375rem 0.75rem;
  flex-shrink: 0;
  height: 42px;
  box-sizing: border-box;
}
.c-skeletonTimezone_label {
  width: 60px;
  height: 10px;
  border-radius: 4px;
}
.c-skeletonTimezone_select {
  width: 120px;
  height: 28px;
  border-radius: 6px;
}

/* Schedule grid skeleton */
.c-skeletonScheduleRow {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 96px;
  width: 100%;
  box-sizing: border-box;
}
.c-skeletonScheduleLabel {
  width: var(--sched-channel-col-width, 140px);
  min-width: var(--sched-channel-col-width, 140px);
  flex-shrink: 0;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border-column);
  background: var(--bg-subtle);
}
.c-skeletonSchedulePrograms {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 8px;
  align-items: center;
  overflow: hidden;
}
.c-skeletonProgramBlock {
  height: 52px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* EPG list skeleton */
.c-skeletonEpgRow {
  display: flex;
  align-items: flex-start;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}
.c-skeletonEpgRow:last-child { border-bottom: none; }
.c-skeletonEpgTime {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  padding: 0 0 0 1.25rem;
}
.c-skeletonEpgDivider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
  margin: 0 1rem;
  flex-shrink: 0;
}
.c-skeletonEpgInfo {
  flex: 1;
  min-width: 0;
  padding-right: 1.25rem;
}

/* Sidebar skeleton */
.c-skeletonSidebarCard {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.75rem;
}
.c-skeletonSidebarChannel {
  height: 10px;
  width: 50%;
  margin-bottom: 6px;
}
.c-skeletonSidebarTitle {
  height: 14px;
  width: 80%;
  margin-bottom: 4px;
}
.c-skeletonSidebarTime {
  height: 10px;
  width: 40%;
}

.c-skeletonRelatedCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.c-skeletonRelatedCard:last-child { border-bottom: none; }

.c-epgError { text-align: center; padding: 2rem 1rem; color: var(--text-secondary); }
.c-epgError p { margin: 0 0 1rem; }

.c-btn { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; background: var(--bg-active); color: var(--text-inverse); border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.c-btn:hover { background: var(--bg-active-hover); }

/* ===================================================================
   EPG Timeline List (Channel Page)
   =================================================================== */

.c-epgListWrap {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 0.25rem 0;
  overflow: visible;
}

.c-epgList { display: flex; flex-direction: column; width: 100%; }

/* Ad between programs - MUST BE VISIBLE
   ------------------------------------------------------------------
   This is a flex item inside .c-epgList (flex column). Two rules
   are critical for keeping the ad visible at all times:
     1. flex-shrink: 0  — prevents the flex algorithm from vertically
        shrinking the ad when the column's total content height would
        otherwise exceed the container. Without this, the ad can be
        squashed to a sliver and effectively hidden.
     2. display: block  — kept as block (not flex) so the inner ad
        network HTML (iframes, scripts) lays out predictably. The ad
        still works as a flex ITEM; the display value only controls
        its own internal layout context.
   The width:100% + box-sizing:border-box pair makes the ad fill the
   full width of the column (cross-axis stretch would do this too,
   but being explicit avoids surprises if align-items ever changes).
   visibility/opacity are pinned with !important as a defensive
   measure so no inherited or future style can accidentally hide
   the ad.
*/
.c-epgList .ad-native-banner {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  box-sizing: border-box;
  margin: 15px 0;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Now indicator — subtle bar between programs */
.c-epgNowBar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  margin: 0.25rem 0;
}
.c-epgNowBar_line { flex: 1; height: 1px; background: var(--accent); }
.c-epgNowBar_label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Program row */
.c-epgRow {
  display: flex;
  align-items: flex-start;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
}
.c-epgRow:last-child { border-bottom: none; }
.c-epgRow:hover { background: var(--bg-subtle); }

/* Now-playing row highlight */
.c-epgRow--now {
  background: var(--bg-now-row);
}
.c-epgRow--now:hover { background: var(--bg-now-row-hover); }

/* Time column — fixed width */
.c-epgRow_time {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0 0 0 1.25rem;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* Now-playing time — red accent */
.c-epgRow--now .c-epgRow_time { color: var(--accent); }

/* Vertical divider */
.c-epgRow_divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
  margin: 0 1rem;
  flex-shrink: 0;
}

/* Program info — right side */
.c-epgRow_info { flex: 1; min-width: 0; }

.c-epgRow_title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 0.125rem;
  line-height: 1.4;
}

/* Now-playing title — red accent */
.c-epgRow--now .c-epgRow_title { color: var(--accent); }

.c-epgRow_meta {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.c-epgRow_desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.25rem 1.25rem 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===================================================================
   Static Schedule Table (noscript fallback for SEO)
   =================================================================== */

.c-scheduleGridStatic {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.c-scheduleGridStatic h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 1rem;
}
.c-scheduleTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.c-scheduleTable th {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.c-scheduleTable td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.c-scheduleTable tr:hover td {
  background: var(--bg-subtle);
}
.c-scheduleTable_channel {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.c-scheduleTable_channel:hover {
  text-decoration: underline;
}
.c-scheduleTable_program {
  font-weight: 500;
}
.c-scheduleTable_time {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.c-scheduleTable_next {
  color: var(--text-muted);
}
.c-scheduleTable_noData {
  color: var(--text-dim);
  font-style: italic;
}
.c-scheduleTable_note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Static EPG list (channel page noscript) */
.c-epgListStatic {
  margin-top: 1.5rem;
}
.c-epgListStatic h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 1rem;
}
.c-epgStatic_note {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Error page */
.c-error { text-align: center; padding: 3rem 1rem; }
.c-error h2 { color: var(--text-secondary); margin: 0 0 1rem; }

/* 404 Page */
.c-errorPage {
  text-align: center;
  padding: 4rem 1.5rem;
  max-width: 500px;
  margin: 0 auto;
}
.c-errorPage_code {
  font-size: 6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.2;
}
.c-errorPage_title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.75rem;
}
.c-errorPage_text {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 2rem;
  line-height: 1.6;
}

/* Static Pages */
.c-staticPage { padding: 2rem 1.5rem; max-width: 800px; margin: 0 auto; }
.c-staticPage_title { font-size: 1.75rem; font-weight: 700; color: var(--text-heading); margin: 0 0 0.5rem; }
.c-staticPage_subtitle { font-size: 1rem; color: var(--text-secondary); margin: 0 0 2rem; }
.c-staticPage_intro { font-size: 1.0625rem; color: var(--text-primary); line-height: 1.7; margin-bottom: 2rem; }
.c-staticPage_content { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.8; }
.c-staticPage_content h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-heading); margin: 2rem 0 0.75rem; }
.c-staticPage_content p { margin: 0 0 1rem; }
.c-staticPage_seo { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-default); font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

/* Contact Form */
.c-contactForm { margin-top: 1.5rem; }
.c-contactForm_row { display: flex; gap: 1rem; }
.c-contactForm_row .c-contactForm_group { flex: 1; }
.c-contactForm_group { margin-bottom: 1.25rem; }
.c-contactForm_label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}
.c-contactForm_input,
.c-contactForm_textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.c-contactForm_input:focus,
.c-contactForm_textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.c-contactForm_textarea { resize: vertical; min-height: 120px; }
.c-contactForm_submit { margin-top: 0.5rem; }
.c-contactSuccess {
  text-align: center;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  margin-top: 1.5rem;
}
.c-contactSuccess p { font-size: 1.125rem; color: var(--text-primary); margin: 0 0 1.5rem; }
.c-contactError {
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .c-contactError,
[data-theme="dim"] .c-contactError,
[data-theme="oled"] .c-contactError,
[data-theme="contrast"] .c-contactError {
  background: #2a1520;
  border-color: #5a2030;
  color: #fca5a5;
}
@media (max-width: 640px) {
  .c-contactForm_row { flex-direction: column; gap: 0; }
}

/* Schedule Sections */
.c-scheduleSection { margin: 1.5rem 0; }
.c-scheduleSectionTitle { font-size: 1.125rem; font-weight: 700; color: var(--text-heading); margin: 0 0 1rem; }
.c-scheduleSectionContent { font-size: 0.9375rem; color: var(--text-primary); line-height: 1.7; }

/* FAQ */
.c-faqList { display: flex; flex-direction: column; gap: 1rem; }
.c-faqItem { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 1rem 1.25rem; }
.c-faqQuestion { font-size: 0.9375rem; font-weight: 600; color: var(--text-heading); margin: 0 0 0.5rem; }
.c-faqAnswer { font-size: 0.875rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* ===================================================================
   Schedule Grid Page (index.php)

   Layout structure:
   ┌──────────────────────────────────────────────────────────┐
   │  .c-scheduleScroll  (overflow-x: auto)                   │
   │  ┌──────────────┬───────────────────────────────────────┐│
   │  │ Time Header  │  Hour slots (scrolls with content)    ││
   │  │ (sticky)     │  [4PM][5PM][6PM][7PM][8PM][9PM]      ││
   │  ├──────────────┼───────────────────────────────────────┤│
   │  │ Channel Name │  Program blocks (absolute positioned) ││
   │  │ (sticky)     │  [====Program A====][==Program B==]   ││
   │  ├──────────────┼───────────────────────────────────────┤│
   │  │ Channel Name │  ...                                  ││
   │  │ (sticky)     │                                       ││
   │  └──────────────┴───────────────────────────────────────┘│
   │                                                          │
   │  .c-scheduleNowLine (absolute, z-index:10)               │
   │  .c-scheduleNowLabel (absolute, z-index:11)              │
   └──────────────────────────────────────────────────────────┘

   Key constants (set via JS CSS custom properties):
   - --sched-channel-col-width: 140px (desktop), 90px (mobile)
   - --sched-hour-width: 260px (1 hour = 260px)
   - Timeline total width = number-of-hours * --sched-hour-width
   =================================================================== */

/* Keep the WordPress schedule at the same 1440px content width as the
   Tv Guide -Multi Domain .c-layoutDefault container. */
:root { --tv-guide-schedule-max-width: 1440px; }
.wp-block-group.is-layout-constrained:has(> .c-schedulePage) {
  width: min(100%, var(--tv-guide-schedule-max-width));
  max-width: var(--tv-guide-schedule-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-group.is-layout-constrained > .c-schedulePage,
.c-schedulePage {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tv-guide-schedule-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem 2rem;
}
.c-scheduleHeader { margin-bottom: 1.25rem; }
.c-scheduleHeader_title { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.25rem; }
.c-scheduleHeader_subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

.c-scheduleLoading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--text-secondary); }
.c-scheduleError { text-align: center; padding: 2rem 1rem; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 12px; max-width: 400px; margin: 2rem auto; }
.c-scheduleError p { color: var(--text-secondary); margin: 0 0 1rem; }

/* Home page bottom content */
.c-homeBottomContent {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.8;
}
.c-homeBottomContent h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 2rem 0 0.75rem;
}
.c-homeBottomContent h2:first-child { margin-top: 0; }
.c-homeBottomContent p { margin: 0 0 1rem; }
.c-homeBottomContent ul, .c-homeBottomContent ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.c-homeBottomContent li { margin-bottom: 0.5rem; }

/* Grid container */
.c-scheduleGridContainer {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
}

/* Scroll container */
.c-scheduleScroll {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

/* Time Header */
.c-scheduleTimeHeader {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border-strong);
}

/* Sticky channel label placeholder */
.c-scheduleTimeHeader_label {
  width: var(--sched-channel-col-width, 140px);
  min-width: var(--sched-channel-col-width, 140px);
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-column);
  position: sticky;
  left: 0;
  z-index: 25;
}

/* Hour slots container — scrolls with the timeline */
.c-scheduleTimeHeader_slots {
  display: flex;
  flex-shrink: 0;
}

.c-scheduleTimeSlot {
  width: var(--sched-hour-width, 260px);
  min-width: var(--sched-hour-width, 260px);
  flex-shrink: 0;
  padding: 0.5rem 0.25rem;
  text-align: center;
  border-right: 1px solid var(--border-column);
  position: relative;
}

.c-scheduleTimeSlot:last-child { border-right: none; }

.c-scheduleTimeSlot_label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

.c-scheduleTimeSlot--now .c-scheduleTimeSlot_label {
  color: var(--accent);
}

/* Vertical now-line indicator within the time header */
.c-scheduleTimeHeader_nowLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 30;
  pointer-events: none;
  display: none;
}

/* ------------------------------------------------------------------
   Channel Row
   ------------------------------------------------------------------ */
.c-scheduleRow {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 96px;
}

.c-scheduleRow:last-child { border-bottom: none; }

/* Sticky channel label */
.c-scheduleRow_label {
  width: var(--sched-channel-col-width, 140px);
  min-width: var(--sched-channel-col-width, 140px);
  flex-shrink: 0;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border-column);
  background: var(--bg-subtle);
  position: sticky;
  left: 0;
  z-index: 15;
}

.c-scheduleRow_name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.c-scheduleRow_name:hover { color: var(--accent); }

/* Programs container — positioned absolutely, width set by JS */
.c-scheduleRow_programs {
  flex-shrink: 0;
  position: relative;
  min-height: 96px;
}

/* ------------------------------------------------------------------
   Program Block
   Positioned absolutely within .c-scheduleRow_programs.
   left and width are calculated in JS using:
     left  = (programOffsetMinutes / 60) * hourWidth
     width = (programDurationMinutes / 60) * hourWidth
   ------------------------------------------------------------------ */
.c-scheduleProgram {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  background: var(--program-bg);
  border: 1px solid var(--program-border);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 4px;
  text-decoration: none;
  color: inherit;
}

.c-scheduleProgram:hover {
  background: var(--program-bg-hover);
  border-color: var(--program-border-hover);
  z-index: 5;
}

.c-scheduleProgram--live {
  background: var(--program-live-bg);
  border-color: var(--program-live-border);
}

.c-scheduleProgram--live:hover {
  background: var(--program-live-bg-hover);
  border-color: var(--program-live-border-hover);
}

.c-scheduleProgram_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.c-scheduleProgram_time {
  font-size: 0.875rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-scheduleProgram--live .c-scheduleProgram_title { color: var(--accent); }

.c-scheduleNowLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  z-index: 10;
  pointer-events: none;
  display: none;
}

/* Red dot at the top of the now-line */
.c-scheduleNowLine::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Current time label badge — shows HH:MM.
   z-index:11 — just above the now-line (z:10). */
.c-scheduleNowLabel {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 11;
  pointer-events: none;
  display: none;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   Schedule Skeleton Loader
   ------------------------------------------------------------------ */
.c-scheduleSkeleton {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  animation: schedSkelFadeIn 0.2s ease;
}

@keyframes schedSkelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.c-scheduleSkeleton_header {
  display: flex;
  background: var(--bg-subtle);
  border-bottom: 2px solid var(--border-strong);
}

.c-scheduleSkeleton_row {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 96px;
}

.c-scheduleSkeleton_label {
  flex-shrink: 0;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border-column);
  background: var(--bg-subtle);
}

.c-scheduleSkeleton_slots {
  display: flex;
  flex-shrink: 0;
}

.c-scheduleSkeleton_slot {
  padding: 0.5rem 0.25rem;
  border-right: 1px solid var(--border-column);
  display: flex;
  align-items: center;
}

.c-scheduleSkeleton_progs {
  flex-shrink: 0;
  position: relative;
  min-height: 96px;
}

.c-scheduleSkeleton_prog {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
}

.c-scheduleSkeleton_bar {
  border-radius: 4px;
  background: var(--bg-hover);
  animation: schedSkelPulse 1.5s ease-in-out infinite;
}

.c-scheduleSkeleton_bar--name {
  width: 70%;
  height: 0.75rem;
}

.c-scheduleSkeleton_bar--time {
  width: 50%;
  height: 0.625rem;
}

.c-scheduleSkeleton_bar--title {
  width: 75%;
  height: 0.875rem;
}

.c-scheduleSkeleton_prog .c-scheduleSkeleton_bar--time {
  width: 40%;
  height: 0.6875rem;
}

@keyframes schedSkelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ===================================================================
   Responsive — Tablet (≤ 768px)
   =================================================================== */

@media (max-width: 768px) {
  :root {
    --sched-channel-col-width: 100px;
    --sched-hour-width: 200px;
  }

  .c-scheduleHeader_title { font-size: 1.375rem; }
  .c-scheduleRow { min-height: 80px; }
  .c-scheduleRow_programs { min-height: 80px; }
  .c-scheduleRow_name { font-size: 0.8125rem; }
  .c-scheduleProgram_title { font-size: 0.9375rem; }
  .c-scheduleProgram_time { font-size: 0.8125rem; }

  /* Tablet channel page */
  .c-channelLayout { gap: 1.5rem; }
  .c-channelSidebar { width: 260px; }

  /* Tablet static pages */
  .c-staticPage { padding: 1.5rem 1.25rem; }
}

/* ===================================================================
   Responsive — Mobile (≤ 640px)
   =================================================================== */

@media (max-width: 640px) {
  :root {
    --sched-channel-col-width: 80px;
    --sched-hour-width: 160px;
  }

  /* Mobile header */
  .c-siteHeader_logo { font-size: 1rem; letter-spacing: 1px; }
  .c-siteHeader_burger { display: flex; }
  .c-siteHeader_nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-strong);
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    z-index: 99;
  }
  .c-siteHeader_nav.is-open { display: flex; }
  .c-siteHeader_navLink {
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .c-siteHeader_navLink:last-child { border-bottom: none; }

  /* Mobile breadcrumbs */
  .c-breadcrumb { padding: 0.375rem 0.75rem; }
  .c-breadcrumb_item { font-size: 0.6875rem; }
  .c-breadcrumb_sep { margin: 0 0.25rem; }

  /* Mobile schedule page */
  .c-schedulePage { padding: 1rem 0.5rem 1.5rem; }
  .c-scheduleHeader_title { font-size: 1.25rem; }
  .c-scheduleRow_label { padding: 0.375rem 0.5rem; }
  .c-scheduleRow_name { font-size: 0.75rem; }
  .c-scheduleRow { min-height: 72px; }
  .c-scheduleRow_programs { min-height: 72px; }
  .c-scheduleProgram { padding: 0.25rem 0.5rem; }
  .c-scheduleProgram_title { font-size: 0.8125rem; }
  .c-scheduleProgram_time { font-size: 0.75rem; }
  .c-scheduleTimeSlot_label { font-size: 0.625rem; }
  .c-scheduleTimeHeader_label { font-size: 0.5625rem; }

  /* Mobile channel page */
  .c-channelPage { padding: 0 1rem 2rem; }
  .c-channelHero { padding: 1.5rem 0 1rem; }
  .c-channelHero_name { font-size: 1.375rem; }
  .c-channelLayout { flex-direction: column; gap: 1.5rem; }
  /* On mobile the sidebar stacks below the main content. The sidebar
     is still fully visible (no opacity/visibility tricks anywhere),
     it just takes 100% width like the main column. */
  .c-channelSidebar { width: 100%; position: static; }
  .c-epgControls_row { flex-direction: column; align-items: stretch; }
  .c-epgDayPicker { overflow-x: hidden; flex-wrap: wrap; justify-content: center; width: 100%; box-sizing: border-box; }
  .c-epgDayBtn--day { min-width: 42px; padding: 0.375rem 0.5rem; }
  .c-epgDayBtn_date { font-size: 0.875rem; }
  .c-epgTimezone { padding: 0.25rem 0.625rem; width: 100%; box-sizing: border-box; margin-left: 0; justify-content: center; }
  .c-epgTimezone_label { font-size: 0.625rem; }
  .c-epgTimezone_select { font-size: 0.75rem; padding: 0.25rem 0.4rem; }
  .c-epgRow_time { width: 64px; min-width: 64px; font-size: 0.875rem; }
  .c-epgRow_divider { margin: 0 0.75rem; }
  .c-epgRow_title { font-size: 0.9375rem; }
  .c-epgRow_meta { font-size: 0.75rem; }
  .c-channelGrid { grid-template-columns: 1fr; }
  .tv-guide-channel-content { padding: 1.25rem; }

  /* Mobile static pages */
  .c-staticPage { padding: 1.25rem 1rem; }
  .c-staticPage_title { font-size: 1.375rem; }
  .c-staticPage_subtitle { font-size: 0.875rem; margin-bottom: 1.25rem; }
  .c-staticPage_intro { font-size: 0.9375rem; }
  .c-staticPage_content { font-size: 0.875rem; }
  .c-staticPage_content h2 { font-size: 1.125rem; }

  /* Mobile footer */
  .c-siteFooter { padding: 1.25rem 1rem; }
  .c-siteFooter_links { gap: 0.5rem; }
  .c-siteFooter_link { font-size: 0.75rem; }
  .c-siteFooter_links li:not(:last-child)::after { margin-left: 0.5rem; }

  /* Mobile 404 page */
  .c-errorPage { padding: 2rem 1rem; }
  .c-errorPage_code { font-size: 4rem; }
  .c-errorPage_title { font-size: 1.375rem; }

  /* Mobile contact form */
  .c-contactForm_row { flex-direction: column; gap: 0; }

  /* Mobile home bottom content */
  .c-homeBottomContent { padding: 1.25rem; font-size: 0.875rem; }
  .c-homeBottomContent h2 { font-size: 1.125rem; }
}

/* ===================================================================
   Responsive — Very small screens (≤ 480px)
   =================================================================== */

@media (max-width: 480px) {
  :root {
    --sched-channel-col-width: 64px;
    --sched-hour-width: 130px;
  }

  .c-scheduleRow { min-height: 64px; }
  .c-scheduleRow_programs { min-height: 64px; }
  .c-scheduleTimeHeader_label { display: none; }
  .c-scheduleRow_label { width: 64px; min-width: 64px; }

  /* Extra small static pages */
  .c-staticPage { padding: 1rem 0.75rem; }
  .c-staticPage_title { font-size: 1.25rem; }

  /* Extra small channel page */
  .c-channelHero_name { font-size: 1.25rem; }
  .c-epgRow_time { width: 56px; min-width: 56px; font-size: 0.8125rem; }
}

/* ===================================================================
   Home page (schedule) block header — bridge to TV Guide theme colors
   =================================================================== */
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part {
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 100;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
  background-color: transparent !important;
  background: transparent !important;
  color: inherit;
  padding: 0 1rem !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-base-background-color,
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background {
  background-color: transparent !important;
  background: transparent !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part > .wp-block-group > .wp-block-group {
  max-width: 1360px;
  margin: 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  min-height: 56px;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-site-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-site-title a {
  color: var(--accent) !important;
  text-decoration: none;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-site-logo {
  margin: 0;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a,
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation-item {
  color: var(--text-primary) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a:hover {
  color: var(--accent) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container-open,
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container-close {
  color: var(--text-primary) !important;
}

/* Home page mobile navigation responsive container */
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container {
  background-color: var(--bg-card) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--bg-card) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
  background-color: var(--bg-card) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container a {
  color: var(--text-primary) !important;
}
body.tv-guide-schedule-page .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container a:hover {
  color: var(--accent) !important;
}

/* Footer bridge for home/schedule page */
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--bg-footer);
  border-top: 1px solid var(--border-strong);
  padding: 1rem;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part > .wp-block-group {
  background-color: transparent !important;
  color: inherit;
  padding: 0 !important;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part > .wp-block-group > .wp-block-group {
  max-width: 1360px;
  margin: 0 auto;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part :is(h1, h2, h3, h4, h5, h6) {
  display: none !important;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part .wp-block-site-title {
  display: none !important;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part :is(p, li, .wp-block-navigation a) {
  color: var(--text-secondary) !important;
  font-size: 0.8125rem;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part .wp-block-navigation {
  display: none !important;
}
body.tv-guide-schedule-page .wp-site-blocks > footer.wp-block-template-part a:hover {
  color: var(--accent) !important;
}

/* ===================================================================
   Block Theme — TV Guide Header/Footer Bridge
   Makes WordPress block theme HTML templates render with TV Guide styling
   =================================================================== */

/* Header bridge: WordPress block header → TV Guide .c-siteHeader */
.c-siteHeader {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-strong);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.c-siteHeader .c-siteHeader_inner,
.wp-block-group.c-siteHeader > .c-siteHeader_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1360px;
  margin: 0 auto;
  height: 56px;
}

/* Site title block → TV Guide logo */
.c-siteHeader .wp-block-site-title,
.c-siteHeader .c-siteHeader_logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}
.c-siteHeader .wp-block-site-title a {
  color: var(--accent) !important;
  text-decoration: none;
}

/* Navigation block → TV Guide nav */
.c-siteHeader .wp-block-navigation,
.c-siteHeader .c-siteHeader_nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  width: auto !important;
}
.c-siteHeader .wp-block-navigation ul,
.c-siteHeader .wp-block-navigation ul.wp-block-navigation__container {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: auto !important;
}
.c-siteHeader .wp-block-navigation li,
.c-siteHeader .wp-block-navigation .wp-block-navigation-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.c-siteHeader .wp-block-navigation li::before,
.c-siteHeader .wp-block-navigation .wp-block-navigation-item::before {
  display: none !important;
  content: none !important;
}
.c-siteHeader .wp-block-navigation a,
.c-siteHeader .c-siteHeader_nav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.2s;
  white-space: nowrap;
  text-decoration: none;
  padding: 0;
}
.c-siteHeader .wp-block-navigation a:hover,
.c-siteHeader .c-siteHeader_nav a:hover {
  color: var(--accent);
}

/* Mobile navigation container */
.c-siteHeader .wp-block-navigation__responsive-container {
  background-color: var(--bg-card) !important;
}
.c-siteHeader .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--bg-card) !important;
}
.c-siteHeader .wp-block-navigation__responsive-container a {
  color: var(--text-primary) !important;
}
.c-siteHeader .wp-block-navigation__responsive-container a:hover {
  color: var(--accent) !important;
}
.c-siteHeader .wp-block-navigation__responsive-container-open,
.c-siteHeader .wp-block-navigation__responsive-container-close {
  color: var(--text-primary) !important;
}

/* Burger menu for mobile */
.c-siteHeader .c-siteHeader_burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.375rem;
  border-radius: 6px;
}
.c-siteHeader .c-siteHeader_burger:hover {
  background: var(--bg-hover);
}

/* Kill WordPress navigation block default bullet points — ALL pages */
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation ul,
.wp-block-navigation ul.wp-block-navigation__container,
.wp-block-navigation li,
nav ul, nav li, .c-siteHeader nav ul, .c-siteHeader nav li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}
.wp-block-navigation .wp-block-navigation-item::before,
.wp-block-navigation li::before,
.c-siteHeader nav li::before,
nav > ul > li::before {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
}
.wp-block-navigation ul.wp-block-navigation__container,
.c-siteHeader nav ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.wp-block-navigation-item,
.c-siteHeader nav li {
  list-style: none !important;
}

/* Footer bridge: WordPress block footer → TV Guide .c-siteFooter */
.c-siteFooter {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-strong);
  padding: 1rem;
  margin-top: auto;
}
.c-siteFooter .c-siteFooter_inner,
.wp-block-group.c-siteFooter > .c-siteFooter_inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-siteFooter .c-siteFooter_copyright,
.c-siteFooter p.c-siteFooter_copyright {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* Footer navigation links */
.c-siteFooter .wp-block-navigation,
.c-siteFooter .c-siteFooter_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-siteFooter .wp-block-navigation a {
  font-size: 0.8125rem;
  color: var(--text-faint);
  transition: color 0.2s;
  text-decoration: none;
}
.c-siteFooter .wp-block-navigation a:hover {
  color: var(--text-inverse);
}

/* Page content bridge: WordPress block main → TV Guide layout */
.c-layoutDefault .wp-block-group {
  max-width: none;
  margin: 0;
  padding: 0;
}
.c-layoutDefault .c-staticPage {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.c-layoutDefault .c-staticPage .wp-block-post-title,
.c-layoutDefault .c-staticPage .c-staticPage_title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.5rem;
  text-align: left;
}
.c-layoutDefault .c-staticPage .wp-block-post-content {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.8;
}
.c-layoutDefault .c-staticPage .wp-block-post-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 2rem 0 0.75rem;
}
.c-layoutDefault .c-staticPage .wp-block-post-content p {
  margin: 0 0 1rem;
}
.c-layoutDefault .c-staticPage .wp-block-post-content a {
  color: var(--accent);
}
.c-layoutDefault .c-staticPage .wp-block-post-content a:hover {
  color: var(--accent-dark);
}
.c-layoutDefault .c-staticPage .wp-block-post-content ul,
.c-layoutDefault .c-staticPage .wp-block-post-content ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
.c-layoutDefault .c-staticPage .wp-block-post-content li {
  margin-bottom: 0.5rem;
}

/* Block buttons → TV Guide buttons */
.c-btn .wp-block-button__link,
.wp-block-button.c-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--bg-active);
  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.c-btn .wp-block-button__link:hover,
.wp-block-button.c-btn .wp-block-button__link:hover {
  background: var(--bg-active-hover);
}

/* Error page in block theme */
.c-errorPage .c-errorPage_code {
  font-size: 6rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.2;
  text-align: center;
}
.c-errorPage .c-errorPage_title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.75rem;
  text-align: center;
}
.c-errorPage .c-errorPage_text {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 2rem;
  line-height: 1.6;
  text-align: center;
}

/* Block theme mobile responsive */
@media (max-width: 640px) {
  .c-siteHeader .c-siteHeader_burger {
    display: flex;
  }
  .c-siteHeader .c-siteHeader_nav,
  .c-siteHeader .wp-block-navigation {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-strong);
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    z-index: 99;
  }
  .c-siteHeader .wp-block-navigation.is-menu-open {
    display: flex;
  }
  .c-siteHeader .c-siteHeader_nav a,
  .c-siteHeader .wp-block-navigation a {
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .c-siteHeader .c-siteHeader_nav a:last-child,
  .c-siteHeader .wp-block-navigation a:last-child {
    border-bottom: none;
  }
  .c-staticPage {
    padding: 1.25rem 1rem;
  }
  .c-staticPage .c-staticPage_title,
  .c-staticPage .wp-block-post-title {
    font-size: 1.375rem;
  }
}