/**
 * Framework — Component styles (CSS)
 * ==================================
 * Reusable component CSS that Bricks controls cannot express cleanly.
 * Paired with assets/js/interactions.js where behaviour is involved.
 *
 * Migrated from WPCodeBox 2026-09-03 (snippets 23, 24).
 *
 * Colours are exposed as custom properties so each project can retheme
 * without touching this file.
 */

/* ==========================================================
   STICKY HEADER
   ----------------------------------------------------------
   Visible by default; retracts while scrolling down and
   returns on scroll up. State classes are set by
   interactions.js — never inline styles.

     .c-sticky-header              base (visible)
     .c-sticky-header.is-scrolled  past 100px: shadow + shrink
     .c-sticky-header.is-hidden    retracted

   NOTE: unlike the u-* utilities, this component's CSS and JS are
   inseparable, so the JS targets .c-sticky-header directly rather
   than a separate js-* hook. One class to apply, not two.
   ========================================================== */

.c-sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	background: var( --c-sticky-header-bg, rgba( 255, 255, 255, 0.95 ) );
	-webkit-backdrop-filter: blur( var( --c-sticky-header-blur, 10px ) );
	backdrop-filter: blur( var( --c-sticky-header-blur, 10px ) );

	/* Visible at the top of the page. The original had translateY(-100%)
	   here, which hid the header until the first scroll. */
	transform: translateY( 0 );
	transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.c-sticky-header.is-scrolled {
	padding-block: var( --c-sticky-header-padding-scrolled, 10px );
	box-shadow: var( --c-sticky-header-shadow, 0 2px 20px rgba( 0, 0, 0, 0.1 ) );
}

.c-sticky-header.is-hidden {
	transform: translateY( -100% );
}

/* Optional: shrink the logo once scrolled */
.c-sticky-header .c-sticky-header__logo {
	transition: transform 0.3s ease;
}

.c-sticky-header.is-scrolled .c-sticky-header__logo {
	transform: scale( var( --c-sticky-header-logo-scale, 0.8 ) );
}

/* Pushes everything after it to the right of the logo */
.c-sticky-header__spacer {
	margin-right: auto;
}

@media ( prefers-reduced-motion: reduce ) {

	.c-sticky-header,
	.c-sticky-header .c-sticky-header__logo {
		transition: none;
	}
}


/* ==========================================================================
   c-media-text-breakout — full-bleed grid
   Migrated from WPCodeBox snippet #34 on 2026-09-06.
   The media column escapes the centred measure and runs to the viewport edge;
   the body column stays inside it. Reverse and wide-media alter the split.
   The two mobile order rules were positional (:first-child / :last-child) in
   the snippet; they now target __body / __media directly.
   ========================================================================== */

/* === BASE === */
@media (min-width: 1440px) {
  .c-media-text-breakout__container {
    width: calc(100% - (100% - 1440px) / 2);
    margin-right: 0;
    display: grid;
    grid-template-columns: calc(1440px / 2) 1fr;
    gap: var(--gap, 30px);
  }
}

/* === MODIFIER: reverse (image left, text right) === */
@media (min-width: 1440px) {
  .c-media-text-breakout--reverse .c-media-text-breakout__container {
    margin-right: auto;
    margin-left: 0;
    grid-template-columns: 1fr calc(1440px / 2);
  }
}

/* === MODIFIER: wide-media (33/66 split) === */
@media (min-width: 1440px) {
  .c-media-text-breakout--wide-media .c-media-text-breakout__container {
    grid-template-columns: calc(1440px / 3) 1fr;
  }
}

/* === BELOW THE FULL-BLEED BREAKPOINT ===
   Must reach 1439.98px, NOT 991px. The section root is display:grid, so its
   implicit column sizes to its item; max-width:100% then resolves against the
   item's own width and clamps nothing. Leaving a gap here let Bricks' fixed
   1440px container width overflow the viewport on every laptop between 992px
   and 1439px (463px of horizontal scroll at 992px). Measured + fixed 2026-09-06. */
@media (max-width: 1439.98px) {
  .c-media-text-breakout__container,
  .c-media-text-breakout--reverse .c-media-text-breakout__container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === TABLET RESET ===
   grid-template-columns is inert below 1440px, where the container is still
   flex (verified). Kept because it carries the intent if grid ever moves down. */
@media (max-width: 991px) {
  .c-media-text-breakout__container,
  .c-media-text-breakout--reverse .c-media-text-breakout__container {
    grid-template-columns: 1fr 1fr;
  }
}

/* === MOBILE LANDSCAPE: stack === */
@media (max-width: 767px) {
  .c-media-text-breakout__container,
  .c-media-text-breakout--reverse .c-media-text-breakout__container {
    grid-template-columns: 1fr;
  }
  
  /* Reverse modifier: flip so heading/text appears above image on mobile */
  .c-media-text-breakout--reverse .c-media-text-breakout__media {
    order: 2;
  }
  .c-media-text-breakout--reverse .c-media-text-breakout__body {
    order: 1;
  }
}


/* ==========================================================================
   c-media-text — body copy links
   Migrated from WPCodeBox snippet #31 on 2026-09-06.
   Scope note: this styles links in the BASE block's __text only. The sibling
   block c-media-text-breakout__text is deliberately NOT included — adding it
   would be a design change, not a migration.
   ========================================================================== */

.c-media-text__text a {
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.c-media-text__text a:hover,
.c-media-text__text a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--primary)!important;
}


/* ==========================================================================
   c-banner — glass overlay variant
   Migrated from WPCodeBox snippet #25 on 2026-09-06.
   The --glass modifier turns the banner into a background image with a frosted
   dark panel over it. The root carries the image (set per element); this only
   supplies the cover/position and the panel treatment.
   NOTE: the whole c-banner family is at 0 uses — kept for a future rebuild.
   ========================================================================== */

/* The banner variant */
.c-banner--glass {
  background-size: cover;
  background-position: center;
}

/* The glass effect on the container inside */
.c-banner--glass .c-banner__container {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);  /* Safari */
  background: rgba(0, 0, 0, 0.55);
  border-radius: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.05),
    0 8px 32px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   c-hero-slider — reveal the active slide's content
   Replaces three per-slide Bricks interactions that targeted the content by
   NUMBERED class (.c-hero-slider__content1..4), which is the only reason the
   slide/content classes had to be numbered at all.
   The .active class is still set by the two remaining interactions on the
   slide, so this keys off exactly the same signal the container's own custom
   CSS already uses for width / opacity / grayscale — including the
   max-width:478px flex rules. Touch still works: a tap fires mouseenter.
   ========================================================================== */

.c-hero-slider__slide {
	transition: 0.6s;
}

.c-hero-slider__content {
	display: none;
}

.c-hero-slider__slide.active .c-hero-slider__content {
	display: flex;
}