:root {
  --color-1: #080099;
  --color-2: #B90DFF;
  --color-3: #FF1691;
  --color-4: #FF944C;
  --color-5: #EE2D16;
  --color-6: #07EDA4;
  --color-7: #12A8E7;
  --color-8: #FFCD57;
  --color-9: #6978D6;
  --bg-light:  #F5F7FA;
  --bg-light2: #EFF2FF;
  --bg-dark:   #0E1117;
  --bg-dark2:  #242A56;
  --bg:        var(--bg-light);
  --bg-alt:    var(--bg-light2);
  --text:      #0B0B0B;
  --text-muted:#555555;
  --border:    rgba(0,0,0,.12);
  --link:      var(--color-1);
  --link-hover:var(--color-2);
  --focus:     var(--color-7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        var(--bg-dark);
    --bg-alt:    var(--bg-dark2);
    --text:      #FFFFFF;
    --text-muted:#B9C0D0;
    --border:    rgba(255,255,255,.16);
    --link:      var(--color-2);
    --link-hover:var(--color-8);
    --focus:     var(--color-2);
  }
}

html[data-theme="light"] {
  --bg:        var(--bg-light);
  --bg-alt:    var(--bg-light2);
  --text:      #0B0B0B;
  --text-muted:#555555;
  --border:    rgba(0,0,0,.12);
  --link:      var(--color-1);
  --link-hover:var(--color-2);
  --focus:     var(--color-7);
}

html[data-theme="dark"] {
  --bg:        var(--bg-dark);
  --bg-alt:    var(--bg-dark2);
  --text:      #FFFFFF;
  --text-muted:#B9C0D0;
  --border:    rgba(255,255,255,.16);
  --link:      var(--color-4);
  --link-hover:var(--color-8);
  --focus:     var(--color-4);
}

html { background: var(--bg); color: var(--text); color-scheme: light dark; }
body { background: var(--bg); color: var(--text); }

a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

