/* =======================================================================
   global.css — CORE SYSTEM STYLES
   =======================================================================
   PURPOSE
   -----------------------------------------------------------------------
   - Global reset
   - Theme variables (light & dark)
   - Typography system
   - Grid system
   - Card components
   - Core layout helpers

   IMPORTANT RULES
   -----------------------------------------------------------------------
   - ❌ DO NOT add header styles here  → header.css
   - ❌ DO NOT add footer styles here  → footer.css
   - ❌ DO NOT add page-specific UI here
   - ✔ This file must stay GENERIC and SAFE

   WHY THIS FILE MATTERS
   -----------------------------------------------------------------------
   - Loaded on every page
   - Impacts SEO, CLS, and AdSense
   - Must remain stable & predictable
   ======================================================================= */


/* =======================================================================
   RESET & BASE NORMALIZATION
   -----------------------------------------------------------------------
   Ensures consistent rendering across browsers
   ======================================================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
}


/* =======================================================================
   THEME VARIABLES (LIGHT + DARK)
   -----------------------------------------------------------------------
   All colors and radii must come from here.
   Never hardcode colors in components.
   ======================================================================= */

:root {
  --bg: #fff7ff;
  --card: #ffffff;
  --text: #111019;
  --muted: #7a6f87;

  --accent: #8b5cf6;
  --accent-2: #ff6fb5;

  --glass: rgba(255,255,255,0.6);
  --shadow-1: 0 6px 20px rgba(16,16,32,0.06);

  --radius: 12px;
  --header-height: 68px;
  --max-width: 1180px;

  /* Compatibility helpers (used by legacy/detail CSS) */
  --container-max: var(--max-width);
  --panel: var(--card);
  --card-radius: var(--radius);
  --surface-shadow: var(--shadow-1);
}

/* Dark mode overrides */
[data-theme="dark"] {
  --bg: #0b0b10;
  --card: #0f1115;
  --text: #e8e6ef;
  --muted: #9a94a8;
  --glass: rgba(255,255,255,0.04);
  --shadow-1: 0 6px 20px rgba(0,0,0,0.5);
}


/* =======================================================================
   GLOBAL LAYOUT HELPERS
   -----------------------------------------------------------------------
   Used across pages for consistent spacing & width
   ======================================================================= */

.container {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 18px;
}

.content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px 24px 48px;
}


/* =======================================================================
   TYPOGRAPHY SYSTEM
   -----------------------------------------------------------------------
   Do NOT style headings directly (h1, h2, etc.)
   Always use utility classes (.h1, .h2, etc.)
   ======================================================================= */

.h1 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
}

.h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.meta {
  font-size: 13px;
  color: var(--muted);
}

/* Small screen scaling */
@media (max-width: 420px) {
  .h1 {
    font-size: 24px;
  }
}


/* =======================================================================
   LINKS & ACCESSIBILITY
   -----------------------------------------------------------------------
   Keep links readable and accessible
   ======================================================================= */

a {
  text-decoration: none;
  color: var(--accent);
}

a:hover {
  opacity: 0.85;
}

/* Keyboard accessibility */
:focus-visible {
  outline: 3px solid rgba(139,92,246,0.18);
  outline-offset: 3px;
}


/* =======================================================================
   MEDIA SAFETY (AVOID CLS)
   -----------------------------------------------------------------------
   Prevent layout shift when lazy images load
   ======================================================================= */

img[loading="lazy"] {
  min-height: 60px;
  background: rgba(0,0,0,0.02);
}


/* =======================================================================
   GLOBAL GRID SYSTEM
   -----------------------------------------------------------------------
   Used by list pages (seasons, languages, hosts, etc.)
   ======================================================================= */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =======================================================================
   CARD COMPONENT (LIST PAGES)
   -----------------------------------------------------------------------
   Shared by:
   - Languages list
   - Seasons list
   - Hosts list
   ======================================================================= */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  color: inherit;
  display: block;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(16,16,32,0.12);
}

/* Card image */
.thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Placeholder when image missing */
.card .placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
}

/* Card body */
.body {
  padding: 12px;
}

.item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.item-sub {
  font-size: 13px;
  color: var(--muted);
}