/* ===== Holidays Tool Styles =====
   Reuses style.css (header, hero, content section, footer) and timer.css
   (breadcrumb palette). This file holds Holidays-specific pieces:
   card wrapper, country dropdown, year tabs, holidays table. Layout mirrors
   the Age Calculator card so the tool sits naturally in the same family. */

/* ===== Hero spacing ===== */
.hero:has(.hol-card) {
  padding-top: 14vh;
  padding-bottom: 80px;
  justify-content: flex-start;
}

/* ===== Card wrapper =====
   Same dark rounded card language as the Age Calculator + Pomodoro tools so
   the Holidays page visually belongs to the same family. */
.hol-card {
  width: 880px;
  max-width: calc(100vw - 40px);
  background-color: var(--bg-secondary);
  border-radius: 10px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .hol-card {
  background-color: #ffffff;
}

[data-theme="red"] .hol-card,
[data-theme="teal"] .hol-card,
[data-theme="blue"] .hol-card,
[data-theme="purple"] .hol-card,
[data-theme="green"] .hol-card,
[data-theme="slate"] .hol-card {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ===== Controls row ===== */
.hol-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}

.hol-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}

/* ===== Country picker ===== */
.hol-country-wrap {
  min-width: 0;
}

.hol-country-field {
  position: relative;
}

.hol-country-input {
  width: 100%;
  height: 38px;
  padding: 0 38px 0 14px;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

.hol-country-input:hover {
  border-color: #777;
}

.hol-country-field.open .hol-country-input,
.hol-country-input:focus-visible {
  border-color: #ffffff;
}

[data-theme="light"] .hol-country-input {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
  color: var(--text-primary);
}

[data-theme="light"] .hol-country-input:hover {
  border-color: #b8bcc4;
}

[data-theme="light"] .hol-country-field.open .hol-country-input,
[data-theme="light"] .hol-country-input:focus-visible {
  border-color: #000000;
}

[data-theme="red"] .hol-country-input,
[data-theme="teal"] .hol-country-input,
[data-theme="blue"] .hol-country-input,
[data-theme="purple"] .hol-country-input,
[data-theme="green"] .hol-country-input,
[data-theme="slate"] .hol-country-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="red"] .hol-country-input:hover,
[data-theme="teal"] .hol-country-input:hover,
[data-theme="blue"] .hol-country-input:hover,
[data-theme="purple"] .hol-country-input:hover,
[data-theme="green"] .hol-country-input:hover,
[data-theme="slate"] .hol-country-input:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="red"] .hol-country-field.open .hol-country-input,
[data-theme="teal"] .hol-country-field.open .hol-country-input,
[data-theme="blue"] .hol-country-field.open .hol-country-input,
[data-theme="purple"] .hol-country-field.open .hol-country-input,
[data-theme="green"] .hol-country-field.open .hol-country-input,
[data-theme="slate"] .hol-country-field.open .hol-country-input {
  border-color: #ffffff;
}

.hol-country-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
  pointer-events: none;
  transition: transform 0.2s, color 0.15s;
}

.hol-country-caret svg {
  width: 14px;
  height: 14px;
}

.hol-country-field.open .hol-country-caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--text-primary);
}

[data-theme="light"] .hol-country-caret {
  color: #777;
}

[data-theme="red"] .hol-country-caret,
[data-theme="teal"] .hol-country-caret,
[data-theme="blue"] .hol-country-caret,
[data-theme="purple"] .hol-country-caret,
[data-theme="green"] .hol-country-caret,
[data-theme="slate"] .hol-country-caret {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== Country dropdown popup =====
   Same visual language as the alarm-clock sound dropdown / world-clock
   search results: solid dark surface in default + light, translucent
   blur on color themes. */
.hol-country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background-color: #2a2a2a;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  box-sizing: border-box;
}

.hol-country-field.open .hol-country-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="light"] .hol-country-dropdown {
  background-color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="red"] .hol-country-dropdown,
