/*
  Verve theme stylesheet — BASE (shared foundation).

  TEMPORARY SPLIT for concurrent editing on the server (no local git merge
  available here — see functions.php verve_assets() and CLAUDE.md). This file
  holds fonts, reset, :root tokens, buttons/nav, and the typography helpers —
  the stuff every block depends on, so it should change rarely.

  Sibling files: blocks-part-1.css (Blocks 1–9), blocks-part-2.css (Blocks
  10–13 + Contact form + Map panel), blocks-part-3.css (Blocks 17–20, L1–L7,
  footer, image hover zoom, all responsive/mobile overrides).

  style.css (the original single file) is kept alongside these as a reference
  copy but is NOT enqueued — see functions.php. Once the three of you are done
  working in parallel, these four files must be recombined back into a single
  style.css in original block order (base, part-1, part-2, part-3) and this
  split undone.
*/

/*
  Verve theme stylesheet.
  Seeded from verve-blocks.html (the design/component reference library) — see
  /mnt/d/projects/verve/verve-blocks.html and Verve-Dev-Handover.md.
  Grows as later blocks/pages are built; enqueued from functions.php.
*/

@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Headings — Libre Baskerville, shipped as variable fonts (upright + italic).
   The weight range lets the one file cover 400-700 without extra requests. */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700; font-style: italic; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
/* color: inherit matters — iOS Safari paints button text with the system accent
   (blue) unless a colour is set, while desktop browsers use buttontext. */
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ─── Text reveal masks ──────────────────────────────────── */
.word-mask  { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-inner { display: inline-block; }

:root {
  --primary:        #402020;
  --primary-300:    #8c7979;
  --primary-400:    #664d4d;
  --bg-stone:       #f1efeb;
  --bg-offwhite:    #faf7f4;
  --bg-page:        #f0ede9;
  --bg-section:     #eae6e0;
  --black:          #000;
  --white:          #fff;
  --grey-dark:      #434343;
  --grey-mid:       #5d5d5d;
  --border-light:   #d9d2d2;
  --secondary-200:  #cfc2b1;
  --tan:            #c8b9a6;
  --pad-x:          60px;
  --pad-y:          120px;
  --font-heading:   'Libre Baskerville', Georgia, serif;
  --font-body:      'Google Sans', sans-serif;
  --radius-pill:    9999px;
  --radius-card:    24px;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  background: var(--bg-page);
  max-width: 1440px; margin: 0 auto; overflow-x: hidden;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; line-height: 20px;
  white-space: nowrap; cursor: pointer;
  transition: opacity .18s; text-decoration: none;
}
.btn:hover { opacity: .82; }
.btn svg { transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.btn:hover svg { transform: rotate(45deg); }
.btn-primary { background: var(--primary); border: 1px solid var(--primary); color: var(--white); }
.btn-outline  { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline-white { background: transparent; border: 1px solid rgba(255,255,255,.4); color: var(--white); }
.btn-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 1px solid var(--primary); flex-shrink: 0;
  transition: background .18s;
}
.btn-icon-sm:hover { background: rgba(64,32,32,.08); }
.btn-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.btn-white { background: var(--white); border: 1px solid transparent; color: var(--primary); }
.btn-tag      { background: var(--white);       border: none;                       color: var(--primary); }
    .btn-back { position: absolute; top: 64px; left: var(--pad-x); background: var(--white); color: var(--primary); }

    .btn-back:hover svg { transform: translateX(-3px); }

.nav-wrap { padding: 24px 24px 0; position: sticky; top: 0; z-index: 1100; }
.nav-inner { background: var(--white); height: 64px; border-radius: var(--radius-pill); padding: 10px 12px 10px 32px; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.nav-logo-link { flex-shrink: 0; display: flex; align-items: center; }
/* The logo ships as a 140px-wide SVG; capping it against the viewport keeps it
   from forcing the pill wider than the screen on very narrow devices. */
.nav-logo-link svg { width: 140px; max-width: 38vw; height: auto; }
.nav-center { display: flex; align-items: center; gap: 48px; list-style: none; min-width: 0; }
.nav-center a { font-weight: 500; font-size: 14px; letter-spacing: 0.16px; color: var(--black); transition: color .15s; }
.nav-center a:hover { color: var(--primary); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bars { position: relative; width: 24px; height: 18px; flex-shrink: 0; }
.nav-toggle-bars .bar {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: #402020; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bars .bar1 { top: 0; }
.nav-toggle-bars .bar2 { top: 8px; }
.nav-toggle-bars .bar3 { top: 16px; }
.nav-toggle.open .bar1 { top: 8px; transform: rotate(45deg); }
.nav-toggle.open .bar2 { opacity: 0; }
.nav-toggle.open .bar3 { top: 8px; transform: rotate(-45deg); }
.nav-inner { transition: border-radius .25s ease; position: relative; }
.menu-open .nav-inner{
  transition:none;
}
.nav-wrap.menu-open .nav-inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.nav-mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--white);
  border-radius: 0 0 24px 24px;
  box-shadow: none;
  z-index: 10;
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}
.nav-mobile-menu.open { grid-template-rows: 1fr; }
.nav-mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  min-height: 0;
  overflow: hidden;
  transition: padding .3s ease;
}
.nav-mobile-menu.open .nav-mobile-menu-inner { padding: 12px; }
.nav-mobile-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 500; font-size: 15px; color: var(--black);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-mobile-menu a:hover, .nav-mobile-menu a.active { background: var(--bg-section); color: var(--primary); }

.nav-mobile-menu a.nav-mobile-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--white);
  border-radius: var(--radius-pill);
  margin-top: 8px;
}
.nav-mobile-menu a.nav-mobile-cta:hover { background: var(--primary); color: var(--white); }
.nav-center a.nav-active { color: var(--primary); background-size: 100% 1px; }
/* ── Typography helpers ───────────────────────────────────── */
.display-2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 56px; line-height: 67px; letter-spacing: -1.12px;
  color: var(--primary);
}
.heading-1 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 48px; line-height: 58px; letter-spacing: -0.96px;
  color: var(--primary);
}
.heading-2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 48px; line-height: 58px; letter-spacing: -0.48px;
}
.heading-3 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 32px; line-height: 40px;
}
.heading-4 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: 31px;
}
.body-large { font-size: 20px; line-height: 26px; }
.body-base  { font-size: 16px; line-height: 24px; }
.label-med  { font-size: 14px; line-height: 20px; font-weight: 500; }
.label-sm   { font-size: 14px; line-height: 20px; }

