/* ==========================================================================
   Layout: page shell, header, responsive grids
   Mobile first. Breakpoints in rem so they respect the reader's font size.
     36rem  ~ 576px  large phone
     48rem  ~ 768px  tablet
     64rem  ~ 1024px desktop
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  /* Safe-area insets keep content clear of the iPhone notch in landscape */
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

.site-header {
  position: sticky;
  top: 0;
  /* Вище за Leaflet. Його шари й контроли піднімаються до 800, тож шапка
     з z-index: 20 опинялася ПІД мапою: меню ставало недосяжним рівно на
     тих сторінках, де воно найпотрібніше — там, де людина дивиться, куди
     їй іти. */
  z-index: 1000;
  /* Surface and border are set with the identity band further down. */
}

/* On a phone the brand takes the first row and the tools scroll on the
   second. Forcing everything onto one line crushed the brand to a single
   character per line once search and catalogue links were added — a
   header that hides its own name is worse than one that is a row taller. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  /* Was 52px. A band needs air around the lockup or the colour reads as a
     stripe somebody forgot to remove rather than as the town's mark. */
  min-height: 64px;
  padding-block: var(--sp-3);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.header-tools {
  flex: 1 1 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.header-tools::-webkit-scrollbar { display: none; }
.header-tools > * { flex: 0 0 auto; }

@media (min-width: 48rem) {
  .site-header__inner { flex-wrap: nowrap; }
  .header-tools { flex: 0 0 auto; overflow: visible; }
}

/* --- Identity ------------------------------------------------------------
   The header used to be a black wordmark and a grey subtitle: every
   hromada looked the same, and the colour a council chose showed up only
   on button borders. Identity is not decoration here — a person who has
   just arrived is asking whether this site is their town's or a national
   portal that will not know their street, and they decide that in the
   first second, before reading anything.

   So the colour becomes structure: a rule at the very top of the page, a
   tinted band behind the lockup, and a faint field of dots over it. The
   tint is --primary-light, not the full colour, because the toolbar sits
   on this band and ghost buttons on a saturated surface would need their
   own inverted palette — one more place for contrast to go wrong.
   -------------------------------------------------------------------- */

.site-header {
  border-top: 4px solid var(--primary);
  /* A clean tint, no pattern. A dot field was tried and removed: at this
     size it reads as screen noise or a rendering fault, and it competes
     with the one thing the band exists to carry — the name of the
     hromada. */
  background: linear-gradient(to bottom,
    var(--primary-light),
    color-mix(in srgb, var(--primary-light) 30%, var(--surface)));
  border-bottom: 1px solid var(--border);
}

/* color-mix is recent. Where it is missing the dots simply do not paint
   and the band stays a clean tint — no broken rendering, no lost text. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--primary-light); }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;              /* allow the flex child to shrink and ellipsize */
  color: var(--text);
  text-decoration: none;
}

.brand__emblem {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.brand__name {
  font-weight: 700;
  font-size: var(--size-base);
  letter-spacing: -0.01em;
}

/* The place name carries the hromada's colour: it is the one word on the
   page that answers "is this mine?", and colour answers faster than text. */
.brand__place {
  font-weight: 600;
  font-size: var(--size-xs);
  color: var(--primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 36rem) {
  .brand__name { font-size: var(--size-lg); }
  .brand__place { font-size: var(--size-sm); }
}

/* Ink and paper: the band prints as a waste of toner and the rule as a
   black bar. */
@media print {
  .site-header { background: none; border-top: 0; }
}

.header-tools { display: flex; align-items: center; gap: var(--sp-2); }

main { padding-top: var(--sp-5); padding-bottom: var(--sp-7); }

.section { margin-bottom: var(--sp-6); }
.section__title {
  font-size: var(--size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* --- Category tiles ---------------------------------------------------
   Two columns on phones so each tile stays large. auto-fit widens the grid
   on bigger screens without extra media queries. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* Enlarged text on a small phone: two columns would hyphenate every
   label, so fall back to a single column. The matching .tile override
   lives in components.css, which loads later and would otherwise win. */
@media (max-width: 20rem) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 36rem) {
  .tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-4);
  }
}

/* --- Route steps -------------------------------------------------------
   Capped on wide screens: a step card stretched across 1200px puts the
   step number and the document list at opposite ends of the eye's travel. */
.step-list {
  display: grid;
  gap: var(--sp-3);
  max-width: 46rem;
}

.section__title,
.chip-row,
.disclosure { max-width: 46rem; }

@media (min-width: 64rem) {
  .layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-6);
    align-items: start;
  }
  .layout-split__aside { position: sticky; top: 5rem; }
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  padding-top: var(--sp-5);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* The "call us" card: the one action in the footer, so it reads as one
   thing — soft brand panel, label above, the number itself the biggest
   element and tappable. */
.site-footer__help {
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius, 12px);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.site-footer__lead {
  margin: 0 0 var(--sp-2);
  font-weight: 600;
  color: var(--text);
}

.site-footer__label {
  margin: 0 0 var(--sp-1);
  font-size: var(--size-xs);
  color: var(--primary-dark);
}

.site-footer__phone {
  display: inline-block;
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--primary-dark);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-footer__phone:hover { text-decoration: underline; }

.site-footer__note { margin: 0; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .site-footer__help { border-color: var(--border); }
}

/* --- Honesty strip -------------------------------------------------------
   Present on every page, quiet on every page. */
.trust-strip {
  background: var(--waiting-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--waiting) 25%, transparent);
  color: var(--waiting);
  font-size: var(--size-xs);
  line-height: 1.4;
}

.trust-strip__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}

.trust-strip svg { flex: none; margin-top: 0.1em; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .trust-strip { border-bottom-color: var(--border); }
}

/* On paper the strip matters more, not less: a printed page outlives the
   data on it. */
@media print {
  .trust-strip { background: none; border-bottom: 1px solid #000; color: #000; }
}

/* Changing the hromada: quiet, always present, never in the way. */
.brand__change {
  font-size: var(--size-xs);
  color: var(--text-muted);
  text-decoration: underline;
  padding: 0.5em 0;
  white-space: nowrap;
}

/* Години поруч із номером. Без них людина дзвонить навмання і робить
   висновок «там не відповідають», хоча просто набрала о сьомій ранку. */
.site-footer__hours {
  margin: 0 0 var(--sp-2);
  font-size: var(--size-sm);
  color: var(--text-muted);
}