/* Olana Coffee — site styles.
   Mobile-first; breakpoints at 40em (~640px) and 64em (~1024px). */

:root {
  /* BRAND PALETTE — derived from reference-images/olana-mountains.png + logo.png.
     The site is themeable from this single block (R4.1, R4.2);
     if brand colors are refined later, edit only these values. */

  /* Neutrals / ground */
  --color-bg: #eef0e6;            /* warm cream sky (image background) */
  --color-surface: #f7f8f1;       /* lightened cream for cards/surfaces */
  --color-text: #2f332c;          /* charcoal-green (logo ring / lettering) */
  --color-muted: #5e6656;         /* muted olive-gray for secondary text (AA on bg) */
  --color-border: #d4d8c6;        /* soft sage divider/border */

  /* Mountain greens (distant → foreground) */
  --color-sage-100: #c3cbb4;      /* pale distant sage */
  --color-sage-200: #9aad8a;      /* mid sage */
  --color-sage-300: #6f8463;      /* olive */
  --color-sage-400: #4a5a42;      /* deep forest foreground */

  /* Semantic roles */
  --color-primary: #4a5a42;       /* deep forest green — primary brand/CTA */
  --color-primary-hover: #3b4a35; /* darker forest for hover/active */
  --color-accent: #6f8463;        /* olive — decorative accents only (fails AA as text) */
  --color-link: #4a5a42;          /* link text (AA on bg and surface) */
  --color-primary-contrast: #f7f8f1; /* cream text on green */

  --font-heading: Georgia, "Times New Roman", serif;   /* matches logo's serif wordmark */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: .25rem; --space-2: .5rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;
  --radius: 10px;
  --maxw: 72rem;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.3rem; }

p,
ul,
ol {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--color-sage-300);
  outline-offset: 2px;
}

::selection {
  background: var(--color-sage-100);
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: var(--space-5);
}

.section--surface {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40em) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-6); }
  .grid--2,
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Typography helpers ---------- */

/* Small tracked caps, like the "MATCHA • COFFEE" line on the brand menus. */
.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.lead {
  max-width: 40em;
  color: var(--color-muted);
  font-size: 1.15rem;
}

/* Heading flanked by thin rules, echoing the brand menu layout. */
.ruled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.ruled::before,
.ruled::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border);
}

.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }

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

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

.btn {
  display: inline-block;
  padding: .8em 1.6em;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font: inherit;
  font-size: 1rem;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.text-center .btn-row { justify-content: center; }

/* ---------- Header & navigation ---------- */

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

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.site-logo img {
  width: 3.5rem;
  height: 3.5rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding-block: var(--space-2);
  color: var(--color-text);
  font-size: .9rem;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .5em;
}

/* Toggle only exists once main.js marks <html class="js">; without JS the nav
   simply wraps below the logo and stays fully usable (R3.5). */
.nav-toggle {
  display: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 39.99em) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { flex-basis: 100%; }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav ul { flex-direction: column; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) 0;
  text-align: center;
}

.hero .lead { margin-inline: auto; }
.hero .btn-row { justify-content: center; }

/* Mountain artwork sits along the bottom edge of the hero, full-bleed. Height is
   capped so wide screens crop to the ridgelines instead of a screen-tall image. */
.hero__art {
  width: 100%;
  height: clamp(9rem, 28vw, 22rem);
  margin-top: var(--space-5);
  object-fit: cover;
  object-position: top;
  /* Fade the art's sky into the page so there's no hard seam at the top edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}

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

.card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.section--surface .card {
  background: var(--color-bg);
}

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

.card__meta {
  color: var(--color-muted);
  font-size: .95rem;
}

/* ---------- Service areas ---------- */

.service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.text-center .service-areas { justify-content: center; }

.service-areas li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .95rem;
}

/* ---------- Call-to-action band ---------- */

.cta-band {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  text-align: center;
}

.cta-band a:not(.btn) { color: inherit; }
.cta-band .lead { color: inherit; opacity: .9; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

.cta-band .btn {
  background: var(--color-primary-contrast);
  border-color: var(--color-primary-contrast);
  color: var(--color-primary);
}

.cta-band .btn:hover {
  background: transparent;
  color: var(--color-primary-contrast);
}

/* ---------- Prose (privacy, about) ---------- */

.prose {
  max-width: 42em;
}

.prose h2 {
  margin-top: var(--space-5);
  font-size: 1.5rem;
}

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

.site-footer {
  padding-block: var(--space-5);
  background: var(--color-text); /* darker than the green CTA band it often follows */
  color: var(--color-primary-contrast);
  font-size: .95rem;
}

.site-footer a {
  color: inherit;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-4);
}

.site-footer__small {
  opacity: .85;
  font-size: .85rem;
}

@media (min-width: 40em) {
  .site-footer__inner { grid-template-columns: 2fr 1fr; }
}

/* ---------- Cookie / analytics notice (rendered by main.js) ---------- */

.cookie-notice {
  position: fixed;
  inset: auto var(--space-3) var(--space-3);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(47 51 44 / .15);
  font-size: .95rem;
}

.cookie-notice p {
  flex: 1 1 16rem;
  margin: 0;
}

/* ---------- Placeholder pages ---------- */

.coming-soon {
  padding-block: var(--space-6);
  text-align: center;
}

/* ---------- Motion ---------- */

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