/* Sylván - vinný sklep a ubytování, Nechory
   One stylesheet for the whole site. System fonts only, so no external font requests.
   The only third-party request is Google Analytics, loaded by /js/site.js after consent.

   Both themes live in one place, the same way jeraabek.com does it: light-dark() resolves
   against the element's used color-scheme, so flipping color-scheme on <html> flips every
   variable at once. Each variable is declared twice on purpose, the plain light value first,
   so a browser without light-dark() support still gets a working light theme. */

:root {
  color-scheme: light dark;

  --bg: #f8f4ed;        --bg: light-dark(#f8f4ed, #17120e);
  --bg-alt: #f1e9dc;    --bg-alt: light-dark(#f1e9dc, #1f1813);
  --fg: #2a2119;        --fg: light-dark(#2a2119, #efe7db);
  --muted: #6d5c4a;     --muted: light-dark(#6d5c4a, #b0a190);
  --line: #ddd0bd;      --line: light-dark(#ddd0bd, #3a2e24);
  --accent: #7b2233;    --accent: light-dark(#7b2233, #e39aa8);
  --accent-fg: #fdf8f2; --accent-fg: light-dark(#fdf8f2, #241014);
  --card: #fffdf9;      --card: light-dark(#fffdf9, #221a14);
  --shadow-near: rgba(42, 33, 25, .06);   --shadow-near: light-dark(rgba(42, 33, 25, .06), rgba(0, 0, 0, .45));
  --shadow-far: rgba(42, 33, 25, .06);    --shadow-far: light-dark(rgba(42, 33, 25, .06), rgba(0, 0, 0, .35));
  --shadow: 0 1px 2px var(--shadow-near), 0 8px 24px var(--shadow-far);
}

/* The switch. No attribute means follow the operating system. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.65;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration: none; }

/* ---------- layout ---------- */

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }

section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--line); }
.alt { background: var(--bg-alt); }

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

/* The header stays put while the page scrolls, so the logo and the menu are always reachable.
   It is deliberately slim, and the logo shrinks a little, because a sticky bar costs vertical
   space on every screen. Anchor targets carry a scroll-margin so headings clear the bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* On a phone the logo and the theme button share the top row and the menu takes the second row
   on its own, so the four items stay on one line instead of wrapping under each other. */
@media (max-width: 44rem) {
  .site-header .wrap { gap: .6rem; }
  .brand { order: 1; }
  .navbar { order: 3; width: 100%; justify-content: center; }
  .site-header .barctl { order: 2; }
  nav ul { gap: 1rem; justify-content: center; width: 100%; font-size: .85rem; letter-spacing: .04em; }
}
@media (max-width: 24rem) {
  nav ul { gap: .7rem; font-size: .8rem; }
}
.brand { display: inline-block; }
.brand img { width: 9rem; }

/* The wordmark is black artwork on transparency, so it has to be inverted in dark mode.
   This cannot ride on a light-dark() variable: that function only produces colours, so a
   numeric filter amount through it is invalid and silently does nothing. Hence explicit rules,
   one for the system preference and one for each state of the manual switch. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand img { filter: invert(1); }
}
html[data-theme="dark"] .brand img { filter: invert(1); }
html[data-theme="light"] .brand img { filter: none; }

.navbar { display: flex; align-items: center; gap: 1.25rem; }

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
nav a { color: var(--fg); text-decoration: none; padding-bottom: .2rem; }
nav a:hover { border-bottom: 1px solid var(--accent); }
nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }

/* One icon for both directions, a half-filled disc, so no per-state rule is needed for a
   switch that has three states: light, dark, and follow the system. */
.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme:hover { border-color: var(--accent); color: var(--accent); }

/* Language switch, same shape as the theme button so the two read as a pair of controls. */
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }
.barctl { display: flex; align-items: center; gap: .5rem; }
.theme svg { width: 1.05rem; height: 1.05rem; display: block; }
.theme svg circle { stroke: currentColor; fill: none; }
.theme svg path { fill: currentColor; }

/* ---------- hero ---------- */

.hero { padding: 2.25rem 0 2.5rem; text-align: center; }
.hero h1 {
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  font-weight: normal;
}
.hero .lead { font-size: 1.12rem; margin: 0 auto 1.75rem; max-width: 38rem; }
/* Air under the buttons so the photo does not crowd them. */
.hero .actions { margin-bottom: 2.5rem; }
.hero figure { margin: 0; }

/* The hero photo is shown whole, never cropped, and simply held small enough that the
   headline, the lead, both buttons and the picture fit above the fold on a laptop. Height
   drives the size, so the 4:3 frame stays intact and the image centres in the column. */
