/* ==========================================================================
   NAPĚNÍME.CZ – tmavý režim
   --------------------------------------------------------------------------
   Platí jen když má <html> třídu "dk" (+ "fd", viz konec souboru).
   Třídy nastavuje inline skript v hlavičce
   @layout.latte, když:
     a) má návštěvník tmavý režim (prefers-color-scheme: dark), NEBO
     b) prohlížeč web vynuceně ztmavuje (Opera / Chrome "tmavé stránky")
        i při světlém systému – pak prefers-color-scheme hlásí "light"
        a samotný media query by nezabral.
   Jakmile má kořen color-scheme: dark, prohlížeč přestane web
   automaticky ztmavovat (nepřebarví logo, štítky, tlačítka) a platí
   naše barvy níže.

   :where(html.dk) má nulovou specificitu → pravidla se chovají stejně,
   jako by prefix nebyl (nepřebijí např. bílé odkazy v menu).

   Brand modrá #16509D zůstává jako PLOCHA (header, karty, tlačítka).
   Jako TEXT na tmavém má jen 2.3:1, proto světlejší --dk-blue-text (8.7:1).
   Kontrasty na --dk-bg: text 15.2:1, muted 9.9:1, zlatá 9.8:1,
   navy text na zlaté 9.8:1 (brand modrá na zlaté jen 4.3:1).
   ========================================================================== */

html.dk {
	color-scheme: dark;

	--dk-bg: #0D1626;          /* pozadí stránky – tmavá navy z brand modré */
	--dk-bg-alt: #111D31;      /* střídavé sekce, patička */
	--dk-surface: #172741;     /* karty */
	--dk-surface-2: #1E3352;   /* zvýrazněné karty, info boxy */
	--dk-border: #34507A;
	--dk-border-strong: #4A6896;
	--dk-text: #E6ECF4;
	--dk-muted: #B4C1D2;
	--dk-blue-text: #8CB6F2;   /* brand modrá pro text na tmavém */
	--dk-on-gold: #0D1626;     /* text na zlatém podkladu */

	/* Bootstrap 5.2 proměnné */
	--bs-body-color: var(--dk-text);
	--bs-body-bg: var(--dk-bg);
	--bs-border-color: var(--dk-border);
	--bs-link-color: var(--dk-blue-text);
	--bs-link-hover-color: var(--color-gold);
}


/* --- Základ -------------------------------------------------------------- */

:where(html.dk) body {
	background-color: var(--dk-bg);
	color: var(--dk-text);
}

/* pozn.: bez :is() – ten by h1–h6 zvedl na specificitu třídy */
:where(html.dk) .h1, :where(html.dk) .h2, :where(html.dk) .h3,
:where(html.dk) .h4, :where(html.dk) .h5, :where(html.dk) .h6,
:where(html.dk) h1, :where(html.dk) h2, :where(html.dk) h3,
:where(html.dk) h4, :where(html.dk) h5, :where(html.dk) h6 {
	color: var(--dk-blue-text);
}

:where(html.dk) a {
	color: var(--dk-blue-text);
}
:where(html.dk) a:hover {
	color: var(--color-gold);
}

:where(html.dk) table {
	border-top-color: var(--dk-border-strong);
}
:where(html.dk) :is(td, th) {
	border-bottom-color: var(--dk-border-strong);
}

:where(html.dk) .text-black {
	color: var(--dk-text) !important;
}
:where(html.dk) .text-muted {
	color: var(--dk-muted) !important;
}
:where(html.dk) .bg-light {
	background-color: var(--dk-bg-alt) !important;
}
:where(html.dk) .bg-white {
	background-color: transparent !important;
}

:where(html.dk) ::selection {
	background: var(--color-gold);
	color: var(--dk-on-gold);
}


/* --- Header – podmenu (desktop) ------------------------------------------ */

:where(html.dk) .header-nav .sub li a {
	color: var(--dk-blue-text);
	border-bottom-color: var(--dk-border);
}
@media (min-width: 768px) {
	:where(html.dk) .header-nav .sub ul {
		background: var(--dk-surface);
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5);
	}
	:where(html.dk) .header-nav .sub ul a:hover {
		color: #fff;
	}
	:where(html.dk) .header-nav .sub ul a:hover:after {
		color: var(--color-gold);
	}
}


