/*
 * GUIDERLY — GLOBAL STYLESHEET
 * ─────────────────────────────────────────────────────────────
 * Source of truth: wp-content/themes/bb-theme-child/css/guiderly-global.css
 * Enqueued from: functions.php via wp_enqueue_style (priority 9999)
 *
 * This file governs every page on the site:
 *   — Design tokens (colors, fonts, spacing, shadows)
 *   — Sitewide background
 *   — Typography baseline
 *   — Shared utility classes (.gu-*)
 *   — Shared component classes reused across pages
 *   — Gravity Forms baseline overrides
 *   — BB structural background reset
 *
 * Page-specific CSS (homepage, levels, free) stays in those
 * pages' own Custom CSS fields. This file only contains what
 * is the same everywhere.
 *
 * To update: edit this file, bump GUIDERLY_GLOBAL_CSS_VER in
 * functions.php, purge cache, deploy both files.
 * ─────────────────────────────────────────────────────────────
 * Version 2.0 — June 2026
 * © MarkoMedia LLC — Guiderly™
 */

/* @import must precede all rules per CSS spec */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* ============================================================
   1. FORCE ROOT FONT SIZE
   Prevents Beaver Builder from collapsing rem/clamp units
   ============================================================ */
html {
  font-size: 16px !important;
}


/* ============================================================
   2. GOOGLE FONTS — loaded via @import above
   ============================================================ */


/* ============================================================
   3. DESIGN TOKENS — on :root so every element can use them
   ============================================================ */
:root {
  /* Brand colors */
  --g-ink:           #1C2B3A;   /* primary text, headings */
  --g-terra:         #9C6B4E;   /* accent, eyebrows, links */
  --g-terra-dark:    #836C52;   /* buttons, borders, hover */
  --g-terra-darker:  #6B4A35;   /* footer bg, deep hover */
  --g-terra-border:  #C49A82;   /* light borders, dividers */
  --g-terra-light:   #F2EBE5;   /* badge backgrounds, tints */
  --g-olive:         #8FA03A;   /* featured/CTA buttons — lighter olive */
  --g-olive-mid:     #8FA03A;   /* checkmarks, accents */
  --g-olive-dark:    #6A7B29;   /* olive hover/selected state */
  --g-shadow-olive: 0 4px 14px rgba(143,160,58,0.30);
  --g-slate:         #6B7A87;   /* secondary text, meta */
  --g-muse-bg:       #1E3245;   /* Muse demo dark panel */
  --g-muse-surface:  #243C54;   /* Muse bubble surface */

  /* Backgrounds */
  --g-page-bg:       #FAF8F4;   /* GLOBAL page background */
  --g-white:         #ffffff;
  --g-parchment:     #EDE9E3;
  --g-parchment-dk:  #E0D9D0;

  /* Typography */
  --g-ff-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --g-ff-sans:   'Open Sans', system-ui, -apple-system, sans-serif;

  /* Border radii */
  --g-r-sm:  6px;
  --g-r-md:  10px;
  --g-r-lg:  16px;
  --g-r-xl:  20px;
  --g-r-2xl: 24px;

  /* Shadows */
  --g-shadow-sm:    0 2px 8px  rgba(28,43,58,0.07);
  --g-shadow-card:  0 4px 24px rgba(28,43,58,0.09);
  --g-shadow-lg:    0 8px 40px rgba(28,43,58,0.12);
  --g-shadow-brown: 0 2px 8px  rgba(131,108,82,0.25);

  /* Layout */
  --g-max-w:        1120px;
  --g-max-w-mid:    980px;
  --g-max-w-narrow: 680px;
}


/* ============================================================
   4. SITEWIDE BACKGROUND
   Sets #FAF8F4 (--g-page-bg) on every surface BB renders
   ============================================================ */
body,
.fl-page,
.fl-page-content,
.fl-content,
.fl-content-full,
.fl-row,
.fl-row-content-wrap,
.fl-col,
.fl-col-content,
.fl-module-content {
  background-color: var(--g-page-bg) !important;
}


/* ============================================================
   5. TYPOGRAPHY BASELINE
   Sets Guiderly fonts on body-level elements globally.
   Page-scoped wrappers (.gh-page, .gl-page) can override.
   ============================================================ */
