/**
 * Tennis Data Hub — Shared CSS
 *
 * Loades globalt via Tennis_Data_Hub::enqueue_shared_assets() i
 * tennis-data-hub.php. Indeholder kun base-tokens og delte stilarter
 * der bruges af BÅDE spillersider og turneringssider.
 *
 * Modul-specifik CSS findes i:
 *   - players/players.css       (kun kategori 56)
 *   - tournaments/tournaments.css (kun kategori 103)
 *
 * Flyttet hertil fra tennis-data-hub.php's tdh_output_css() den
 * 14. maj 2026 som del af modul-udflytningen. Fil-baseret CSS er
 * browser-cachebar og fjerner PHP-string-escaping-problematikken.
 */

/* ═══ CSS-variabler + base ═══ */
.tdh-wrap { --bg: #faf9f7; --bg-card: #ffffff; --bg-card-alt: #f3f1ed; --border: #e2dfd8; --border-light: #ece9e3; --text: #1a1a1a; --text-dim: #5c5a55; --text-muted: #9b9790; --primary: #015322; --primary-light: rgba(1,83,34,0.08); --primary-mid: rgba(1,83,34,0.15); --red: #b91c1c; --red-light: rgba(185,28,28,0.08); --gold: #92400e; }
.tdh-wrap { color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.tdh-wrap * { box-sizing: border-box; }

/* ═══ Section ═══ */
.tdh-section { padding: 0; }
.tdh-section + .tdh-section { border-top: none; }
.tdh-container { max-width: 100%; margin: 0 auto; padding: 0 0; }
.tdh-section-header { margin-bottom: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tdh-section-header h3 { font-size: 36px; font-weight: 700; letter-spacing: -0.3px; margin: 0; padding: 0; line-height: 1.2; }
.tdh-tag { font-size: 13px; font-weight: 600; color: #fff; background: #0e5829; padding: 4px 12px; border-radius: 4px; letter-spacing: 0.5px; display: inline-block; }
.tdh-tag.tdh-tag-loss { background: var(--red); }
/* Klikbare turneringsnavne i tag'et — arver det generelle .tdh-wrap a-mønster
   nedenfor (diskret border-bottom der bliver mere markant ved hover). To
   overrides nødvendige:
   1. Tekstfarven forbliver hvid — tag'ets baggrund er mørkegrøn, og det
      generelle hover-farveskift til primary-grøn ville gøre teksten usynlig.
   2. Border-bottom-color skifter til hvid ved hover (i stedet for primary-
      grøn) — samme grund: grøn streg på grøn baggrund er usynlig.
   !important er nødvendigt fordi Divi's globale a:hover-styling har højere
   specificitet via tema-selektorer. */
.tdh-tag a,
.tdh-tag a:hover,
.tdh-tag a:focus,
.tdh-tag a:active,
.tdh-tag a:visited { color: inherit !important; }
.tdh-tag a:hover { border-bottom-color: #fff !important; }

/* ═══ Cards ═══ */
.tdh-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.tdh-card-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-muted); margin-bottom: 16px; font-weight: 600; }

/* ═══ Tables ═══ */
.tdh-wrap table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 0; }
.tdh-wrap th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); padding: 10px 12px; border-bottom: 2px solid var(--border); font-weight: 600; }
.tdh-wrap td { padding: 12px 12px; border-bottom: 1px solid var(--border-light); font-size: 16px; color: var(--text-dim); }
.tdh-wrap tr:hover td { background: var(--primary-light); }
.tdh-wrap td.tdh-win { color: var(--primary); font-weight: 600; }
.tdh-wrap td.tdh-loss { color: var(--red); font-weight: 600; }
.tdh-wrap td.tdh-cancelled { color: var(--text-muted); font-style: italic; font-weight: 500; }
.tdh-wrap td.tdh-name { font-weight: 600; color: var(--text); }

/* ═══ Internal links ═══ */
.tdh-wrap a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color 0.15s ease; }
.tdh-wrap a:hover { border-bottom-color: var(--primary); color: var(--primary); }

/* ═══ Responsive (kun delte regler — spiller-/turnerings-specifikke responsive ligger i modul-CSS) ═══ */
@media (max-width: 768px) {
    .tdh-container { padding: 0; }
    .tdh-section { padding: 0; }
    .tdh-section-header h3 { font-size: 32px; }
    .tdh-wrap table { font-size: 11px; }
    .tdh-wrap td, .tdh-wrap th { padding: 7px 6px; }
}