/*
 * Súbor: css/palettes/havarie.css
 * Obsah: Farebná téma havárií: svetlý základ, žltý akcent, pozadie kompletnej opravy kanalizácie zhodné s prehľadom služieb, neutrálna sekcia typov zákazníkov s jemnými zlatými okrajmi a tlmenými ikonami, tematické prvky, eyebrow bez zvislého okraja pri centrovanom gride, hero a stále viditeľný mobilný telefón v hlavičke.
 * Použitie: sluzba-havarie.html.
 * Zapojenie: <link rel="stylesheet" href="css/palettes/havarie.css">; zachovaj pozíciu v hlavičke podľa css/README.md.
 * Závislosti: voliteľný farebný token z components/cross-page-cta.css (s vlastnou záložnou farbou); iba html[data-palette="havarie"]; vlastné --palette-* a nadväzujúce tematické premenné.
 * Nezávislosť: bez importu inej palety. Každá stránka načítava iba svoju paletu.
 */
html[data-palette="havarie"] {
  --palette-light: #E9E1D5;
  --palette-light-alt: #CDBFA7;
  --palette-sand: #CDBFA7;
  --palette-dark: #243142;
  --palette-blue: var(--palette-yellow);
  --palette-orange: var(--palette-yellow);
  --palette-yellow: var(--cross-page-cta-yellow, #F3C100);
  --palette-red: var(--palette-yellow);
  --palette-taupe: var(--palette-yellow);
  --palette-light-rgb: 233 225 213;
  --palette-dark-rgb: 36 49 66;
  --palette-sand-rgb: 205 191 167;
  --connection-accent: var(--palette-yellow);
  --connection-accent-rgb: 243 193 0;
  --bg: var(--palette-light);
  --bg-alt: var(--palette-light-alt);
  --surface: var(--palette-light);
  --text: var(--palette-dark);
  --muted: var(--palette-dark);
  --border: var(--palette-sand);
  --border-strong: var(--palette-dark);
  --accent: var(--connection-accent);
  --service-heading-color: var(--palette-dark);
  --accent-hover: color-mix(in srgb, var(--connection-accent) 85%, var(--palette-dark));
  --accent-soft: color-mix(in srgb, var(--connection-accent) 12%, var(--palette-light));
  --footer: var(--palette-dark);
  --footer-text: var(--palette-light);
  --footer-muted: var(--palette-sand);
  --success: var(--palette-dark);
  --error: var(--palette-dark);
}

/* Pokojnejšie neutrálne plochy s tlmenými zlatými detailmi pri typoch zákazníkov. */
html[data-palette="havarie"] #projekty {
  --muted: #59616a;
  background: #f1f1ed;
}

html[data-palette="havarie"] #projekty .project-panel {
  background: #fafaf7;
  border: 1px solid #ddded8;
  border-top: 2px solid #d5c68d;
}

html[data-palette="havarie"] #projekty .project-panel img {
  filter: saturate(.65);
}

html[data-palette="havarie"] #projekty .section-head .eyebrow {
  color: #59616a;
  border-left-color: #d5c68d;
}

/* Rovnaké pozadie ako pri vyššom prehľade havarijných služieb. */
html[data-palette="havarie"] #typy-pozemkov {
  background: var(--palette-light);
}

html[data-palette="havarie"] [data-connection] {
  --accent: var(--connection-accent);
  --accent-hover: color-mix(in srgb, var(--connection-accent) 85%, var(--palette-dark));
  --accent-soft: color-mix(in srgb, var(--connection-accent) 12%, var(--palette-light));
}
html[data-palette="havarie"] [data-connection="kanalizacia"] {
  --connection-accent: var(--palette-orange);
  --connection-accent-rgb: 243 193 0;
}
html[data-palette="havarie"] [data-connection="plyn"] {
  --connection-accent: var(--palette-yellow);
  --connection-accent-rgb: 243 193 0;
}
html[data-palette="havarie"] [data-connection="elektrika"] {
  --connection-accent: var(--palette-red);
  --connection-accent-rgb: 243 193 0;
}

