/* tk42.pl information site. Colors, typography and radii come from /brand/tokens.css */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Height of the sticky top bar, so in-page links don't hide section headings underneath it. */
:root { --topbar-h: 6.2rem; }
@media (min-width: 64rem) { :root { --topbar-h: 4.25rem; } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + .75rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tk-bg);
  color: var(--tk-text);
  font-family: var(--tk-font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--tk-link);
  text-decoration-color: var(--tk-link-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tk-focus); outline-offset: 3px; border-radius: 4px; }

address { font-style: normal; }
code {
  font-size: .9em;
  background: var(--tk-surface-alt);
  padding: .1rem .35rem;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--tk-orange); color: var(--tk-navy);
  padding: .75rem 1rem; font-weight: var(--tk-weight-bold);
}
.skip:focus { left: 1rem; top: 1rem; }

.label {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: var(--tk-weight-bold);
  letter-spacing: var(--tk-label-spacing);
  text-transform: uppercase;
  color: var(--tk-text-muted);
}
.muted { color: var(--tk-text-muted); }
.small { font-size: .9rem; }

/* "Now" badge next to the contact to call at this time (set by app.js) */
.now {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--tk-orange);
  color: var(--tk-navy);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .1em;
}

/* Phone number button */
.phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--tk-orange);
  color: var(--tk-navy);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  /* Same width for every phone button, but never wider than its container */
  min-width: min(12.5rem, 100%);
  justify-content: center;
}
/* The English page shows numbers with the +48 prefix */
:root[lang="en"] .phone { min-width: min(14rem, 100%); }
.phone::before {
  content: "";
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.phone:hover { background: var(--tk-orange-300); }

/* ---------- Top bar: logo and navigation, sticky while scrolling ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--tk-band-bg);
  color: var(--tk-band-text);
  border-bottom: 1px solid var(--tk-band-border);
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
}
/* The full horizontal logo would be too small here, so the name is live text next to the mark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border-radius: var(--tk-radius-s);
  color: var(--tk-band-text);
  text-decoration: none;
}
.brand img { display: block; width: 40px; height: 40px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-label {
  color: var(--tk-band-muted);
  font-size: .7rem;
  font-weight: var(--tk-weight-bold);
  letter-spacing: var(--tk-label-spacing);
  text-transform: uppercase;
}
.brand-name { font-size: 1.1rem; font-weight: var(--tk-weight-bold); letter-spacing: -.005em; }

/* Below 64rem the links sit on a second row and scroll sideways if they don't fit */
.nav { display: flex; flex: 1 0 100%; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 1 0 auto;
  padding: .3rem .4rem;
  border: 1px solid var(--tk-band-border);
  border-radius: 999px;
  color: var(--tk-band-text);
  font-size: .85rem;
  font-weight: var(--tk-weight-semibold);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { border-color: var(--tk-orange); }
/* Phones: all five links fit side by side from 375px up */
@media (max-width: 26.99rem) {
  .nav { gap: .2rem; }
  .nav a { padding-inline: .25rem; font-size: .8rem; }
}

/* Language menu: a select-like button with the flag and name of the current language, each
   language named in its own language. <details> opens without JavaScript. All listed names share
   one grid cell, so the button is equally wide on every language version and does not push the
   section links around. On phones the button sits next to the logo, with the section links below. */
.flag {
  display: block;
  flex: none;
  width: 1.3rem;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .3);
}
.topbar .nav { order: 1; }
.language-menu { position: relative; margin-left: auto; }
.language-menu summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border: 1px solid var(--tk-band-border);
  border-radius: var(--tk-radius-s);
  color: var(--tk-band-text);
  font-size: .9rem;
  font-weight: var(--tk-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.language-menu summary:hover,
.language-menu details[open] summary { border-color: var(--tk-orange); }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-left: .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12rem) rotate(45deg);
}
.language-menu details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.language-menu .names { display: grid; }
.language-menu .names > span { grid-area: 1 / 1; }
.language-menu .names > [aria-hidden] { visibility: hidden; }
/* The open list is exactly as wide as the button, and its flags and names line up with the ones
   in the button (1px border + .3rem + .4rem = the button's 1px border + .7rem). The current
   language has a light orange background, other languages a neutral one on hover. */
