/* Garden Color Context System — shipped with the theme.
   Bricks Theme Styles / Custom Code is for per-project overrides. */
   :root {
    --max-screen-width: 1650px !important;
    /* Button defaults = light-context behavior, for areas
       outside any bg-* context (header, plain body, etc.) */
    --gs-btn-bg: var(--button-dark-primary);
    --gs-btn-text: var(--text-button-primary);
    --gs-btn-hover-bg: black;
    --gs-btn-hover-text: white;
    --bg-light: var(--bg-light-primary);  /* legacy var aliases */
    --bg-white: var(--bg-light-primary);
  }
  main{
      overflow: hidden;
  }
  /* ==========================================================
     GARDEN COLOR CONTEXT SYSTEM
     ----------------------------------------------------------
     bg classes define a context: background + text vars in one.
     Vars inherit, so nesting light-inside-dark (or reverse)
     flips automatically. Palette hexes live in CoreFramework.
     Dev rules:
     1. Components never declare colors. Use var(--text-title),
        var(--text-body). For panels/pills inside components use
        var(--gs-surface), var(--gs-accent-title) for accent
        headings, and var(--gs-marker) for bullets/markers/icons.
        They adapt to the current context automatically.
     2. Dark bg from custom CSS (nth-child, hover)? Add
        .gs-dark-context to the element, or set the vars in the
        same rule as the background.
     3. Contract: bg-dark-* variables always hold dark colors,
        bg-light-* always light. Renaming intent = renaming class.
     4. Buttons consume context vars (--gs-btn-*) the same way
        text does, so they invert automatically: light context =
        orange (CoreFramework defaults), dark context = white.
        The light-context values point AT the CoreFramework
        variables, so hexes still live in CoreFramework only.
     5. The six ACF Background Color values, these six classes,
        and the six CoreFramework --bg-* variables are a 1:1:1
        contract. Adding or renaming one layer means updating
        all three:
          bg-light-primary    Light Primary (White)
          bg-light-secondary  Light Secondary (Gray)
          bg-light-tertiary   Light Tertiary (Dark Gray)
          bg-dark-primary     Dark Primary (Black)
          bg-dark-secondary   Dark Secondary (Orange)
          bg-dark-tertiary    Dark Tertiary (Dark Orange)
     6. .bg-light and .bg-white are LEGACY aliases only (older
        templates still carry them). Do not use them in new
        work; remove them once all template usages are migrated
        to bg-light-primary.
     7. Button light styles read --gs-btn-light-*, and column
        cards read --gs-card-*. Both default to the section
        tokens. Override them per project; do not add a seventh
        section color.
     8. gs-card-* is a light-context palette for column cards
        only, outside the six-token section contract.
     ========================================================== */
  /* ---- Contexts ---- */
  .bg-dark-primary,
  .bg-dark-secondary,
  .bg-dark-tertiary {
    --text-title: white;
    --text-body: white;
    --gs-surface: rgba(255, 255, 255, 0.12);
    --gs-accent-title: white;
    --gs-marker: white;
    --gs-btn-bg: white;
    --gs-btn-text: black;
    --gs-btn-hover-bg: #e2e2e2;
    --gs-btn-hover-text: black;
  }
  .bg-light-primary,
  .bg-light-secondary,
  .bg-light-tertiary,
  .bg-light,  /* legacy alias */
  .bg-white,  /* legacy alias */
  .gs-light-context {
    --text-title: var(--gs-title-on-light);
    --text-body: var(--gs-body-on-light);
    --gs-surface: rgba(0, 0, 0, 0.08);
    --gs-accent-title: var(--bg-dark-secondary);
    --gs-marker: var(--button-dark-primary);
    --gs-btn-bg: var(--button-dark-primary);
    --gs-btn-text: var(--text-button-primary);
    --gs-btn-hover-bg: #fb9ab0;
    --gs-btn-hover-text: black;
  }

  .gs-card-1, .gs-card-2, .gs-card-3, .gs-card-4 {
    --text-title: var(--gs-title-on-light);
    --text-body: var(--gs-body-on-light);
    --gs-surface: rgba(0, 0, 0, 0.08);
    --gs-accent-title: var(--bg-dark-secondary);
    --gs-marker: var(--button-dark-primary);
    --gs-btn-bg: var(--button-dark-primary);
    --gs-btn-text: var(--text-button-primary);
    --gs-btn-hover-bg: black;
    --gs-btn-hover-text: white;
  }
  /* After light-context so it wins on the same element as bg-light-*
     (image-implied dark context). Same tokens as the dark bg-* block. */
  .gs-dark-context {
    --text-title: white;
    --text-body: white;
    --gs-surface: rgba(255, 255, 255, 0.12);
    --gs-accent-title: white;
    --gs-marker: white;
    --gs-btn-bg: white;
    --gs-btn-text: black;
    --gs-btn-hover-bg: #e2e2e2;
    --gs-btn-hover-text: black;
  }
  /* ---- Backgrounds ---- */
  .bg-light-primary   { background-color: var(--bg-light-primary); }
  .bg-light-secondary { background-color: var(--bg-light-secondary); }
  .bg-light-tertiary  { background-color: var(--bg-light-tertiary); }
  .bg-dark-primary    { background-color: var(--bg-dark-primary); }
  .bg-dark-secondary  { background-color: var(--bg-dark-secondary); }
  .bg-dark-tertiary   { background-color: var(--bg-dark-tertiary); }
  .bg-light           { background-color: var(--bg-light-primary); } /* legacy alias */
  .bg-white           { background-color: var(--bg-light-primary); } /* legacy alias */
  .gs-card-1 { background-color: var(--gs-card-1); }
  .gs-card-2 { background-color: var(--gs-card-2); }
  .gs-card-3 { background-color: var(--gs-card-3); }
  .gs-card-4 { background-color: var(--gs-card-4); }
  /* ---- Text consumes context ---- */
  p, ul li, blockquote, figcaption {
    color: var(--text-body) !important;
  }
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-title) !important;
  }
  .content-72__content a:not(.brxe-button) {
    color: var(--text-body) !important;
  }
  /* ---- Buttons consume context ---- */
  .btn,
  a.btn.brxe-button {
    background-color: var(--gs-btn-bg) !important;
    color: var(--gs-btn-text) !important;
  }
  .btn:hover,
  a.btn.brxe-button:hover {
    background-color: var(--gs-btn-hover-bg) !important;
    color: var(--gs-btn-hover-text) !important;
  }
  /* ---- Button style overrides ----
     ACF button_style writes one of these classes onto the button.
     They re-point the button tokens locally; the .btn rules above
     still paint from the tokens. Hover stays the context hover. */
  .btn.btn-light-primary   { --gs-btn-bg: var(--gs-btn-light-primary);   --gs-btn-text: var(--gs-title-on-light); }
  .btn.btn-light-secondary { --gs-btn-bg: var(--gs-btn-light-secondary); --gs-btn-text: var(--gs-title-on-light); }
  .btn.btn-light-tertiary  { --gs-btn-bg: var(--gs-btn-light-tertiary);  --gs-btn-text: var(--gs-title-on-light); }
  .btn.btn-shop            { --gs-btn-bg: white; --gs-btn-text: black; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

  .btn.btn-shop::after {
    content: "";
    display: inline-block;
    width: 1em; height: 1em;
    margin-top: 0;
    margin-left: 0em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 7V6a5 5 0 0 1 10 0v1h3l1 14H3L4 7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 7V6a5 5 0 0 1 10 0v1h3l1 14H3L4 7h3Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/></svg>") center / contain no-repeat;
  }
  /* ---- Utilities ---- */
  .remove-top-padding-section {
    padding-top: 0 !important;
  }
  a.btn.brxe-button,
  .btn.brxe-button {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                color 0.5s ease !important;
  }
  a.btn.brxe-button:hover,
  .btn.brxe-button:hover {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                color 0.5s ease !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  }
  body.bricks-is-frontend :focus-visible{
    border: 2px solid black !important;
  }
  .bricks-posts-nothing-found {
      text-align: center !important;
  }
  /* ==========================================================
     COLLAPSE PADDING BETWEEN CONSECUTIVE SAME-COLOR BLOCKS
     ----------------------------------------------------------
     A "block" = one .master-section wrapper (Content Blocks
     renders each nested section template inside one).
     Rule: when the LAST section of a block and the FIRST
     section of the next block share a color, the next block's
     first section loses its top padding. Anchoring on
     :last-child / :first-child means multi-section templates
     (e.g. the blog feed's header + grid, both same color) are
     never restyled internally — a template's internal spacing
     is the template's business.
     No bare `.bg-X + .bg-X` fallbacks: sections are never
     siblings at page level in this build, so a bare sibling
     pattern could ONLY match template-internal pairs, which is
     exactly the bug it caused. Hand-built edge cases use the
     .remove-top-padding-section utility manually.
     Image blocks never collapse.
     ========================================================== */
  .master-section:has(> .brxe-template > .bg-light-primary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-light-primary:not(.gs-has-bg-image):first-child,
  .master-section:has(> .brxe-template > .bg-light-secondary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-light-secondary:not(.gs-has-bg-image):first-child,
  .master-section:has(> .brxe-template > .bg-light-tertiary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-light-tertiary:not(.gs-has-bg-image):first-child,
  .master-section:has(> .brxe-template > .bg-dark-primary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-dark-primary:not(.gs-has-bg-image):first-child,
  .master-section:has(> .brxe-template > .bg-dark-secondary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-dark-secondary:not(.gs-has-bg-image):first-child,
  .master-section:has(> .brxe-template > .bg-dark-tertiary:not(.gs-has-bg-image):last-child) + .master-section > .brxe-template > .bg-dark-tertiary:not(.gs-has-bg-image):first-child {
    padding-top: 0 !important;
  }
  /* On mobile, reversed sections stack the same as default sections.
     !important beats Split _cssCustom ID rules (#brxe-ikmurd / #brxe-fhihnx)
     without editing those templates. Desktop reverse is unchanged (this
     query is max-width: 990px only). */
  @media (max-width: 990px) {
    [order-of-content="1"] > div:first-child { order: initial !important; }
    [order-of-content="1"] > div:last-child  { order: initial !important; }
  }
  /* ---- Image backgrounds imply dark context + scrim ---- */
  :root { --gs-image-scrim: rgba(0, 0, 0, 0.45); } /* per-project tunable */
  /* Layered so Bricks Custom Code, which prints earlier inside
     bricks-frontend-inline, can override this token unlayered. */
  @layer gs-tunables {
    :root {
      --gs-container-default: 1200px; /* per-project tunable, Default container width for grid blocks */
      /* Button light palette. Defaults follow the section tokens; a project
         overrides these in Core Framework or Custom Code without touching bg-*. */
      --gs-btn-light-primary:   var(--bg-light-primary);
      --gs-btn-light-secondary: var(--bg-light-secondary);
      --gs-btn-light-tertiary:  var(--bg-light-tertiary);

      /* Card palette. Four light-context colors for column cards. Defaults follow
         the light section tokens (4 falls back to 1) so nothing changes until set. */
      --gs-card-1: var(--bg-light-primary);
      --gs-card-2: var(--bg-light-secondary);
      --gs-card-3: var(--bg-light-tertiary);
      --gs-card-4: var(--bg-light-primary);
    }
  }
  .gs-has-bg-image { position: relative; }
  .gs-has-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gs-image-scrim);
    pointer-events: none;
  }
  .gs-has-bg-image > * { position: relative; z-index: 1; }


  /* ---- Gravity Forms buttons consume context too ----
   GF buttons are .gform_button, not .btn, and GF's Orbital theme
   hardcodes its own colors — override with the same context vars
   so they invert with the section like every other button. */
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  background-color: var(--gs-btn-bg) !important;
  color: var(--gs-btn-text) !important;
  border: none !important;
  border-radius: var(--radius-m) !important;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover {
  background-color: var(--gs-btn-hover-bg) !important;
  color: var(--gs-btn-hover-text) !important;
}
/* Point GF's own accent color (focus rings, radio/checkbox checks,
   spinners) at the brand instead of Orbital's default blue. */
.gform_wrapper.gform-theme {
  --gf-color-primary: var(--button-dark-primary) !important;
  --gf-color-primary-darker: var(--button-dark-primary) !important;
  --gf-color-primary-lighter: var(--button-dark-primary) !important;
  /* GF paints focus outline as rgba(var(--gf-color-primary-rgb), .65).
     No CF rgb token exists; this must stay in lockstep with
     --button-dark-primary (#B64927). */
  --gf-color-primary-rgb: 182, 73, 39 !important;
}
/* ---- GF labels/sublabels/descriptions consume context ----
   Orbital hardcodes label colors via CSS vars in an inline ID-scoped
   style block; !important on the custom properties is required to win. */
.gs-dark-context .gform_wrapper.gform-theme,
.bg-dark-primary .gform_wrapper.gform-theme,
.bg-dark-secondary .gform_wrapper.gform-theme,
.bg-dark-tertiary .gform_wrapper.gform-theme {
  --gf-ctrl-label-color-primary: var(--text-title) !important;
  --gf-ctrl-label-color-secondary: var(--text-body) !important;
  --gf-color-out-ctrl-dark: var(--text-body) !important;
  --gf-color-out-ctrl-dark-darker: var(--text-title) !important;
  --gf-color-out-ctrl-dark-lighter: var(--text-body) !important;
  --gf-field-pg-steps-number-color: var(--text-body) !important;
}


/* ---- Slider pagination consumes context ----
   Generic: dots use the context marker color. */
   .splide__pagination__page {
    background-color: var(--gs-marker) !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }
  .splide__pagination__page.is-active,
  .splide__pagination__page:hover,
  .splide__pagination__page:focus-visible {
    opacity: 1;
  }
  /* Slides always carry photos (always-image rule) and the dots sit on
     top of them — so inside a nested slider, pagination is dark-context
     even when the section's own background is light. */
  .brxe-slider-nested .splide__pagination {
    --gs-marker: white;
  }
  /* The global focus style is a 2px black border — invisible on a photo.
     Match the inversion for keyboard users. */
  .brxe-slider-nested .splide__pagination__page:focus-visible {
    border-color: white !important;
  }


  /* ---- Category pills / badges consume context ----
   CF card components paint these with fixed colors; repoint at the
   surface + text tokens so they invert with the section. */
.card-blog-4__tax {
  background-color: var(--gs-surface) !important;
}
.card-blog-4__tax .card-blog-4__tax-name {
  color: var(--text-body) !important;
}
.card-blog-4__tax:hover,
.card-blog-4__tax:focus-visible {
  /* background-color: var(--gs-surface-strong) !important; */
}
/* Reading time is a bare div — outside the p/li global text rule. */
.card-blog-4__read-time {
  color: var(--text-body) !important;
}
/* ---- Image links fill their figure ----
   Bricks wraps linked images as figure > a.tag > img. The inline anchor
   collapses to line-height while object-fit imgs size against the figure,
   leaving a sliver of clickable area. Make the anchor own the box. */
.brxe-image > a.tag {
  display: block;
  width: 100%;
  height: 100%;
}
/* ---- Explicit card link ----
   Toggle-on: .card-link covers the wrapper; .btn-visual is paint-only.
   Toggle-off: real footer buttons, no overlay. */
.card-content-52__wrapper { position: relative; }
.card-content-52__wrapper .card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-content-52__wrapper .card-link:focus-visible {
  outline: 2px solid black;
}
/* hover anywhere on card lights the fake button */
.card-content-52__wrapper:has(.card-link:hover) .btn-visual,
.card-content-52__wrapper:has(.card-link:focus-visible) .btn-visual {
  background-color: var(--gs-btn-hover-bg) !important;
  color: var(--gs-btn-hover-text) !important;
}

/* ---- List markers consume context ----
   The square bullet is the only EMPTY div in the feature element;
   :empty keeps this off the OL variant's content wrappers, whose
   first-child is the text container, not a marker. */
   .feature-37__features-list .feature-37__feature-element > div:first-child > div:empty {
    background-color: var(--gs-marker) !important;
  }