.hero-figure { margin-top: 1.5rem; }
.hero-figure img {
  max-height: 42vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 3px;
}
@media (max-width: 40rem) {
  .hero-figure img { max-height: none; width: 100%; }
}

.eyebrow {
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .75rem;
}

/* ---------- typography ---------- */

h1 { font-weight: normal; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: normal; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; font-weight: normal; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

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

/* Two columns at most, never three: a third column leaves odd numbers of cards stranded
   and makes the text columns too narrow to read comfortably. The seasons block below is
   the one exception, because four equal cards fill their row exactly. */
.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card p:last-child { margin-bottom: 0; }

/* The four seasons must never break into three columns, which leaves one card orphaned
   on its own row. Four across on a wide screen, two by two below that, one on a phone. */
.cards.seasons { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards.seasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards.seasons { grid-template-columns: repeat(4, 1fr); } }
.cards.seasons .card { padding: 1.25rem; }
.cards.seasons h3 { letter-spacing: .04em; }

/* Photo cards: a picture on top, text below, used for the trip ideas. */
.card figure { margin: -1.5rem -1.5rem 1rem; }
.card figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px 4px 0 0; }
figure.wide { margin: 2rem 0 0; }
figure.wide img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 3px; }
figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  background: var(--accent);
  color: var(--accent-fg);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: inherit;
  font-size: .98rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.btn:hover { opacity: .9; }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ---------- facts table ---------- */

.facts { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.facts th, .facts td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { font-weight: normal; color: var(--muted); width: 42%; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 2.5rem 0;
  font-size: .95rem;
}
/* The footer may run three or four columns, unlike the body: these are short link lists,
   not prose, so narrow columns read fine here. */
.site-footer .cols {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.site-footer h2 { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.site-footer p { margin: 0 0 .3rem; }
.site-footer .spaced { margin-top: .8rem; }
.site-footer .note { color: var(--muted); margin-top: 2rem; font-size: .9rem; }

/* ---------- jump links ---------- */

/* Anchor list at the top of a long page, so a reader can go straight to the part they came for. */
.jump {
  position: sticky;
  top: 4rem;
  z-index: 9;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 1.5rem 0 0;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jump a { color: var(--muted); text-decoration: none; }
.jump a:hover { color: var(--accent); }
h2[id] { scroll-margin-top: 5.5rem; }

.credits { font-size: .85rem; }

/* ---------- consent banner ---------- */

/* Bottom-left corner, like the CookieYes box on jeraabek.com. On a phone the width
   falls back to the full viewport minus the two margins. */
.consent {
  position: fixed;
  left: 1rem;
  right: auto;
  bottom: 1rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  font-size: .95rem;
  z-index: 20;
}
.consent p { margin: 0 0 .9rem; }

/* The two answers are one control, so they share a row and equal width and never wrap apart.
   Declining looked like a separate afterthought when the buttons could break onto two lines. */
.consent-actions { display: flex; flex-wrap: nowrap; gap: .6rem; }
.consent-actions .btn {
  flex: 1 1 0;
  padding: .55rem 1rem;
  font-size: .92rem;
  text-align: center;
  white-space: nowrap;
}

/* Second layer: the per-category detail behind "Podrobnosti". A plain text-style
   button, so it never competes with the two answers below it. */
.consent-toggle {
  display: block;
  margin: -.4rem 0 .9rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.consent-toggle:hover { color: var(--accent); }

.consent-details { margin: 0 0 .9rem; }
/* Only the category list scrolls - the save button has to stay reachable, and inside
   the scroll box it was cut in half on a phone. */
.consent-cats {
  padding: .2rem .6rem 0 0;
  border-top: 1px solid var(--line);
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.consent-details .btn {
  display: block;
  width: 100%;
  margin-top: .7rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  text-align: center;
}

/* One category row: name and its switch on one line, the explanation under it. */
.consent-cat { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.consent-cat:last-child { border-bottom: 0; padding-bottom: 0; }
label.consent-cat { cursor: pointer; }
.consent-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.consent-cat-head strong { font-weight: 600; }
.consent-cat-head em { font-style: normal; font-size: .82rem; color: var(--muted); }
.consent-cat p { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.consent-cat input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex: none; }

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

.center { text-align: center; }
.muted { color: var(--muted); }

/* Text wordmark for the Terroir Nechory landing page, which has no logo artwork yet. */
.brand-text {
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

/* A one-card grid, centred: the Terroir landing page lists a single place for now. */
.cards.single { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }