/* ==========================================================================
   U Antonína — denní stacionář
   Colours, type scale and spacing are taken from the approved design.
   Edit the tokens in :root to retheme; the rest of the file uses them.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --page:          #F7F3EA;
  --surface:       #FFFFFF;
  --surface-warm:  #FDFBF6;
  --surface-sage:  #EAF0EA;
  --surface-sand:  #FBF1DE;
  --header:        #F6EDD9;
  --nav:           #F3ECDC;

  /* Borders */
  --line:          #E7DFCC;
  --line-warm:     #E6D6B4;
  --line-nav:      #E1D6BD;
  --line-sand:     #EBD9BC;
  --line-sage:     #C9D6C6;
  --line-soft:     #EFE7D6;

  /* Ink */
  --ink:           #22271F;
  --ink-body:      #41463C;
  --ink-muted:     #55594F;

  /* Green. Pushed toward the original 2009 site's pure #004400 green: hue
     ~125° (true green, not blue-shifted forest green) and higher saturation. */
  --green:         #227729;
  --green-dark:    #124917;
  --green-mid:     #3FA643;
  --on-green:      #F2F6EF;
  --on-green-soft: #DCE7D8;

  /* Accent used for dates and eyebrow labels */
  --amber:         #8A5A23;

  /* Footer */
  --footer:        #22271F;
  --footer-ink:    #D7D9D2;
  --footer-muted:  #B9BCB2;
  --footer-label:  #8F9488;
  --footer-line:   #3A3F37;

  --serif: Lora, Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1140px;
  --gutter: 28px;
  --radius: 6px;

  /* Minimum touch target. The audience includes people with poor fine motor
     control, so no interactive element is allowed below this. */
  --tap: 48px;
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}

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

/* <picture> is inline by default, so it shrink-wraps instead of filling its grid
   cell or flex track — which leaves the img inside sizing against the wrong box. */
picture { display: block; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-dark); }

/* Visible focus for keyboard users — never remove this. */
:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------- utilities */

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green-dark); color: #FFF; padding: 14px 22px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

.eyebrow {
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.eyebrow--amber { color: var(--amber); letter-spacing: 0.08em; }

.lede { font-size: 21px; color: var(--ink-body); max-width: 40em; }
.measure { max-width: 42em; }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px;
  border-radius: 4px; border: 2px solid transparent;
  font-family: var(--sans); font-size: 19px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--green); color: #FFFFFF; }
