/*
Theme Name:  Treebones Resort
Theme URI:   https://treebonesresort.com
Author:      JKCA Studio
Author URI:  https://jkca.co
Description: Bespoke WordPress theme for Treebones Resort, Big Sur, California. Family-owned off-grid glamping resort established 2004. Standalone custom theme built on Gutenberg + ACF Pro. Elementor Pro compatible but not required. Features: full-bleed hero slideshow with ACF-powered slide management, two-row responsive header with mobile drawer, WebRezPro booking integration, Exploretock dining reservation links, accommodation page template with hero + breadcrumb, complete design token system (Cormorant Garamond + Jost typography, coastal color palette). No parent theme required.
Version:     4.5.3
Requires at least: WordPress 6.4
Tested up to: WordPress 6.7
Requires PHP: 8.1
License:     Proprietary — All Rights Reserved
License URI: https://treebonesresort.com
Text Domain: treebones
Tags:        custom-theme, gutenberg, acf-pro, full-width-template, responsive-layout, hospitality, resort, glamping, booking-integration
*/

/* ============================================================
   DESIGN TOKEN SYSTEM
   All brand values live here. Reference everywhere via var()
   ============================================================ */
:root {

  /* ── Neutrals: dark to light ── */
  --tb-nightfall:  #2A2927;
  --tb-shadow:     #32302E;
  --tb-floor:      #3C3A37;
  --tb-bark:       #464139;
  --tb-earth:      #524A3C;
  --tb-deadwood:   #5C5440;
  --tb-driftwood:  #7A7060;
  --tb-trail:      #8A7A58;
  --tb-ash:        #9C9080;  /* subdued text — footer tagline, captions          */
  --tb-canvas:     #A8956E;
  --tb-sandstone:  #B5AA96;  /* muted metadata text — between canvas and dryglass */
  --tb-dryglass:   #C4A87A;
  --tb-latesun:    #D4BC90;
  --tb-parchment:  #F5EED8;
  --tb-cream:      #FFFCF2;  /* brightest warm white — card backgrounds           */

  /* ── Accent: amber/gold ── */
  --tb-ember:      #A06820;
  --tb-tungsten:   #C48830;
  --tb-goldenhour: #D8A855;

  /* ── Accent: coastal teal (sampled from Big Sur ocean swatch) ── */
  --tb-seafoam:    #D8EDEE;  /* lightest ocean — section tints, hero overlays  */
  --tb-shallows:   #99D1CE;  /* mid-light teal — subtle accents                */
  --tb-pacific:    #62B1AE;  /* mid ocean — borders, hover states              */
  --tb-kelp:       #498482;  /* deeper teal — badges, active states            */
  --tb-tide:       #305857;  /* deep teal — CTA on light bg, strong accents    */
  --tb-deepwater:  #213B3A;  /* deep ocean — dark section teal tint            */

  /* ── Neutral greys (sampled from coastal fog/stone swatch) ── */
  --tb-mist:       #E1E1E1;  /* near-white section bg — very subtle            */
  --tb-fog:        #CDCCCA;  /* light section bg — warm grey                   */
  --tb-stone:      #B9B8B6;  /* alternate light bg — slightly deeper           */
  --tb-shale:      #A5A4A0;  /* mid grey — borders on light sections           */

  /* ── Accent: forest ── */
  --tb-canopy:     #2E3828;  /* deep forest — hero film, borders               */
  --tb-forest:     #4A6438;  /* mid forest green                               */
  --tb-sage:       #6E8858;  /* light sage                                     */

  /* ── Section backgrounds ── */
  --bg-dark:       var(--tb-shadow);
  --bg-mid:        var(--tb-bark);
  --bg-light:      var(--tb-parchment);
  --bg-fog:        var(--tb-fog);
  --bg-mist:       var(--tb-mist);
  --bg-teal:       var(--tb-deepwater);

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

  /* ── Type scale ── */
  --text-xs:       9px;
  --text-sm:       11px;
  --text-base:     14px;
  --text-md:       16px;
  --text-lg:       20px;
  --text-xl:       clamp(24px, 3vw, 32px);
  --text-2xl:      clamp(28px, 4vw, 48px);
  --text-3xl:      clamp(36px, 5.5vw, 64px);
  --text-hero:     clamp(40px, 6.5vw, 80px);

  /* ── Letter spacing ── */
  --ls-tight:      0.01em;
  --ls-base:       0.04em;
  --ls-wide:       0.12em;
  --ls-caps:       0.26em;  /* button labels, dense caps */
  --ls-eyebrow:    0.28em;  /* v3.3.0 — canonical eyebrow tracking */
  --ls-xwide:      0.38em;  /* hub eyebrow + hero eyebrow */

  /* ── Spacing ── */
  --pad-x:         clamp(18px, 6vw, 80px);
  --pad-section:   clamp(64px, 10vw, 110px);
  --max-w: 1480px;

  /* ── Header heights ── */
  --hdr-top:       72px;
  --hdr-nav:       44px;
  --hdr-full:      116px;
  --hdr-sticky:    64px;  /* v4.3.16 — bumped from 52px to fit the scrolled CTA at its new 38px height with proper breathing room */
  --hdr-mobile:    64px;

  /* ── v2.14.0 — Radius tokens ──
     Locked: --r-img and --r-card both 6px (unified hospitality
     softness — photos and cards share corner language). Modals
     a hair softer at 8px. Pills are pill-shaped at 999px.
     50% (circles) stays inline — semantically obvious. */
  --r-img:         6px;
  --r-card:        6px;
  --r-modal:       8px;
  --r-pill:        999px;

  /* ── v2.14.0 — Border hairline token ──
     Replaces mixed `.5px` and `0.5px` literals across the codebase.
     Sub-pixel hairline render varies by display density but reads
     consistently as the lightest possible separator. */
  --b-hair:        .5px;

  /* ── Transitions ── */
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:        180ms;   /* hover reveals, color shifts */
  --t-medium:      300ms;   /* state changes, modals, drawers */
  --t-slow:        600ms;   /* dramatic reveals */
  /* Backwards-compat alias (v2.0–v2.13 used --t-base). Deprecated;
     don't introduce new uses. */
  --t-base:        var(--t-medium);

  /* ── v2.14.0 — Z-index scale ──
     Semantic layering instead of magic numbers. Stack-internal
     ordering (z-index: 1, 2, 3 within a single component) stays
     numeric — these tokens are only for cross-component layers. */
  --z-base:        0;
  --z-content:     1;
  --z-overlay:     10;
  --z-sticky:      100;
  --z-dropdown:    200;
  --z-modal:       600;
  --z-toast:       9999;

  /* ── v2.14.0 — Warm stone neutral ──
     Used 16x across press-bar label, eyebrow text, etc.
     Promoted from a literal #857D77 to a named token. */
  --tb-stone-warm: #857D77;

  /* ── v2.15.0 — Breakpoint canon ──
     CSS custom properties don't work inside @media query parens
     in current browsers, so these are reference-only. The actual
     @media rules use the literal pixel values, but every existing
     query has been normalized to one of these five values:
       --bp-xs:  480px   (small phones — was 420/479/480/499/500)
       --bp-sm:  640px   (large phones — was 520/560/599/600/640)
       --bp-md:  768px   (tablets      — was 700/740/768/782/800)
       --bp-lg:  1024px  (laptops      — was 860/880/900/999/1023/1024/1100/1180)
       --bp-xl:  1280px  (desktops     — was 1279)
     If you write a new @media query, use one of these values. */
  --bp-xs:         480px;
  --bp-sm:         640px;
  --bp-md:         768px;
  --bp-lg:         1024px;
  --bp-xl:         1280px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--tb-earth);
  background: var(--tb-parchment);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   WORDPRESS BODY CLASSES
   Elementor overrides & WP admin bar offset
   ============================================================ */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 768px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Elementor full-width pages */
