/* ─── FONTS ───
   Archivo (SIL OFL 1.1, see fonts/OFL-archivo.txt), self-hosted so visitors'
   browsers make no requests to Google. latin-ext carries Slovak diacritics. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── TOKENS ───
   signal yellow #FFD21F · anthracite ink #2B2F33 · enclosure #EEF0F0
   panel #FFFFFF · conductor blue #1D5FA6 · graphite #585E63 */
:root {
  /* fixed brand primitives: never change with the colour scheme */
  --signal: #FFD21F;
  --signal-light: #FFE366;
  --ink: #2B2F33;
  --ink-raised: #41464B;

  /* semantic tokens: redefined for dark mode below */
  --yellow: var(--signal);
  --yellow-hover: var(--signal-light);
  --bg: #EEF0F0;
  --surface: #FFFFFF;
  --text: #2B2F33;
  --muted: #585E63;
  --line: #CDD0D2;
  --line-strong: #2B2F33;
  --link: #1D5FA6;
  --focus: #1D5FA6;
  /* see-through anthracite; the header's backdrop-filter greys out what's
     behind it, so the yellow hero can't tint it green */
  --nav-bg: rgba(43, 47, 51, 0.82);
  --btn-bg: var(--ink);
  --btn-bg-hover: var(--ink-raised);
  --btn-text: var(--signal);

  --font: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;
  --nav-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --yellow: #F5C800;
    --yellow-hover: var(--signal);
    --bg: #2B2F33;
    --surface: #353A3E;
    --text: #EEF0F0;
    --muted: #B5BABE;
    --line: #4A5055;
    --line-strong: #858C92;
    --link: var(--signal);
    --focus: var(--signal);
    --btn-bg: var(--signal);
    --btn-bg-hover: var(--signal-light);
    --btn-text: var(--ink);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  /* keep scrolled-to / focused elements clear of the fixed cookie banner;
     --cookie-h is set by js/main.js and reset to 0 once the banner is gone */
  scroll-padding-bottom: var(--cookie-h, 0px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a { color: var(--link); }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* #main receives programmatic focus only (skip link, closed cookie banner) */
#main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s2);
  top: -100px;
  z-index: 2000;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* ─── SHARED ─── */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* ─── NAVBAR ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /* The header is dark and see-through in both schemes, so it pins the
     dark-scheme text/line colours for everything inside it. */
  --bg: var(--ink);
  --text: #EEF0F0;
  --line: #4A5055;
  --line-strong: #858C92;
  --link: var(--signal);
  --focus: var(--signal);
  color: var(--text);
  background: var(--nav-bg);
  -webkit-backdrop-filter: grayscale(1) brightness(0.5) blur(12px);
  backdrop-filter: grayscale(1) brightness(0.5) blur(12px);
  border-bottom: 1px solid rgba(255, 210, 31, 0.35);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
/* browsers without backdrop-filter: nearly solid, so it doesn't turn olive */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(43, 47, 51, 0.96); }
}
.site-header.is-hidden { transform: translateY(-100%); }

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

/* Logo: "Sparky / Slovakia" as text only, set like the hero title
   (Archivo, heavy, condensed, stacked), in signal yellow on the dark header. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 850;
  font-stretch: 62%;
  font-size: 1.625rem;
  line-height: 0.84;
  letter-spacing: -0.02em;
  color: var(--signal);
}

.nav-toggle {
  display: none;
  gap: 0.5rem;
  padding: 0 0.9rem;
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
}
.nav-toggle .icon { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-links {
  display: flex;
  gap: var(--s1);
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--yellow); }

/* Language switch: two segments, the current language filled in signal
   yellow like the logo. It is the last item of the menu list: at the end of
   the bar on desktop, the last row of the open menu on phones. (On the 404
   page, which has no menu, it sits in the bar on its own.) */