.language-menu .menu {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  gap: .15rem;
  padding: .3rem;
  background: var(--tk-band-bg);
  border: 1px solid var(--tk-band-border);
  border-radius: var(--tk-radius-s);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .35);
}
.language-menu .menu a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .4rem;
  border-radius: calc(var(--tk-radius-s) - 2px);
  color: var(--tk-band-text);
  font-size: .9rem;
  font-weight: var(--tk-weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.language-menu .menu a[href]:hover { background: rgb(255 255 255 / .08); }
.language-menu .menu a[aria-current] { background: rgb(224 128 60 / .2); }
/* Silesian home pages: the full or simplified spelling closes the list, under a small heading */
.language-menu .spelling {
  display: grid;
  gap: .15rem;
  margin-top: .15rem;
  padding-top: .3rem;
  border-top: 1px solid var(--tk-band-border);
}
.language-menu .menu-label {
  margin: 0;
  padding: .3rem .4rem .15rem;
  color: var(--tk-band-muted);
  font-size: .7rem;
  font-weight: var(--tk-weight-bold);
  letter-spacing: var(--tk-label-spacing);
  text-transform: uppercase;
}
/* Narrow phones: the button shows the flag alone (the name stays in it for screen readers), so
   the list is wider than the button and hangs from its right edge */
@media (max-width: 26.99rem) {
  .language-menu .names { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .language-menu .menu { left: auto; min-width: 9.5rem; }
}

/* Very narrow phones (320px, e.g. an iPhone SE with Display Zoom): a tighter top bar keeps the
   language button next to the logo */
@media (max-width: 21.99rem) {
  .topbar .wrap { column-gap: .5rem; }
  .topbar .brand { gap: .5rem; }
  .topbar .brand img { width: 34px; height: 34px; }
  .topbar .brand-label { letter-spacing: .05em; }
  .language-menu summary { gap: .35rem; padding-inline: .5rem; }
}

@media (min-width: 56rem) {
  .brand img { width: 44px; height: 44px; }
  .brand-label { font-size: .74rem; }
  .brand-name { font-size: 1.2rem; }
}
/* Wide screens: one row, the section links at the right next to the language menu. The menu is
   equally wide in every language, so the links always end at the same place. */
@media (min-width: 64rem) {
  .nav { flex: none; gap: .5rem; }
  .nav a { flex: none; padding: .35rem .85rem; font-size: .95rem; }
  .topbar .wrap { column-gap: 2rem; }
  .topbar .nav { order: 0; margin-left: auto; }
  .topbar .language-menu { margin-left: -1rem; }
}

/* ---------- Intro band below the top bar ---------- */

.hero {
  background: var(--tk-band-bg);
  color: var(--tk-band-text);
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--tk-band-border);
}
@media (min-width: 46rem) { .hero { padding-top: 2.75rem; } }
.hero a { color: var(--tk-band-text); }

.hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--tk-weight-bold);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.lead { margin: 0; max-width: 40rem; color: var(--tk-band-muted); font-size: 1.15rem; }

.quick { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 52rem) { .quick { grid-template-columns: 1fr 1fr; } }
.quick-card {
  padding: 1.25rem;
  border: 1px solid var(--tk-band-border);
  border-radius: var(--tk-radius-m);
  background: rgb(255 255 255 / .05);
}
.hero .label { color: var(--tk-band-muted); }

.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* The phone button moves below the text when the card is too narrow for both side by side */
.contacts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem 1rem;
  padding: .7rem .8rem;
  border-radius: var(--tk-radius-s);
}
.contacts .contact { flex: 1 1 9rem; display: grid; gap: .1rem; }
.contacts .phone { flex: none; }
.contacts li.is-now { background: rgb(224 128 60 / .14); box-shadow: inset 0 0 0 1px rgb(224 128 60 / .55); }
.contacts .when { font-size: .85rem; color: var(--tk-band-muted); }
.contacts .who { font-weight: var(--tk-weight-bold); }