/* --- Mobilní menu (overlay) ---------------------------------------------- */

:where(html.dk) .nav-modal {
	background: rgba(9, 16, 28, .96);
}


/* --- Hero slider – přechod do pozadí stránky ----------------------------- */

:where(html.dk) #owl-carousel-slider::after {
	background: linear-gradient(to top, #0D1626 0%, rgba(13, 22, 38, .75) 35%, rgba(13, 22, 38, 0) 100%);
}


/* --- Štítky a prvky na zlatém podkladu (navy místo modré = 9.8:1) -------- */

:where(html.dk) :is(.label-new, .hs__badge, .step-card__num) {
	color: var(--dk-on-gold);
}
:where(html.dk) .button-gold,
:where(html.dk) .button-gold:after {
	color: var(--dk-on-gold);
}
/* CTA "Nezávazná poptávka" v hlavičce – bílá na zlaté má jen 1.9:1 */
:where(html.dk) .header-nav .nav-menu > li:last-of-type > a {
	color: var(--dk-on-gold);
}


/* --- Tlačítka ------------------------------------------------------------ */

/* jen základní černé .button – varianty (.button-white, -gold, -green, -blue,
   -outline) si nechávají své barvy; hover je v custom.css (modrá) */
:where(html.dk) .button:not([class*="button-"]) {
	border-color: var(--dk-border-strong);
	background-color: var(--dk-surface-2);
	color: #fff;
}
:where(html.dk) .button-blue {
	border-color: var(--color-blue);
	background-color: var(--color-blue);
}
:where(html.dk) .button-blue:hover {
	border-color: var(--dk-border-strong);
	background-color: var(--dk-surface-2);
}
:where(html.dk) .button-outline {
	border-color: var(--dk-blue-text);
	color: var(--dk-blue-text);
}
:where(html.dk) .button-outline:after {
	color: var(--dk-blue-text);
}
:where(html.dk) .button-outline:hover {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

:where(html.dk) .btn-outline-primary {
	--bs-btn-color: var(--dk-blue-text);
	--bs-btn-border-color: var(--dk-blue-text);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--color-blue);
	--bs-btn-hover-border-color: var(--color-blue);
	--bs-btn-active-bg: var(--color-blue);
	--bs-btn-active-border-color: var(--color-blue);
	--bs-btn-disabled-color: var(--dk-muted);
	--bs-btn-disabled-border-color: var(--dk-border-strong);
}

:where(html.dk) .link-arrow {
	color: var(--dk-blue-text);
}
:where(html.dk) .link-arrow:hover {
	color: var(--color-gold);
}


/* --- Rozcestník "Co izolujeme" (pozadí s diagonálním vzorem) -------------- */

:where(html.dk) .rozcestnik {
	background-color: var(--dk-bg-alt);
	background-blend-mode: multiply;   /* zachová jemný vzor, ale ztmaví ho */
}
:where(html.dk) :is(#block-69, #block-70) {
	background: var(--dk-bg-alt);
}


/* --- Karty a boxy -------------------------------------------------------- */

:where(html.dk) :is(.benefit-item, .recenze-item, .partner-item) {
	border-top-color: var(--dk-border);
}

:where(html.dk) .stat-card {
	border-color: var(--dk-border);
	background: var(--dk-surface);
	box-shadow: none;
}
:where(html.dk) .stat-card__value {
	color: var(--dk-blue-text);
}
:where(html.dk) .stat-card__label {
	color: var(--dk-muted);
}

:where(html.dk) .use-card {
	border-color: var(--dk-border);
	border-top-color: var(--color-gold);
	background: var(--dk-surface);
}
:where(html.dk) .use-card--alt {
	border-top-color: var(--dk-blue-text);
	background: var(--dk-surface-2);
}

:where(html.dk) ul.check-list li::before {
	border-color: var(--dk-blue-text);
}

:where(html.dk) .spec-box {
	background: var(--dk-surface-2);
}

:where(html.dk) .step-card {
	border-color: var(--dk-border);
	background: var(--dk-surface);
}
:where(html.dk) .step-card__title {
	color: var(--dk-blue-text);
}
:where(html.dk) .step-card__text {
	color: var(--dk-muted);
}

