/* ============================================================
   TREASURE HUNT PRAGUE — tokens.css
   Jediný zdroj pravdy pro CSS custom properties.
   Importováno ve všech HTML stránkách jako první <link>.
   ============================================================ */

/* ── Tmavé téma (výchozí) ─────────────────────────────────── */
:root {
  --bg:          #0d1117;
  --bg-alt:      #111620;
  --bg-footer:   #090c11;
  --bg-nav:      rgba(13, 17, 23, 0.97);
  --gold:        #c9a84c;
  --gold-light:  #e2c97e;
  --gold-shadow: rgba(201, 168, 76, 0.35);
  --parchment:   #f0e6d3;
  --parchment-dim: rgba(240, 230, 211, 0.7);
  --text:        #d4c9b8;
  --border:      rgba(201, 168, 76, 0.25);
  --border-dim:  rgba(240, 230, 211, 0.08);

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', system-ui, sans-serif;

  --radius:    6px;
  --radius-lg: 12px;
  --gap:       1.5rem;
  --section-pad: 5rem 1.25rem;

  --transition: 0.3s ease;
  --nav-h: 68px;
}

/* ── Světlé téma ──────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:            #f5f0e8;
  --bg-alt:        #ede6d9;
  --bg-footer:     #ddd6c8;
  --bg-nav:        rgba(245, 240, 232, 0.97);
  --gold:          #8b6914;
  --gold-light:    #a07820;
  --gold-shadow:   rgba(139, 105, 20, 0.25);
  --parchment:     #1a1208;
  --parchment-dim: rgba(26, 18, 8, 0.7);
  --text:          #2d2010;
  --border:        rgba(139, 105, 20, 0.3);
  --border-dim:    rgba(26, 18, 8, 0.1);
}

/* ── Navigace nahoře — vždy světlé barvy (průhledná nad tmavou fotkou) ── */
:root[data-theme="light"] .site-nav:not(.scrolled) {
  --parchment:     #f0e6d3;
  --parchment-dim: rgba(240, 230, 211, 0.7);
  --gold:          #c9a84c;
  --gold-light:    #e2c97e;
  --border:        rgba(201, 168, 76, 0.25);
}

/* ── Hero sekce — vždy tmavé barvy (overlay na tmavé fotce) ── */
/* Lokálně přepíše světlé téma zpět na tmavé, aby text byl čitelný */
:root[data-theme="light"] .hero {
  --parchment:     #f0e6d3;
  --parchment-dim: rgba(240, 230, 211, 0.7);
  --text:          #d4c9b8;
  --gold:          #c9a84c;
  --gold-light:    #e2c97e;
  --border:        rgba(201, 168, 76, 0.25);
}

/* ── Formulář — light mód ─────────────────────────────────── */
:root[data-theme="light"] select.form-control option {
  background: var(--bg-alt);
  color: var(--parchment);
}
:root[data-theme="light"] .form-control {
  background: rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .form-control::placeholder {
  color: rgba(26, 18, 8, 0.35);
}
:root[data-theme="light"] input[type="date"].form-control { color-scheme: light; }
:root[data-theme="light"] input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: none; }

/* ── Loga klientů — v light módu tmavá (ne bílá) ─────────── */
:root[data-theme="light"] .client-logo img {
  filter: brightness(0);
}

/* ── Nav controls group (theme toggle + lang switcher) ──── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto; /* mobile: skupinu posune doprava */
}

/* ── Theme toggle tlačítko ────────────────────────────────── */
.nav-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--parchment);
  padding: 6px;
  border-radius: var(--radius);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  line-height: 0;
}
.nav-theme-toggle:hover { color: var(--gold-light); }

/* ── Language switcher — dropdown ─────────────────────── */
.nav-lang {
  position: relative;
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-current {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--parchment-dim);
  padding: 6px 4px;
  transition: color var(--transition);
  white-space: nowrap;
}
.lang-current:hover { color: var(--gold); }
.lang-chevron {
  transition: transform var(--transition);
  flex-shrink: 0;
}
.nav-lang:hover .lang-chevron,
.nav-lang:focus-within .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 130px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-lang:hover .lang-dropdown,
.nav-lang:focus-within .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-option {
  display: block;
  padding: 8px 14px;
  color: var(--parchment-dim);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.lang-option:hover { color: var(--gold); background: rgba(201,168,76,.06); }
.lang-option.active { color: var(--gold); font-weight: 700; }

/* Mobile overlay lang switcher */
.nav-overlay-lang {
  display: flex;
  gap: 1rem;
  padding: 0 0 0.5rem;
}
.overlay-lang-link {
  color: var(--parchment-dim);
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}
.overlay-lang-link:hover,
.overlay-lang-link.active { color: var(--gold); }

/* Tmavé téma → zobrazit sluníčko (přepnout do světlého) */
:root[data-theme="dark"]  .icon-moon,
:root:not([data-theme="light"]) .icon-moon { display: none; }
:root[data-theme="dark"]  .icon-sun,
:root:not([data-theme="light"]) .icon-sun  { display: block; }

/* Světlé téma → zobrazit měsíček (přepnout do tmavého) */
:root[data-theme="light"] .icon-sun  { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }

/* ── Light mode nav-controls desktop gap ─────────────────── */
/* Na desktopu skupinu oddělíme od nav-cta */
@media (min-width: 768px) {
  .nav-controls { margin-left: 1rem; }
}

/* ── Light mode: dropdown nad průhledným navem ────────────── */
/* Průhledný nav v light modu má vynucené světlé barvy textu;
   dropdown je ale bílý box — potřebuje tmavý text z root light theme */
:root[data-theme="light"] .site-nav:not(.scrolled) .lang-dropdown {
  --parchment-dim: rgba(26, 18, 8, 0.7);
  --border:        rgba(139, 105, 20, 0.3);
  background:      #ede6d9;
}