[data-theme="teal"] .hol-country-dropdown,
[data-theme="blue"] .hol-country-dropdown,
[data-theme="purple"] .hol-country-dropdown,
[data-theme="green"] .hol-country-dropdown,
[data-theme="slate"] .hol-country-dropdown {
  background-color: rgba(0, 0, 0, 0.32);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hol-country-search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
}

.hol-country-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.hol-country-search:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .hol-country-search {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
  color: #000;
}

[data-theme="light"] .hol-country-search::placeholder {
  color: #888;
}

[data-theme="light"] .hol-country-search:focus-visible {
  border-color: #b8bcc4;
}

.hol-country-list {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.hol-country-list::-webkit-scrollbar {
  width: 4px;
}

.hol-country-list::-webkit-scrollbar-track {
  background: transparent;
}

.hol-country-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

[data-theme="light"] .hol-country-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

.hol-country-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.hol-country-item:hover,
.hol-country-item.active {
  background-color: rgba(255, 255, 255, 0.08);
}

.hol-country-item.selected {
  background-color: rgba(255, 255, 255, 0.14);
  font-weight: 500;
}

[data-theme="light"] .hol-country-item {
  color: #000;
}

[data-theme="light"] .hol-country-item:hover,
[data-theme="light"] .hol-country-item.active {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hol-country-item.selected {
  background-color: rgba(0, 0, 0, 0.12);
}

.hol-country-empty {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===== Year tabs ===== */
.hol-year-wrap {
  min-width: 0;
}

.hol-year-label {
  display: block;
  margin-bottom: 8px;
}

.hol-year-tabs {
  display: inline-flex;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 3px;
  height: 38px;
  box-sizing: border-box;
  align-items: stretch;
}

[data-theme="light"] .hol-year-tabs {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
}

[data-theme="red"] .hol-year-tabs,
[data-theme="teal"] .hol-year-tabs,
[data-theme="blue"] .hol-year-tabs,
[data-theme="purple"] .hol-year-tabs,
[data-theme="green"] .hol-year-tabs,
[data-theme="slate"] .hol-year-tabs {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.hol-year-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 14px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.hol-year-tab:hover {
  color: var(--text-primary);
}

/* Active year tab uses the same ocean palette as the World Clock map +
   the holidays table header, so the controls and table read as a family. */
.hol-year-tab.active {
  background-color: #36c647;
  color: #0a1f10;
}

[data-theme="light"] .hol-year-tab.active {
  background-color: #2c68b8;
  color: #ffffff;
}

[data-theme="red"] .hol-year-tab.active {
  background-color: #7a3333;
  color: #ffffff;
}

[data-theme="teal"] .hol-year-tab.active {
  background-color: #1d5155;
  color: #ffffff;
}

[data-theme="blue"] .hol-year-tab.active {
  background-color: #214a69;
  color: #ffffff;
}

[data-theme="purple"] .hol-year-tab.active {
  background-color: #4c3560;
  color: #ffffff;
}

[data-theme="green"] .hol-year-tab.active {
  background-color: #335537;
  color: #ffffff;
}

[data-theme="slate"] .hol-year-tab.active {
  background-color: #364954;
  color: #ffffff;
}

/* ===== Holidays table =====
   Visual language mirrors .lap-table from style.css (the stopwatch lap
   results) so the table feels native to the project. */
.hol-table-wrap {
  width: 100%;
  position: relative;
  margin-top: 4px;
}

.hol-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

/* Same approach as .lap-table in style.css: thead is its own block, tbody
   is a scrollable block, and each row is `display: table` with
   table-layout: fixed so columns line up between header and body. The
   header now picks up the ocean palette from the World Clock map so the
   table reads as part of the same visual family across themes. */
.hol-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: #36c647;
  border-radius: 8px 8px 0 0;
}

.hol-table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.hol-table th {
  font-size: 12px;
  font-weight: 600;
  /* Dark theme: bright-green header gets near-black text for legibility.
     Light + color themes keep white via the per-theme overrides below. */
  color: #0a1f10;
  padding: 18px 22px;
  text-align: left;
  background-color: #36c647;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

[data-theme="light"] .hol-table th,
[data-theme="red"] .hol-table th,
[data-theme="teal"] .hol-table th,
[data-theme="blue"] .hol-table th,
[data-theme="purple"] .hol-table th,
[data-theme="green"] .hol-table th,
[data-theme="slate"] .hol-table th {
  color: #ffffff;
}

[data-theme="light"] .hol-table thead,
[data-theme="light"] .hol-table th {
  background-color: #2c68b8;
}

[data-theme="red"] .hol-table thead,
[data-theme="red"] .hol-table th {
  background-color: #7a3333;
}

[data-theme="teal"] .hol-table thead,
[data-theme="teal"] .hol-table th {
  background-color: #1d5155;
}

[data-theme="blue"] .hol-table thead,
[data-theme="blue"] .hol-table th {
  background-color: #214a69;
}

[data-theme="purple"] .hol-table thead,
[data-theme="purple"] .hol-table th {
  background-color: #4c3560;
}

[data-theme="green"] .hol-table thead,
[data-theme="green"] .hol-table th {
  background-color: #335537;
}

[data-theme="slate"] .hol-table thead,
[data-theme="slate"] .hol-table th {
  background-color: #364954;
}

.hol-table th:first-child {
  border-radius: 8px 0 0 0;
}

.hol-table th:last-child {
  border-radius: 0 8px 0 0;
  text-align: right;
}

.hol-col-date {
  width: 36%;
}

.hol-col-name {
  width: 44%;
}

.hol-col-left {
  width: 20%;
}

.hol-table tbody {
  display: block;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

[data-theme="light"] .hol-table tbody {
  border-color: #e5e5e5;
}

.hol-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  transition: background-color 0.12s;
  box-sizing: border-box;
}

/* Zebra striping for clearer row separation, matching the reference look. */
.hol-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .hol-table tbody tr:nth-child(even) {
  background-color: #f7f8fa;
}

[data-theme="red"] .hol-table tbody tr:nth-child(even),
[data-theme="teal"] .hol-table tbody tr:nth-child(even),
[data-theme="blue"] .hol-table tbody tr:nth-child(even),
[data-theme="purple"] .hol-table tbody tr:nth-child(even),
[data-theme="green"] .hol-table tbody tr:nth-child(even),
[data-theme="slate"] .hol-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.06);
}

.hol-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hol-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="red"] .hol-table tbody tr:hover,
[data-theme="teal"] .hol-table tbody tr:hover,
[data-theme="blue"] .hol-table tbody tr:hover,
[data-theme="purple"] .hol-table tbody tr:hover,
[data-theme="green"] .hol-table tbody tr:hover,
[data-theme="slate"] .hol-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hol-table tbody::-webkit-scrollbar {
  width: 5px;
}

.hol-table tbody::-webkit-scrollbar-track {
  background: transparent;
}

.hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}

