/* ===============================
   LOGO SIZE (single source of truth)
================================= */
:root {
  --logo-full: 90px;                 /* mobile */
  --logo-size: var(--logo-full);
}
@media (min-width: 992px) {
  :root { --logo-full: 140px; }      /* desktop (d-lg) */
}

.header.small-header { --logo-size: 100px; }   /* set by sticky-header.js on scroll */


/* ===============================
   HEADER LAYOUT
================================= */
.header {
  position: relative;
  z-index: 50;                       /* above the hero; no overflow:hidden anywhere */
}

.header__container-wrapper--header__main {
  background: #fff;                  /* change if you want it transparent */
}

.header--header-a .header__container-wrapper--header__main {
  box-shadow: 0 4px 4px rgba(0,0,0,.1);
}

.header__container {
  width: 100%;
  padding-right: .83335rem;
  padding-left: .83335rem;
  margin-right: auto;
  margin-left: auto;
}

.header__container--boxed { position: relative; }   /* logo anchors to this */

.header .header__main {
  display: flex;
  align-items: flex-end;             /* menu button at the bottom */
  min-height: calc(var(--logo-full) / 2 + .5rem);   /* full size, so layout never jumps on scroll */
  /*padding-bottom: .5rem;*/
}
.header .header__main > * { align-self: flex-end; }
.header .header__main_right { margin-left: auto; }

.getitwide  { width: 100%; }
.getitright { justify-content: flex-end; }

.header__user-nav {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}


/* ===============================
   LOGO (50% overlapping the hero)
================================= */
/*.header__logo {
  position: absolute;
  left: .83335rem;
  top: 100%;     */                    /* bottom edge of the header row */
  /*transform: translateY(-50%);*/       /* half hangs into the hero */
/*  z-index: 1000;
  line-height: 0;
}
*/
.header__logo {
  position: absolute;
  left: .83335rem;
  top: calc(100% - var(--logo-full) / 2);  /* top edge stays where the full-size logo's top is */
  /* transform removed */
  z-index: 1000;
  line-height: 0;
}

.header__logo img {
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
  transition: width .4s ease, height .4s ease, transform .4s ease;
	transform-origin: top left;
  /*filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));*/
}

.header__logo img:hover {
	

	  transform: scale(1.05);
}


/* ===============================
   STICKY STATE (class set by sticky-header.js)
================================= */
.is--stuck {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-sticky-wrapper.is--stuck {
  background: rgba(255,255,255,.85);
}


/* ===============================
   HEADER ICONS / NAV
================================= */
.header__user-nav,
.header__toggleable-button,
a.cart-block--link__expand,
.header__social-menu a {
  color: var(--pass-blue) !important;
  font-size: 1.7rem;
}

.header__user-nav:hover { color: var(--lp-font) !important; }

.header__toggleable-button:hover,
a.cart-block--link__expand:hover,
.header__social-menu a:hover {
  color: var(--lp-font) !important;
  transform: scale(1.05);
}

/* ===============================
   HERO CONTENT POSITIONING
   Usage: <div class="hero-content hero-x-center hero-y-middle"> ... </div>
================================= */

/* The hero itself must be a positioning context */
.hero {
  position: relative;
}

/* Overlay layer that fills the hero */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;   /* vertical axis = main axis */
  padding: var(--hero-padding, 2rem);
  box-sizing: border-box;
  pointer-events: none;     /* let clicks pass through empty space */

  /* defaults */
  align-items: center;      /* horizontal */
  justify-content: center;  /* vertical */
  text-align: center;
}

.hero-content > * {
  pointer-events: auto;     /* but keep children interactive */
  max-width: 100%;
}

/* ---------- Horizontal ---------- */
.hero-x-left   { align-items: flex-start; text-align: left; }
.hero-x-center { align-items: center;     text-align: center; }
.hero-x-right  { align-items: flex-end;   text-align: right; }