body {
  font-family: var(--g-ff-sans) !important;
  color: var(--g-ink) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.fl-heading {
  font-family: var(--g-ff-serif) !important;
  font-weight: 400 !important;
  color: var(--g-ink) !important;
  line-height: 1.2 !important;
}

p {
  font-family: var(--g-ff-sans) !important;
  color: var(--g-ink) !important;
  line-height: 1.72 !important;
}

/* Daily Muse page: let BB set greeting and quote styles freely.
   These two nodes must inherit rather than be forced by the global p rule. */
.fl-node-24w8gjqe307f p,
.fl-node-zn2siqd5lo9v p {
  font-family: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}

a {
  color: var(--g-terra-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--g-terra-darker);
}


/* ============================================================
   6. SHARED UTILITY CLASSES  (.gu-*)
   Use these in any module HTML across any page
   ============================================================ */

/* Containers */
.gu-container {
  max-width: var(--g-max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gu-container--mid {
  max-width: var(--g-max-w-mid);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gu-container--narrow {
  max-width: var(--g-max-w-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Eyebrow label */
.gu-eyebrow {
  font-family: var(--g-ff-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--g-terra) !important;
  margin: 0 0 0.75rem !important;
  display: block !important;
}

.gu-eyebrow--center { text-align: center !important; }
.gu-eyebrow--light  { color: rgba(255,255,255,0.6) !important; }

/* Section heading sizes */
.gu-heading--xl {
  font-family: var(--g-ff-serif) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

.gu-heading--lg {
  font-family: var(--g-ff-serif) !important;
  font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
}

.gu-heading--md {
  font-family: var(--g-ff-serif) !important;
  font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* Text helpers */
.gu-text--slate  { color: var(--g-slate)  !important; }
.gu-text--terra  { color: var(--g-terra)  !important; }
.gu-text--center { text-align: center !important; }
.gu-italic-serif {
  font-family: var(--g-ff-serif) !important;
  font-style: italic !important;
}

/* Divider */
.gu-divider {
  border: none !important;
  border-top: 1px solid var(--g-parchment-dk) !important;
  margin: 2rem 0 !important;
}


/* ============================================================
   7. SHARED BUTTONS  (.gu-btn)
   ============================================================ */
.gu-btn {
  display: inline-block !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--g-r-sm) !important;
  padding: 0.75rem 1.6rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  border: none !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  line-height: 1.3 !important;
}

.gu-btn--full {
  width: 100% !important;
  display: block !important;
}

/* Olive — primary CTA */
.gu-btn--olive {
  background-color: var(--g-olive) !important;
  color: #fff !important;
  box-shadow: var(--g-shadow-olive) !important;
}
.gu-btn--olive:hover {
  background-color: var(--g-olive-dark) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Brown — secondary CTA */
.gu-btn--brown {
  background-color: var(--g-terra-dark) !important;
  color: #fff !important;
  box-shadow: var(--g-shadow-brown) !important;
}
.gu-btn--brown:hover {
  background-color: var(--g-terra-darker) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Outline — tertiary / ghost */
.gu-btn--outline {
  background-color: transparent !important;
  color: var(--g-ink) !important;
  border: 1.5px solid var(--g-parchment-dk) !important;
}
.gu-btn--outline:hover {
  border-color: var(--g-terra-border) !important;
  color: var(--g-terra-dark) !important;
  background-color: transparent !important;
}


/* ============================================================
   8. SHARED CARD
   ============================================================ */
.gu-card {
  background: var(--g-white);
  border: 1px solid var(--g-parchment-dk);
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-shadow-card);
  padding: 1.75rem;
}

.gu-card--featured {
  border: 2px solid var(--g-olive);
}

.gu-card--terra {
  border: 2px solid var(--g-terra-dark);
}


/* ============================================================
   9. SHARED BADGE
   ============================================================ */
.gu-badge {
  display: inline-block !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

.gu-badge--olive {
  background: var(--g-olive) !important;
  color: #fff !important;
}

.gu-badge--terra {
  background: var(--g-terra-light) !important;
  color: var(--g-terra-darker) !important;
}

.gu-badge--green {
  background: #EEF4E8 !important;
  color: var(--g-olive-dark) !important;
}


/* ============================================================
   10. PAGE HEADER (logo + title row)
   Used on /levels/ and /free/
   Both .gl-header (existing modules) and .gu-page-header
   (future modules) are supported — identical styles.
   ============================================================ */
.gu-page-header,
.gl-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  padding: 2.25rem 1.5rem !important;
  background-color: var(--g-page-bg) !important;
}

.gu-page-header__logo,
.gl-header-logo {
  width: 100px !important;
  height: 100px !important;
  display: block !important;
  flex-shrink: 0 !important;
  border-radius: var(--g-r-lg) !important;
  margin: 0 !important;
}

.gu-page-header__title,
.gl-header-title {
  font-family: var(--g-ff-serif) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--g-ink) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: left !important;
}


/* ============================================================
   11. SHARED TESTIMONIAL QUOTE BLOCK
   ============================================================ */
.gu-quote {
  border-left: 4px solid var(--g-terra-border);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 0 0 0.75rem;
}

.gu-quote__text {
  font-family: var(--g-ff-serif) !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  color: var(--g-ink) !important;
  line-height: 1.7 !important;
  margin: 0 0 0.65rem !important;
}

.gu-quote__cite {
  display: block;
  font-family: var(--g-ff-sans) !important;
  font-size: 13px !important;
  color: var(--g-slate) !important;
  font-style: normal !important;
}


/* ============================================================
   12. GRAVITY FORMS GLOBAL OVERRIDES
   Styles all GF forms sitewide to match brand
   ============================================================ */
.gform_wrapper {
  margin: 0 !important;
}

.gform_wrapper .gform_body {
  padding: 0 !important;
}

.gform_wrapper ul.gform_fields {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gform_wrapper .gfield {
  margin-bottom: 16px !important;
  padding: 0 !important;
}

.gform_wrapper .gfield_label {
  font-family: var(--g-ff-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--g-ink) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em !important;
}

.gform_wrapper .gfield_required {
  color: var(--g-terra-dark) !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--g-terra-border) !important;
  border-radius: var(--g-r-sm) !important;
  background: #ffffff !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 15px !important;
  color: var(--g-ink) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  line-height: 1.5 !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--g-terra-dark) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(131,108,82,0.14) !important;
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  padding: 8px 0 0 !important;
  margin: 0 !important;
  border: none !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: var(--g-r-sm) !important;
  background: var(--g-terra-dark) !important;
  color: #fff !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  -webkit-appearance: none !important;
  transition: background 0.15s ease !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: var(--g-terra-darker) !important;
}

.gform_wrapper .validation_error {
  background: #faece7 !important;
  border: 1px solid #d85a30 !important;
  border-radius: var(--g-r-sm) !important;
  color: #712b13 !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
  border-color: #d85a30 !important;
}

.gform_wrapper .gfield_description.validation_message {
  color: #993c1d !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 12px !important;
}

.gform_confirmation_message {
  background: var(--g-page-bg) !important;
  border: 1px solid var(--g-terra-dark) !important;
  border-radius: var(--g-r-md) !important;
  padding: 20px 24px !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 15px !important;
  color: var(--g-ink) !important;
  text-align: center !important;
  line-height: 1.65 !important;
}


/* ============================================================
   13. DAILY MUSE — CALL MUSE BUTTON, ACTION ROW, TOUR LAUNCHER
   Matches home-page .gh-btn.gh-btn-primary exactly:
   padding 0.8rem 1.6rem · font 15px/700 · radius 6px
   bg #8FA03A · shadow 0 4px 14px rgba(143,160,58,0.35)
   ============================================================ */

/* Call Muse — enabled state */
#call-muse-13 {
  background: #8FA03A !important;
  color: #fff !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.6rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  box-shadow: 0 4px 14px rgba(143,160,58,0.35) !important;
  line-height: 1.3 !important;
}

#call-muse-13:not(:disabled):hover {
  background: #6B7A2A !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Call Muse — disabled state */
#call-muse-13:disabled,
#call-muse-13:disabled:hover {
  opacity: 0.42 !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Save button inside action row — same treatment as Call Muse, compact width */
#go-action-row #gform_submit_button_5 {
  background: #8FA03A !important;
  color: #fff !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.6rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  box-shadow: 0 4px 14px rgba(143,160,58,0.35) !important;
  line-height: 1.3 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

#go-action-row #gform_submit_button_5:hover {
  background: #6B7A2A !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Action row — Save LEFT, Call Muse RIGHT, 20px gap, buttons compact at natural width */
#go-action-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

#go-action-row #call-muse-13 {
  flex: 0 0 auto;
  width: auto !important;
}

/* "Show me around" — relocated to bottom of panel by JS (.go-relocated added on move)
   Compact, left-aligned, discreet olive-outline style */
#go-show-me-around.go-relocated {
  position: static !important;
  display: block !important;
  width: fit-content !important;
  clear: both !important;
  margin-top: 30px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: center !important;
  z-index: auto !important;
  bottom: auto !important;
  right: auto !important;
  background: transparent !important;
  border: 1.5px solid rgba(143,160,58,0.45) !important;
  border-radius: 6px !important;
  font-family: var(--g-ff-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--g-olive) !important;
  padding: 0.8rem 1.6rem !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}

#go-show-me-around.go-relocated:hover {
  border-color: var(--g-olive) !important;
  background: rgba(143,160,58,0.06) !important;
  color: var(--g-olive-dark) !important;
}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .gu-page-header,
  .gl-header {
    gap: 1rem !important;
  }

  .gu-page-header__title,
  .gl-header-title {
    font-size: 26px !important;
  }
}

@media (max-width: 580px) {
  .gu-page-header,
  .gl-header {
    flex-direction: column !important;
    text-align: center !important;
  }

  .gu-page-header__logo,
  .gl-header-logo {
    width: 80px !important;
    height: 80px !important;
  }

  .gu-page-header__title,
  .gl-header-title {
    text-align: center !important;
    font-size: 22px !important;
  }

  .gu-btn {
    font-size: 14px !important;
    padding: 0.7rem 1.25rem !important;
  }
}