[data-theme="light"] .hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

.hol-table td {
  font-size: 14px;
  color: var(--text-primary);
  padding: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.hol-table tbody tr:first-child td {
  border-top: none;
}

[data-theme="light"] .hol-table td {
  border-top-color: #ececef;
}

[data-theme="red"] .hol-table tbody,
[data-theme="teal"] .hol-table tbody,
[data-theme="blue"] .hol-table tbody,
[data-theme="purple"] .hol-table tbody,
[data-theme="green"] .hol-table tbody,
[data-theme="slate"] .hol-table tbody {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="red"] .hol-table td,
[data-theme="teal"] .hol-table td,
[data-theme="blue"] .hol-table td,
[data-theme="purple"] .hol-table td,
[data-theme="green"] .hol-table td,
[data-theme="slate"] .hol-table td {
  border-top-color: rgba(255, 255, 255, 0.14);
}

[data-theme="red"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="teal"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="blue"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="purple"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="green"] .hol-table tbody::-webkit-scrollbar-thumb,
[data-theme="slate"] .hol-table tbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
}

.hol-table td:last-child {
  text-align: right;
}

.hol-cell-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Date cell: upcoming rows render the date and weekday in full primary
   text color so the weekday isn't lost against the row background. Past
   rows are dimmed by the .hol-row.past rules below. */