/* ---------- Vertical ---------- */
.hero-y-top    { justify-content: flex-start; }
.hero-y-middle { justify-content: center; }
.hero-y-bottom { justify-content: flex-end; }

/* ---------- Left/right variants: 40% width on desktop ---------- */
@media (min-width: 769px) {
  .hero-x-left > *:not(img):not(svg),
  .hero-x-right > *:not(img):not(svg) {
    width: 40%;
    max-width: 40%;
    box-sizing: border-box;
  }

  /* Left: box hugs the left edge, text starts from the left */
  .hero-x-left > *:not(img):not(svg) {
    align-self: flex-start;
    text-align: left;
    padding-right: 2rem;
  }

  /* Right: box hugs the right edge, text starts from the right */
  .hero-x-right > *:not(img):not(svg) {
    align-self: flex-end;
    text-align: right;
    padding-left: 2rem;
  }
}

/* ---------- Contained width (replaces .hero-inner) ---------- */
.hero-content--contained {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  left: 0;
  right: 0;
}

/* ---------- SVG / image logos ---------- */
.hero-content img,
.hero-content svg {
  max-width: var(--hero-logo-width, 300px);
  width: 100%;
  height: auto;
  transition: transform 500ms;
}

.hero-content img:hover,
.hero-content svg:hover {
  transform: scale(1.05);
}

/* Smaller logo variant for inner pages */
.hero-content--inner img,
.hero-content--inner svg {
  --hero-logo-width: 200px;
}

/* ---------- Text blocks (animated or not) ---------- */
.hero-content .hero-title,
.hero-content .title-block {
  margin: 0;
  /* keep your existing animation classes/keyframes on this element */
}

/* ---------- Mobile: optional override ---------- */
@media (max-width: 768px) {
  .hero-content { padding: 1rem; }

  .hero-content img,
  .hero-content svg {
    max-width: min(var(--hero-logo-width, 300px), 70vw);
  }

  /* Force centring on small screens if you want it */
  .hero-mobile-center {
    align-items: center;
    text-align: center;
  }
}

.site-title {
  display: block;
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-family-headers);
  color: var(--white) !important;
  text-shadow: 0 0 7px rgba(0,0,0,0.25);
}

.site-subtitle {
  margin: 0;
  font-size: 1.4rem;
	font-weight: 500;
  text-transform: uppercase;
  font-family: var(--font-family-headers);
  color: var(--white);
  text-shadow: 0 0 6px rgba(0,0,0,0.25);
}



/* ===============================
   HAMBURGER
================================= */
.hamburger {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .35s ease;
}
.header .hamburger:hover { transform: rotate(90deg); }

.hamburger__bar {
  position: absolute;
  left: 15%;
  width: 70%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--pass-blue);
  transition: transform .35s ease, top .35s ease, opacity .25s ease, background-color .3s ease;
}
.hamburger:hover .hamburger__bar { background: var(--pass-blue-dark); }

/* intro: top + bottom enter from the left, middle from the right */
.hamburger__bar:nth-child(1) { top: 28%; animation: bar-in-left  .5s ease .1s backwards; }
.hamburger__bar:nth-child(2) { top: 50%; animation: bar-in-right .5s ease .2s backwards; }
.hamburger__bar:nth-child(3) { top: 72%; animation: bar-in-left  .5s ease .3s backwards; }

@keyframes bar-in-left  { from { transform: translateX(-150%); opacity: 0; } }
@keyframes bar-in-right { from { transform: translateX(150%);  opacity: 0; } }

/* open state: two bars form an X, middle bar slides away */
.hamburger.is-active .hamburger__bar:nth-child(1),
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { top: 50%; transform: rotate(45deg); }

.hamburger.is-active .hamburger__bar:nth-child(2),
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; transform: translateX(150%); }

.hamburger.is-active .hamburger__bar:nth-child(3),
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { top: 50%; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hamburger, .hamburger__bar { animation: none; transition: none; }
}