/**
 * tv-safe-zones.css
 * TV safe-zone margins, typography scale, scroll-snap carousels,
 * and enhanced focus states for tv.lumottv.com.
 *
 * Inject this file via a <link> or @import inside the main index.html.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. GLOBAL ANTI-ALIASING
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TV SAFE ZONES  (TV-sized screens only: min-width 960 px)
      Left / Right: 48 px   Top / Bottom: 27 px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 960px) {

  /* Primary content containers */
  .content-container,
  .grid-page-header,
  .grid-container,
  .profile-container {
    padding-left:  48px !important;
    padding-right: 48px !important;
  }

  /* Hero section: anchor text to the safe zone */
  .hero-content {
    left: 48px !important;
  }

  /* Top navigation bar */
  .top-nav,
  nav.top-nav,
  header .top-nav {
    padding: 27px 48px !important;
  }

  /* Additional common layout containers */
  .page-wrapper,
  .page-content,
  .app-container,
  .main-content,
  .section-wrapper {
    padding-left:  48px !important;
    padding-right: 48px !important;
  }

  /* Rows and shelves that sit at the page edge */
  .content-row,
  .content-shelf,
  .movie-row,
  .series-row,
  .category-row {
    padding-left:  48px;
    padding-right: 48px;
  }

  /* Safe-zone top/bottom on page-level wrappers */
  .page-wrapper,
  .app-container {
    padding-top:    27px !important;
    padding-bottom: 27px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY MINIMUMS  (readable at ~3 metres / 10 ft from screen)
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 3a. Body / general text: min 16 px ---------------------------------- */
body,
p,
span,
li,
label,
input,
textarea,
select,
button {
  font-size: max(16px, 1em);
}

/* --- 3b. Card titles: min 18 px ----------------------------------------- */
.card-title,
.card__title,
.item-title,
.content-card .title,
.movie-card .title,
.series-card .title,
.thumbnail-title,
.poster-title {
  font-size: max(18px, 1em) !important;
  line-height: 1.3;
}

/* --- 3c. Section / shelf headings: min 24 px ----------------------------- */
.section-title,
.shelf-title,
.row-title,
.category-title,
.page-title,
h2,
h3 {
  font-size: max(24px, 1.5em) !important;
  line-height: 1.25;
}

/* --- 3d. Hero / feature title: min 36 px --------------------------------- */
.hero-title,
.hero-content .title,
.featured-title,
.spotlight-title,
h1 {
  font-size: max(36px, 2.25em) !important;
  line-height: 1.15;
}

/* --- 3e. Navigation items: min 18 px ------------------------------------- */
nav a,
nav li,
nav span,
.top-nav a,
.top-nav li,
.nav-item,
.nav-link,
.side-nav a,
.menu-item,
.tab-item {
  font-size: max(18px, 1em) !important;
}

/* --- 3f. Metadata / secondary text: min 14 px (scaled to 16 px on TV) --- */
.meta,
.metadata,
.subtitle,
.description,
.genre,
.rating,
.duration,
.year {
  font-size: max(16px, 0.9em) !important;
  line-height: 1.5;
}

/* --- 3g. Buttons and CTAs: min 18 px ------------------------------------ */
button,
.btn,
.button,
[role="button"] {
  font-size: max(18px, 1em) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SCROLL-SNAP  (horizontal carousels / content rows)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scroll container */
.content-row,
.content-shelf,
.movie-row,
.series-row,
.category-row,
.carousel,
.slider {
  scroll-snap-type: x mandatory;
  scroll-padding: 0 48px;
  -webkit-overflow-scrolling: touch; /* smooth inertia on WebKit TVs */
  overflow-x: auto;
  overflow-y: hidden;

  /* Hide scrollbar while keeping functionality */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}

.content-row::-webkit-scrollbar,
.content-shelf::-webkit-scrollbar,
.movie-row::-webkit-scrollbar,
.series-row::-webkit-scrollbar,
.category-row::-webkit-scrollbar,
.carousel::-webkit-scrollbar,
.slider::-webkit-scrollbar {
  display: none;
}

/* Each item snaps at its start edge */
.content-row > *,
.content-shelf > *,
.movie-row > *,
.series-row > *,
.category-row > *,
.carousel > *,
.slider > * {
  scroll-snap-align: start;
  flex-shrink: 0; /* prevent items collapsing inside flex rows */
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. ENHANCED FOCUS STATES  (critical for D-pad / remote navigation)
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 5a. Base focus ring ------------------------------------------------- */
:focus {
  outline: 4px solid #00A8E1 !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 4px #00A8E1,
    0 0 16px rgba(0, 168, 225, 0.55),
    0 0 32px rgba(0, 168, 225, 0.25) !important;
}

:focus:not(:focus-visible) {
  /* Suppress focus ring for mouse clicks while keeping it for keyboard/remote */
  outline: none !important;
  box-shadow: none !important;
}

:focus-visible {
  outline: 4px solid #00A8E1 !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 4px #00A8E1,
    0 0 16px rgba(0, 168, 225, 0.55),
    0 0 32px rgba(0, 168, 225, 0.25) !important;
}

/* --- 5b. Focused cards: scale up + warm glow ----------------------------- */
.card:focus,
.card:focus-visible,
.content-card:focus,
.content-card:focus-visible,
.movie-card:focus,
.movie-card:focus-visible,
.series-card:focus,
.series-card:focus-visible,
.thumbnail:focus,
.thumbnail:focus-visible,
.poster:focus,
.poster:focus-visible,
[class*="card"]:focus,
[class*="card"]:focus-visible {
  transform: scale(1.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  z-index: 10;
  outline: 4px solid #00A8E1 !important;
  box-shadow:
    0 0 0 4px #00A8E1,
    0 0 20px rgba(0, 168, 225, 0.6),
    0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure non-focused cards transition back smoothly */
.card,
.content-card,
.movie-card,
.series-card,
.thumbnail,
.poster,
[class*="card"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

/* --- 5c. Focused navigation items: bright underline --------------------- */
nav a:focus,
nav a:focus-visible,
nav li:focus,
nav li:focus-visible,
.nav-item:focus,
.nav-item:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.menu-item:focus,
.menu-item:focus-visible,
.tab-item:focus,
.tab-item:focus-visible,
.top-nav a:focus,
.top-nav a:focus-visible {
  color: #00A8E1 !important;
  text-decoration: none !important;
  border-bottom: 3px solid #00A8E1 !important;
  outline: none !important;
  box-shadow: none !important;
  padding-bottom: 2px;
}

/* --- 5d. Focused buttons ------------------------------------------------- */
button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
.button:focus,
.button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
  transform: scale(1.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  outline: 4px solid #00A8E1 !important;
  box-shadow:
    0 0 0 4px #00A8E1,
    0 0 18px rgba(0, 168, 225, 0.5) !important;
}

/* --- 5e. Pulse animation on focused interactive elements ---------------- */
@keyframes tv-focus-pulse {
  0%,  100% { box-shadow: 0 0 0 4px #00A8E1, 0 0 16px rgba(0, 168, 225, 0.55); }
  50%        { box-shadow: 0 0 0 6px #00A8E1, 0 0 28px rgba(0, 168, 225, 0.85); }
}

/* Apply pulse to deeply focused elements (e.g. row items while browsing) */
.content-row *:focus-visible,
.carousel *:focus-visible {
  animation: tv-focus-pulse 1.6s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MISC TV UX POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* Disable text selection (TV remotes don't select text) */
body {
  user-select: none;
  -webkit-user-select: none;
}

/* Re-enable selection in inputs */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Cursor: hide the mouse cursor when using remote (it auto-shows on move) */
@media (min-width: 960px) {
  body {
    cursor: none;
  }
  body:hover,
  body *:hover {
    cursor: default;
  }
}

/* Prevent layout shift from focus ring expanding containers */
:focus {
  box-sizing: border-box;
}

/* Hero overlay: ensure text is always legible over hero images */
.hero-content,
.hero-overlay,
.hero-text {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Loading shimmer / skeleton cards */
@keyframes tv-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton,
.loading-card,
.placeholder-card {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  ) !important;
  background-size: 1200px 100% !important;
  animation: tv-shimmer 1.4s linear infinite !important;
}