.hol-cell-date-main {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.1px;
}

.hol-cell-date-sub {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 400;
  opacity: 0.85;
}

[data-theme="light"] .hol-cell-date-main {
  color: #000000;
}

[data-theme="light"] .hol-cell-date-sub {
  color: #333333;
  opacity: 1;
}

/* Holiday name: the visual anchor of the row. Upcoming holidays pick up
   a highlight that contrasts with each theme: the project's green
   start-button on dark, the table-header blue on light, plain white on
   color themes (so the already-saturated accent backdrop isn't fighting
   another hue). Passed holidays fall back to .hol-row.past below. */
.hol-cell-name {
  font-weight: 700;
  font-size: 15px;
  color: #36c647;
  word-break: break-word;
  letter-spacing: -0.1px;
}

[data-theme="light"] .hol-cell-name {
  color: #2c68b8;
}

[data-theme="red"] .hol-cell-name,
[data-theme="teal"] .hol-cell-name,
[data-theme="blue"] .hol-cell-name,
[data-theme="purple"] .hol-cell-name,
[data-theme="green"] .hol-cell-name,
[data-theme="slate"] .hol-cell-name {
  color: #ffffff;
}

/* Time-left: tabular-nums keeps digit columns aligned. Default rows show
   "N days" in the regular primary color; the per-second countdown and the
   "Today!" pill below pick up the same highlight as the upcoming-name. */
.hol-cell-left {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}

[data-theme="light"] .hol-cell-left {
  color: #222;
}

/* Final-day countdown (HH:MM:SS): emphasized so the user feels the
   urgency. Reuses the same highlight palette as the upcoming holiday
   name so the row reads as one accent - except on color themes where
   a warm yellow keeps the countdown from blending into the white
   text/accent backdrop. */
.hol-cell-left.is-countdown {
  font-weight: 700;
  font-size: 14px;
  color: #36c647;
}

[data-theme="light"] .hol-cell-left.is-countdown {
  color: #2c68b8;
}

[data-theme="red"] .hol-cell-left.is-countdown,
[data-theme="teal"] .hol-cell-left.is-countdown,
[data-theme="blue"] .hol-cell-left.is-countdown,
[data-theme="purple"] .hol-cell-left.is-countdown,
[data-theme="green"] .hol-cell-left.is-countdown,
[data-theme="slate"] .hol-cell-left.is-countdown {
  color: #ffd166;
}