:where(html.dk) .cta-band--light {
	background: var(--dk-surface-2);
	color: var(--dk-text);
}
:where(html.dk) .cta-band--light .cta-band__title {
	color: #fff;
}


/* --- Seznamy, FAQ, přílohy ----------------------------------------------- */

:where(html.dk) ul.list li {
	border-bottom-color: var(--dk-border);
}

:where(html.dk) .faq-item:last-of-type {
	border-bottom-color: var(--dk-border-strong);
}
:where(html.dk) .faq-question {
	border-top-color: var(--dk-border-strong);
	/* šipka – původní ikona je brand modrá (na tmavém nečitelná) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M9,0l9,16H0Z' transform='translate(18 16) rotate(180)' fill='%238CB6F2'/%3E%3C/svg%3E");
}
:where(html.dk) .faq-question:hover {
	border-color: var(--dk-blue-text);
	color: var(--dk-blue-text);
}

:where(html.dk) .reference-param {
	border-bottom-color: var(--dk-border);
}

:where(html.dk) .files li {
	/* původní ikona je černá – na tmavém pozadí zlatá šipka */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 1v12M3 8l5 5 5-5M1 18h14' fill='none' stroke='%23FFAF0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* --- Formuláře ----------------------------------------------------------- */

/* bez :is() – zachovat původní specificitu (validace Bootstrapu .is-invalid) */
:where(html.dk) .form-control,
:where(html.dk) .form-select,
:where(html.dk) .form-item input[type=text],
:where(html.dk) .form-item textarea,
:where(html.dk) .form-item select {
	border-color: var(--dk-border-strong);
	background-color: var(--dk-surface);
	color: var(--dk-text);
}
:where(html.dk) .form-item input[type=text],
:where(html.dk) .form-item textarea,
:where(html.dk) .form-item select {
	box-shadow: none;
}
:where(html.dk) :is(.form-control, .form-select):focus {
	border-color: var(--dk-blue-text);
	background-color: var(--dk-surface);
	color: var(--dk-text);
}
:where(html.dk) .form-control::placeholder {
	color: var(--dk-muted);
}
:where(html.dk) .form-check-input {
	border-color: var(--dk-border-strong);
	background-color: var(--dk-surface);
}
:where(html.dk) .form-check-input:checked {
	border-color: var(--color-blue);
	background-color: var(--color-blue);
}


/* --- Inline barvy z WYSIWYG editoru (obsah stránek z administrace) -------
   Editor ukládá style="color: ..." přímo do textu. Na tmavém pozadí mají
   zelená #008000 jen 3.5:1 a tmavě modré ~2.3:1 → světlejší odstíny.
   :not([style*=background]) – nepřebarvit prvky s vlastním pozadím.     */

:where(html.dk) main :is([style*="color: #008000" i], [style*="color: green" i]):not([style*="background" i]) {
	color: #4CC26A !important;   /* 8:1 */
}
:where(html.dk) main :is([style*="color: #16509d" i], [style*="color: #284b8f" i], [style*="color: #284b97" i]):not([style*="background" i]) {
	color: var(--dk-blue-text) !important;
}


/* --- Recenze – styly jsou i inline v šabloně recenze.latte (načtou se až
       po tomto souboru), proto záměrně vyšší specificita html.dk ---------- */

html.dk .rating {
	color: #4A5D7A;
}
html.dk .rating .rating-star.is-on {
	color: #f5a623;
}
html.dk .recenze-wrap.is-ready .recenze-nav,
html.dk .recenze-nav {
	border-color: var(--dk-border-strong);
	background: var(--dk-surface-2);
	color: var(--dk-text);
	box-shadow: none;
}
html.dk .recenze-wrap.is-ready .recenze-nav:hover {
	border-color: #f5a623;
	background: #f5a623;
	color: var(--dk-on-gold);
}
html.dk .recenze-dots a {
	background: #4A5D7A;
}
html.dk .recenze-score__value {
	color: var(--dk-blue-text);
}
html.dk .recenze-score__label {
	color: var(--dk-muted);
}
html.dk .recenze-score__stars {
	color: #4A5D7A;
}
html.dk .recenze-score__stars .is-on {
	color: #f5a623;
}


/* --- Patička ------------------------------------------------------------- */

:where(html.dk) footer {
	background: var(--dk-bg-alt);
	box-shadow: none;
}
:where(html.dk) footer .nav-menu li a {
	border-bottom-color: transparent;   /* na bílé patičce byla linka neviditelná */
}


/* --- Cookie lišta (vendor/cookieConsent) --------------------------------- */

:where(html.dk) #cc--main {
	--cc-bg: var(--dk-surface);
	--cc-text: var(--dk-text);
	--cc-block-text: var(--dk-muted);
	--cc-btn-primary-bg: var(--color-blue);
	--cc-btn-primary-text: #fff;
	--cc-btn-primary-hover-bg: #1D63BE;
	--cc-btn-secondary-bg: var(--dk-surface-2);
	--cc-btn-secondary-text: var(--dk-text);
	--cc-btn-secondary-hover-bg: var(--dk-border);
	--cc-toggle-bg-off: #5A6B82;
	--cc-toggle-bg-on: var(--color-blue);
	--cc-toggle-bg-readonly: #33465F;
	--cc-toggle-knob-bg: #fff;
	--cc-toggle-knob-icon-color: var(--dk-surface);
	--cc-cookie-category-block-bg: var(--dk-surface-2);
	--cc-cookie-category-block-bg-hover: var(--dk-border);
	--cc-section-border: var(--dk-border);
	--cc-cookie-table-border: var(--dk-border);
	--cc-overlay-bg: rgba(4, 8, 16, .85);
	--cc-webkit-scrollbar-bg: #5A6B82;
	--cc-webkit-scrollbar-bg-hover: #7A8BA2;
}
:where(html.dk) #cc--main .cc_div :is(a.cc-link, .cc-link) {
	color: var(--dk-blue-text);
}
:where(html.dk) #cc--main #cm.bar {
	box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .5);
}


