/*
GPRO CSS: Crystal Header
Description: Frosted-glass treatment for a Divi Theme Builder header. Tunable background colour, opacity (separately for rest and Divi sticky states), and blur. A modifier turns the header into a floating bar that the page (including a full-bleed hero) scrolls under.
Classes: .gpro-crystal-header, .gpro-crystal-header--fixed
Apply: Add .gpro-crystal-header as a CSS Class on the Theme Builder header layout (Divi → Theme Builder → edit header → Settings → Advanced). Add .gpro-crystal-header--fixed alongside to pin it to the top of the viewport.
Tokens: --gpro-crystal-bg-rgb = background colour as an RGB triplet, e.g. "0, 0, 0" for black (default: site --color-bg-rgb); --gpro-crystal-opacity = background opacity at rest, 0–1 (default 1 = solid); --gpro-crystal-opacity-sticky = background opacity when Divi sticky is active, 0–1 (default 0.75); --gpro-crystal-blur = backdrop blur radius, e.g. "12px" (default 12px); --gpro-crystal-z-index = stacking order when using the --fixed modifier (default 99)
Version: 2.3
Order: 20
Changelog: 2.3 — the "inner blocks stay transparent" rule targeted every
  .et_pb_module inside the header, which silently blocked background-color
  on content modules meant to carry their own (buttons, CTAs, blurbs, etc).
  Only Divi's structural wrappers (section/row/column) need forcing
  transparent; individual modules are left alone so their own Design-tab
  background settings apply normally.
Changelog: 2.2 — class placement is inconsistent across Divi versions/migrations:
  sometimes it lands on the .et-l--header wrapper (set on the Theme Builder
  header layout itself), sometimes Divi puts it directly on the .et_pb_section
  (set via the section's own Advanced > CSS Class). All selectors below now
  match both placements. Previously only the .et-l--header form was matched,
  so a section-level placement produced zero effect — Divi's own default
  .et_pb_section background-color (from its dynamic CSS) then won by default,
  since no competing rule was ever in play.
*/

/* Add .gpro-crystal-header to the header layout (Theme Builder header area)
   OR directly to the header's top-level Section if that's where Divi/your
   build puts the CSS Class — both placements are supported.
   Tune per site by overriding the tokens below in the child theme.
   Add .gpro-crystal-header--fixed alongside for a floating header.
   Defaults are embedded as var() fallbacks; child theme overrides win
   unconditionally because no rule pre-sets the variables. */

/* REST state: wrapper background + blur (blur is a no-op when opacity is 1) */
.gpro-crystal-header.et-l--header,
.et_pb_section.gpro-crystal-header {
    background-color: rgba(
        var(--gpro-crystal-bg-rgb, var(--color-bg-rgb, 255, 255, 255)),
        var(--gpro-crystal-opacity, 1)
    ) !important;
    -webkit-backdrop-filter: blur(var(--gpro-crystal-blur, 12px));
    backdrop-filter:         blur(var(--gpro-crystal-blur, 12px));
}

/* Inner blocks stay transparent so they don't override the wrapper background.
   Only structural wrappers (section/row/column) — individual modules keep
   their own Design-tab background settings (e.g. filled buttons, CTAs). */
.gpro-crystal-header.et-l--header .et_pb_section,
.gpro-crystal-header.et-l--header .et_pb_row,
.gpro-crystal-header.et-l--header .et_pb_column,
.gpro-crystal-header.et-l--header .et_pb_section:before,
.gpro-crystal-header.et-l--header .et_pb_section:after,
.gpro-crystal-header.et-l--header .et_pb_row:before,
.gpro-crystal-header.et-l--header .et_pb_row:after,
.et_pb_section.gpro-crystal-header .et_pb_row,
.et_pb_section.gpro-crystal-header .et_pb_column,
.et_pb_section.gpro-crystal-header .et_pb_row:before,
.et_pb_section.gpro-crystal-header .et_pb_row:after {
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* STICKY state (Divi sticky module) — swaps in the sticky opacity */
.gpro-crystal-header.et-l--header .et_pb_section.et_pb_sticky,
.gpro-crystal-header.et-l--header .et_pb_row.et_pb_sticky,
.gpro-crystal-header.et-l--header .et_pb_sticky,
.gpro-crystal-header.et-l--header.et_pb_sticky,
.et_pb_section.gpro-crystal-header.et_pb_sticky,
.et_pb_section.gpro-crystal-header .et_pb_sticky {
    background-color: rgba(
        var(--gpro-crystal-bg-rgb, var(--color-bg-rgb, 255, 255, 255)),
        var(--gpro-crystal-opacity-sticky, 0.75)
    ) !important;
}

/* MODIFIER: fixed positioning — header floats, page scrolls under.
   Use INSTEAD of Divi sticky (the two don't combine sensibly). */
.gpro-crystal-header--fixed.et-l--header,
.et_pb_section.gpro-crystal-header--fixed {
    position: fixed;
    top:      0;
    left:     0;
    right:    0;
    z-index:  var(--gpro-crystal-z-index, 99);
}