/* ============================================================
   Jogrsovi Harcovníci — skin fotogalerie do „kabátku" hlavního webu
   (teplá krémová, setninové barvy, fonty Bricolage + Hanken).
   Auto-načítá X3 (content/custom/files/css/*include*.css). Jen vrstva
   přes základní skin — neměníme panel ani konfiguraci galerie.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* zelená jako akcent (přebije tmavou z konfigurace) */
  --primary-color: #3f7d3a !important;
  --harci-bg: #f5f1e8;
  --harci-surface: #ffffff;
  --harci-ink: #211d17;
  --harci-muted: #6b6256;
  --harci-line: rgba(33,29,23,.14);
  --harci-cervena: #c8362b;
  --harci-zluta: #e7a614;
  --harci-zelena: #3f7d3a;
  --harci-display: "Bricolage Grotesque", system-ui, sans-serif;
  --harci-body: "Hanken Grotesk", system-ui, sans-serif;
}

/* —— základ: teplé krémové pozadí + tmavý text + body font —— */
html,
body,
body.daylight,
.main,
#content,
.x3-page,
.x3-content,
.album,
.sb-site-container,
.sb-site,
.sb-slidebar {
  background-color: var(--harci-bg) !important;
  color: var(--harci-ink);
  font-family: var(--harci-body) !important;
}
body p, .caption, .sidebar, .gallery, .footer, .x3-text, .text { font-family: var(--harci-body) !important; }

/* —— nadpisy, navigace, logo: displejový font —— */
h1, h2, h3, h4, h5, h6,
.logo, .nav, .nav-wrapper, .sidebar-title, .x3-title, .page-title, .album-title,
.topbar, .sidebar a, .nav a {
  font-family: var(--harci-display) !important;
}

/* —— odkazy + akcenty: zelená —— */
a { color: var(--harci-zelena); }
a:hover { color: #2c5a28; }
::selection { background: color-mix(in oklab, var(--harci-zelena) 28%, transparent); }

/* —— navigace / sidebar jako světlý „brand" panel —— */
.sb-slidebar,
.sidebar,
.nav,
.nav-wrapper {
  background-color: var(--harci-surface) !important;
  color: var(--harci-ink) !important;
  border-color: var(--harci-line) !important;
}
.sb-slidebar { box-shadow: inset -1px 0 0 var(--harci-line); }
/* barevný setninový proužek nahoře v navigaci */
.sb-slidebar::before,
.nav-wrapper::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--harci-cervena) 0 33.3%, var(--harci-zluta) 33.3% 66.6%, var(--harci-zelena) 66.6%);
}
.sidebar a, .nav a, .sb-slidebar a { color: var(--harci-ink) !important; }
.sidebar a:hover, .nav a:hover,
.sidebar .active > a, .nav .active > a,
.sidebar a.active, .nav a.active { color: var(--harci-zelena) !important; }

/* —— logo: nové JH (tři barvy), bez zaoblení, vycentrované ve stylu webu —— */
.logo, .logo a { color: var(--harci-ink) !important; }
.logo { text-align: center; }
.logo img { border-radius: 0; max-height: 64px; width: auto; }

/* —— galerie: jemně zaoblené náhledy + teplý rámeček —— */
.x3-gallery-frame,
.gallery img,
.thumb img,
.gallery-item img { border-radius: 12px !important; }
.x3-gallery-frame { transition: transform .18s ease, box-shadow .18s ease; }
.x3-gallery-frame:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(20,16,10,.45); }

/* —— popisky —— */
.caption, .gallery-filename { color: var(--harci-ink); }
.gallery-filename_ext, .caption-bottom span { color: var(--harci-muted); }

/* —— tlačítka / cart / akce —— */
.button, button.x3, .x3-button, .caption-cart-button {
  background-color: var(--harci-zelena) !important;
  border-color: var(--harci-zelena) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* —— footer: kompletně skrytý (licence galerie zaplacená → kredit smí pryč) —— */
.footer, .x3-footer { display: none !important; }

/* —— popup (lightbox) na krémové —— */
.x3-popup, .x3-popup-bg, .pswp__bg {
  background-color: color-mix(in oklab, var(--harci-bg) 96%, #000) !important;
}
.x3-popup .caption, .x3-popup-caption { color: var(--harci-ink); font-family: var(--harci-body); }

/* —— loader spinner v zelené —— */
.x3-loader, .fa-loading .x3-loader { border-top-color: var(--harci-zelena) !important; }

/* (footer obsah už není potřeba — celý footer je skrytý výše) */