/* =========================================================
   🌦️ CLIMATE.CSS – Klimattabell (Skin-anpassad)
   ---------------------------------------------------------
   ✔ Använder globala variabler från skin.css
   ✔ Ingen egen designlogik
   ✔ Kompakt & SEO-vänlig
   ========================================================= */


/* =========================================================
   📦 SEKTION WRAPPER
   ========================================================= */
.destination-climate {
  color: var(--color-text);
}


/* Begränsa bredd (valfri) */
.destination-climate .destination-container {
  max-width: 800px;
}


/* Rubrik spacing */
.destination-climate h2#climate-heading {
  margin-bottom: var(--spacing-md);
}


/* =========================================================
   📊 TABELL – BAS
   ========================================================= */
.destination-climate table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  overflow: hidden;
  box-shadow: var(--shadow-md);
}


/* =========================================================
   🔝 HEADER (sticky)
   ========================================================= */
.destination-climate thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background: var(--color-bg);
  color: var(--color-text);

  font-weight: 600;
  text-align: left;

  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);

  white-space: nowrap;
}

.destination-climate thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.destination-climate thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}


/* =========================================================
   📄 TABELLCELLER
   ========================================================= */
.destination-climate tbody td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);

  font-size: var(--font-size-small);
  vertical-align: middle;
}


/* Zebra rows */
.destination-climate tbody tr:nth-child(odd) {
  background: var(--color-bg-alt);
}


/* Hover (desktop only känsla) */
.destination-climate tbody tr:hover {
  background: var(--color-bg-alt);
}


/* =========================================================
   📌 STICKY FÖRSTA KOLUMN (desktop)
   ========================================================= */
@media (min-width: 800px) {
  .destination-climate tbody td:first-child,
  .destination-climate thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-bg);
    font-weight: 600;
  }
}


/* =========================================================
   🎯 HIGHLIGHT (mm + sol)
   ========================================================= */
.destination-climate td:nth-child(6),
.destination-climate td:nth-child(7) {
  background: var(--color-bg-alt);
}


/* =========================================================
   🔢 NUMMERFORMAT
   ========================================================= */
.destination-climate td {
  font-variant-numeric: tabular-nums;
}

.destination-climate .unit,
.destination-climate td small {
  color: var(--color-text-light);
}


/* =========================================================
   🧾 FOOTNOTE
   ========================================================= */
.destination-climate .climate-meta {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-light);
}


/* =========================================================
   📏 DESKTOP OPTIMERING
   ========================================================= */
@media (min-width: 721px) {
  .destination-climate th,
  .destination-climate td {
    white-space: nowrap;
  }

  .destination-climate thead th,
  .destination-climate tbody td {
    padding: var(--spacing-sm) var(--spacing-sm);
  }
}

/* =========================================================
   🎯 HEADER IKONER (DESKTOP ONLY)
   ---------------------------------------------------------
   Subtila ikoner i tabellhuvudet för bättre läsbarhet
   ========================================================= */

@media (min-width: 721px) {

  .destination-climate thead th::before {
    font-size: 0.85em;
    margin-right: 4px;
    opacity: 0.7;
  }

  /* Månad */
  .destination-climate thead th:first-child::before {
    content: "📅";
  }

  /* Dagtemp */
  .destination-climate thead th:nth-child(2)::before {
    content: "☀️";
  }

  /* Natttemp */
  .destination-climate thead th:nth-child(3)::before {
    content: "🌙";
  }

  /* Vattentemp */
  .destination-climate thead th:nth-child(4)::before {
    content: "🌊";
  }

  /* Nederbördsdagar */
  .destination-climate thead th:nth-child(5)::before {
    content: "🌧️";
  }

  /* mm */
  .destination-climate thead th:nth-child(6)::before {
    content: "💧";
  }

  /* Soltimmar */
  .destination-climate thead th:nth-child(7)::before {
    content: "☀️";
  }

}


/* =========================================================
   📱 MOBIL – KOMPAKT TABELL (OPTIMERAD)
   ========================================================= */
@media (max-width: 720px) {

  /* Scroll istället för stora cards */
  .destination-climate .destination-container {
    overflow-x: auto;
  }

  .destination-climate table {
    min-width: 600px;
    font-size: 14px;
  }

  .destination-climate th,
  .destination-climate td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  .destination-climate thead th {
    font-size: 13px;
  }

  /* Tydligare månad */
  .destination-climate tbody td:first-child {
    font-weight: 600;
  }

  /* Ta bort hover på mobil */
  .destination-climate tbody tr:hover {
    background: inherit;
  }

  /* Mindre radius */
  .destination-climate table {
    border-radius: var(--radius-md);
  }

}


/* =========================================================
   ⭐ OPTIONAL – BEST MONTH HIGHLIGHT
   ========================================================= */
.destination-climate tr.is-best {
  outline: 2px solid var(--color-primary);
  background: var(--color-bg-alt);
}