/* ── Default page template (legal pages: Disclaimer, Privacy, …) ──
   Editor content arrives as bare h2/p, so the styling lives here rather than on
   the classes the copy was pasted in with (heading-16, paragraph-17, …), which
   differ from page to page. */
.section-wrap .body-base { max-width: 900px; }
.section-wrap .body-base h2,
.section-wrap .body-base h3,
.section-wrap .body-base h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--primary);
}
/* The pasted headings wrap their text in <strong>; on a serif set at 400 that
   would read as a different weight. */
.section-wrap .body-base h2 strong,
.section-wrap .body-base h3 strong,
.section-wrap .body-base h4 strong { font-weight: inherit; }
.section-wrap .body-base h2 { font-size: 28px; line-height: 35px; margin: 56px 0 16px; }
.section-wrap .body-base h3 { font-size: 22px; line-height: 29px; margin: 40px 0 12px; }
.section-wrap .body-base h4 { font-size: 18px; line-height: 24px; margin: 32px 0 10px; }
.section-wrap .body-base h2:first-child,
.section-wrap .body-base h3:first-child { margin-top: 0; }
.section-wrap .body-base p { font-size: 16px; line-height: 28px; color: var(--grey-dark); margin-bottom: 20px; }
.section-wrap .body-base p:last-child { margin-bottom: 0; }
.section-wrap .body-base ul,
.section-wrap .body-base ol { margin: 0 0 20px 20px; }
.section-wrap .body-base li { font-size: 16px; line-height: 28px; color: var(--grey-dark); margin-bottom: 8px; }
.section-wrap .body-base a { color: var(--primary); text-decoration: underline; }

/* ── Shared layout ────────────────────────────────────────── */
.section-wrap { padding: 120px 60px; }
.section-wrap-sm { padding: 120px 10px; }