.btn--primary:hover { background: var(--green-dark); color: #FFFFFF; }

.btn--secondary { background: var(--surface); color: var(--green-dark); border-color: var(--line-sage); }
.btn--secondary:hover { border-color: var(--green); color: var(--green-dark); }

.btn--sand { background: var(--surface); color: var(--green-dark); border-color: var(--line-sand); }
.btn--sand:hover { border-color: var(--amber); color: var(--green-dark); }

/* On a dark green panel */
.btn--on-dark { background: #FFFFFF; color: var(--green-dark); }
.btn--on-dark:hover { background: var(--surface-sage); color: var(--green-dark); }
.btn--on-dark-ghost { border-color: var(--green-mid); color: #FFFFFF; }
.btn--on-dark-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* ------------------------------------------------------- header / utility */

.utility {
  background: var(--green-dark);
  color: var(--on-green);
  font-size: 15.5px;
}
.utility .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: center; justify-content: space-between;
  padding-block: 9px;
}
.utility a { color: #FFFFFF; text-decoration: none; font-weight: 700; }
.utility a:hover { color: #FFFFFF; text-decoration: underline; }
.utility__hours { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }

/* Header banner.
   The photo is never cropped or stretched: it is shown at its full extent, at
   whatever height the header currently is, pinned to the right edge, at every
   viewport width — it is never hidden. A green-to-clear gradient is baked
   into the image's own left edge (see tools/build-banner.mjs) in the same
   colour as this header's background, so wherever that edge happens to land
   it dissolves into flat green instead of ending in a hard rectangle.
   On a narrow screen the image doesn't shrink (its rendered size is set by
   the header's height, not the viewport width), so it can end up reaching as
   far as the logo, the same way it could on the 2009 original. The logo's own
   drop-shadow glow below is what keeps it readable when that happens — it
   doesn't depend on knowing what is behind it. */
.masthead {
  position: relative;
  background: var(--green-dark);
  border-bottom: 5px solid var(--green);
  overflow: hidden; /* if the header is ever narrower than the photo at this
                        height, clip from the left — the fade/green side —
                        rather than let it overflow the page */
}

.masthead__photo {
  position: absolute; inset: 0;
  display: flex;
  justify-content: flex-end;
}
.masthead__photo picture, .masthead__photo img {
  display: block; height: 100%; width: auto;
  flex-shrink: 0; /* keep true size and let .masthead's overflow:hidden clip
                     it, rather than letting flexbox squash it narrower */
}

.masthead .wrap {
  position: relative;
  min-height: 210px;
  display: flex; flex-wrap: wrap; gap: 18px 44px;
  align-items: center;
  padding-block: 30px;
}
.masthead__logo { display: block; flex: none; text-decoration: none; }
.masthead__logo img {
  height: 116px; width: auto;
  /* Stacked, increasingly soft shadows build up a dark halo that hugs the
     white letterforms themselves (this is a transparent PNG) — legible
     whether it's sitting on flat green or directly over the photo. */
  filter:
    drop-shadow(0 0 2px rgba(15, 23, 15, 0.9))
    drop-shadow(0 0 6px rgba(15, 23, 15, 0.75))
    drop-shadow(0 0 14px rgba(15, 23, 15, 0.55));
}

@media (max-width: 799px) {
  .masthead .wrap { min-height: 0; padding-block: 22px; }
}

@media (max-width: 599px) {
  .masthead__logo img { height: 88px; }
}

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav);
  border-top: 5px solid var(--green);
  border-bottom: 1px solid var(--line-nav);
}
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding-inline: var(--gutter); }

.nav__mark { display: flex; align-items: center; flex: none; margin-right: 14px; padding: 6px 0; text-decoration: none; }
.nav__mark img { height: 36px; width: 36px; }

/* Hidden unless .js has landed on <html> and the screen is narrow (see the
   media query below) — without JS the toggle would do nothing, so the full
   list stays the only option, same as before this button existed. */
.nav__toggle {
  display: none;
  margin-left: auto;
  flex: none;
  position: relative;
  width: var(--tap); height: var(--tap); min-width: 48px; min-height: 48px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 3px; margin-left: -12px;
  background: var(--ink); border-radius: 2px;
  transition: transform .15s ease, opacity .15s ease, top .15s ease;
}
.nav__toggle-icon::before { content: ""; top: -8px; }
.nav__toggle-icon::after { content: ""; top: 8px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after { top: 0; transform: rotate(-45deg); }

.nav__list { display: flex; flex-wrap: wrap; gap: 0 4px; list-style: none; margin: 0; padding: 0; }

.nav__link {
  position: relative; display: flex; align-items: center;
  min-height: var(--tap); padding: 12px 10px 13px;
  color: var(--ink); font-size: 17.5px; font-weight: 600; text-decoration: none;
}
.nav__link:hover { color: var(--green); }
.nav__link[aria-current="page"] { color: var(--green-dark); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; background: var(--green); border-radius: 2px 2px 0 0;
}

@media (max-width: 899px) {
  .nav__list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0; }
  .nav__link { padding: 13px 4px; }
  .nav__link[aria-current="page"]::after { left: 4px; right: 4px; }

  /* JS-enhanced mobile menu: a compact bar (logo + hamburger) stays stuck to
     the top, and the link grid becomes a dropdown panel under it instead of
     permanently taking up header space. */
  .js .nav__toggle { display: flex; }
  .js .nav__list {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    grid-template-columns: 1fr 1fr;
    background: var(--nav);
    border-bottom: 1px solid var(--line-nav);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .js .nav.is-open .nav__list { display: grid; }
}

/* ------------------------------------------------------------- sections */

.section { padding-top: 64px; }
.section--first { padding-top: 52px; }
.section > h2, .section > h3 { margin-bottom: 14px; }

.section-title { font-size: 36px; }
.page-title { font-size: 42px; margin-bottom: 16px; }

.band { background: var(--surface-sage); }
.band .wrap { padding-block: 36px; }

.band--warm { background: var(--surface-warm); border-bottom: 1px solid #E7DFCC; }
.band--warm .wrap { padding-block: 56px 60px; }

.band--green { background: var(--green-dark); color: var(--on-green); margin-top: 64px; }
.band--green .wrap { padding-block: 60px; }
.band--green h2, .band--green h3 { color: #FFFFFF; }
.band--green p { color: var(--on-green-soft); }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ------------------------------------------------------------------ grids */

.grid { display: grid; gap: 24px; }
.grid--2   { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.grid--3   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.grid--gallery { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px; align-items: center; }
.grid > * { min-width: 0; }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
}
.card h3 { font-size: 23px; margin-bottom: 10px; }
.card p { color: var(--ink-body); font-size: 18px; }

.card--sand { background: var(--surface-sand); border-color: var(--line-sand); padding: 30px; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__body { padding: 22px; }

.card__step {
  font-family: var(--serif); font-size: 40px; font-weight: 700;
  color: var(--line-sage); line-height: 1; margin-bottom: 10px;
}

/* Key figures on the home page */
.stat__value { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--green-dark); }
.stat__label { font-size: 17px; color: var(--ink-body); }

/* A handful of standalone photos sit directly on the page rather than inside
   a `.figure` (which already rounds its own img) or a flush card thumbnail
   (which deliberately doesn't, relying on the card's own clipped corners
   instead — giving that image round corners too would show a small notch of
   the card's background peeking through at the bottom, where the photo meets
   the text panel below it). This is for the rest: a plain photo with nothing
   else around it. */
.content-photo { border-radius: var(--radius); }

/* --------------------------------------------------------------- figures */

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius); }
.figure figcaption { font-size: 16.5px; color: var(--ink-muted); margin-top: 8px; }

/* Fixed-height crops keep gallery rows tidy; the aspect ratio of the source is
   preserved in the file, only the display box is cropped. */
.figure--crop img { height: 220px; object-fit: cover; }
.figure--crop-sm img { height: 190px; object-fit: cover; }
.figure--crop-lg img { height: 230px; object-fit: cover; }
.figure--portrait img { height: 260px; object-fit: cover; border-radius: 0; }

/* Photos link to a larger copy; make that affordance visible. */
a.figure-link { display: block; text-decoration: none; border-radius: var(--radius); }
a.figure-link img { transition: opacity 0.15s ease; }
a.figure-link:hover img { opacity: 0.88; }

/* --------------------------------------------------------------- schedule */

.schedule {
  display: grid; gap: 2px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.schedule__row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 2px; }
.schedule__time {
  background: var(--surface-sage); padding: 18px 20px;
  font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--green-dark);
}
.schedule__what { background: var(--surface); padding: 18px 20px; color: var(--ink-body); }

@media (max-width: 559px) {
  .schedule__row { grid-template-columns: 1fr; }
  .schedule__time { padding-bottom: 6px; }
  .schedule__what { padding-top: 10px; }
}

/* ----------------------------------------------------------------- prices */

.prices {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); max-width: 760px;
}
.prices__head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 22px; background: var(--surface-sage);
  font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--green-dark);
}
.prices__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}
.prices__row:last-child { border-bottom: 0; }
.prices__row span { font-size: 19px; }
.prices__amount {
  font-family: var(--serif); font-size: 20px; color: var(--green-dark); white-space: nowrap;
}