.nav-links, .nav-toggle { margin-left: auto; }
.nav-links { align-items: center; }
.nav-lang { margin-left: var(--s1); }
.lang-switch {
  display: flex;
  flex-shrink: 0;
  /* frame drawn inside, so each button keeps the full 44px height */
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
}
.lang-switch[hidden] { display: none; }
.lang-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.lang-btn:hover { color: var(--signal); }
.lang-btn[aria-pressed="true"] {
  background: var(--signal);
  color: var(--ink);
  cursor: default;
}
/* ring inside the button: outside it would vanish against the yellow segment */
.lang-btn:focus-visible { outline-offset: -4px; }
.lang-btn[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
/* Returning English visitors: cookie-check.js sets .i18n-pending before first
   paint, so the Slovak text doesn't flash before i18n.js swaps it. If i18n.js
   never runs, the text appears anyway after 1.5s. */
.i18n-pending [data-i18n] { visibility: hidden; animation: i18n-reveal 0s 1.5s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }
/* The English strings run longer: avoid one-word last lines */
.service-title, .service-desc, .cookie-text { text-wrap: pretty; }
[data-i18n="rights"] { white-space: nowrap; }

/* ─── HERO ─── */
/* The hero stays yellow in both schemes, so it pins the light-scheme
   button and focus colours for everything inside it. */
.hero {
  background: var(--yellow);
  color: var(--ink);
  --focus: var(--ink);
  --btn-bg: var(--ink);
  --btn-bg-hover: var(--ink-raised);
  --btn-text: var(--signal);
  padding-top: var(--nav-h);
}
.hero-inner {
  padding-top: clamp(3rem, 9vh, 6rem);
  padding-bottom: var(--s4);
  min-height: min(92vh, 50rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: var(--s5);
  row-gap: var(--s4);
  align-items: center;
}
.hero-tag {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: var(--s2);
}
.hero-title {
  font-weight: 850;
  font-stretch: 62%;
  font-size: clamp(4.5rem, 15vw, 11rem);
  line-height: 0.84;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.hero-title span { display: block; }
.hero-sub {
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  line-height: 1.45;
  max-width: 30ch;
  margin-bottom: var(--s4);
}
.hero-cta {
  min-height: 52px;
  padding: 0 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 1.0625rem;
}
.hero-cta:hover { background: var(--btn-bg-hover); }

/* Hero schematic. The base rules are the lit final state, which is also what
   visitors with reduced motion see. The .play rules below animate the
   power-on sequence (~3.7 s):
   wires draw → switch 1 snaps shut → switch 2 → spark runs to the bulb
   → bulb flickers on → rays. */
.hero { overflow: clip; }
.hero-schematic { width: 100%; height: auto; color: var(--ink); overflow: visible; }
.hero-schematic .wire {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.hero-schematic .node { fill: currentColor; }
.hero-schematic .ray { stroke-width: 2.5; }
.hero-schematic .blade { transform-box: view-box; }
.hero-schematic .blade-1 { transform-origin: 110px 110px; }
.hero-schematic .blade-2 { transform-origin: 250px 110px; }
.hero-schematic .energized {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.55;
}
.hero-schematic .bulb-glass { fill: #FFFDF2; }
.hero-schematic .halo { pointer-events: none; }
.hero-schematic .spark { opacity: 0; }
.hero-schematic .spark-core { fill: #FFFFFF; stroke: currentColor; stroke-width: 2.5; }

@media (prefers-reduced-motion: no-preference) {
  .hero-schematic { cursor: pointer; }
  .hero-schematic.play .wire {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.35s cubic-bezier(.6,0,.3,1) both;
  }
  .hero-schematic.play .blade-1 {
    animation: draw 0.2s 0.3s both, snap-1 0.22s 1.75s cubic-bezier(.3,1.6,.5,1) both;
  }
  .hero-schematic.play .wire-b { animation-delay: 0.45s; }
  .hero-schematic.play .blade-2 {
    animation: draw 0.2s 0.75s both, snap-2 0.22s 2.1s cubic-bezier(.3,1.6,.5,1) both;
  }
  .hero-schematic.play .wire-c { animation-delay: 0.9s; animation-duration: 0.2s; }
  .hero-schematic.play .wire-lamp { animation-delay: 1.05s; animation-duration: 0.6s; }
  .hero-schematic.play .energized {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.55s 2.4s linear both;
  }
  .hero-schematic.play .spark { animation: spark 0.55s 2.4s linear both; }
  .hero-schematic.play .bulb-glass,
  .hero-schematic.play .halo { animation: flicker 0.65s 2.95s linear both; }
  .hero-schematic.play .ray { animation-delay: 3.35s; }
  .hero-schematic.play .node { animation: appear 0.2s 0.1s both; }

  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
  @keyframes snap-1 { from { transform: rotate(-35deg); } to { transform: rotate(0); } }
  @keyframes snap-2 { from { transform: rotate(-33deg); } to { transform: rotate(0); } }
  @keyframes spark {
    0%   { opacity: 0; transform: translateX(0); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(340px); }
  }
  @keyframes flicker {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    22%  { opacity: 0.1; }
    38%  { opacity: 0.9; }
    48%  { opacity: 0.25; }
    66%  { opacity: 1; }
    100% { opacity: 1; }
  }
}

/* ─── SECTIONS ─── */
.section { padding-block: var(--s6); }
.section + .section { border-top: 1px solid var(--line); }
.section-body { min-width: 0; }
.section-title {
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: var(--s4);
}

/* ─── O NÁS ─── */
/* text on the left, the "10+" plate beside it, centred against the text;
   on phones the plate goes full width under the text */
.about-grid {
  display: grid;
  gap: var(--s4);
  align-items: center;
}
@media (min-width: 721px) {
  .about-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--s5); }
}
.about-text p { max-width: 62ch; }
.about-text p + p { margin-top: var(--s2); color: var(--muted); }
.about-text p:first-child { font-size: 1.25rem; line-height: 1.5; }

/* rating plate: big figure set like the hero title, label under it, centred;
   more figures would sit side by side */
.plate {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
}
.plate-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s4);
  text-align: center;
}
.plate-row + .plate-row { border-left: 1px solid var(--line); }
.plate dt {
  order: 2;
  color: var(--muted);
  font-size: 1.125rem;
  font-weight: 600;
}
.plate dd {
  order: 1;
  font-weight: 850;
  font-stretch: 62%;
  font-size: clamp(6rem, 11vw, 9.5rem);
  line-height: 0.84;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ─── SLUŽBY ─── */
.services-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s5);
  border-top: 2px solid var(--line-strong);
}
.service {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.service-icon {
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 50%;
}
.service-title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.service-desc { color: var(--muted); max-width: 48ch; }

/* ─── KONTAKT ─── */
.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.contact-btn {
  gap: 0.75rem;
  min-height: 56px;
  padding: 0 1.5rem;
  border: 2px solid var(--line-strong);
  color: var(--text);
  background: transparent;
  font-size: 1.0625rem;
}
.contact-btn:hover { background: var(--surface); }
.contact-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.contact-btn-primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.contact-btn-primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }

/* ─── FOOTER ─── */
.site-footer {
  border-top: 1px solid var(--line);
}
/* Centred column: company details on top, the copyright line last. */
.footer-inner {
  padding-top: var(--s4);
  padding-bottom: calc(var(--s4) + var(--cookie-h, 0px));
  font-size: 1rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  text-align: center;
}
.footer-inner strong { color: var(--text); font-weight: 700; }
/* labels right-aligned, values left-aligned, meeting on the centre line */
.company-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem var(--s2);
  width: min(100%, 36rem);
  text-align: left;
}
.company-row { display: contents; }
.company-row dt { color: var(--muted); text-align: right; }
/* divider only when company details sit above it (not on the 404 page) */
.company-info + .footer-copy {
  align-self: stretch;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.company-row dd { color: var(--text); }
/* rows whose value is still empty stay hidden until filled in */
.company-row:has(dd:empty) { display: none; }

/* ─── COOKIES BANNER ─── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  background: var(--surface);
  border-top: 3px solid var(--yellow);
  box-shadow: 0 -2px 16px rgba(43, 47, 51, 0.14);
}
/* returning visitor: hidden before first paint by the inline <head> script */
.cookie-chosen .cookie-banner { display: none; }
.cookie-inner {
  padding-block: var(--s2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: slideUp 0.4s ease; }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
.cookie-text {
  flex: 1 1 22rem;
  font-size: 1rem;
  color: var(--muted);
  max-width: 70ch;
}
.cookie-text strong {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  vertical-align: bottom;
}
.cookie-text .icon { width: 1.15rem; height: 1.15rem; }
.cookie-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-btn {
  justify-content: center;
  padding: 0 1.25rem;
  font-size: 1rem;
}
.cookie-btn-accept {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--btn-bg);
}
.cookie-btn-decline {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--line-strong);
}
.cookie-btn-decline:hover { background: var(--bg); }

