@import url("tokens.css");

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* Long unbroken strings — e-mail addresses above all — must wrap rather
     than run out of their column and over the next one. The footer and the
     contact cards are narrow enough for
     l.klestilova@kvalitnipodzimzivota.cz to overflow on its own. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  /* anywhere, not break-word: an e-mail or URL has no spaces to break at,
     and it must still fit a 13rem grid column. */
  overflow-wrap: anywhere;
}
a:hover { text-decoration-color: var(--gold-dark); }

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

/* Visible focus is non-negotiable for keyboard and low-vision users. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* The designer's signature: an uppercase heading with a thin gold rule
   running to the right edge of the container. */
.section-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.section-head h2 { margin: 0; white-space: nowrap; }
.section-head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--gold-rule);
}

.grid { display: grid; gap: 1.5rem; }
/* Without this a grid item will not shrink below its widest unbreakable
   content, which is how the footer e-mail pushed into its neighbour. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .625rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--gold-dark); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--gold-wash); }

.btn-sm { min-height: 40px; padding: .375rem 1rem; font-size: var(--fs-sm); }

/* A row of buttons.
   Buttons are inline-flex, so left to themselves the only thing between two
   of them is the whitespace in the HTML — about 4px, and nothing at all once
   they wrap, which on a phone put the two hero buttons edge to edge. A flex
   row with a real gap spaces them on both axes.
   The :has() rule is a safety net for markup added later; the class is what
   actually does the work, so this still behaves in a browser without it. */
.btn-row,
p:has(> .btn + .btn),
nav:has(> .btn + .btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* On the narrowest phones a long label like "Chci pečovatelskou službu" fills
   the line anyway, so let the buttons stretch and line up rather than sit
   ragged. */
@media (max-width: 26.25em) {
  .btn-row > .btn { flex: 1 1 100%; }
}

/* The "Přečíst celý článek »" style link from the design. */
.link-more {
  display: inline-block;
  min-height: var(--tap);
  padding-block: .75rem;
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 2px solid var(--gold-rule);
}

/* The header is sticky, so a link to #firmy would otherwise scroll the
   heading underneath it and the visitor lands mid-paragraph. Roughly the
   72px bar plus breathing room. */
section[id],
:target { scroll-margin-top: 6rem; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark { height: 44px; width: auto; }
.brand__text { font-weight: 800; font-size: 1.0625rem; line-height: 1.15; }
.brand__text > span { display: block; }
/* The s.r.o. is the second organisation, not a subtitle of the first, but it
   stays quieter: the ústav is what the site is mostly about. */
.brand__sro { font-weight: 500; font-size: .8125rem; color: var(--muted); }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="page"] { background: var(--gold-wash); }

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  display: block;
  min-height: var(--tap);
  padding: .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.nav__panel a:hover { background: var(--gold-wash); }

.nav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.hero__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.hero__lead { font-size: var(--fs-lg); }
.hero__aside { text-align: center; }
.hero__aside figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: .75rem; }

/* ==========================================================================
   Service grid — the "POSKYTOVANÉ SLUŽBY" panel
   ========================================================================== */

.services-panel {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.service-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 1.25rem;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.service-tile:hover { border-color: var(--gold-dark); transform: translateY(-2px); }
.service-tile__label { font-weight: 700; text-transform: uppercase; font-size: 1rem; }
.service-tile__blurb { font-size: var(--fs-sm); color: var(--ink-soft); margin: .25rem 0 0; }
.service-tile .btn { flex: none; }

.badge-np {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--radius-pill);
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__media { aspect-ratio: 16 / 10; background: var(--cream-deep); object-fit: cover; width: 100%; }
.card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { text-transform: uppercase; font-size: 1.125rem; }
.card__meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .5rem; }
.card__body .link-more { margin-top: auto; }