/* Dark text on bright accents keeps buttons and small labels readable. */
html[data-palette="havarie"] .btn--primary,
html[data-palette="havarie"] .scope-choice[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--palette-dark);
}
html[data-palette="havarie"] .btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
html[data-palette="havarie"] .btn--secondary {
  background: var(--palette-light);
  color: var(--palette-dark);
  border-color: var(--accent);
}
html[data-palette="havarie"] .btn--secondary:hover {
  background: var(--accent-soft);
}
html[data-palette="havarie"] :is(a, button, input, select, textarea):focus-visible {
  outline-color: var(--accent);
}
html[data-palette="havarie"] .eyebrow,
html[data-palette="havarie"] .text-link {
  color: var(--palette-dark);
  text-decoration-color: var(--accent);
}
html[data-palette="havarie"] .section-head .eyebrow {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
html[data-palette="havarie"] .connection-services .section-head .eyebrow,
html[data-palette="havarie"] .section-head.service-grid-3x3__heading .eyebrow {
  border-left: 0;
  padding-left: 0;
}
html[data-palette="havarie"] .text-link {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 5px;
}
html[data-palette="havarie"] .card {
  border-top: 3px solid var(--accent);
  box-shadow: 0 5px 18px rgb(var(--palette-dark-rgb) / 4%);
}
html[data-palette="havarie"] .header-logo-wordmark {
  color: var(--palette-dark);
}
html[data-palette="havarie"] .nav-link--page::before,
html[data-palette="havarie"] .hero-accent-line {
  background: var(--accent);
}
html[data-palette="havarie"] .breadcrumb {
  color: var(--palette-dark);
}
html[data-palette="havarie"] .hero-intro .breadcrumb {
  background: rgb(var(--palette-dark-rgb) / 88%);
  color: var(--palette-light);
}
html[data-palette="havarie"] .hero::before {
  background: linear-gradient(90deg, rgb(var(--palette-dark-rgb) / 62%), rgb(var(--palette-dark-rgb) / 34%) 48%, rgb(var(--palette-dark-rgb) / 12%));
}
html[data-palette="havarie"] .hero-copy::before {
  background: rgb(var(--palette-dark-rgb) / 14%);
  box-shadow: 0 0 24px 12px rgb(var(--palette-dark-rgb) / 6%);
}
html[data-palette="havarie"] .hero .eyebrow {
  color: var(--palette-yellow);
}
html[data-palette="havarie"] .hero-division-brand {
  background: rgb(var(--palette-dark-rgb) / 76%);
}
html[data-palette="havarie"] .hero-service-label {
  background: var(--palette-yellow);
  color: var(--palette-dark);
}
html[data-palette="havarie"] .trust-counter-number {
  color: var(--palette-dark);
}
html[data-palette="havarie"] .trust-counter {
  border-bottom: 3px solid var(--accent);
}
html[data-palette="havarie"] .warranty-band h2 {
  color: var(--palette-dark);
}
html[data-palette="havarie"] .warranty-band {
  background: var(--palette-light);
}
html[data-palette="havarie"] .warranty-point {
  background: var(--palette-dark);
}
html[data-palette="havarie"] .warranty-icon,
html[data-palette="havarie"] .turnkey-services__icon {
  background: var(--accent);
  color: var(--palette-dark);
  border-color: var(--accent);
}
html[data-palette="havarie"] .warranty-point p {
  color: var(--palette-light);
}
html[data-palette="havarie"] .benefits-strip {
  background: var(--palette-yellow);
}
html[data-palette="havarie"] .step-number {
  color: var(--palette-dark);
}
html[data-palette="havarie"] .location-map-dot {
  background: var(--palette-yellow);
  border-color: var(--palette-light);
  box-shadow: 0 1px 5px rgb(var(--palette-dark-rgb) / 25%);
}
html[data-palette="havarie"] .location-list p {
  color: var(--palette-dark);
  text-shadow: 0 1px 2px rgb(var(--palette-light-rgb) / 80%);
}
html[data-palette="havarie"] .location-map-connectors {
  stroke: var(--palette-yellow);
}

/* Keep comparison text within the emergency-service palette. */
html[data-palette="havarie"] .pricing-compare,
html[data-palette="havarie"] .quality-compare {
  --success: #243142;
  --error: #243142;
}

html[data-palette="havarie"] .work-process {
  --process-sand: var(--palette-yellow);
}
html[data-palette="havarie"] .work-process__heading,
html[data-palette="havarie"] .work-process__number,
html[data-palette="havarie"] .work-process__card {
  background: rgb(var(--palette-dark-rgb) / 85%);
}
html[data-palette="havarie"] .footer-title,
html[data-palette="havarie"] .footer-links a:hover {
  color: var(--palette-yellow);
}

/* Telefón zostáva dostupný aj pri zatvorenom mobilnom menu, iba na haváriách. */
@media (max-width: 1023px) {
  html[data-palette="havarie"] .site-header .header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 52px;
    gap: 8px;
  }

  html[data-palette="havarie"] .site-header .header-logo {
    grid-column: 1;
    grid-row: 1;
  }

  html[data-palette="havarie"] .site-header .header-contact {
    display: block;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }

  html[data-palette="havarie"] .site-header .menu-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  html[data-palette="havarie"] .site-header .header-contact a,
  html[data-palette="havarie"] .mobile-menu nav > a[href^="tel:"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px;
    border-radius: 8px;
    background: var(--palette-yellow);
    color: #fff;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  html[data-palette="havarie"] .site-header .header-contact a:focus-visible {
    outline: 2px solid var(--palette-dark);
    outline-offset: 3px;
  }
}

@media (max-width: 767px) {
  html[data-palette="havarie"] .site-header .header-logo-wordmark {
    display: none;
  }

  html[data-palette="havarie"] .hero-intro .hero::before {
    /* Use the emergency hero photo on mobile as well. */
    background: url('../../VSETKY_IMG/SLUZBA_HAVARIE/hero/havarie-hero.png') center / cover no-repeat;
  }
  html[data-palette="havarie"] .hero-copy {
    background: var(--palette-dark);
  }
}