/*
Theme Name:   Glamping on Monticello
Theme URI:    https://glampingonmonticello.com
Description:  Child theme of Hello Elementor. Carries the Glamping on Monticello design tokens — palette, typefaces and type scale — so that Elementor widgets, custom CSS and the embedded booking widget all read from one source.
Author:       Glamping on Monticello
Template:     hello-elementor
Version:      1.0.0
Text Domain:  glamping-on-monticello
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────
   The four Elementor *system* colors and fonts have stable variable names, so
   the tokens below read from them and fall back to the design values. That
   makes Elementor's Site Settings the live source of truth: change the Accent
   color there and every button, link and the booking widget follow.

   Custom global colors you add in Elementor get generated IDs like
   --e-global-color-a1b2c3d, which differ per install, so those tokens are
   declared outright here instead.

   Palette is taken from the property photography:
     ink      night sky / the firefly bathroom wall
     slate    the Big Dipper dome shell
     water    Lake Monticello at dawn
     clay     Piedmont red clay, visible in every drone shot
     canvas   the Little Dipper dome shell
     firefly  the glow in the firefly bathroom (accent only, never body text)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────
     Mapped to Elementor's system slots. Set these four in
     Site Settings → Global Colors to the same values. */
  --gm-ink:        var(--e-global-color-primary,   #0C141C); /* Primary   */
  --gm-slate:      var(--e-global-color-secondary, #3E5259); /* Secondary */
  --gm-body:       var(--e-global-color-text,      #33424A); /* Text      */
  --gm-clay:       var(--e-global-color-accent,    #B4643C); /* Accent    */

  /* Custom slots — no stable Elementor variable, so declared here. */
  --gm-ink-2:      #14202B;
  --gm-ink-3:      #1D2C38;
  --gm-water:      #8AA5B1;
  --gm-clay-lit:   #CE7A4F;
  --gm-canvas:     #E9DECB;
  --gm-canvas-2:   #F3EBDD;
  --gm-firefly:    #D6DE55;

  --gm-muted-on-dark:  #93A3AC;
  --gm-muted-on-light: #5C6A70;
  --gm-rule-on-dark:   rgba(233, 222, 203, 0.16);
  --gm-rule-on-light:  rgba(12, 20, 28, 0.16);

  /* ── Type ───────────────────────────────────────────────────────────────
     Loaded by functions.php. Set the matching families in
     Site Settings → Global Fonts. */
  --gm-font-display: var(--e-global-typography-primary-font-family, "Bricolage Grotesque"), "Helvetica Neue", Arial, sans-serif;
  --gm-font-body:    var(--e-global-typography-text-font-family, "Newsreader"), Georgia, "Times New Roman", serif;
  --gm-font-mono:    var(--e-global-typography-accent-font-family, "Space Mono"), ui-monospace, Menlo, monospace;

  /* Fluid scale, matching the HTML mockup exactly. */
  --gm-text-display: clamp(2.25rem, 6.6vw, 6rem);
  --gm-text-h2:      clamp(2rem, 4.2vw, 3.6rem);
  --gm-text-h3:      clamp(1.4rem, 2.3vw, 2.05rem);
  --gm-text-h4:      clamp(1.1rem, 1.5vw, 1.3rem);
  --gm-text-lede:    clamp(1.15rem, 1.65vw, 1.45rem);
  --gm-text-body:    1.0625rem;
  --gm-text-label:   0.6875rem;

  --gm-tracking-display: -0.042em;
  --gm-tracking-h2:      -0.035em;
  --gm-tracking-h3:      -0.028em;
  --gm-tracking-label:    0.2em;

  /* ── Layout ─────────────────────────────────────────────────────────────
     Set Content Width to 1240 in Site Settings → Layout to match. */
  --gm-maxw:   1240px;
  --gm-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --gm-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   Elementor's Global Fonts will drive most of this once configured. These rules
   make an unconfigured install already look right, and give the fluid sizes and
   tight tracking that Elementor's UI cannot express on its own.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--gm-font-body);
  font-size: var(--gm-text-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--gm-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gm-font-display);
  font-weight: 700;
  line-height: 1.02;
  color: var(--gm-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--gm-text-display); font-weight: 800; letter-spacing: var(--gm-tracking-display); }
h2 { font-size: var(--gm-text-h2); letter-spacing: var(--gm-tracking-h2); }
h3 { font-size: var(--gm-text-h3); letter-spacing: var(--gm-tracking-h3); }
h4 { font-size: var(--gm-text-h4); font-weight: 600; letter-spacing: -0.02em; }

a { color: var(--gm-clay); }
a:hover { color: var(--gm-clay-lit); }

::selection { background: var(--gm-firefly); color: var(--gm-ink); }

:focus-visible {
  outline: 2px solid var(--gm-firefly);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HELPERS
   Add these to a section's Advanced → CSS Classes in Elementor. They are the
   only class names anyone editing the site needs to know.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .gm-dark — a night-sky section. Also flips the booking widget; see
   assets/booking-widget.css */
.gm-dark {
  background-color: var(--gm-ink);
  color: var(--gm-canvas);
}
.gm-dark h1, .gm-dark h2, .gm-dark h3,
.gm-dark h4, .gm-dark h5, .gm-dark h6 { color: var(--gm-canvas); }
.gm-dark a { color: var(--gm-firefly); }

/* .gm-dark-raised — the slightly lifted dark panel used for "Also ours" */
.gm-dark-raised { background-color: var(--gm-ink-2); color: var(--gm-canvas); }
.gm-dark-raised h1, .gm-dark-raised h2, .gm-dark-raised h3,
.gm-dark-raised h4, .gm-dark-raised h5, .gm-dark-raised h6 { color: var(--gm-canvas); }

/* .gm-canvas — the warm cream section */
.gm-canvas { background-color: var(--gm-canvas); color: var(--gm-ink); }
/* .gm-canvas-2 — the second, paler cream, for alternating bands */
.gm-canvas-2 { background-color: var(--gm-canvas-2); color: var(--gm-ink); }

/* .gm-label — the small mono eyebrow above a heading.
   Apply to a Heading widget set to a small tag, or to a Text Editor. */
.gm-label,
.gm-label p {
  font-family: var(--gm-font-mono);
  font-size: var(--gm-text-label);
  font-weight: 400;
  letter-spacing: var(--gm-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}
.gm-label--clay    { color: var(--gm-clay-lit); }
.gm-label--water   { color: var(--gm-water); }
.gm-label--slate   { color: var(--gm-slate); }
.gm-label--firefly { color: var(--gm-firefly); }

/* .gm-lede — the larger intro paragraph */
.gm-lede,
.gm-lede p {
  font-size: var(--gm-text-lede);
  line-height: 1.55;
  font-weight: 300;
}

/* .gm-measure — caps a text column at a comfortable reading width */
.gm-measure { max-width: 34em; }

/* .gm-callout — the clay-ruled aside */
.gm-callout {
  border-left: 2px solid var(--gm-clay);
  padding: 0.35rem 0 0.35rem clamp(1.1rem, 2.5vw, 1.75rem);
  font-size: var(--gm-text-lede);
  line-height: 1.55;
}

/* .gm-pill — pill buttons, matching the mockup.
   Add to an Elementor Button widget. */
.gm-pill .elementor-button,
.elementor-button.gm-pill {
  border-radius: 999px;
  font-family: var(--gm-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  transition: transform 0.22s var(--gm-ease), background 0.22s var(--gm-ease);
}
.gm-pill .elementor-button:hover,
.elementor-button.gm-pill:hover { transform: translateY(-2px); }

/* Solid clay — the primary action. */
.gm-pill .elementor-button,
.elementor-button.gm-pill {
  background-color: var(--gm-clay);
  color: #FFF6EF;
  border: 1px solid var(--gm-clay);
}
.gm-pill .elementor-button:hover,
.elementor-button.gm-pill:hover {
  background-color: var(--gm-clay-lit);
  border-color: var(--gm-clay-lit);
  color: #FFF6EF;
}

/* Outline — the secondary action. Picks up the section it sits in. */
.gm-pill--ghost .elementor-button,
.elementor-button.gm-pill--ghost {
  background-color: transparent;
  color: var(--gm-ink);
  border: 1px solid rgba(12, 20, 28, 0.28);
}
.gm-pill--ghost .elementor-button:hover,
.elementor-button.gm-pill--ghost:hover {
  background-color: rgba(12, 20, 28, 0.05);
  border-color: var(--gm-ink);
  color: var(--gm-ink);
}

.gm-dark .gm-pill--ghost .elementor-button,
.gm-dark .elementor-button.gm-pill--ghost,
.gm-hero .gm-pill--ghost .elementor-button,
.gm-hero .elementor-button.gm-pill--ghost,
.gm-dark-raised .gm-pill--ghost .elementor-button {
  color: var(--gm-canvas);
  border-color: rgba(233, 222, 203, 0.35);
}
.gm-dark .gm-pill--ghost .elementor-button:hover,
.gm-hero .gm-pill--ghost .elementor-button:hover,
.gm-dark-raised .gm-pill--ghost .elementor-button:hover {
  background-color: rgba(233, 222, 203, 0.07);
  border-color: var(--gm-canvas);
  color: var(--gm-canvas);
}

/* Dark solid — for use on the cream bands. */
.gm-pill--ink .elementor-button,
.elementor-button.gm-pill--ink {
  background-color: var(--gm-ink);
  color: var(--gm-canvas);
  border: 1px solid var(--gm-ink);
}
.gm-pill--ink .elementor-button:hover,
.elementor-button.gm-pill--ink:hover {
  background-color: var(--gm-ink-3);
  border-color: var(--gm-ink-3);
  color: var(--gm-canvas);
}

/* Hairline rule matching the mockup's dividers */
.gm-rule { height: 1px; border: 0; background: var(--gm-rule-on-light); }
.gm-dark .gm-rule, .gm-dark-raised .gm-rule { background: var(--gm-rule-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .gm-pill .elementor-button:hover,
  .elementor-button.gm-pill:hover { transform: none; }
}