/* ─── 404 PAGE ─── (here, not inline: the CSP blocks inline <style>) */
.page-404 .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: min(80vh, 40rem); }
.page-404 .hero-title { font-size: clamp(3rem, 10vw, 7rem); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .hero-schematic { max-width: 30rem; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-inner { gap: var(--s1); }
  /* phones: the name fills the width, the main action spans it */
  .hero-title { font-size: 26vw; }
  .hero-cta { width: 100%; justify-content: center; }
  .hero-inner { padding-top: var(--s4); }
  .about-text p:first-child { font-size: 1.125rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s1) var(--gutter) var(--s2);
    background: var(--bg);
    border-bottom: 2px solid var(--line-strong);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    width: 100%;
    min-height: 52px;
    padding: 0;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:hover { border-bottom-color: var(--line); color: var(--link); }
  .nav-links { align-items: stretch; }
  /* phones: each label above its value, centred */
  .company-info { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .company-row dt { text-align: center; font-size: 0.875rem; }
  .company-row dd { margin-bottom: var(--s1); }
  .nav-lang { margin: var(--s2) 0 0; }
  .nav-lang .lang-switch { width: max-content; }
  .nav-lang .lang-btn { min-width: 56px; min-height: 48px; font-size: 1rem; }
  .services-list { grid-template-columns: 1fr; }
  .section { padding-block: var(--s5); }
  .contact-btn { width: 100%; }
  .cookie-btns { width: 100%; }
  .cookie-btn { flex: 1 1 auto; padding: 0 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}