/**
 * WMD Solutions Base Theme - Header styles.
 * Sticky header, scroll effects, cart icon/badge, branding alignment.
 * Nav/menu styles live in css/components/menu.css.
 * Transparent header styles live in css/hero.css.
 */

/* ======================================================
   SITE HEADER BASE
   ====================================================== */

.site-header {
  background: var(--header-bg);
  transition: opacity 0.4s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.site-header .navbar {
  padding-top: var(--header-padding-y, 1rem);
  padding-bottom: var(--header-padding-y, 1rem);
}

/* ======================================================
   BRANDING — logo, site name, slogan
   Always centered within the navbar-brand-wrapper.
   On mobile this naturally centers between the toggler
   and the left edge. On desktop it sits left by default
   unless no nav is present (see --centered modifier).
   ====================================================== */

.navbar-brand-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-logo {
  display: block;
  line-height: 0;
}

.site-logo img {
  display: block;
  margin: 0 auto;
}

.site-name,
.site-slogan {
  display: block;
  text-align: center;
  width: 100%;
}

/* ======================================================
   CENTERED LOGO MODIFIER
   Add class navbar-brand-wrapper--centered in Twig when
   no header nav or cart regions are populated.
   Pulls the wrapper out of flex flow and pins it to the
   true center of the navbar container, so the toggler
   button does not push it off-center.
   ====================================================== */

.navbar-brand-wrapper--centered {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ======================================================
   STICKY HEADER
   --drupal-displace-offset-top set dynamically by Drupal
   on <html>. Falls back to 0px when not logged in.
   ====================================================== */

.sticky-header .site-header {
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 200;
}

.sticky-header.scrolled .site-header {
  background: var(--header-scroll-bg) !important;
  backdrop-filter: blur(var(--header-scroll-blur));
  -webkit-backdrop-filter: blur(var(--header-scroll-blur));
  box-shadow: var(--header-sticky-shadow);
}

.sticky-header .site-header.header-faded {
  opacity: 0;
  pointer-events: none;
}

.sticky-header .site-header:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ======================================================
   CART ICON + BADGE
   ====================================================== */

.navbar-cart {
  display: flex;
  align-items: center;
}

.cart-block--link__expand {
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}

.cart-block--icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.cart-block--icon-wrapper svg {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.cart-block--link__expand:hover .cart-block--icon-wrapper svg {
  color: var(--color-accent);
}

.cart-block--badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}


/* Site Logo and Slogan*/
.site-slogan {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-secondary);
}

/* ======================================================
   HEADER REGION — inline block layout (desktop only)
   The .region-header lives inside the desktop navbar-collapse
   wrapper alongside the main menu and the cart region. Any
   block placed in this region (main menu, phone CTA, search
   field, etc.) should sit inline horizontally — never stack
   vertically. Subthemes can override gap or alignment via
   --header-region-gap if needed.

   Scoped to >=768px (Bootstrap md) so it never affects mobile,
   where the cart sits left of the logo and the hamburger sits
   right — both rendered OUTSIDE .region-header in their own
   wrappers (see page.html.twig).
   ====================================================== */
@media (min-width: 768px) {
  .region-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--header-region-gap, 1rem);
  }
  .region-header > .block {
    margin: 0;
  }
}