/* ------------------------------------------------------------- file lists */

.files {
  display: grid; gap: 2px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; max-width: 760px;
}
.files__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  background: var(--surface); padding: 16px 20px;
  min-height: var(--tap);
  font-weight: 600; text-decoration: none; color: var(--green-dark);
}
.files__item:hover { background: var(--surface-sage); color: var(--green-dark); }
.files__meta { color: var(--ink-muted); font-weight: 400; font-size: 16px; }

/* ------------------------------------------------------------------- news */

.news { display: grid; gap: 26px; max-width: 860px; }
.news__item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px; align-items: start;
}
.news__item > * { min-width: 0; }
.news__item h2 { font-size: 26px; margin-bottom: 10px; }
.news__item p { font-size: 18.5px; color: var(--ink-body); }
.news__date { font-size: 16px; color: var(--amber); font-weight: 700; margin-bottom: 8px; }
.news__item img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius); }

/* ---------------------------------------------------------------- contact */

.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.contact-card__phone {
  font-family: var(--serif); font-size: 29px; font-weight: 700;
  text-decoration: none; display: inline-block;
  min-height: var(--tap); line-height: 1.4;
}
.contact-card address { font-style: normal; font-size: 19px; color: var(--ink-body); margin-top: 18px; line-height: 1.6; }
.contact-card__note { margin-top: 16px; font-size: 18px; color: var(--ink-muted); }
.contact-links { display: grid; gap: 6px; font-size: 19px; }
.contact-links a { min-height: 34px; display: inline-flex; align-items: center; }