.elementor-page .site-main,
body.page-template-elementor-canvas .site-main {
  padding: 0;
  margin: 0;
}

/* Hide default WP page title when Elementor owns the page */
.elementor-page h1.page-title,
.elementor-page .entry-title {
  display: none;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.tb-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.tb-section {
  padding: var(--pad-section) var(--pad-x);
}

.tb-section--dark    { background: var(--bg-dark); }
.tb-section--mid     { background: var(--bg-mid); }
.tb-section--light   { background: var(--bg-light); }
.tb-section--fog     { background: var(--bg-fog); }
.tb-section--mist    { background: var(--bg-mist); }
.tb-section--teal    { background: var(--bg-teal); }
.tb-section--full    { padding-left: 0; padding-right: 0; }

.tb-eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--tb-canvas);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tb-eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 0.5px;
  background: var(--tb-canvas);
  flex-shrink: 0;
}

.tb-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  color: var(--tb-shadow);
}
.tb-h2--light { color: var(--tb-parchment); }
.tb-h2 em     { font-style: italic; color: var(--tb-latesun); }

.tb-rule {
  width: 32px;
  height: 0.5px;
  background: var(--tb-canvas);
  margin: 20px 0 24px;
}

.tb-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.025em;
  color: var(--tb-earth);
  max-width: 680px;
}
.tb-body--light { color: var(--tb-driftwood); }
.tb-body p + p  { margin-top: 1em; }

/* ── CTA Buttons ── */
.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  background: var(--tb-tungsten);
  color: var(--tb-nightfall);
  border: none;
  padding: 14px 32px;
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary:hover { background: var(--tb-goldenhour); }

.btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(245, 238, 216, 0.75);
  background: none;
  border: none;
  border-bottom:var(--b-hair) solid rgba(245, 238, 216, 0.32);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-ghost:hover { color: #fff; }

.btn-ghost--dark {
  color: var(--tb-tungsten);
  border-bottom-color: rgba(196, 136, 48, 0.38);
}
.btn-ghost--dark:hover { color: var(--tb-earth); }

.btn-outline {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border:var(--b-hair) solid rgba(245, 238, 216, 0.52);
  padding: 10px 22px;
  border-radius: var(--r-card);
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  text-decoration: none;
}
.btn-outline:hover {
  border-color: rgba(245, 238, 216, 0.9);
  background: rgba(245, 238, 216, 0.13);
}

/* ── Accessibility ── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--tb-tungsten);
  color: var(--tb-nightfall);
  padding: 8px 16px;
  font-size: 13px;
  z-index: var(--z-toast);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* ============================================================
   FONT WEIGHT FLOOR — v1.2.2
   Minimum readable weight for Jost body text.
   Cormorant Garamond display at 300 remains intentional.
   ============================================================ */
.font-body,
.tb-body, .tb-body--light,
.nav-link, .hdr-phone, .hdr-reserve,
.faq-q, .faq-a,
.tab-list li,
.type-card-body, .diff-card-body,
.related-card-snippet,
.review-author, .review-source,
.cta-banner-body,
.tb-rev-quote,
.drawer-link, .drawer-section-lbl,
.single-post-body .entry-content,
.post-card-excerpt,
p, li {
  -webkit-font-smoothing: antialiased;
}

/* Ensure Jost never renders below 400 in body contexts */
body,
.elementor-widget-text-editor,
.elementor-text-editor {
  font-weight: 400;
}