/* =======================================================================
   languages_list.css — LANGUAGES LIST PAGE (FINAL)
   =======================================================================
   PURPOSE
   -----------------------------------------------------------------------
   - Styles the Languages listing page
   - Provides header layout, search UI, grid spacing
   - Displays season count per language
   - Fully supports Light + Dark themes
   - Mobile responsive with search toggle

   FILE RELATIONSHIP
   -----------------------------------------------------------------------
   global.css            → grid, cards, typography
   header.css            → site header
   footer.css            → site footer
   languages_list.css    → languages list ONLY (this file)

   IMPORTANT RULES
   -----------------------------------------------------------------------
   - ❌ Do NOT style header or footer here
   - ❌ Do NOT redefine global card or grid system
   - ✔ Scope EVERYTHING to `.languages-page`
   ======================================================================= */


/* =======================================================================
   PAGE WRAPPER
   ======================================================================= */

.languages-page {
  padding-top: 14px;
}


/* =======================================================================
   HEADER BAR (TITLE + SEARCH)
   ======================================================================= */

.languages-page .languages-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  position: relative; /* required for mobile search icon */
}


/* =======================================================================
   FILTER BAR (DESKTOP)
   ======================================================================= */

.languages-page .languages-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.languages-page .languages-filters input,
.languages-page .languages-filters button {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 14px;
  background: #fff;
}

.languages-page .languages-filters input[type="search"] {
  min-width: 220px;
}

/* Clear button */
.languages-page .languages-clear-btn {
  background: #fff;
  color: var(--accent, #7c3aed);
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
}

.languages-page .languages-clear-btn:hover {
  background: rgba(124,58,237,0.06);
}


/* =======================================================================
   MOBILE SEARCH TOGGLE ICON
   ======================================================================= */

.languages-page .search-toggle {
  display: none;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
}


/* =======================================================================
   LANGUAGES GRID
   ======================================================================= */

.languages-page #languages-grid.grid {
  gap: 18px;
}


/* =======================================================================
   LANGUAGE CARD META (SEASON COUNT)
   ======================================================================= */

.languages-page #languages-grid .card .item-meta {
  font-size: 13px;
  margin-top: 4px;
  color: rgba(15,23,42,0.65); /* light theme */
}


/* =======================================================================
   DARK THEME FIX — SEASON COUNT VISIBILITY
   -----------------------------------------------------------------------
   Fixes invisible season numbers in dark mode
   ======================================================================= */

[data-theme="dark"] .languages-page #languages-grid .card .item-meta {
  color: var(--muted); /* readable on dark cards */
}


/* =======================================================================
   MOBILE LAYOUT (≤ 768px)
   ======================================================================= */

@media (max-width: 768px) {

  .languages-page .languages-header {
    flex-direction: column;
    align-items: stretch;
  }

  .languages-page .search-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
  }

  .languages-page .languages-filters {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
    display: none;
    flex-direction: column;
  }

  .languages-page .languages-filters.mobile-active {
    display: flex;
    gap: 10px;
  }

  .languages-page .languages-filters input,
  .languages-page .languages-filters button {
    width: 100%;
  }
}