/* ------------------------------------------------------------------
   STICKY GLASS HEADER
   Markup: #brx-header > .bd-header > .bd-header__inner
           .bd-header__logo (img.css-filter)
           .bd-header__nav  (.bricks-nav-menu)
           .bd-header__cta
   States: #brx-header[data-theme="dark"]  → light icons on dark bg
           #brx-header[data-theme="light"] → dark  icons on light bg
   Tint:   --hdr-tint (0 → 0.45) updated via JS on scroll
------------------------------------------------------------------ */


/* Change HTML page background colour 
html {
  background:
    linear-gradient(var(--hero-bg, #0b0b0d) 0 50%,
                    var(--base-ultra-light, #f6f5f8) 50% 100%) fixed;
}*/

#brx-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  width: 100%;

  /* theme tokens — overridden by [data-theme] below */
  --hdr-fg:        #ffffff;
  --hdr-fg-hover:  rgba(255,255,255,.75);
  --hdr-pill-hover: rgba(255,255,255,.10);
  --hdr-cta-bg:    rgba(255,255,255,.9);
  --hdr-cta-fg:    #000000;
  --hdr-cta-hover-bg: #ffffff;

  /* scroll-ramped frost (0 at top → 0.45 further down) */
  --hdr-tint: 0;
}

#brx-header[data-theme="light"] {
  --hdr-fg:        var(--dark, #141416);
  --hdr-fg-hover:  rgba(20,20,22,.65);
  --hdr-pill-hover: rgba(0,0,0,.06);
  --hdr-cta-bg:    var(--accent);
  --hdr-cta-fg:    #ffffff;
  --hdr-cta-hover-bg: #000000;
}

/* The glass bar itself — blur/gradient/border live here, not on the
   outer <header>, so the gradient can ramp without repainting the
   fixed positioning context. */
.bd-header {
  position: relative;
  display: flex;
  align-items: center;

  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);

  background-image: linear-gradient(
    rgba(171, 171, 171, var(--hdr-tint)) 0%,
    rgba(255, 255, 255, var(--hdr-tint)) 100%
  );

  border-bottom: 1px solid rgba(0, 0, 0, calc(var(--hdr-tint) * 0.13));

  transition:
    background-image .2s linear,
    border-color     .2s linear;
}

/* Inner content container 
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  
  /* if your .brxe-container already sets max-width / padding, leave
     those alone and delete the two lines below 
  width: 100%;
  max-width: var(--container-max-width, 1480px);
  padding-inline: var(--container-padding, 1.5rem);
  margin-inline: auto;
}*/

/* -----------------------------------------------------------------
   LOGO — uses CSS filter to recolor the single dark SVG.
   The source asset is integria-logo-dark.svg (black).
   For the dark state (over dark sections) we invert it to white.
-------------------------------------------------------------------*/
.bd-header__logo { display: inline-flex; line-height: 0; }
.bd-header__logo img.css-filter {
  display: block;
  transition: filter .25s ease;
  /* default = dark page state (over dark sections): make logo white */
  filter: brightness(0) invert(1);
}
#brx-header[data-theme="light"] .bd-header__logo img.css-filter {
  /* over light sections: source is already dark, no filter needed */
  filter: none;
}

/* -----------------------------------------------------------------
   NAV LINKS
-------------------------------------------------------------------*/
/* Nav links — plain text, color-only transitions */
#brx-header .bd-header__nav .bricks-nav-menu li a,
#brx-header .bd-header__nav .bricks-mobile-menu li a {
  color: var(--hdr-fg);
  transition: color .25s ease;
}

#brx-header .bd-header__nav .bricks-nav-menu li a:hover,
#brx-header .bd-header__nav .bricks-mobile-menu li a:hover,
#brx-header .bd-header__nav .bricks-nav-menu li.current-menu-item > a,
#brx-header .bd-header__nav .bricks-mobile-menu li.current-menu-item > a {
  color: var(--hdr-fg-hover);
}

/* Mobile menu trigger bars */
.bricks-mobile-menu-toggle .bar-top,
.bricks-mobile-menu-toggle .bar-center,
.bricks-mobile-menu-toggle .bar-bottom {
  background-color: var(--hdr-fg);
  transition: background-color .25s ease;
}

/* -----------------------------------------------------------------
   CTA BUTTON
   Overriding Bricks' .bricks-background-btn--primary only when
   used inside the header, so your global button styles elsewhere
   keep working.
-------------------------------------------------------------------*/
#brx-header .bd-header__cta.bricks-button {
  background-color: var(--hdr-cta-bg) !important;
  color:            var(--hdr-cta-fg) !important;

  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
#brx-header .bd-header__cta.bricks-button:hover {
  background-color: var(--hdr-cta-hover-bg) !important;
}

#brx-header .bd-header__cta.bricks-button {
  border: 0 !important;
}

/* Burger trigger — follows the same theme token as logo/nav/CTA */
#brx-header .bd-header__burger .x-hamburger-inner,
#brx-header .bd-header__burger .x-hamburger-inner::before,
#brx-header .bd-header__burger .x-hamburger-inner::after {
  background-color: var(--hdr-fg);
  transition: background-color .25s ease;
}

#brx-header .bd-header__burger .x-hamburger-text {
  color: var(--hdr-fg);
  transition: color .25s ease;
}

/* -----------------------------------------------------------------
   Add top padding to the first section so the hero doesn't start
   under the fixed header. Use your ACSS space var if you like.
-------------------------------------------------------------------*/
body { --header-h: 64px; }
main > :first-child,
#brx-content > :first-child { scroll-margin-top: var(--header-h); }

/* Mobile: slightly shorter header, same behavior */
@media (max-width: 767px) {
  .bd-header { height: 56px; }
  body { --header-h: 56px; }
}


/* ------------------------------------------------------------------
   WP Admin Bar offset (only when logged in)
   WP adds body.admin-bar when the toolbar is rendered.
   Bar height: 32px desktop, 46px under 783px viewport width.
------------------------------------------------------------------ */
body.admin-bar #brx-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar #brx-header {
    top: 46px;
  }
}

/* If you're using mobile Safari where the bar becomes position:absolute
   at narrow widths, fall back to keeping the header pinned to 0 once
   the admin bar scrolls away. WP's own CSS switches the bar to
   position:absolute below 601px, so we undo the offset there. */
@media screen and (max-width: 600px) {
  body.admin-bar #brx-header {
    top: 0;
  }
}

body.admin-bar main > :first-child,
body.admin-bar #brx-content > :first-child { scroll-margin-top: calc(var(--header-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar main > :first-child,
  body.admin-bar #brx-content > :first-child { scroll-margin-top: calc(var(--header-h) + 46px); }
}