:root {
  --ink: #172742;
  --navy: #123b65;
  --blue: #074783;
  --gold: #efac18;
  --muted: #5b6980;
  --line: #d4dce5;
  --paper: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.48 "Aptos", "Segoe UI", Tahoma, Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.container { width: min(calc(100% - 48px), 1080px); margin-inline: auto; }

.site-header { position: relative; z-index: 10; background: white; border-bottom: 1px solid #e8edf2; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 91px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 19px; min-width: 0; color: #142744; font-size: 30px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.crest { display: block; width: 62px; height: auto; aspect-ratio: 558 / 543; object-fit: contain; flex: none; }
.navigation { display: flex; align-items: stretch; align-self: stretch; gap: 34px; }
.navigation a { display: inline-flex; align-items: center; padding: 5px 7px 0; border-bottom: 3px solid transparent; font-size: 17px; font-weight: 600; text-decoration: none; }
.navigation a:hover { color: var(--blue); }
.navigation .current { border-bottom-color: var(--gold); color: var(--blue); }
.menu-button { display: none; }

.hero { background: linear-gradient(90deg, rgba(11,44,81,.94) 0%, rgba(11,50,91,.86) 29%, rgba(8,48,90,.38) 68%, rgba(8,48,90,.08) 100%), url('assets/obecny-urad.jpg') center 51% / cover no-repeat; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 365px; padding-block: 38px; }
.hero h1 { max-width: 620px; margin: 0; font-size: clamp(33px, 3.6vw, 47px); line-height: 1.12; font-weight: 700; letter-spacing: -.6px; color: #fff; text-wrap: balance; }
.hero p { margin: 13px 0 25px; color: #fff; font-size: 19px; }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 56px; cursor: pointer; font-family: inherit; padding: 11px 22px; color: white; text-decoration: none; font-size: 18px; font-weight: 600; background: #07447e; border: 1px solid #91b5dc; border-radius: 7px; box-shadow: 0 1px 4px rgba(3,23,54,.12); transition: background-color .15s ease, border-color .15s ease; }
.download-button svg { flex: none; }
.download-button:hover { background: #053767; border-color: #d6e6f4; }
.download-button:active { background: #022a50; }

.turnout-band { background: #f5f8fb; border-bottom: 1px solid #edf0f4; }
.turnout-inner { padding-block: 23px 25px; }
.heading { margin: 0 0 13px; padding-left: 15px; border-left: 4px solid var(--gold); color: #142a4c; font-size: 26px; line-height: 1.22; font-weight: 700; }
.turnout-inner .heading { margin-bottom: 7px; }
.turnout-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; padding-left: 19px; }
.turnout-value strong { font-size: 38px; line-height: 1.1; color: #0e4387; font-weight: 700; font-variant-numeric: tabular-nums; }
.turnout-value span { font-size: 16px; color: var(--muted); }

.sections { padding-block: 30px 55px; }
.election-section + .election-section { margin-top: 38px; }
.table-wrap { width: 100%; }
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.4; }
.data-table th, .data-table td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.data-table th { background: #f1f3f6; color: #243650; font-size: 14px; font-weight: 700; }
/* Poradie, meno, hlasy, (percentá pri starostovi), výsledok. */
.mayor-table th:nth-child(1) { width: 7%; }
.mayor-table th:nth-child(2) { width: 43%; }
.mayor-table th:nth-child(3) { width: 17%; }
.mayor-table th:nth-child(4) { width: 18%; }
.mayor-table th:nth-child(5) { width: 15%; }
.council-table th:nth-child(1) { width: 7%; }
.council-table th:nth-child(2) { width: 58%; }
.council-table th:nth-child(3) { width: 18%; }
.council-table th:nth-child(4) { width: 17%; }
.data-table td:first-child, .data-table th:first-child { text-align: center; font-variant-numeric: tabular-nums; }
.mayor-table td:nth-child(n+3), .mayor-table th:nth-child(n+3),
.council-table td:nth-child(n+3), .council-table th:nth-child(n+3) { text-align: center; }
.mayor-table td:nth-child(3), .mayor-table td:nth-child(4), .council-table td:nth-child(3) { font-variant-numeric: tabular-nums; }
.candidate { display: flex; align-items: center; gap: 13px; min-width: 0; }
.candidate-name { display: flex; flex-direction: column; align-items: flex-start; font-weight: 600; min-width: 0; }
.portrait { display: block; flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.status-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 106px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.status-elected { background: #e0f3e3; color: #236331; }
.status-not-elected { background: #edf1f6; color: #425775; }
.mobile-status { display: none; }
.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 216px;
  max-width: 100%;
  height: 48px;
  margin: 20px auto 0;
  padding: 0 18px;
  border: 1px solid #a5c4e7;
  border-radius: 7px;
  background: #f6f9fe;
  color: #10539a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 48, 81, .05);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.more-button svg { flex: none; width: 18px; height: 18px; transition: transform .15s ease; }
.more-button span { display: inline-block; min-width: 112px; text-align: center; }
.more-button:hover { background: #eaf3ff; border-color: #6c9ed4; box-shadow: 0 2px 6px rgba(20, 48, 81, .10); }
.more-button:active { background: #dfeeff; }
.more-button[aria-expanded="true"] svg { transform: rotate(180deg); }
[hidden] { display: none !important; }

.document { padding-top: 40px; padding-bottom: 55px; }
.document-top { padding-bottom: 15px; border-bottom: 1px solid #8d98a5; }
.document-top h1 { margin: 0 0 4px; font-size: 27px; font-weight: 700; line-height: 1.2; }
.document-top p { margin: 0; font-size: 14px; color: var(--muted); }
.document-section { margin-top: 29px; }
.document-section h2 { margin: 0 0 11px; color: #202d40; font-size: 20px; font-weight: 700; }
.plain-table { font-size: 14px; }
.plain-table th { background: #f5f5f5; }
.plain-table th:first-child { width: 8%; }
.plain-table th:nth-child(2) { width: 47%; }
.plain-table th:nth-child(3) { width: 15%; }
.plain-table th:nth-child(4) { width: 15%; }
.plain-table th:nth-child(5) { width: 15%; }
.plain-council th:first-child { width: 8%; }
.plain-council th:nth-child(2) { width: 57%; }
.plain-council th:nth-child(3) { width: 17%; }
.plain-council th:nth-child(4) { width: 18%; }
.plain-table td:nth-child(2) { font-weight: 500; }
.plain-table th:nth-child(2), .plain-table td:nth-child(2) { text-align: left; }

.site-footer { margin-top: auto; min-height: 72px; background: #f4f6f8; border-top: 1px solid #e5eaf0; }
.footer-inner { display: flex; align-items: center; justify-content: flex-end; min-height: 72px; }
#view-counter { font-size: 12px; color: #6c7787; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .container { width: min(calc(100% - 36px), 1080px); }
  .header-inner { min-height: 76px; }
  .brand { gap: 10px; font-size: 25px; }
  .crest { width: 48px; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; background: white; border: 1px solid #cdd8e3; border-radius: 5px; color: var(--ink); cursor: pointer; }
  .navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 7px 18px 12px; border-top: 1px solid #edf0f3; border-bottom: 1px solid #cdd7e2; background: white; box-shadow: 0 7px 12px rgba(0,0,0,.07); }
  .navigation.open { display: flex; flex-direction: column; gap: 2px; }
  .navigation a { min-height: 46px; padding: 10px 14px; font-size: 16px; border-bottom: 0; border-left: 3px solid transparent; }
  .navigation .current { border-left-color: var(--gold); background: #f4f7fa; }
  .hero { background-position: 63% center; background-image: linear-gradient(90deg,rgba(8,41,79,.94),rgba(8,45,86,.77) 71%,rgba(8,45,86,.4)),url('assets/obecny-urad.jpg'); }
  .hero-inner { min-height: 328px; padding-block: 28px; }
  .hero h1 { max-width: 560px; font-size: clamp(29px,5.2vw,38px); line-height: 1.15; letter-spacing: -.25px; text-wrap: wrap; }
  .hero p { margin: 12px 0 22px; font-size: 16px; }
  .download-button { min-height: 50px; padding: 10px 15px; font-size: 16px; gap: 11px; }
  .download-button svg { width: 22px; height: 22px; }
  .heading { font-size: 23px; }
  .sections { padding-block: 26px 40px; }
  .election-section + .election-section { margin-top: 34px; }
  .data-table { font-size: 14px; }
  .data-table th, .data-table td { padding: 9px 10px; }
  .data-table th { font-size: 13px; }
  .portrait { width: 40px; height: 40px; }
  .candidate { gap: 9px; }
  .document { padding-block: 26px 44px; }
  .document-top h1 { font-size: 25px; }
}
@media (max-width: 550px) {
  .container { width: min(calc(100% - 28px), 1080px); }
  .header-inner { min-height: 70px; }
  .brand { font-size: clamp(21px,5.8vw,25px); }
  .crest { width: 43px; }
  .hero-inner { min-height: 305px; }
  .hero h1 { font-size: clamp(28px,7.2vw,36px); }
  .hero p { font-size: 15px; }
  .download-button { max-width: 100%; font-size: 15px; }
  .turnout-inner { padding-block: 19px 21px; }
  .turnout-inner .heading { font-size: 23px; }
  .turnout-value { padding-left: 14px; gap: 6px 12px; }
  .turnout-value strong { font-size: 31px; }
  .turnout-value span { font-size: 14px; }
  .heading { font-size: clamp(21px,5.8vw,25px); padding-left: 11px; }
  .data-table th, .data-table td { padding: 9px 7px; }
  .data-table th { font-size: 12px; line-height: 1.25; }
  .mayor-table th:nth-child(1) { width: 8%; }
  .mayor-table th:nth-child(2) { width: 49%; }
  .mayor-table th:nth-child(3) { width: 20%; }
  .mayor-table th:nth-child(4) { width: 23%; }
  .mayor-table th:nth-child(5), .mayor-table td:nth-child(5) { display: none; }
  .council-table th:nth-child(1) { width: 10%; }
  .council-table th:nth-child(2) { width: 65%; }
  .council-table th:nth-child(3) { width: 25%; }
  .council-table th:nth-child(4), .council-table td:nth-child(4) { display: none; }
  .candidate { align-items: center; gap: 7px; }
  .portrait { width: 37px; height: 37px; }
  .candidate-name { font-size: 13px; line-height: 1.3; }
  .data-table td { font-size: 13px; }
  .mobile-status { display: block; margin-top: 4px; font-size: 11px; color: #49617a; font-weight: 500; }
  .status-badge.mobile-status { display: inline-flex; width: auto; min-width: 83px; min-height: 23px; margin-top: 5px; padding: 3px 8px; font-size: 11px; }
  .status-elected.mobile-status { color: #236331; }
  .status-not-elected.mobile-status { color: #425775; }
  .document-top h1 { font-size: 23px; }
  .document-section h2 { font-size: 18px; }
  .plain-table th:nth-child(1) { width: 10%; }
  .plain-table th:nth-child(2) { width: 46%; }
  .plain-table th:nth-child(3) { width: 21%; }
  .plain-table th:nth-child(4) { width: 23%; }
  .plain-table th:nth-child(5), .plain-table td:nth-child(5) { display: none; }
  .plain-council th:nth-child(1) { width: 10%; }
  .plain-council th:nth-child(2) { width: 63%; }
  .plain-council th:nth-child(3) { width: 27%; }
  .plain-council th:nth-child(4), .plain-council td:nth-child(4) { display: none; }
  .plain-table td:nth-child(2) { font-size: 13px; overflow-wrap: normal; }
  .footer-inner { min-height: 56px; }
  .site-footer { min-height: 56px; }
}
@media (max-width: 350px) {
  .container { width: calc(100% - 22px); }
  .hero h1 { font-size: 27px; }
  .download-button { gap: 8px; padding-inline: 10px; font-size: 14px; }
  .data-table th, .data-table td { padding-inline: 5px; }
  .portrait { width: 33px; height: 33px; }
  .candidate { gap: 5px; }
  .candidate-name { font-size: 12.5px; }
  .plain-table td:nth-child(2) { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  @page { size: A4 portrait; margin: 13mm; }
  body { color: black; font-family: Arial, sans-serif; font-size: 11px; }
  .site-header, .site-footer, .hero, .turnout-band, .more-button { display: none !important; }
  .container { width: 100%; max-width: none; }
  .document { padding: 0; }
  .document-top h1 { color: black; font-size: 19px; }
  .document-section { margin-top: 16px; break-inside: avoid; }
  .document-section h2 { font-size: 14px; }
  .data-table th, .data-table td { border: 1px solid #555; padding: 5px 6px; font-size: 10px; }
  .plain-table th:nth-child(5), .plain-table td:nth-child(5),
  .plain-council th:nth-child(4), .plain-council td:nth-child(4) { display: table-cell; }
  .plain-table th:nth-child(1) { width: 8%; }
  .plain-table th:nth-child(2) { width: 47%; }
  .plain-table th:nth-child(3), .plain-table th:nth-child(4), .plain-table th:nth-child(5) { width: 15%; }
  .plain-council th:nth-child(1) { width: 8%; }
  .plain-council th:nth-child(2) { width: 57%; }
  .plain-council th:nth-child(3) { width: 17%; }
  .plain-council th:nth-child(4) { width: 18%; }
  .mobile-status { display: none !important; }
  .data-table tr { break-inside: avoid; }
}