/*
 * POM IJsselstein — client theme
 * Palette: warm espresso brown + cream canvas + terracotta accent
 * Fonts: Cormorant Garamond (display) + DM Sans (body)
 * Studio moves from Intelligentsia study:
 *   1. Full-bleed hero, left-aligned headline, 0.12em letter-spacing
 *   2. Restrained 4-colour palette: cream, espresso, terracotta CTA, warm white surface
 *   3. Single bold accent section (terracotta band) for CTA
 *   4. All-caps eyebrows, confident sans + display serif pairing
 *   5. Generous vertical rhythm (section-pad fluid 64→96px built in)
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* ── Brand colours ── */
  --brand:         #8B5E3C;     /* warm espresso brown */
  --brand-rgb:     139, 94, 60;
  --brand-2:       #4A3020;     /* dark roast — nav solid, footer bg */
  --brand-2-rgb:   74, 48, 32;
  --accent:        #C47B4A;     /* terracotta — CTA, stars, badge */
  --accent-rgb:    196, 123, 74;

  /* ── Canvas / surface ── */
  --canvas:        #FBF8F3;     /* warm off-white */
  --surface:       #F3EDE3;     /* warm parchment */

  /* ── Text ── */
  --ink:           #2C1F12;     /* deep warm black */
  --muted:         #8A7060;     /* warm taupe */

  /* ── Rule / border ── */
  --rule:          rgba(44, 31, 18, 0.12);

  /* ── Overlay ── */
  --overlay:       rgba(44, 31, 18, 0.55);

  /* ── Typography ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;

  /* ── Radii — soft but not playful ── */
  --radius-m:      6px;
  --radius-l:      10px;
}

/* ─── Eyebrow / label style ─────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── Hero headline — oversized, confident left-aligned ─── */
.hero-full__heading {
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-style: italic;
}

.hero-full__sub {
  font-size: var(--step-1);
  font-weight: 300;
  max-width: 44ch;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}

/* ─── Section headings ──────────────────────────────────── */
.section-header__heading,
.hero-split__heading,
.story__heading,
.cta-band__heading {
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
}

/* ─── Feature items — terracotta numbering ──────────────── */
.feature-item__number {
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ─── Testimonial stars ─────────────────────────────────── */
.testimonial-card__stars {
  color: var(--accent);
}

/* ─── Nav brand name ─────────────────────────────────────── */
.site-nav__logo,
.mobile-menu__brand {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: inherit;
  text-decoration: none;
}

/* When nav scrolls + becomes solid, keep logo readable */
.site-nav.is-solid .site-nav__logo {
  color: var(--canvas);
}

/* ─── CTA band — terracotta background variant ───────────── */
.cta-band {
  background: var(--brand);
}

/* ─── Gallery dark bg ties to brand ─────────────────────── */
.gallery {
  background: var(--brand-2);
}

/* ─── Story section surface ──────────────────────────────── */
.story {
  background: var(--surface);
}

/* ─── Footer dense text ──────────────────────────────────── */
.site-footer {
  background: var(--brand-2);
}

/* ─── Subtitle / italic serif subheadings ───────────────── */
.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
  font-size: var(--step-1);
}

/* ─── Card badge ─────────────────────────────────────────── */
.card__badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── Menu card grid dark variant ───────────────────────── */
.card-grid.--dark {
  background: var(--brand-2);
}

/* ─── Openingstijden table in footer ─────────────────────── */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-m);
}
.hours-table td {
  padding: 3px 0;
}
.hours-table td:last-child {
  text-align: right;
}

/* ─── Contact form styling ───────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 560px;
  margin-inline: auto;
}
.contact-form input,
.contact-form textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-m);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: var(--space-m) var(--space-l);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* ─── Map / address info block ───────────────────────────── */
.info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--section-pad);
}
.info-block__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-3);
  color: var(--ink);
  margin-bottom: var(--space-l);
}
.info-block__body {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 40ch;
}
.info-block__body a {
  color: var(--brand);
  text-decoration-color: var(--accent);
}
@media (max-width: 720px) {
  .info-block {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}