/* "Today!" pill - emphasizes the holiday is right now */
.hol-cell-left.is-today {
  display: inline-block;
  padding: 3px 10px;
  background: #ff5b3e;
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* Past row: drop the upcoming-row highlight entirely. Date, weekday and
   holiday name all fall back to a uniform muted grey - no bold, no warm
   accent - so the eye skims past them and lands on what's still ahead. */
.hol-row.past .hol-cell-date-main,
.hol-row.past .hol-cell-date-sub,
.hol-row.past .hol-cell-name {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  opacity: 1;
}

.hol-row.past .hol-cell-left {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
}

[data-theme="light"] .hol-row.past .hol-cell-date-main,
[data-theme="light"] .hol-row.past .hol-cell-date-sub,
[data-theme="light"] .hol-row.past .hol-cell-name,
[data-theme="light"] .hol-row.past .hol-cell-left {
  color: #aaa;
}

[data-theme="red"] .hol-row.past .hol-cell-date-main,
[data-theme="teal"] .hol-row.past .hol-cell-date-main,
[data-theme="blue"] .hol-row.past .hol-cell-date-main,
[data-theme="purple"] .hol-row.past .hol-cell-date-main,
[data-theme="green"] .hol-row.past .hol-cell-date-main,
[data-theme="slate"] .hol-row.past .hol-cell-date-main,
[data-theme="red"] .hol-row.past .hol-cell-date-sub,
[data-theme="teal"] .hol-row.past .hol-cell-date-sub,
[data-theme="blue"] .hol-row.past .hol-cell-date-sub,
[data-theme="purple"] .hol-row.past .hol-cell-date-sub,
[data-theme="green"] .hol-row.past .hol-cell-date-sub,
[data-theme="slate"] .hol-row.past .hol-cell-date-sub,
[data-theme="red"] .hol-row.past .hol-cell-name,
[data-theme="teal"] .hol-row.past .hol-cell-name,
[data-theme="blue"] .hol-row.past .hol-cell-name,
[data-theme="purple"] .hol-row.past .hol-cell-name,
[data-theme="green"] .hol-row.past .hol-cell-name,
[data-theme="slate"] .hol-row.past .hol-cell-name,
[data-theme="red"] .hol-row.past .hol-cell-left,
[data-theme="teal"] .hol-row.past .hol-cell-left,
[data-theme="blue"] .hol-row.past .hol-cell-left,
[data-theme="purple"] .hol-row.past .hol-cell-left,
[data-theme="green"] .hol-row.past .hol-cell-left,
[data-theme="slate"] .hol-row.past .hol-cell-left {
  color: rgba(255, 255, 255, 0.45);
}

/* Empty state */
.hol-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  margin-top: 8px;
}

