/* ------------------------------------------------------------------
   Mark Hill Valuations — locked internal design constants.

   These are theme internals the client must NOT be able to change.
   They deliberately live here as plain CSS custom properties, NOT in
   theme.json settings, so they never appear as controls in
   Site Editor → Styles. Client-editable tokens (colour palette, font
   families, named font sizes, the coarse spacing scale) live in
   theme.json and resolve to --wp--preset--* variables.

   Loaded on the front end (wp_enqueue_scripts) and in the editor
   canvas (add_editor_style) — see functions.php.

   Naming: every locked token is prefixed --mhv-. Derived colours are
   built with color-mix() off the palette presets, so a global colour
   change in Styles flows through to them automatically.
------------------------------------------------------------------- */
:root {
  /* ---- Derived colours (track the palette via color-mix) ---- */
  --mhv-ink-hover: color-mix(
    in oklab,
    var(--wp--preset--color--ink) 88%,
    #fff
  ); /* btn-solid hover (was oklch 0.28 0.016 58) */
  --mhv-scrim: color-mix(
    in oklab,
    var(--wp--preset--color--base) 86%,
    transparent
  ); /* fixed nav glass background */
  --mhv-field: color-mix(
    in oklab,
    var(--wp--preset--color--base) 60%,
    transparent
  ); /* textarea / dropzone / notice fill */
  --mhv-gold-tint: color-mix(
    in oklab,
    var(--wp--preset--color--gold) 8%,
    transparent
  ); /* gold button hover wash */
  --mhv-gold-strong: color-mix(
    in oklab,
    var(--wp--preset--color--gold) 80%,
    var(--wp--preset--color--ink)
  ); /* deeper gold for small text — meets AA (4.5:1) on cream; tracks the gold preset */
  --mhv-dot-idle: color-mix(
    in oklab,
    var(--wp--preset--color--ink) 22%,
    transparent
  ); /* inactive carousel dot */

  /* ---- Font sizes ----
	   EVERY named font size is now CLIENT-EDITABLE: the real values live in
	   theme.json fontSizes and are exposed in Site Editor → Styles →
	   Typography → Font sizes (rem; responsive ones are fluid min↔max clamps
	   WP generates). The tokens below just re-expose the resulting
	   --wp--preset--font-size--* vars, so the rest of the theme keeps
	   referencing --mhv-fs-*. Retune in theme.json or the admin UI — NOT here. */

  /* Type scale — client-editable presets (theme.json), re-exposed as tokens */
  --mhv-fs-display: var(
    --wp--preset--font-size--display
  ); /* h1 / hero heading — client-editable preset (theme.json) */
  --mhv-fs-lead: var(
    --wp--preset--font-size--lead
  ); /* intro / lead paragraph — client-editable preset (theme.json) */

  --mhv-fs-heading: var(
    --wp--preset--font-size--heading
  ); /* h2 / section heading — client-editable preset (theme.json) */
  --mhv-fs-subheading: var(
    --wp--preset--font-size--subheading
  ); /* h3 / box title — client-editable preset (theme.json) */
  --mhv-fs-card: var(
    --wp--preset--font-size--card
  ); /* card / box body copy — client-editable preset (theme.json) */

  --mhv-fs-body: var(
    --wp--preset--font-size--body
  ); /* body copy — client-editable preset (theme.json) */

  /* Detail sizes — now ALSO client-editable presets (theme.json), same
     re-expose pattern. feature is fluid (min↔max); the rest are flat. */
  --mhv-fs-eyebrow: var(
    --wp--preset--font-size--eyebrow
  ); /* uppercase tracked eyebrow label */
  --mhv-fs-micro: var(
    --wp--preset--font-size--micro
  ); /* indices, button labels, journal/footer micro-labels */
  --mhv-fs-footer-note: var(
    --wp--preset--font-size--footer-note
  ); /* footer fine print — one step below micro */
  --mhv-fs-feature: var(
    --wp--preset--font-size--feature
  ); /* fee terms + pull-quotes */
  --mhv-fs-serif-md: var(--wp--preset--font-size--serif-md); /* fee detail */
  --mhv-fs-hero-year: var(
    --wp--preset--font-size--hero-year
  ); /* hero "30 Years" badge */
  --mhv-fs-quote-mark: var(
    --wp--preset--font-size--quote-mark
  ); /* decorative opening quote glyph */
  --mhv-fs-wordmark: var(
    --wp--preset--font-size--wordmark
  ); /* nav / footer wordmark */
  --mhv-fs-nav: var(--wp--preset--font-size--nav); /* nav-bar link */
  --mhv-fs-hero-label: var(
    --wp--preset--font-size--hero-label
  ); /* hero badge label */
  --mhv-fs-form-label: var(
    --wp--preset--font-size--form-label
  ); /* Forminator field labels */
  --mhv-fs-form-message: var(
    --wp--preset--font-size--form-message
  ); /* Forminator notice / confirmation banner */
  --mhv-fs-footer: var(
    --wp--preset--font-size--footer
  ); /* footer description + links */
  --mhv-fs-button: var(
    --wp--preset--font-size--button
  ); /* shared button labels (.btn + form submit) */
  --mhv-fs-index: var(
    --wp--preset--font-size--index
  ); /* section index numerals (process/principles/reasons/contact-cta) */
  --mhv-fs-lightbox-close: 2rem; /* lightbox close glyph — locked internal, not a client preset */
  --mhv-fs-lightbox-nav: 2.4rem; /* lightbox prev/next arrows — locked internal, not a client preset */

  /* ---- Line height — fine fixed scale (locked) ---- */
  --mhv-lh-display: 0.98; /* hero display heading */
  --mhv-lh-tight: 1.04; /* section / sub headings */
  --mhv-lh-snug: 1.45; /* serif feature text */
  --mhv-lh-body: 1.6; /* body copy (absorbs the prototype's stray 1.65) */
  --mhv-lh-relaxed: 1.7; /* long-form stacked copy */

  --mhv-track-wide: 0.18em; /* eyebrow tracking */
  --mhv-track: 0.14em; /* labels / micro-labels (absorbs .16/.1/.08em) */
  --mhv-track-tight: -0.018em; /* section headings */
  --mhv-track-display: -0.022em; /* hero display heading */

  /* ---- Spacing — fine fixed scale (locked) ---- */
  --mhv-space-3xs: 0.5rem;
  --mhv-space-2xs: 0.75rem;
  --mhv-space-xs: 1rem;
  --mhv-space-sm: 1.5rem;
  --mhv-space-md: 2rem;
  --mhv-space-lg: 2.5rem;
  --mhv-space-xl: 3rem;

  /* ---- Spacing — fluid rhythm ---- */
  --mhv-flow-sm: clamp(1.6rem, 3vw, 2.8rem); /* tighter column / card gap */
  --mhv-flow: var(
    --wp--preset--spacing--60,
    clamp(2.5rem, 6vw, 6rem)
  ); /* large column gap / split gap */
  --mhv-rhythm: var(
    --wp--preset--spacing--70,
    clamp(3rem, 5vw, 4.5rem)
  ); /* gap between groups within a section */

  /* ---- Section rhythm — top/bottom padding on every standard section
	        (the prototype's --sec; applied via @mixin section). Four named
	        steps, tight → the prototype's generous spacing. THIS IS THE SINGLE
	        GLOBAL CONTROL: point --mhv-section at a different step on the last
	        line and every section retunes at once. No build needed — refresh. */
  --mhv-section-compact: clamp(2.5rem, 5vw, 4rem);
  --mhv-section-regular: clamp(3.5rem, 7vw, 6rem);
  --mhv-section-roomy: clamp(4.5rem, 9vw, 8rem);
  --mhv-section-spacious: clamp(5.5rem, 11vw, 10.5rem); /* = prototype --sec */

  --mhv-section: var(
    --mhv-section-spacious
  ); /* ← change THIS to retune every section */
  --mhv-gutter: clamp(
    1.25rem,
    5vw,
    4.5rem
  ); /* horizontal page gutter (--pad); mirror in section wrappers */

  /* ---- Borders & radii ---- */
  --mhv-hairline: 1px; /* the signature hairline rule/border width */
  --mhv-radius: 1px; /* sharp-corner radius on buttons, inputs, tags */
  --mhv-radius-round: 50%; /* social icons, carousel dots */

  /* ---- Geometry ---- */
  --mhv-nav-h: 72px; /* fixed header height */
  --mhv-content: 1280px; /* max content width (mirrors theme.json layout.contentSize) */
  --mhv-measure: 48ch; /* readable line length (measure) for section prose — intros AND main body copy. Single knob for fees/process/reasons/contact/journal intros + about/image-text/contact-cta bodies. (Hero body, card/item bodies, and footer/contact-detail keep their own bespoke caps.) Relaxes to ~75ch below 900px — see the @media at the foot of this file — so stacked prose isn't a narrow column. */
  --mhv-ar-portrait: 4 / 5; /* tall figures, portraits */
  --mhv-ar-landscape: 3 / 2; /* wide figures, journal/bio strip */
  --mhv-ar-square: 1 / 1; /* hero figure on mobile */

  /* ---- Effects & motion ---- */
  --mhv-lightbox-scrim: oklch(
    0.17 0.012 60 / 0.95
  ); /* warm near-black backdrop behind the gallery lightbox */
  --mhv-blur: 10px; /* nav backdrop blur */
  --mhv-focus: var(
    --wp--preset--color--ink
  ); /* keyboard :focus-visible ring colour (tracks the ink palette) */
  --mhv-dur: 0.25s; /* default hover/transition */
  --mhv-dur-slow: 0.7s; /* image zoom on hover */
  --mhv-dur-reveal: 0.9s; /* scroll-reveal entrance */
  --mhv-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* shared easing */

  /* ---- Icons ----
	   Inline SVG glyphs used as CSS masks (filled with currentColor at the use
	   site). WhatsApp brand glyph (simple-icons), for the shared .btn-whatsapp
	   button style. */
  --mhv-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E");

  /* ---- Breakpoints ----
	   Reference only. CSS custom properties cannot be used inside @media
	   queries, so sections hard-code these two widths in their media
	   queries. Kept here as the single documented source of truth.
	     lap:    900px   (tablet / small laptop — nav collapses, splits stack)
	     phone:  640px   (mobile — grids collapse to one column) */
}

/* Below the lap breakpoint (≤900px) every section has stacked to one column, so
   the tight prose measure would strand text in a near-full-width container.
   Relax --mhv-measure to a large cap: effectively full-width at the small end of
   the range, still capped (~75ch) near 900px so lines never run out to a ~110ch
   slab. 900px is a literal mirror of the `lap` Sass breakpoint (custom properties
   cannot be used inside a @media condition, so the width is hard-coded here). */
@media (max-width: 900px) {
  :root {
    --mhv-measure: 75ch;
  }
}