.quote {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.quote__author { text-align: right; font-weight: 600; margin: 0; }

/* ==========================================================================
   Tables — ceníky
   ========================================================================== */

.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data th,
table.data td {
  padding: .875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
/* Uppercase belongs on the column headings only. Row headers hold real
   sentences — village names and pricing notes — and a paragraph in capitals
   is markedly harder to read, which matters for this audience. */
table.data thead th {
  background: var(--cream-deep);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}
table.data tbody th { background: transparent; }
/* Do NOT put overflow-wrap: anywhere on these cells. It does fix a stray
   URL overflowing its column, but it also lets ordinary words break at any
   character — and on a phone that collapses the whole table into one letter
   per line rather than letting .table-scroll scroll it. Long values are
   shortened where they occur (see the short_url filter) instead. */
table.data td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* A wide table on a phone.

   Four columns cannot be read across a 375px screen: squeezed they break
   words mid-letter, and scrolled sideways the reader has to remember the
   left-hand column while looking at the right. Below this width each row
   becomes a small card instead — the place name as its heading, the figures
   labelled underneath. Opt in with .table-cards; tables that are genuinely
   a grid of numbers still scroll. */
@media (max-width: 34em) {
  .table-cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards th,
  .table-cards td { display: block; width: auto; }

  .table-cards tr {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .table-cards tr:last-child { border-bottom: 0; }

  .table-cards th[scope="row"] {
    padding: 0 0 .5rem;
    border: 0;
    /* !important because the templates set font-weight:400 inline, which is
       right in a grid — as a card heading the place name carries the row. */
    font-weight: 700 !important;
  }
  /* …but not the note underneath it, which is still small print. */
  .table-cards th[scope="row"] .card__meta { font-weight: 400; }

  .table-cards td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .125rem 0;
    border: 0;
    text-align: right;
  }
  /* The column heading, repeated per cell — without it the figures are
     three unlabelled numbers. */
  .table-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-align: left;
  }
}

/* ==========================================================================
   Supporters
   ========================================================================== */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.5rem 2rem;
  align-items: center;
}
.logo-wall img { max-height: 64px; width: auto; margin-inline: auto; }

/* ==========================================================================
   Contacts
   ========================================================================== */

.person {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.person__name { font-weight: 700; text-transform: uppercase; margin-bottom: .25rem; }
.person__role { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .75rem; }
.person dt { font-size: .8125rem; text-transform: uppercase; color: var(--muted); }
.person dd { margin: 0 0 .5rem; }
.person a { font-weight: 600; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; margin-bottom: .375rem; }
.field .hint { font-size: var(--fs-sm); color: var(--muted); margin: .25rem 0 0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .625rem .75rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }

.field--error input,
.field--error textarea,
.field--error select { border-color: var(--err); }
.field__error { color: var(--err); font-weight: 600; font-size: var(--fs-sm); margin: .375rem 0 0; }

.checkbox { display: flex; align-items: center; gap: .625rem; }
.checkbox input { width: 22px; height: 22px; }

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flash {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: 1rem;
  font-weight: 600;
}
.flash--success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash--error { background: var(--err-bg); border-color: var(--err); color: var(--err); }

/* ==========================================================================
   Shop — product imagery
   --------------------------------------------------------------------------
   Uploaded photos are wildly inconsistent: real ones range from 899x1599
   (tall portrait) to 4096x3072 (landscape). Left alone, the listing grid
   would have tiles of different heights.

   Every tile is therefore a fixed square, and the photo is fitted inside it
   with `contain` rather than `cover`. Cover would keep the tiles uniform too,
   but it crops — and on a tall photo of a shopping bag it would cut off the
   product. Letterboxing against a neutral ground is the lesser evil in a shop.
   ========================================================================== */

.product-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--white);
  padding: .625rem;
  border-bottom: 1px solid var(--line);
}

/* Detail page: cap the height so a 4096px-tall photo does not push the
   buying options off the screen. */
.product-figure {
  margin: 0 0 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
}
.product-figure img {
  width: 100%;
  max-height: 30rem;
  object-fit: contain;
}

/* ==========================================================================
   Shop — cart and quantity controls
   ========================================================================== */

.qty { display: flex; align-items: center; gap: .5rem; }