.soonest p { margin: 0; }
.soonest .day { font-size: 1.35rem; font-weight: var(--tk-weight-bold); line-height: 1.3; }
.soonest .what { margin-top: .25rem; color: var(--tk-band-muted); }
.soonest .extra { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--tk-band-border); }
.soonest a { color: var(--tk-band-text); }

/* ---------- Sections ---------- */
.section { padding: 3rem 0; }
.section + .section { border-top: 1px solid var(--tk-border); }

/* The orange "roof" from the mark sits above every section heading */
.section h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: var(--tk-weight-bold);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.section h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: .8rem;
  margin-bottom: .6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 246 81'%3E%3Cpolyline points='13,68 123,13 233,68' fill='none' stroke='%23e0803c' stroke-width='26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.subhead { margin: 2.5rem 0 0; font-size: 1.2rem; font-weight: var(--tk-weight-bold); }
.intro { margin: -.75rem 0 1.5rem; max-width: 44rem; color: var(--tk-text-muted); }

.grid { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .grid.two { grid-template-columns: 1fr 1fr; } }

.card {
  padding: 1.5rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-m);
  box-shadow: var(--tk-shadow);
}
.card h3 { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: var(--tk-weight-bold); line-height: 1.3; }
.card p { margin: 0 0 1rem; }
.card p:last-child { margin-bottom: 0; }
.card.is-now { border-color: var(--tk-orange); box-shadow: inset 0 0 0 1px var(--tk-orange), var(--tk-shadow); }
.card address { margin-bottom: .25rem; }

/* Phone buttons always sit at the right edge of the card, as in the page header */
.card > .phone { display: flex; width: fit-content; margin-left: auto; }

/* Side-by-side cards share row heights, so labels, titles, descriptions and buttons
   line up even when the copy has different lengths. */
@supports (grid-template-rows: subgrid) {
  .grid.aligned > .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .grid.aligned > .card > .phone { align-self: end; }
}

/* Association details: label-above-value pairs in an even grid */
.facts { display: grid; gap: 1.1rem 2rem; margin: .75rem 0 0; }
@media (min-width: 30rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts dt { color: var(--tk-text-muted); font-size: .85rem; }
.facts dd { margin: 0; font-weight: var(--tk-weight-semibold); overflow-wrap: anywhere; }
.card .legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--tk-border); font-size: .9rem; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--tk-gray);
  border-radius: var(--tk-radius-s);
  background: var(--tk-surface-alt);
}
.notice::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: .1rem;
  background: var(--tk-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h11a2 2 0 0 1 2 2v1.5l4-2.5v10l-4-2.5V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h11a2 2 0 0 1 2 2v1.5l4-2.5v10l-4-2.5V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hours b { font-size: 1.6rem; font-weight: var(--tk-weight-bold); }

.alert {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--tk-orange);
  border-radius: var(--tk-radius-s);
  background: var(--tk-orange-50);
  color: var(--tk-navy);
}
.alert a { color: inherit; font-weight: 800; }

.numbers {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: .5rem;
}
.numbers a {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: .65rem 1rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-s);
  color: var(--tk-text);
  text-decoration: none;
  line-height: 1.3;
}
.numbers a:hover { border-color: var(--tk-orange); }
.numbers b {
  min-width: 2.7rem;
  color: var(--tk-accent-text);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 1rem 0 0; }
.kv dt { color: var(--tk-text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: .6rem; font-size: .85rem; }
}

/* ---------- Waste collection ---------- */
.waste-grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.waste-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 22rem) { .waste-grid { grid-template-columns: 1fr; } }
@media (min-width: 40rem) {
  .waste-grid { grid-template-columns: repeat(3, 1fr); }
  .waste-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 60rem) { .waste-grid { grid-template-columns: repeat(5, 1fr); } }