[data-theme="light"] .hol-empty {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Loading shimmer for first paint */
.hol-loading {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero:has(.hol-card) {
    padding-top: 14vh;
    padding-bottom: 60px;
  }

  .hol-card {
    padding: 20px 16px 18px;
    gap: 16px;
  }

  .hol-controls {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hol-year-tabs {
    width: 100%;
    height: 36px;
  }

  .hol-year-tab {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }

  /* Mobile table: collapse to a card-style row layout. The Date column
     stacks vertically (date + weekday) and Time Left sits on the right. */
  .hol-table {
    table-layout: auto;
  }

  .hol-table thead {
    display: none;
  }

  .hol-table tbody {
    border: none;
    border-radius: 0;
    max-height: none;
  }

  .hol-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name left"
      "date left";
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hol-table tbody tr:first-child {
    border-top: none;
  }

  [data-theme="light"] .hol-table tbody tr {
    border-top-color: rgba(0, 0, 0, 0.07);
  }

  [data-theme="red"] .hol-table tbody tr,
  [data-theme="teal"] .hol-table tbody tr,
  [data-theme="blue"] .hol-table tbody tr,
  [data-theme="purple"] .hol-table tbody tr,
  [data-theme="green"] .hol-table tbody tr,
  [data-theme="slate"] .hol-table tbody tr {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  .hol-table tbody tr:hover {
    background-color: transparent;
  }

  .hol-table td {
    padding: 0;
    border: none;
    font-size: 13px;
  }

  .hol-cell-name-wrap {
    grid-area: name;
  }

  .hol-cell-date-wrap {
    grid-area: date;
  }

  .hol-cell-left-wrap {
    grid-area: left;
    align-self: center;
    text-align: right;
  }

  .hol-cell-name {
    font-size: 14px;
    font-weight: 600;
  }

  .hol-cell-date-main {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline;
  }

  .hol-cell-date-sub {
    font-size: 12px;
    display: inline;
    margin-left: 6px;
  }

  .hol-cell-left {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .hol-card {
    padding: 18px 12px 14px;
  }

  .hol-cell-name {
    font-size: 13px;
  }
}

/* ===== Holiday detail page widgets (preserved from previous design) ===== */
.tet-info-table:not(.tet-schedule-table) td:first-child {
    white-space: normal;
    width: 38%;
    word-break: keep-all;
  }

.tet-countdown {
  background: var(--bg-card);
  border: 1px solid var(--content-border);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 24px 0;
  text-align: center;
}

.tet-countdown-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tet-countdown-target {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.tet-countdown-target strong {
  color: var(--text-primary);
}

.tet-countdown-numbers {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tet-countdown-cta {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.tet-countdown-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}



.tet-countdown-cta a:hover { text-decoration: underline; }

.tet-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tet-info-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--content-border);
  vertical-align: top;
}

.tet-info-table td:first-child {
  color: var(--text-secondary);
  white-space: nowrap;
  width: 42%;
}

.tet-info-table td:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

.tet-info-table tr:last-child td { border-bottom: none; }

.tet-years-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tet-years-table th {
  background: var(--content-border);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tet-years-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--content-border);
  color: var(--text-primary);
}

.tet-years-table tr:last-child td { border-bottom: none; }

.tet-years-table .row-current td {
  color: var(--accent);
  font-weight: 600;
}

.tet-schedule-table .row-current td {
  color: var(--accent);
}

.answer-box {
  background: color-mix(in srgb, var(--accent) 9%, white);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 24px 0;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.answer-box strong {
  color: var(--accent);
}

.update-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 14px;
  font-style: italic;
}

.card-img {
  margin: 20px 0 4px;
  width: 100%;
}

.card-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.card-img figcaption {
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  margin-top: 8px;
}

.hol-article-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.tet-info-table.tet-schedule-table {
  table-layout: fixed;
}

.tet-info-table.tet-schedule-table td:first-child {
  vertical-align: middle;
  text-align: center;
  padding: 10px 6px;
  white-space: normal;
}

.tet-info-table.tet-schedule-table td:nth-child(2) {
  text-align: center;
}

.tet-info-table.tet-schedule-table td:last-child {
  text-align: center;
}

/* =====================================================================
   Lock content-section to light-theme appearance regardless of active theme
   ---------------------------------------------------------------------
   The header and .page-hero adopt the active theme's color (red, teal, dark,
   etc.), but the SEO content area below should always look identical to
   the light-theme rendering - clean white surfaces with dark text - so
   readers get consistent typography on every theme.

   We redefine the relevant theme variables at .content-section scope.
   CSS custom properties cascade to all descendants, so every nested widget
   (.content-card, .answer-box, .tet-countdown, .tet-info-table, .tuoi-grid,
   .mau-grid, etc.) renders with light-theme values without touching their
   own CSS rules.
   ===================================================================== */
.content-section {
  --bg-primary: #f2f2f2;
  --bg-secondary: #f0f2f5;
  --bg-card: #ffffff;
  --text-primary: #000000;
  --text-secondary: #555555;
  --content-border: #e5e5e5;
  /* Default content accent (green) for dark + light themes */
  --accent: #3b9d1c;
  --header-fg-below: #000000;
  /* Re-resolve color locally so descendants inheriting `color` get the
     overridden var values (otherwise body's `color: var(--text-primary)`
     was already computed as white in dark/color themes and inherits down
     unchanged). */
  color: var(--text-primary);
}

/* Color themes: content area uses the theme's dominant color as accent */
[data-theme="red"]    .content-section { --accent: #AE4949; }
[data-theme="teal"]   .content-section { --accent: #2A7479; }
[data-theme="blue"]   .content-section { --accent: #306A96; }
[data-theme="purple"] .content-section { --accent: #6D4D89; }
[data-theme="green"]  .content-section { --accent: #49794F; }
[data-theme="slate"]  .content-section { --accent: #4D6978; }

/* ===== Holiday name → detail page link ===== */
.hol-cell-name-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}

.hol-cell-name-link:hover {
  opacity: 0.75;
}