.cart-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .75rem;
}
.cart-item__main { flex: 1 1 14rem; min-width: 0; }
.cart-item__name { font-weight: 700; }
.cart-item__meta { list-style: none; margin: .375rem 0 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.cart-item__meta .is-np { color: var(--warn); }
.cart-item__qty { display: flex; align-items: center; gap: .375rem; }
.cart-item__qty-input { width: 4.5rem; text-align: center; }
.cart-item__price { font-weight: 700; white-space: nowrap; }
.cart-item__tags { font-size: var(--fs-sm); color: var(--muted); }

.cart-list--compact .cart-item { padding: .75rem 1rem; }

/* Header cart badge */
.cart-link { position: relative; }
.cart-link [data-cart-count] {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .375rem;
  margin-left: .375rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 700;
}
.cart-link [data-cart-count].is-empty { display: none; }

/* Filter / sort bar on the product listing */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.shop-filters__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .375rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.chip[aria-current="true"] { background: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--muted); }

/* ==========================================================================
   Service areas
   ========================================================================== */

.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-list li {
  display: inline-block;
  margin: 0 .375rem .375rem 0;
  padding: .125rem .625rem;
  background: var(--gold-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Legal pages — long-form text
   ========================================================================== */

.legal h1 { margin-bottom: 1.5rem; }
.legal h2 {
  font-size: 1.25rem;
  text-transform: none;
  margin-top: 2.5rem;
}
.legal ul, .legal ol { padding-left: 1.5rem; }
.legal li { margin-bottom: .5rem; }
.legal table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.legal th, .legal td {
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--cream-deep); }

/* ==========================================================================
   Cookie consent (ported from obchod)
   ========================================================================== */

.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(20, 19, 17, .55);
  backdrop-filter: blur(3px);
}

.consent-modal {
  width: min(100%, 34rem);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.consent-modal h2 { font-size: var(--fs-h3); text-transform: none; }
.consent-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Stops the page scrolling behind the modal while a choice is pending. */
body.consent-locked { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--cream-deep);
  border-top: 2px solid var(--gold-rule);
  padding-block: 3rem 2rem;
  margin-top: 4rem;
}
.site-footer h3 { font-size: 1.0625rem; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .375rem; }
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  :root { --fs-h1: 2.125rem; --fs-h2: 1.625rem; }

  .hero__grid { grid-template-columns: 1fr; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .5rem 1rem;
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .nav {
    display: none;
    position: absolute;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--cream);
    border-bottom: 2px solid var(--gold-rule);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }

  .nav__panel {
    position: static;
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
    background: transparent;
  }
  .nav__panel[hidden] { display: none; }

  .section-head { flex-wrap: wrap; }
  .section-head h2 { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* Radio groups on the order form. Rendered as a fieldset so the question is
   announced before its options; sized for the 48px tap target the
   accessibility rules require. */
.radio-group { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.radio-group legend { font-weight: 700; padding: 0; margin-bottom: .35rem; }
.radio { display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.radio input[type="radio"] { width: 24px; height: 24px; flex: none; }
.radio label { margin: 0; font-weight: 400; }

/* The donation QR in the hero. Square, and capped so it never dominates the
   headline it sits beside; white plate around it because a QR needs its quiet
   zone against any background. */
.hero__qr {
  /* margin-inline, not text-align: images are display:block here, so the
     centring on .hero__aside does not reach them. */
  margin-inline: auto;
  width: 100%;
  max-width: 260px;
  height: auto;
  background: #fff;
  padding: .5rem;
  border-radius: var(--radius);
}

/* The EU publicity plaque. It is a wide document full of small print, so it
   gets a white ground (the artwork assumes one) and a hairline edge, and is
   never scaled below its column. */
.react-eu__plaque { margin: 0; }
.react-eu__plaque img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--line, #d8d2c2);
  border-radius: var(--radius);
}

/* The status control in the admin lists: a dropdown and its save button side
   by side, so a row does not grow a second line just for them. */
.status-form { display: flex; gap: .4rem; align-items: center; }
.status-form select { min-width: 8rem; }