.waste {
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-top: 6px solid var(--c, var(--tk-gray));
  border-radius: var(--tk-radius-m);
  box-shadow: var(--tk-shadow);
}
.waste h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: var(--tk-weight-bold); line-height: 1.3; }
.waste p { margin: 0; }
.waste .date { font-size: 1.2rem; font-weight: var(--tk-weight-bold); line-height: 1.3; }
.waste .then { margin-top: .5rem; color: var(--tk-text-muted); font-size: .9rem; }
/* Name, badge, date and "next" line align across all cards in a row */
@supports (grid-template-rows: subgrid) {
  .waste { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

.rel {
  display: inline-block;
  margin-bottom: .3rem;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--tk-surface-alt);
  color: var(--tk-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rel.soon { background: var(--tk-orange); color: var(--tk-navy); }

/* Collapsible blocks: full schedule and privacy topics */
.schedule, .accordion {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-m);
  box-shadow: var(--tk-shadow);
}
.schedule { margin-top: 1rem; }
.accordion details + details { border-top: 1px solid var(--tk-border); }
.schedule summary, .accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: var(--tk-weight-bold);
  cursor: pointer;
  list-style: none;
}
.schedule summary::-webkit-details-marker, .accordion summary::-webkit-details-marker { display: none; }
.schedule summary::after, .accordion summary::after { content: "+"; color: var(--tk-accent-text); font-size: 1.5rem; line-height: 1; }
.schedule[open] summary::after, .accordion details[open] summary::after { content: "−"; }
.fold { padding: 0 1.25rem 1.25rem; }
.fold p { margin: 0 0 .75rem; max-width: 50rem; }
.fold p:last-child { margin-bottom: 0; }

.months {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  padding: 0 1.25rem 1.25rem;
}
.month h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: var(--tk-weight-bold); }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: .75rem;
  padding: .4rem 0;
  border-top: 1px solid var(--tk-border);
}
.agenda li.is-today { font-weight: var(--tk-weight-bold); }
.agenda time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; }
.dot {
  flex: none;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--c, var(--tk-gray));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
}

.calendar { margin-top: 1.5rem; }
.buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .25rem 0 1rem; }
.button {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.15rem;
  border: 2px solid var(--tk-navy);
  border-radius: 999px;
  background: var(--tk-navy);
  color: var(--tk-white);
  font-weight: var(--tk-weight-bold);
  text-decoration: none;
}
.button.secondary { background: transparent; color: var(--tk-text); border-color: var(--tk-border); }
.button:hover { border-color: var(--tk-orange); }
.source { margin: 1.25rem 0 0; }

