/* ===========================================================================
   BRAVO VALLEY — Liquid Glass 1: CSS
   Fluent Snippets: CSS, site-wide header.
   Adapted from the Piixonova kit's 1-liquid-glass.css for Bricks.

   The glass itself is drawn by a canvas the script (3) puts INSIDE each glass
   element. While it draws, the element is a transparent hole with its
   labels in it: no background, border, blur or box-shadow of its own.
   Without WebGL2, or with Reduce Transparency, html.lg-flat is set and the
   same elements get a blurred surface with a sculpted, lit rim instead.

   In the Bricks builder the script does not run, so a glass element simply
   shows the background you gave it in Bricks. That is also what visitors see
   if snippets 2–3 are ever switched off.
   =========================================================================== */

/* ── the pane lives inside its element, 26 px (SPILL) outside it ───────── */
.gc-has-glass { isolation: isolate; }
.gc-has-glass > canvas.gc-glass {
  position: absolute;
  left: -26px; top: -26px;
  z-index: 0;
  pointer-events: none;
}
html.lg-flat .gc-glass { display: none; }

/* while the shader draws it, the element is a hole with labels in it */
.gc-has-glass {
  background: none !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
/* `lg-keep-style` = "only the background becomes glass": the element keeps
   its own border, shadow and text colours from Bricks / the site CSS. Without
   it the glass takes over the whole look (its own rim, shadow and ink). */
.gc-has-glass:not(.lg-keep-style) {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* The labels sit above the canvas. `position: relative` is only a default
   (zero specificity), so a child you positioned yourself in Bricks —
   absolute, fixed, sticky — keeps its position. */
.gc-has-glass > :not(.gc-glass):not(.gc-shadow) { z-index: 1; }
:where(.gc-has-glass > :not(.gc-glass, .gc-shadow)) { position: relative; }
/* A glass element needs a box of its own for the canvas. Again only a
   default: a header or bar that is fixed/sticky in Bricks stays that way. */
:where(.lg-glass, [data-liquid-glass]) { position: relative; }

/* ── labels on glass ───────────────────────────────────────────────────
   The ink follows the pane's tone (data-gc-tone, set by the script from the
   scheme, flipped when the pane behind is too light/dark for it); an ink
   chosen in the editor (--gc-ink) wins. Panels style their own text.
   Buttons (.brxe-button / .bricks-button) keep their own colours, so a
   coloured "Buy" button on a glass bar stays readable. */
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style) { --gc-ink-auto: #FFFFFF; --gc-halo: 0 1px 3px rgba(0, 0, 0, 0.45); --gc-active: #4DA3FF; --gc-chip: rgba(255, 255, 255, 0.16); }
.gc-has-glass[data-gc-tone='light']:not([data-glass-role='panel']) { --gc-ink-auto: #1D1D1F; --gc-halo: 0 0 1px rgba(255, 255, 255, 0.35); --gc-active: #0066D6; --gc-chip: rgba(0, 0, 0, 0.07); }
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style),
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style) :is(.brxe-heading, .brxe-text, .brxe-text-basic, .brxe-text-link, .brxe-icon, .lg-text, .lg-dock__item, a:not(.brxe-button):not(.bricks-button), a:not(.brxe-button):not(.bricks-button):hover) { color: var(--gc-ink, var(--gc-ink-auto)); }
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style) :is(.lg-glass-icon, .lg-dock__item, .lg-fab, .lg-btn) svg:not([fill='none']) { fill: currentColor; }
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style) { text-shadow: var(--gc-halo); }
.gc-has-glass:not([data-glass-role='panel']):not(.lg-keep-style) :is(.brxe-button, .bricks-button, input, select, textarea) { text-shadow: none; }

/* ── panels (pop-ups, cards full of text): text follows the pane's tone ── */
[data-glass-role='panel'] {
  --p-label: #1D1D1F; --p-label-2: #515154;
  --p-fill: rgba(0, 0, 0, 0.06); --p-sep: rgba(0, 0, 0, 0.12);
  color: var(--p-label);
}
[data-glass-role='panel'][data-gc-tone='dark'] {
  --p-label: #FFFFFF; --p-label-2: rgba(235, 235, 245, 0.72);
  --p-fill: rgba(255, 255, 255, 0.12); --p-sep: rgba(255, 255, 255, 0.16);
}
[data-glass-role='panel'][data-gc-tone='light'] {
  --p-label: #1D1D1F; --p-label-2: #515154;
  --p-fill: rgba(0, 0, 0, 0.06); --p-sep: rgba(0, 0, 0, 0.12);
}
/* text only; buttons and form fields keep their own colours */
[data-glass-role='panel'].gc-has-glass:not(.lg-keep-style) :is(p, li, h1, h2, h3, h4, h5, h6, .brxe-heading, .brxe-text, .brxe-text-basic) { color: var(--gc-ink, var(--p-label)); }
[data-glass-role='panel'].gc-has-glass:not(.lg-keep-style) { box-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.35) !important; }

