/* Theme toggle button (neutral) */
.theme-toggle{
  appearance:none; -webkit-appearance:none; border:1px solid rgba(200,162,77,.6);
  background: transparent; color: currentColor; font: inherit;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.theme-toggle .icon{ font-size: 16px; line-height: 1; }
.theme-toggle .label{ font-weight: 700; font-size: 14px; }
.theme-toggle:focus-visible{ outline:2px solid rgba(200,162,77,.9); outline-offset:2px; }
@media (max-width: 720px){
  .theme-toggle{ padding: 8px 10px; }
  .theme-toggle .label{ display:none; }
}

/* Ikony budou v barvě značky – klidně změň */
.theme-toggle .icon{ display:inline-flex; }
.theme-toggle .icon svg{ width:18px; height:18px; }
.theme-toggle .icon-sun{ color: var(--gold); }   /* ☀︎ zlatá */
.theme-toggle .icon-moon{ color: var(--gold); }  /* 🌙 zlatá (můžeš dát jinou barvu) */

/* Ve výchozím (light) režimu zobrazujeme MĚSÍC, slunce schováme */
.icon-sun{ display:none; }
.icon-moon{ display:inline-flex; }

/* V dark režimu prohodíme (zobrazit SLUNCE, schovat měsíc) */
:root[data-theme="dark"] .icon-sun{ display:inline-flex; }
:root[data-theme="dark"] .icon-moon{ display:none; }


/* FIX: zobrazovat jen jednu ikonu podle režimu */

/* 1) Základ – obě schovat */
.theme-toggle .icon{
  display: none;
}

/* 2) DARK režim => zobraz SLUNCE, schovej MĚSÍC */
:root[data-theme="dark"] .theme-toggle .icon-sun{
  display: inline-flex;
}
:root[data-theme="dark"] .theme-toggle .icon-moon{
  display: none;
}

/* 3) LIGHT režim (výchozí) => zobraz MĚSÍC, schovej SLUNCE */
:root:not([data-theme="dark"]) .theme-toggle .icon-moon{
  display: inline-flex;
}
:root:not([data-theme="dark"]) .theme-toggle .icon-sun{
  display: none;
}

/* === Brand logo switch for light/dark === */
.brand-mark{ display:inline-block; height:56px; width:auto; vertical-align:middle; }
@media (min-width:768px){ .brand-mark{ height:70px; } }

/* default show light logo, hide dark */
.brand-dark{ display:none; }

/* when dark theme active, swap */
:root[data-theme="dark"] .brand-light{ display:none; }
:root[data-theme="dark"] .brand-dark{ display:inline-block; }