/* ---------- Outage notices at the very top of the page (heating, power, water, gas) ---------- */
/* TAURON magenta (#e2007a, darker #aa036c). White is the only text color with enough contrast on it. */
.outages { background: var(--tk-band-bg); padding-top: 1rem; }
.outages .wrap { display: grid; gap: .6rem; }
.outage {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .2rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--tk-radius-m);
  background: linear-gradient(120deg, #e2007a, #aa036c);
  color: #fff;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / .35);
}
@media (min-width: 46rem) { .outage { grid-template-columns: auto 1fr auto; padding: 1.1rem 1.4rem; } }
.outage-icon, .heat-mark-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  color: #c4006a;
}
.outage-icon svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.outage-icon::after, .heat-mark-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: tk-pulse 2s ease-out infinite;
}
@keyframes tk-pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .7); }
  100% { box-shadow: 0 0 0 1.1rem rgb(255 255 255 / 0); }
}
.outage-kicker, .heat-provider {
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.outage-kicker span + span::before { content: "·"; margin: 0 .55em; }
.outage-title { margin: .1rem 0 .15rem; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.outage-when { margin: 0; }
.outage-more {
  grid-column: 1 / -1;
  margin-top: .7rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: #aa036c;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 46rem) { .outage-more { grid-column: auto; margin-top: 0; } }
.outage-more:hover { background: #ffe3f1; }
/* Announced interruptions are calmer than outages, but still open the page */
.outage.is-planned {
  background: rgb(255 255 255 / .05);
  border: 1px solid rgb(255 255 255 / .16);
  border-left: 6px solid #e2007a;
  box-shadow: none;
}
.outage.is-planned .outage-icon { background: rgb(226 0 122 / .2); color: #ff7ab8; }
.outage.is-planned .outage-icon::after { animation: none; }
.outage.is-planned .outage-kicker { color: #ff7ab8; }
.outage.is-planned .outage-more { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }

/* The heating link in the top bar blinks while the network is down */
.nav a.has-alert::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-left: .4rem;
  border-radius: 50%;
  background: #ff2d95;
  vertical-align: .08em;
  animation: tk-blink 1.2s ease-in-out infinite;
}
@keyframes tk-blink { 50% { opacity: .25; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Heating card in TAURON Ciepło colors ---------- */
.heat {
  --heat-bg: linear-gradient(135deg, #e2007a 0%, #c4006f 55%, #aa036c 100%);
  --heat-board: rgb(70 0 38 / .3);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.75rem 3rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--tk-radius-l);
  background: var(--heat-bg);
  color: #fff;
  box-shadow: 0 1px 2px rgb(90 0 50 / .2), 0 1rem 2.5rem rgb(120 0 70 / .22);
}
@media (min-width: 40rem) { .heat { padding: 2rem; } }
@media (min-width: 56rem) { .heat.has-board { grid-template-columns: minmax(15rem, auto) 1fr; align-items: center; padding: 2.5rem 2.75rem; } }
/* Soft light in the corner, like the gloss on a printed panel */
.heat::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -15%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(255 255 255 / .16), transparent);
  pointer-events: none;
}
.heat > * { position: relative; }
/* No data: graphite instead of TAURON magenta, so it never looks like current information */
.heat.is-unknown {
  --heat-bg: linear-gradient(135deg, #333 0%, #262626 60%, #1d1d1d 100%);
  --heat-board: rgb(0 0 0 / .35);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 1rem 2.5rem rgb(0 0 0 / .25);
}
.heat a { color: #fff; text-decoration-color: rgb(255 255 255 / .55); }
.heat a:hover { text-decoration-color: #fff; }

.heat-counter, .heat-mark { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.heat-caption { margin: 0; font-size: min(1.05rem, 4.6vw); font-weight: 750; line-height: 1.35; white-space: nowrap; }

/* Split-flap board: each digit is a card cut in half (cards and flips are built by app.js) */
.flipboard {
  display: flex;
  gap: clamp(.35rem, 1.4vw, .55rem);
  padding: clamp(.5rem, 1.8vw, .75rem);
  border-radius: 1.1rem;
  background: var(--heat-board);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / .35), 0 1px 0 rgb(255 255 255 / .12);
}
.flip {
  --w: clamp(4.4rem, 19vw, 7rem);
  --h: calc(var(--w) * 1.38);
  --r: calc(var(--w) * .1);
  position: relative;
  width: var(--w);
  height: var(--h);
  perspective: calc(var(--h) * 4);
  color: #f7f7f7;
  font-size: calc(var(--h) * .78);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Three digits: slightly narrower cards, so the board still fits next to the text */
.flipboard.is-wide .flip { --w: clamp(4.2rem, 19vw, 5.6rem); }
.flip .half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.flip .top {
  top: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(#3b3b3b, #2d2d2d);
  transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}
.flip .bottom {
  bottom: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(#272727, #1f1f1f);
  transform-origin: 50% 0;
  box-shadow: 0 .35rem .6rem rgb(0 0 0 / .35);
}
.flip .num {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--h);
  line-height: var(--h);
  text-align: center;
}
.flip .top .num { top: 0; }
.flip .bottom .num { bottom: 0; }
.flip .flap { z-index: 2; visibility: hidden; }
.flip .flap.on { visibility: visible; }
/* The cut between the halves and the two hinges at its ends */
.flip::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: rgb(0 0 0 / .65);
}
.flip::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: calc(50% - var(--w) * .07);
  left: calc(var(--w) * -.035);
  right: calc(var(--w) * -.035);
  height: calc(var(--w) * .14);
  border-left: calc(var(--w) * .05) solid #141414;
  border-right: calc(var(--w) * .05) solid #141414;
  border-radius: 2px;
}

/* Outage mark that replaces the board while the network is down */
.heat-mark-icon { width: 7.5rem; height: 7.5rem; }
.heat-mark-icon svg { width: 3.8rem; height: 3.8rem; fill: currentColor; }
.heat-mark-word { font-size: 1.7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 55.99rem) {
  .heat-mark { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 1rem; }
  .heat-mark-icon { width: 4.5rem; height: 4.5rem; }
  .heat-mark-icon svg { width: 2.4rem; height: 2.4rem; }
}

/* One rhythm for the blocks of the card: drawing, notes, facts and the emergency number */
.heat-info { display: grid; gap: 1.25rem; align-content: center; min-width: 0; }
.heat-info p { margin: 0; }
.heat-details { display: grid; gap: 1rem; }
.heat-details:empty { display: none; }
.heat-details > h3 + p { margin-top: -.4rem; }
.heat-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.heat-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: #fff;
  color: #aa036c;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}
.heat-pill::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #e2007a; animation: tk-blink 1.2s ease-in-out infinite; }
.heat h3 { margin: 0; font-size: clamp(1.45rem, 3.4vw, 1.95rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

/* While heat reaches the building: water flows in along the supply pipe and up the riser, back
   out along the return pipe, and the windows warm up floor by floor */
.heat-ok {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11.5rem) 1fr;
  align-items: center;
  gap: 1rem 1.4rem;
  padding: 1.1rem 1.4rem 1.1rem 1.1rem;
  border-radius: var(--tk-radius-m);
  background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
}
/* Phones: the drawing above the text, both centered */
@media (max-width: 35.99rem) {
  .heat-ok { grid-template-columns: 1fr; justify-items: center; padding: 1.1rem 1.1rem 1.3rem; text-align: center; }
  .heat-flow { max-width: 12rem; }
}
.heat-info .heat-ok-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.heat-info .heat-ok-text { margin: .35rem 0 0; color: rgb(255 255 255 / .8); }
.heat-flow { display: block; width: 100%; height: auto; }
.heat-flow path, .heat-flow polyline { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.heat-flow .house { stroke-width: 3; fill: rgb(255 255 255 / .07); }
.heat-flow .roof { stroke-width: 7; }
.heat-flow .pipe { stroke: rgb(255 255 255 / .25); stroke-width: 8; }
.heat-flow .flow { stroke: #ffd9a3; stroke-width: 4; stroke-dasharray: 5 13; animation: tk-flow 1.1s linear infinite; }
.heat-flow .flow.back { stroke: rgb(255 255 255 / .6); }
@keyframes tk-flow { to { stroke-dashoffset: -18; } }
.heat-flow .window { fill: #ffe3bd; opacity: .3; animation: tk-warm 3s ease-in-out infinite; }
.heat-flow .floor-2 { animation-delay: .5s; }
.heat-flow .floor-3 { animation-delay: 1s; }
@keyframes tk-warm { 0%, 100% { opacity: .3; } 45% { opacity: 1; } }
/* Nothing flows while the state of the network is unknown */
.heat-ok.is-unknown .flow { display: none; }
.heat-ok.is-unknown .pipe { stroke: rgb(255 255 255 / .45); stroke-width: 5; stroke-dasharray: 1 11; }
.heat-ok.is-unknown .window { animation: none; opacity: .15; }

/* The last outage, its length and the count over a year */
.heat-facts { display: grid; gap: .75rem 1.5rem; margin: 0; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .25); }
@media (min-width: 36rem) { .heat-facts { grid-template-columns: repeat(3, 1fr); } }
.heat-facts dt, .heat-times dt, .heat-note-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.heat-facts dd { margin: .15rem 0 0; font-weight: 650; line-height: 1.4; }

/* Start, expected end and length of an ongoing outage */
.heat-times { display: grid; gap: .5rem; margin: 0; }
@media (min-width: 36rem) { .heat-times { grid-template-columns: repeat(3, 1fr); } }
.heat-times div { padding: .75rem .95rem; border-radius: var(--tk-radius-s); background: rgb(60 0 30 / .3); }
.heat-times dd { margin: .2rem 0 0; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.heat-times small { display: block; font-size: .85rem; font-weight: 600; }
.heat-info .heat-source { font-size: .9rem; }

/* White inset with an announced interruption or the end of an outage */
.heat-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border-radius: var(--tk-radius-m);
  background: #fff;
  color: #272727;
}
.heat-note-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fbe3ef; color: #aa036c; }
.heat-note-icon svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.heat-note-label { color: #aa036c; }
.heat-info .heat-note p { margin: .15rem 0 0; }

/* Link to the outage details page (/outages/) */
.heat-more { margin: 0; font-weight: 750; }
.heat-more a::after { content: " →"; }

/* Emergency number at the right edge, as in every other card */
.heat-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.heat-info .heat-help { font-size: .95rem; }
.heat .phone { margin-left: auto; background: #fff; color: #aa036c; }
.heat .phone:hover { background: #ffe3f1; }
.heat.is-unknown .phone { background: #e2007a; color: #fff; }
.heat.is-unknown .phone:hover { background: #f5007b; }

@media (prefers-reduced-motion: reduce) {
  .outage-icon::after, .heat-mark-icon::after, .nav a.has-alert::after, .heat-pill::before,
  .heat-flow .flow, .heat-flow .window { animation: none; }
  .heat-flow .window { opacity: .9; }
}

/* ---------- Footer: same mark-and-name lockup as the top bar, plus short details ---------- */
.footer {
  background: var(--tk-band-bg);
  color: var(--tk-band-muted);
  padding: 2rem 0 2.25rem;
  border-top: 1px solid var(--tk-band-border);
}
.footer .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.footer-meta { font-size: .9rem; line-height: 1.6; }
.footer-meta p { margin: 0; }
.footer-meta a { color: var(--tk-band-text); }
.footer-meta .languages { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .6rem; }
.footer-meta .languages a { display: inline-flex; align-items: center; gap: .45rem; text-decoration-color: var(--tk-band-border); }
.footer-meta .languages a[aria-current] { text-decoration: none; font-weight: var(--tk-weight-bold); }
.footer-meta .languages .flag { width: 1.1rem; }
@media (min-width: 56rem) {
  .footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-meta { text-align: right; }
  .footer-meta .languages { justify-content: flex-end; }
}

/* ---------- Dark mode: adjustments not covered by the tokens ---------- */
@media (prefers-color-scheme: dark) {
  .alert { background: rgb(224 128 60 / .12); color: var(--tk-text); }
  .button { background: var(--tk-orange); border-color: var(--tk-orange); color: var(--tk-navy); }
  .button.secondary { color: var(--tk-text); border-color: var(--tk-border); background: transparent; }
  .dot { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
}

/* ---------- Print (e.g. for a neighbor without internet access) ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Print the top bar and intro in brand colors, since the logo is the reversed version */
  .topbar { position: static; }
  .topbar, .hero, .outages, .heat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .heat, .outage { box-shadow: none; }
  .hero { padding: 1rem 0 1.25rem; }
  .footer { display: none; }
  .nav, .languages, .language-menu, .skip, .buttons, .calendar, .phone::before { display: none; }
  .phone { background: none; padding: 0; color: inherit; }
  .card, .waste, .schedule, .accordion, .numbers a { box-shadow: none; border-color: #999; background: #fff; }
  .section { padding: 1.25rem 0; break-inside: avoid-page; }
  a { color: #000; text-decoration: none; }
}