.map {
  border: 1px solid var(--line-sage); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-sage);
}
.map iframe { display: block; width: 100%; height: 460px; border: 0; }
.map__footer {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
  justify-content: space-between; padding: 18px 22px;
  border-top: 1px solid var(--line-sage); background: var(--surface-sage);
}
@media (max-width: 559px) { .map iframe { height: 340px; } }

/* ----------------------------------------------------------------- footer */

.footer { margin-top: 72px; background: var(--footer); color: var(--footer-ink); }
.footer .wrap { padding-block: 52px; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; }
.footer__brand { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #FFFFFF; margin-bottom: 8px; }
.footer p { font-size: 17.5px; color: var(--footer-muted); }
.footer__label {
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--footer-label); font-weight: 700; margin-bottom: 10px;
}
.footer__list { display: grid; gap: 2px; font-size: 17.5px; list-style: none; margin: 0; padding: 0; }
.footer__list a, .footer a { color: #FFFFFF; text-decoration: none; }
.footer__list a { display: inline-flex; align-items: center; min-height: 34px; }
.footer__list a:hover, .footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__list span { color: var(--footer-muted); }

/* Funding attribution — required by the grant agreement. Do not remove. */
.partners { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--footer-line); }
.partners p { max-width: 52em; margin-bottom: 18px; font-size: 17px; }
.partners__logos {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  background: #FFFFFF; padding: 16px 20px; border-radius: var(--radius); width: fit-content;
}
.partners__logos img { height: 44px; width: auto; }

.footer__legal {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--footer-line);
  font-size: 16px; color: var(--footer-label);
}

/* -------------------------------------------------------------- lightbox */
/* Built and populated by js/lightbox.js. The markup does not exist until a
   photo is clicked; this only styles it once it does. Every underlying photo
   remains a real <a href> to the full-size file, so opening in a new tab,
   right-click "save image" and viewing with JavaScript disabled all still
   work exactly as before — this is a progressive enhancement on top of that,
   not a replacement for it. */

.lightbox {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 24, 18, 0.92);
}
.lightbox.is-open { display: flex; }

.lightbox__figure { margin: 0; max-width: min(94vw, 1400px); max-height: 94vh; }
.lightbox__img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  border-radius: 4px;
  background: #14180F; /* holds the frame steady while the full image loads */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
  color: #F2F6EF; font-size: 17px; text-align: center;
  max-width: 60ch; margin: 14px auto 0;
}
.lightbox__caption[hidden] { display: none; }

.lightbox__close, .lightbox__prev, .lightbox__next {
  position: fixed;
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  background: rgba(255, 255, 255, 0.14);
  border: none; border-radius: 50%;
  color: #FFFFFF; line-height: 1; cursor: pointer;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover {
  background: rgba(255, 255, 255, 0.26);
}
.lightbox__close[hidden], .lightbox__prev[hidden], .lightbox__next[hidden] { display: none; }

.lightbox__close { top: 18px; right: 18px; font-size: 22px; }
.lightbox__prev  { top: 50%; left: 18px; transform: translateY(-50%); font-size: 28px; }
.lightbox__next  { top: 50%; right: 18px; transform: translateY(-50%); font-size: 28px; }

.lightbox__count {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #D7D9D2; font-size: 15px;
  background: rgba(255, 255, 255, 0.14);
  padding: 6px 14px; border-radius: 20px;
}
.lightbox__count[hidden] { display: none; }

@media (max-width: 599px) {
  .lightbox { padding: 12px; }
  .lightbox__img { max-height: 68vh; }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ------------------------------------------------------- type at phone size */

@media (max-width: 599px) {
  :root { --gutter: 16px; }
  body { font-size: 18px; }
  .page-title { font-size: 32px; }
  .section-title { font-size: 28px; }
  .lede { font-size: 19px; }
  .masthead__logo img { height: 76px; }
  .hero-strip { height: 190px; }
  .card, .card--sand { padding: 22px; }
  .news__item { padding: 22px; }
  .contact-card { padding: 22px; }
  .band--green .wrap { padding-block: 44px; }
  .section { padding-top: 48px; }
}

/* Respect users who zoom to 200%: nothing may be pinned to a fixed height. */
@media (max-height: 480px) {
  .nav { position: static; }
}