/* ===========================================================
   THEME OPTIONS
   ===========================================================
   This is the ONLY file you need to touch to change the site's
   colors or fonts. Every page loads this file, and every other
   stylesheet references these values by name (var(--accent) etc)
   instead of hardcoding colors — so changing a value here updates
   it everywhere on the site automatically.

   HOW TO CHANGE A COLOR:
   Replace the hex code after the colon. Keep the # and don't
   remove the semicolon. Example:
     --accent: #aa5432;   →   --accent: #2f5d3a;
   =========================================================== */

:root{

  /* ---- Accent color ----
     Used for: buttons, links, price tags, top bar, badges,
     the active tab underline, and section labels. */
  --accent:        #4f9160;   /* main accent — bright jungle green, more vibrant/lively */
  --accent-dark:   #33714a;   /* darker shade — hover states, headings */

  /* ---- Background tints ----
     Used for the light cream/stone section backgrounds that
     alternate with white sections down the page. */
  --bg-tint:       #f4eee2;   /* light section background */
  --bg-tint-2:     #efe6d4;   /* slightly deeper section background */

  /* ---- Near-black tones ----
     Used for the footer background and default body text color. */
  --near-black:    #0a0a0a;   /* footer background */
  --text-color:    #1a1a1a;   /* default text color */

  /* ---- Fonts ----
     Change the font NAME (before the comma) to switch typefaces.
     Anything after the comma is just a fallback if the main font
     fails to load, so leave those alone. */
  --font-heading:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Logo sizes ----
     Each logo placement is a SEPARATE value — changing one does
     NOT affect the others. Use any CSS size unit (px, em, %). */
  --logo-height-header:      64px;  /* main site header, top of every page */
  --logo-height-mega-menu:   56px;  /* the full-screen menu overlay when hamburger is clicked */
  --logo-height-footer-mark: 64px;  /* small icon-only mark in the footer */

  /* ---- Header spacing ----
     Vertical padding above/below the logo+nav row. Smaller number
     = shorter header bar = logo looks relatively bigger. */
  --header-padding-y: 0px;

  /* ---- Header logo padding ----
     Small top/bottom breathing room around the logo mark ONLY
     (does not affect the mega-menu logo, footer mark, or nav row). */
  --logo-padding-header-y: 3px;

  /* ---- Hero banner height ----
     Used by every full-width page banner: the homepage-style
     .hero (About, Contact, Lodges, Journal, lodge pages, etc.)
     and the .page-hero used on park/experience detail pages.
     Kept under 100vh so the banner never overflows the visible
     viewport once browser chrome is counted. */
  --hero-height: 80vh;

}

/* ---------------------------------------------------------
   Backwards-compatible aliases — style.css was written using
   these older variable names. Do not remove; they just point
   at the names above so you only ever have to edit one place.
   --------------------------------------------------------- */
:root{
  --terracotta:      var(--accent);
  --terracotta-dark: var(--accent-dark);
  --cream:           var(--bg-tint);
  --cream-2:         var(--bg-tint-2);
  --black:           var(--near-black);
  --ink:             var(--text-color);
  --serif:           var(--font-heading);
  --sans:            var(--font-body);
}