/* Vzhled specifický pro elektro-domazlice.cz — připojeno přes brand.stylesheet.
   Předělávka 13. 10. 2026: tmavý podklad s fotkou kamer vlevo nahoře zůstává
   z předlohy, popředí je moderní tmavé. Vzory: technologienamiru.cz (úvod
   s nadpisem a dvěma tlačítky, karty služeb), mvsecuretech.cz (tmavá „tech“
   plocha, výrazný telefon a e-mail), safezone.cz (horní lišta s kontaktem).
   15. 10. 2026 přibyl přepínač Vzhled (site.yaml `temata`): tmavý = schválený
   výchozí, světlý = dovymyšlený, jeho pravidla jsou na konci souboru.
   ⚠️ Tenhle soubor se načítá PŘED styly tématu — pravidla proto potřebují
   vyšší specifičnost (html …), jinak je téma přebije. */

html body { background: #1d1d1d url('/assets/cctv-background.jpg') no-repeat left 3rem; }
/* Fotka kamer patří jen k úvodu — na hledání a 404 by ležela pod nadpisem
   a formulářem. Nadpis podstránky nepotřebuje odsazení pod fotku. */
html body:not(.is-home) { background-image: none; }
html body:not(.is-home) article h1 { padding-top: 0; margin-left: 0; }

/* ── hlavička: horní lišta s telefonem + pruh se jménem a heslem ── */
html .horni-lista { background: #111; color: #e8e8e8; font-size: 0.92rem; }
html .horni-lista a:first-child { color: #fff; font-weight: 700; }
html .horni-lista svg { color: var(--accent-bright); }
/* Jednostránkový web bez menu: v liště pod pruhem jsou jen Vzhled a Hledat,
   vpravo a bez barevného pruhu, aby nerušily tmavou hlavičku předlohy.
   I na telefonu zůstávají vidět — schovat dvě položky pod „Menu“ by bylo
   o klepnutí navíc. */
html .hlavicka-pruh > .wrap-wide { background: transparent; }
html .hlavicka-pruh .site-nav { justify-content: flex-end; padding-inline: 0.05rem; }
html .hlavicka-pruh .site-nav > .nav-vzhled { margin-left: auto; }
html .hlavicka-pruh .site-nav > .nav-hledani { margin-left: 0; }
html .hlavicka-pruh .site-nav > .nav-item > summary { color: #e8e8e8; padding: 0.55rem 1.2rem; }
html .hlavicka-pruh .site-nav > .nav-item > summary:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
html .hlavicka-pruh .nav-prepinac { display: none !important; }
html .nav-hledani-panel button, html .hledani-form button { background: var(--accent-bright); color: var(--on-accent); }
html .site-header .pruh { background: transparent; border-bottom: 0; box-shadow: none; }
/* Hlavička zůstává při rolování nahoře (téma), proto plný podklad v barvě
   stránky — průhledná se jménem a heslem psala přes obsah (náhled 13. 10.).
   Na telefonu by zabrala čtvrt obrazovky, tam roluje se stránkou jako na
   předloze. Fotka kamer začíná pod ní, takže ji podklad nezakryje. */
html .site-header { background: #1d1d1d; border-bottom: 0; box-shadow: 0 6px 16px rgb(0 0 0 / 0.3); }
html .site-header .brand-text { color: #fff; font-size: 1.6rem; letter-spacing: -0.01em; }
html .site-header .claim { color: var(--accent-bright); font-weight: 700; font-style: normal; }

/* Kotvy (výsledky hledání, adresa v liště → #kontakt) nesmí skončit pod
   lepivou hlavičkou; na telefonu hlavička neroluje s sebou. */
html article :is(section, h2)[id] { scroll-margin-top: 10rem; }

/* ── jednosloupcový obsah bez rámečku ── */
html article { background: transparent; border: 0; box-shadow: none; padding: 0; }
html article h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 4.5rem 0 1.5rem; letter-spacing: -0.01em; }
html article h2::after { content: ''; display: block; width: 3rem; height: 3px; margin-top: 0.7rem; background: var(--accent-bright); border-radius: 2px; }

/* ── úvod: vpravo od fotky kamer, velký nadpis a dvě tlačítka ── */
html article h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  padding-top: 7.5rem;
}
.uvod { padding-bottom: 6rem; }
.uvod-tlacitka { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 0; }
@media (min-width: 1000px) {
  /* Text začíná vpravo od fotky kamer (ta je ukotvená k levé hraně okna). */
  html article h1, .uvod { margin-left: max(0px, calc(640px - max(0px, (100vw - var(--wide)) / 2) - 1.25rem)); }
  html article h1 { padding-top: 6rem; max-width: 40rem; }
  .uvod { min-height: 9rem; }
}

/* Tlačítka: oranžové hlavní (telefon), obrysové vedlejší. */
html .tl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 10px;
  border: 1.5px solid #5a5a5a;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: rgb(255 255 255 / 0.04);
}
html .tl:hover { border-color: var(--accent-bright); }
html .tl.tl-hlavni { background: var(--accent-bright); border-color: var(--accent-bright); color: #1a1a1a; }
html .tl.tl-hlavni:hover { filter: brightness(1.08); }

/* ── služby: karty s ikonou ── */
html .sluzby-karty {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Flex na střed: sedm služeb = 4 + 3, poslední řada nevisí vlevo. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
html .sluzby-karty li {
  flex: 0 1 calc(25% - 0.75rem);
  min-width: 13rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 1.15rem 1.2rem;
  background: rgb(38 38 38 / 0.92);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
html .sluzby-karty li::first-letter { text-transform: uppercase; }
html .sluzby-karty svg {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: rgb(224 116 60 / 0.14);
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── pruh s nabídkou zdarma (dříve pravý sloupec předlohy) ── */
html .nabidka {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  background: linear-gradient(120deg, #2b2b2b, #232323);
  border: 1px solid var(--border);
}
html .nabidka img { width: 9rem; height: auto; border-radius: 0; box-shadow: none; margin: 0; }
html .nabidka p { margin: 0; }
html .nabidka strong { color: #fff; font-size: 1.35rem; line-height: 1.3; }
html .nabidka-tlacitka { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ── kontakt s mapou ── */
html .kontakt-mrizka { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1.25rem; align-items: stretch; }
html .kontakt-karta {
  padding: 1.6rem 1.75rem;
  background: var(--karta);
  border: 1px solid var(--border);
  border-radius: 16px;
  line-height: 1.7;
}
html .kontakt-karta h3 { margin: 0 0 0.8rem; color: #fff; font-size: 1.35rem; }
html .kontakt-karta p { margin: 0 0 1rem; color: var(--muted); }
html .kontakt-karta strong { color: #fff; }
html .kontakt-mrizka .mapa { margin: 0; }
html .kontakt-mrizka .mapa-spust, html .kontakt-mrizka iframe { border-radius: 16px; height: 100%; }
html .kontakt-mrizka .mapa figcaption { color: var(--muted); }

/* ── reference: mřížka karet ── */
html .reference ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.85rem;
}
html .reference li {
  margin: 0;
  padding: 1rem 1.1rem 1rem 1.25rem;
  background: rgb(38 38 38 / 0.92);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-bright);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
html .reference li p { margin: 0; }
html .reference strong { color: #fff; font-size: 1rem; }

/* ── patička ── */
html .site-footer { background: #111; border-top: 0; color: #c8c8c8; }
html .site-footer a { color: #f5f5f5; }
html .site-footer .footer-bottom { border-top-color: #333; }
html .site-footer .footer-col strong { color: #f0f0f0; }

/* ── mobil: telefon nahoře, fotka kamer nad nadpisem ── */
@media (max-width: 999px) {
  html body { background-size: 34rem auto; background-position: -3rem 5.5rem; }
  html article h1 { padding-top: 15rem; }
  .uvod { padding-bottom: 3rem; }
  html .nabidka { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 1.5rem 1.25rem; }
  html .kontakt-mrizka { grid-template-columns: 1fr; }
  html .kontakt-mrizka .mapa-spust, html .kontakt-mrizka iframe { min-height: 300px; }
}
@media (max-width: 720px) {
  html .site-header { position: static; }
  html article :is(section, h2)[id] { scroll-margin-top: 1rem; }
  html body.menu-pod-tlacitkem .hlavicka-pruh .site-nav { display: flex; flex-direction: row; gap: 0; margin-top: -0.4rem; }
  html .hlavicka-pruh .site-nav > .nav-item { position: relative; }
  html .hlavicka-pruh .site-nav > .nav-item > .nav-menu { position: absolute; top: 100%; right: 0; left: auto; margin: 0; box-shadow: var(--stin-vyssi); }
  html .hlavicka-pruh .nav-hledani-panel { min-width: min(19rem, calc(100vw - 2.5rem)); }
  /* Na telefonu jen mobil — e-mail je hned pod nadpisem a v kontaktu. */
  html .horni-lista a:not(:first-child) { display: none; }
  html .horni-lista a:first-child { font-size: 1.05rem; }
  html .site-header .brand-text { font-size: 1.35rem; }
  html .site-header .claim { text-align: left; font-size: 0.95rem; margin-top: 0.2rem; }
  html body { background-position: -3rem 8.5rem; }
  html article h1 { padding-top: 15.5rem; }
  html .tl { flex: 1 1 100%; justify-content: center; }
  html .sluzby-karty { gap: 0.6rem; }
  html .sluzby-karty li { flex: 0 1 calc(50% - 0.3rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.9rem; font-size: 0.95rem; }
}

/* ── světlý vzhled (paletka „Vzhled“ → Světlý) ──
   Horní část — lišta, jméno, fotka kamer, nadpis a tlačítka — zůstává tmavá:
   fotka má tmavé pozadí a je to poznávací znamení webu. Světlý podklad
   začíná pod úvodem: stín sekce služeb (posunutý o 10 000 px dolů, roztažený
   do stran) překryje tmavé pozadí stránky od kousek pod horní hranou karet
   až po patičku, takže karty na rozhraní vyčnívají do tmavého pásu. Stín
   nemění rozměry stránky ani nic neposouvá. Vnější stín se ale nekreslí pod
   samotnou sekcí — tu dobarví vlastní pozadí od stejné výšky. Obsah je
   položka mřížky (.s-postrannim) a ta se kreslí až po pozadí patičky, takže
   patička dostane vlastní vrstvu (position: relative), jinak by ji stín
   překryl. */
html[data-vzhled='svetla'] .site-footer { position: relative; }
html[data-vzhled='svetla'] body:not(.is-home) { background-color: var(--bg); }
html[data-vzhled='svetla'] body:not(.is-home) article h1 { color: var(--fg); }
html[data-vzhled='svetla'] .sluzby {
  box-shadow: 0 calc(10000px + 2.5rem) 0 10000px var(--bg);
  background: linear-gradient(transparent 2.5rem, var(--bg) 2.5rem);
}
html[data-vzhled='svetla'] .sluzby-karty li,
html[data-vzhled='svetla'] .reference li,
html[data-vzhled='svetla'] .kontakt-karta {
  background: var(--karta);
  color: var(--fg);
  box-shadow: var(--stin);
}
html[data-vzhled='svetla'] .sluzby-karty li { border-color: #e7e3dd; }
html[data-vzhled='svetla'] .reference li { color: var(--muted); }
html[data-vzhled='svetla'] .sluzby-karty svg { background: rgb(224 116 60 / 0.12); stroke: #c45a22; }
html[data-vzhled='svetla'] article h2,
html[data-vzhled='svetla'] .kontakt-karta h3,
html[data-vzhled='svetla'] .kontakt-karta strong,
html[data-vzhled='svetla'] .reference strong,
html[data-vzhled='svetla'] .nabidka strong { color: var(--fg); }
html[data-vzhled='svetla'] .nabidka { background: linear-gradient(120deg, #ffffff, #f7f1eb); box-shadow: var(--stin); }
html[data-vzhled='svetla'] .nabidka .tl:not(.tl-hlavni),
html[data-vzhled='svetla'] .kontakt .tl:not(.tl-hlavni) { color: var(--fg); border-color: #c9c4bd; background: #fff; }