/* ==========================================================================
   Finca Santa Rosa — stylesheet for all pages.

   Palette is drawn from the farm itself: the jade-green forest canopy, the
   terracotta tiles of the drying patio, and the cream of adobe walls.

   Contents: tokens · reset · layout · header · hero · components ·
             photos · alternating rows · footer · responsive · print
   ========================================================================== */

/* --- Design tokens --------------------------------------------------------
   Named by role rather than by colour, so the dark theme below is a clean
   override rather than a second set of rules. */

:root {
  color-scheme: light dark;

  --bg:           #faf7f0;
  --bg-band:      #e9efe5;
  --surface:      #ffffff;
  --text:         #23281f;
  --muted:        #5d6b57;
  --line:         #d9d4c5;
  --accent:       #a84c2b;   /* terracotta */
  --accent-hover: #86391d;
  --header-bg:    #14301f;   /* deep canopy */
  --header-fg:    #f3f0e6;
  --heading:      #1f4a30;
  --shadow:       0 1px 2px rgb(20 48 31 / 0.06), 0 4px 12px rgb(20 48 31 / 0.05);

  --measure: 68ch;
  --wrap:    1120px;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #12150f;
    --bg-band:      #1a1f16;
    --surface:      #1c211a;
    --text:         #e7e4d8;
    --muted:        #a3ad9b;
    --line:         #333a2e;
    --accent:       #e08a62;
    --accent-hover: #f0a37f;
    --header-bg:    #0d1a11;
    --header-fg:    #e7e4d8;
    --heading:      #8fc4a2;
    --shadow:       0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
  }
}

/* --- Reset / base --------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link: hidden until a keyboard user tabs to it, then it slides into
   view so they can jump past the nav straight to the content.

   Hidden by moving it up out of the viewport rather than the old
   left:-9999px trick. Offscreen-left can add phantom horizontal scroll in
   some browsers, and a large negative offset is easy to get wrong. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-200%);
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* --- Layout helpers ------------------------------------------------------- */

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

.section { padding-block: 3.5rem; }
.section-tight { padding-block: 2.25rem; }

.band {
  background: var(--bg-band);
  border-block: 1px solid var(--line);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }

.prose h2 {
  margin-top: 2.2em;
  padding-top: 0.5em;
  border-top: 1px solid var(--line);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.8em; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 3px solid var(--accent);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
}

.brand {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--header-fg);
  text-decoration: none;
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.25rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-block;
  color: var(--header-fg);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: #fff; border-bottom-color: var(--accent); }

/* Current page is marked with aria-current in the HTML, so the visual state
   and the accessibility state cannot drift apart. */
.nav a[aria-current="page"] { border-bottom-color: var(--header-fg); }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--sans);
}

.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.button-quiet { background: transparent; color: var(--accent); }
.button-quiet:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Hero ----------------------------------------------------------------- */

/* The archive photographs are small (mostly 200–400px wide), so the hero is
   text-led with a photo beside it rather than a full-bleed image that would
   have to be upscaled into mush. */

.hero {
  background: var(--bg-band);
  border-bottom: 1px solid var(--line);
  padding-block: 3.5rem;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 { max-width: 18ch; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.hero .button { margin-right: 0.5rem; margin-top: 0.5rem; }

/* --- Photos --------------------------------------------------------------- */

/* Never scaled beyond natural size: each img carries width/height attributes,
   and max-width:100% only ever shrinks it on narrow screens. */

.photo {
  margin: 0;
  width: fit-content;
  max-width: 100%;
}

.photo img {
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.photo figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
  max-width: 34ch;
}

.photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

/* --- Cards ---------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--heading);
  border-radius: 3px;
  padding: 1.5rem;
}

.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }

/* --- Facts band ----------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.fact dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.fact dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--heading);
}

/* --- Interior page heading ------------------------------------------------ */

.page-head {
  background: var(--bg-band);
  border-bottom: 1px solid var(--line);
  padding-block: 2.75rem;
}

/* --- Alternating text / photo rows ---------------------------------------
   Used by the coffee-year and virtual-tour pages, echoing the zig-zag of the
   original 2002 site. */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}

.entry:first-of-type { border-top: 0; }

/* Every second row puts the photo on the left instead. */
.entry:nth-of-type(even) { grid-template-columns: auto minmax(0, 1fr); }
.entry:nth-of-type(even) .entry-body { order: 2; }
.entry:nth-of-type(even) .photo { order: 1; }

.entry-body { max-width: var(--measure); }
.entry-body > :last-child { margin-bottom: 0; }

.entry h2 { margin-bottom: 0.4em; }

.entry-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

/* --- Callout / notes ------------------------------------------------------ */

.callout {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 0 3px 3px 0;
  padding: 1.1rem 1.3rem;
  margin: 2rem 0;
}

.callout > :last-child { margin-bottom: 0; }

.list { padding-left: 1.2rem; }
.list li { margin-bottom: 0.4em; }

/* --- Contact page --------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

.contact-details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.5rem;
}

.contact-details h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}

.contact-details h2 + h3 { margin-top: 0; }
.address { font-style: normal; }

/* --- Form ----------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.optional { text-transform: none; letter-spacing: 0; font-style: italic; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--surface);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.field textarea { resize: vertical; }

.form-note { font-size: 0.88rem; color: var(--muted); margin-top: 0.9rem; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--header-bg);
  color: var(--header-fg);
  margin-top: 3rem;
  font-size: 0.88rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.75rem;
}

.footer-inner p { margin: 0; opacity: 0.85; }
.site-footer a { color: var(--header-fg); }

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 820px) {

  .header-inner { flex-direction: column; align-items: flex-start; }

  .hero-inner,
  .entry,
  .entry:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Text first on every row once stacked — the zig-zag only makes sense
     when the two columns sit side by side. */
  .entry .entry-body,
  .entry:nth-of-type(even) .entry-body { order: 1; }
  .entry .photo,
  .entry:nth-of-type(even) .photo { order: 2; }

  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }

  .hero { padding-block: 2.5rem; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .entry { break-inside: avoid; }
}