/*
Theme Name:   Bricks Child
Theme URI:    https://bricksbuilder.io/
Description:  Bricks child theme for St. Leo the Great — site customizations live here so they survive Bricks updates.
Author:       St. Leo the Great
Template:     bricks
Version:      1.0.0
Text Domain:  bricks-child
*/

/* ============================================
   .rp_button — global hover animation
   Works on all variants (maroon, gold, navy,
   outlined) without changing their colors.
   Effects live on pseudo-elements because the
   buttons' Bricks entrance animations pin the
   transform property (a transform/lift hover
   would be silently ignored).
   ============================================ */
.rp_button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* Subtle navy tint + a gold underline rising from the bottom */
.rp_button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(22, 30, 52, .10), rgba(22, 30, 52, .14)),
    linear-gradient(#d4ab68, #d4ab68) left bottom / 100% 0 no-repeat;
  opacity: 0;
  transition: opacity .25s ease, background-size .3s cubic-bezier(.25, .6, .3, 1);
}
.rp_button:hover::before {
  opacity: 1;
  background-size: 100% 100%, 100% 3px;
}

/* Light sheen sweeping across the button */
.rp_button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 60%;
  z-index: 2;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.rp_button:hover::after {
  animation: rpSheen .7s ease forwards;
}
@keyframes rpSheen {
  0%   { left: -80%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Accessibility: no motion for users who opt out */
@media (prefers-reduced-motion: reduce) {
  .rp_button::before { transition: none; }
  .rp_button:hover::after { animation: none; }
}

/* ============================================
   Horizontal overflow guard
   Closed Bricks mega-menu dropdowns stay in the
   layout as visibility:hidden boxes and their
   grids can poke past the viewport (~1024px),
   and decorative offsets can do the same — clip
   (not hidden: it creates no scroll container,
   so the sticky header keeps working).
   ============================================ */
html,
body {
  overflow-x: clip;
}

/* Lock page scroll while the mobile menu is open.
   Bricks locks `body` overflow when the menu opens, but the `overflow-x: clip`
   above stops body's overflow from propagating to the viewport, so the page
   still scrolls. Lock the root element directly instead — `:has()` fires only
   while the mobile nav carries `.brx-open`.
   Use `clip`, NOT `hidden`: `overflow: hidden` creates a scroll container that
   breaks the sticky header (logo/button/hamburger scroll off-screen when the
   menu is opened after scrolling down). `clip` locks scroll without that. */
html:has(.brxe-nav-nested.brx-open) {
  overflow: clip;
}

/* Pin the header to the top while the mobile menu is open.
   The header is position:sticky. Locking page scroll (overflow above) UN-STICKS
   it — so if you scrolled down first, the header jumps to its document position
   (above the viewport) and vanishes. Switch it to position:fixed while the menu
   is open: viewport-pinned, deterministic on every browser (incl. Safari). */
html:has(.brxe-nav-nested.brx-open) #brx-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}
/* keep the header clear of the WP admin bar for logged-in users */
html:has(.brxe-nav-nested.brx-open) body.admin-bar #brx-header { top: 46px; }
@media screen and (min-width: 783px) {
  html:has(.brxe-nav-nested.brx-open) body.admin-bar #brx-header { top: 32px; }
}

/* Keep the logo above the full-screen mobile menu panel.
   The panel (.brx-nav-nested-items) is z-index:1001 with a white background;
   GIVE NOW and the toggle already sit above it (their own high z-index), but
   the logo was z-index:auto and got hidden behind the panel when the menu opened. */
html:has(.brxe-nav-nested.brx-open) #brx-header .bricks-site-logo,
html:has(.brxe-nav-nested.brx-open) #brx-header .brxe-image:has(.bricks-site-logo) {
  position: relative;
  z-index: 1002;
}

/* Bricks nested sliders (e.g. the homepage
   testimonials) put their arrows 80px OUTSIDE
   the slider; on phones that pushes the page
   past the screen edge. Keep arrows inside. */
@media (max-width: 767px) {
  .brxe-slider-nested .splide__arrow--prev { left: 6px !important; }
  .brxe-slider-nested .splide__arrow--next { right: 6px !important; }
}