.surface {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.hidden { display: none !important; }

/* KROK 1 — povrchy obsahu v GP (funguje pro one-container i separate-containers) */
.inside-article,
.sidebar .widget,
.comments-area,
.paging-navigation,
.page-header {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Trochu vzduchu dovnitř hlavního obsahu a widgetů */
.inside-article,
.sidebar .widget,
.comments-area {
  padding: 1.25rem;
}

/* Zajisti, že nadpisy a běžný text respektují proměnné tématu */
.inside-article h1,
.inside-article h2,
.inside-article h3,
.inside-article h4,
.inside-article h5,
.inside-article h6,
.inside-article p,
.sidebar .widget,
.comments-area {
  color: var(--text);
}

/* Odkazy uvnitř "povrchů" (obsahu/widgetů) */
.inside-article a,
.sidebar .widget a,
.comments-area a {
  color: var(--link);
}
.inside-article a:hover,
.sidebar .widget a:hover,
.comments-area a:hover {
  color: var(--link-hover);
}

/* Jemné oddělovače */
.inside-article hr,
.comments-area hr,
.sidebar .widget hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* KROK 2 — přitvrdit dark pro hlavní obsah (podobně jako sidebar) */
html[data-theme="dark"] .inside-article,
html[data-theme="dark"] .comments-area {
  background: #121826;           /* tmavší než --bg-dark2 */
  color: #F2F5FF;                /* světlejší text pro lepší kontrast */
  border-color: rgba(255,255,255,.12);
}

/* Uvnitř obsahu drž konzistentní barvy textu a odkazů */
html[data-theme="dark"] .inside-article h1,
html[data-theme="dark"] .inside-article h2,
html[data-theme="dark"] .inside-article h3,
html[data-theme="dark"] .inside-article h4,
html[data-theme="dark"] .inside-article h5,
html[data-theme="dark"] .inside-article h6,
html[data-theme="dark"] .inside-article p,
html[data-theme="dark"] .inside-article li {
  color: inherit;
}

html[data-theme="dark"] .inside-article a {
  color: var(--color-4);         /* fialová v tmě víc vynikne */
}
html[data-theme="dark"] .inside-article a:hover {
  color: var(--color-8);
}

/* HEADER = stejný vzhled jako sidebar (v obou režimech) */
.site-header,
.inside-header,
.main-navigation {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

/* Barvy odkazů v menu */
.main-navigation .main-nav > ul > li > a,
.main-navigation .menu-toggle,
.main-navigation .search-item a {
  color: var(--text);
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li:hover > a {
  color: var(--link);
}

/* Dropdown menu */
.main-navigation .main-nav ul ul {
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.main-navigation .main-nav ul ul li a { color: var(--text); }
.main-navigation .main-nav ul ul li a:hover { color: var(--link); }

/* Mobile stav (toggled menu) */
.main-navigation .main-nav.toggled,
.main-navigation .inside-navigation {
  background: var(--bg-alt);
}

/* Pokud máš zapnutý transparentní/sticky header, drž stejné pozadí */
.transparent-header .site-header,
.transparent-header .main-navigation,
.main-navigation.is_stuck {
  background: var(--bg-alt) !important;
  border-bottom: 1px solid var(--border);
}

/* FOOTER = stejné pozadí jako sidebar (bg-alt), včetně linků a widgetů */
.site-footer,
.footer-widgets,
.site-info,
.inside-site-info,
.footer-bar {
  background: var(--bg-alt);
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Widgety ve footeru stejně „kartově“ jako v sidebaru */
.footer-widgets .widget {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

/* Typografie a odkazy ve footeru */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer li { color: var(--text); }

.site-footer a { color: var(--link); }
.site-footer a:hover { color: var(--link-hover); }

/* KK  header brading*/
  .site-branding h1 .main-title a {
  color: var(--link-hover)!important;
}
  .site-description {
  color: var(--link);
}

/* Základní rozměry loga */
/* Rozměry loga */
.logo { display:inline-block; height:92px; width:auto; }

/* Přepínání podle tématu */
.logo--dark { display:none; }
html[data-theme="dark"] .logo--light { display:none; }
html[data-theme="dark"] .logo--dark  { display:inline-block; }

/* Hanburger menu primary menu */
/* zvětší jak hamburger, tak close */
.main-navigation .menu-toggle .gp-icon {
  font-size: 30px;   /* default je cca 20px */
  }
  .main-navigation .menu-toggle {
  padding: 17px 20px 5px 20px;
}
  .main-navigation .menu-toggle .gp-icon svg * {
  stroke-width: 3; /* default je většinou 2 */
}
/* === HAMBURGER MENU - LIGHT === */
/* ZÁKLAD: stejné pro light i dark */
.main-navigation .menu-toggle {
  color: #F5F7FA;              /* barva ikonky (SVG dědí currentColor) */
  background-color: #AF1718;   /* pozadí tlačítka */
  transition: color .2s ease, background-color .2s ease;
}

/* Ikona = SVG -> bere currentColor; pojistka i na vnořené elementy */
.main-navigation .menu-toggle .gp-icon svg,
.main-navigation .menu-toggle .gp-icon svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* HOVER = invert */
.main-navigation .menu-toggle:hover {
  color: #AF1718;
  background-color: #F5F7FA;
}

/* DŮLEŽITÉ: drž stejné barvy i ve stavech, které GP přidává po kliknutí */
.main-navigation .menu-toggle:focus,
.main-navigation .menu-toggle:active,
.main-navigation .menu-toggle.toggled,
.main-navigation .menu-toggle[aria-expanded="true"] {
  color: #F5F7FA;
  background-color: #AF1718;
}

/* A i v těchto stavech povol invert při hoveru */
.main-navigation .menu-toggle.toggled:hover,
.main-navigation .menu-toggle[aria-expanded="true"]:hover {
  color: #AF1718;
  background-color: #F5F7FA;
}

/* Pokud by šablona stále přepisovala barvy, povol si nouzově !important: */
/*
.main-navigation .menu-toggle { color:#F5F7FA !important; background:#AF1718 !important; }
.main-navigation .menu-toggle:hover { color:#AF1718 !important; background:#F5F7FA !important; }
*/

/* QUERY */
/* Bez uživatelské volby – respektuj systém */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .logo--light { display:none; }
  html:not([data-theme]) .logo--dark  { display:inline-block; }
}

/* QUERY */
.mainlogo {
  max-width: 250px;
  height: auto;
}

@media (max-width: 768px) {
  #masthead img.mainlogo {
    width: 150px;
  }
    #masthead img.logo--light, #masthead img.logo--dark {
      height:50px;
    }
  }