/* ── no WebGL2 / Reduce Transparency: the sculpted bevel ───────────────── */
html.lg-flat :is(.lg-glass, [data-liquid-glass]) {
  background-color: color-mix(in srgb, var(--lg-glass, #bbbbbc) 14%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(165%);
          backdrop-filter: blur(10px) saturate(165%);
  box-shadow:
    inset 0 0 0 1px           color-mix(in srgb, #fff calc(var(--lg-rl, 1) * 10%), transparent),
    inset 1.8px 3px 0 -2px    color-mix(in srgb, #fff calc(var(--lg-rl, 1) * 90%), transparent),
    inset -2px -2px 0 -2px    color-mix(in srgb, #fff calc(var(--lg-rl, 1) * 80%), transparent),
    inset -3px -8px 1px -6px  color-mix(in srgb, #fff calc(var(--lg-rl, 1) * 60%), transparent),
    inset -0.3px -1px 4px 0   color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 20%), transparent),
    inset 0 3px 4px -2px      color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 10%), transparent),
    0 1px 5px 0  color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 10%), transparent),
    0 6px 16px 0 color-mix(in srgb, #000 calc(var(--lg-rd, 1) * 8%), transparent);
}
html.lg-flat [data-glass-role='panel'] { background-color: color-mix(in srgb, #f5f5f7 72%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   Ready-made elements (the web app's dock, fab, top bar, menu, buttons).
   Put the classes on Bricks elements, or paste the HTML from the guide
   (LIQUID-GLASS-GUIDE.md) into a Bricks Code element.
   ═══════════════════════════════════════════════════════════════════════ */

/* the dock: a floating pill of items at the bottom of the screen */
.lg-dock-zone {
  position: fixed; left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex; flex-direction: row; justify-content: center; align-items: flex-end;
  pointer-events: none;
}
.lg-dock-zone > * { pointer-events: auto; }
.lg-dock {
  display: inline-flex; flex-direction: row; align-items: center; gap: 2px;
  width: auto; padding: 4px; border-radius: 999px;
}
.lg-dock__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: auto; min-width: 54px; min-height: 40px;
  padding: 4px 10px; border: 0; border-radius: 999px; background: none;
  font: 600 9.5px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s cubic-bezier(.32, .72, 0, 1);
}
.lg-dock__item:active { transform: scale(0.93); }
.lg-dock__item svg { width: 17px; height: 17px; display: block; }
.lg-dock__item .lg-dock__i { transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.1); }
.lg-dock__item[aria-selected='true'] .lg-dock__i { transform: scale(1.04); }
/* the selected item reads in blue on the orb, like the App Store tab bar */
.lg-dock.gc-has-glass .lg-dock__item[aria-selected='true'],
.lg-dock.gc-has-glass .lg-dock__item[aria-selected='true'] * { color: var(--gc-active, #4DA3FF); }

/* a round glass button (the dock's folded button) */
.lg-fab {
  width: 46px; height: 46px; border-radius: 999px; border: 0; background: none;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: transform 0.2s cubic-bezier(.32, .72, 0, 1);
}
.lg-fab svg { width: 20px; height: 20px; }
.lg-fab:active { transform: scale(0.94); }

/* a glass button: capsule for a word, circle for a symbol */
.lg-btn {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px;
  width: auto; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: none;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.lg-btn:active { transform: scale(0.96); }
.lg-btn.lg-icon-btn { width: 48px; height: 48px; min-height: 0; padding: 0; }

/* a full-width top bar (square corners, flush with the screen's edge) */
.lg-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  min-height: 56px; padding: env(safe-area-inset-top) 16px 0;
  border-radius: 0;
  transition: transform 0.34s cubic-bezier(.32, .72, 0, 1);
}
/* optional: .lg-bar-autohide slides away scrolling down, back scrolling up (phones) */
@media (max-width: 899px) {
  html.gc-bar-hidden .lg-bar.lg-bar-autohide { transform: translate3d(0, -100%, 0); }
}
.lg-bar .lg-chip { background: var(--gc-chip); border-radius: 999px; }

/* a pop-up menu / card (role panel) */
.lg-menu {
  min-width: 210px; max-width: calc(100vw - 24px); padding: 6px;
  border-radius: 22px;
}
.lg-menu a, .lg-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 14px; background: none;
  color: inherit; font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer;
}
.lg-menu a:hover, .lg-menu button:hover { background: var(--p-fill); }
.lg-menu hr { border: 0; border-top: 0.5px solid var(--p-sep); margin: 4px 10px; }

@media (prefers-reduced-motion: reduce) {
  .lg-dock__item, .lg-dock__item .lg-dock__i, .lg-fab, .lg-btn, .lg-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Bravo Valley bridges — the site's own glass pieces
   ═══════════════════════════════════════════════════════════════════════ */

/* Header (#bv-header, Glass Header template). At the top of the page the bar
   has no chrome at all; the glass fades in once it folds into the pill. */
.bv-hdr > .gc-glass { transition: opacity .3s ease; }
.bv-hdr:not(.is-pill) > .gc-glass { opacity: 0; }
.bv-hdr.is-pill > .gc-glass { transition-delay: .12s; }
/* The header and its menu carry lg-keep-style: their icons keep --bv-ink and
   the pill keeps the lift shadow it had from the old .bv-glass class
   (bv-glass-header.css). Only the fill is glass. */
.bv-hdr.lg-glass.is-pill { box-shadow: var(--bv-sh-lift); }
.bv-hdr .bricks-mobile-menu-wrapper.lg-glass { box-shadow: var(--bv-sh-lift); }

/* The drop menu (the script makes it glass). A glass element must not be a
   scroll box — the canvas would scroll with the items — and the menu is
   short enough to never need one. */
.bv-hdr .bricks-mobile-menu-wrapper.gc-has-glass { overflow: visible !important; }

/* Buy bar (#bv-buy-bar, class lg-keep-style). Its design is unchanged from
   before Liquid Glass: only the background is glass. These are the rules that
   used to hang off the old .bv-glass class (bv-product.css .bv-bar.bv-glass). */
.bv-bar.lg-glass {
  border: 0;
  box-shadow: 0 -2px 40px rgba(26, 26, 26, .10), 0 12px 40px rgba(26, 26, 26, .08);
}
.bv-bar.lg-glass > :not(.gc-glass):not(.gc-shadow),
.bv-bar.lg-glass .bv-bar__main > * { position: relative; z-index: 6; }