/* ==========================================================================
   VYNUCENÉ ZTMAVENÍ PŘI SVĚTLÉM SYSTÉMU  (html.fd)
   --------------------------------------------------------------------------
   Opera "Force dark pages" / Chrome flag / DevTools auto-dark, když systém
   hlásí světlý režim: prohlížeč v tomto stavu IGNORUJE color-scheme a dál
   přebarvuje (ověřeno v Chrome headless):
     - světlé plochy (#fff … cca #D3DEEC) ztmaví,
     - TMAVÝ TEXT vždy zesvětlí (i na zlaté → světlý text na zlaté),
     - logo (SVG s průhledností) invertuje na černé.
   Nemění: navy, brand modrou, zelenou, zlatou plochu, rámečky, světlý text.
   → prvky stavíme jen z toho, co přežije.
   Třídu nastavuje skript v @layout.latte (jen forced && !prefers dark;
   při tmavém systému prohlížeč color-scheme respektuje a .fd netřeba).
   ========================================================================== */

/* logo předinvertujeme – prohlížeč ho invertuje zpět do bílé */
html.fd img[src*="napenime_logo"] {
	filter: invert(1) hue-rotate(180deg);
}

/* štítky "NOVINKA", čísla kroků: zlatý obrys + zlatý text (9.8:1 na navy) */
html.fd .label-new,
html.fd .hs__badge,
html.fd .step-card__num {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--color-gold);
	color: var(--color-gold);
}

/* zlatá a bílá tlačítka: zlatý obrys + bílý text (bílá plocha by zčernala).
   Obrys přes inset box-shadow – barvu rámečku (border) prohlížeč ztmaví,
   stín nechá být (ověřeno). */
html.fd .button-gold,
html.fd .button-white {
	border-color: transparent;
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--color-gold);
	color: #fff;
}
html.fd .button-gold:after,
html.fd .button-white:after {
	color: var(--color-gold);
}
html.fd .button-gold:hover,
html.fd .button-white:hover {
	border-color: transparent;
	background-color: var(--color-blue);
	color: var(--color-gold);
}

/* CTA v hlavičce: navy text by prohlížeč zesvětlil → původní bílý */
html.fd .header-nav .nav-menu > li:last-of-type > a {
	color: #fff;
}
html.fd .header-nav .nav-menu > li:last-of-type > a:hover {
	background: var(--color-blue);
	box-shadow: inset 0 0 0 1.5px var(--color-gold);
	color: var(--color-gold);
}