/**
 * XSHIELD1 — Header & Footer
 * ---------------------------------------------------------------------------
 * Structural styles for the site header. Depends on tokens.css custom
 * properties only — no hardcoded colors/sizes, so retheming happens in one
 * place. Footer-specific rules will be added under the marked section below
 * when the footer module ships.
 */

/* ---------------------------------------------------------------------------
 * Site header shell
 * ------------------------------------------------------------------------ */
.xs-site-header {
  position: sticky;
  top: 0;
  z-index: var(--xs-z-header);
  background-color: var(--xs-color-bg);
  border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  transition: box-shadow var(--xs-duration-base) var(--xs-ease-standard),
              background-color var(--xs-duration-base) var(--xs-ease-standard),
              border-color var(--xs-duration-base) var(--xs-ease-standard);
}

/* Added by header.js once the page has scrolled past a small threshold. */
.xs-site-header.is-scrolled {
  box-shadow: var(--xs-shadow-sm);
}

/*
 * Dynamic header color mode (see xshield1_header_color_mode() in
 * inc/setup.php, toggled to 'light' via page-hero.php). The actual
 * transparent/gradient/white-logo styling lives in header.php's own inline
 * <style id="xs-header-fixes"> block, not here — header.php's real markup
 * (image logo, .xs-primary-menu nav) predates and doesn't match this
 * file's naming (.xs-site-header__site-title, .xs-nav__list), so a
 * same-named block here would silently do nothing. Keeping all header
 * component styling in one place (header.php, per its own docblock) avoids
 * that drift happening again.
 */

.xs-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--xs-space-5);
  min-height: var(--xs-header-height);
}

/* ---------------------------------------------------------------------------
 * Branding
 * ------------------------------------------------------------------------ */
.xs-site-header__branding {
  flex-shrink: 0;
  margin-right: auto;
}

.xs-site-header__branding img {
  max-height: calc(var(--xs-header-height) - var(--xs-space-5));
  width: auto;
}

.xs-site-header__site-title {
  font-family: var(--xs-font-display);
  font-weight: var(--xs-fw-black);
  font-size: var(--xs-fs-lg);
  letter-spacing: var(--xs-ls-tight);
  color: var(--xs-color-text);
  text-transform: uppercase;
}

.xs-site-header__site-title:hover {
  color: var(--xs-color-text);
}

/* ---------------------------------------------------------------------------
 * Primary nav (desktop first; mobile overrides further down)
 * ------------------------------------------------------------------------ */
.xs-nav__list {
  display: flex;
  align-items: center;
  gap: var(--xs-space-5);
}

.xs-nav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--xs-space-2) 0;
  font-weight: var(--xs-fw-semibold);
  font-size: var(--xs-fs-sm);
  letter-spacing: var(--xs-ls-wide);
  text-transform: uppercase;
  color: inherit;
}

/* Thin red underline on hover — text color itself never changes. */
.xs-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--xs-color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-nav__list a:hover::after,
.xs-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

/* Dropdowns: any menu item with children gets this class automatically. */
.xs-nav__list li.menu-item-has-children {
  position: relative;
}

.xs-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--xs-space-2);
  background-color: var(--xs-color-bg);
  border: var(--xs-border-width) solid var(--xs-color-border);
  border-radius: var(--xs-radius-md);
  box-shadow: var(--xs-shadow-md);
}

.xs-nav__list .sub-menu li {
  width: 100%;
}

.xs-nav__list .sub-menu a {
  width: 100%;
  padding: var(--xs-space-2) var(--xs-space-3);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--xs-fw-medium);
}

.xs-nav__list li.menu-item-has-children:hover > .sub-menu,
.xs-nav__list li.menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Header actions (cart + mobile toggle)
 * ------------------------------------------------------------------------ */
.xs-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--xs-space-4);
  flex-shrink: 0;
}

.xs-cart {
  display: inline-flex;
  align-items: center;
  font-weight: var(--xs-fw-semibold);
  font-size: var(--xs-fs-sm);
  letter-spacing: var(--xs-ls-wide);
  text-transform: uppercase;
  color: inherit;
}

.xs-cart:hover,
.xs-cart:focus-visible {
  color: var(--xs-color-brand);
}

/* Mobile nav toggle (hamburger -> X), hidden on desktop by default. */
.xs-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.xs-nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--xs-color-text);
  transition: transform var(--xs-duration-fast) var(--xs-ease-standard),
              opacity var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-nav-toggle[aria-expanded='true'] .xs-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.xs-nav-toggle[aria-expanded='true'] .xs-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.xs-nav-toggle[aria-expanded='true'] .xs-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * Mobile breakpoint: nav collapses into a toggleable drawer
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .xs-nav-toggle {
    display: inline-flex;
  }

  .xs-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background-color: var(--xs-color-bg);
    border-bottom: var(--xs-border-width) solid var(--xs-color-border);
    transition: max-height var(--xs-duration-slow) var(--xs-ease-standard);
  }

  .xs-nav.is-open {
    max-height: 80vh;
    overflow-y: auto;
  }

  .xs-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--xs-space-3) var(--xs-container-pad);
  }

  .xs-nav__list a {
    width: 100%;
    padding: var(--xs-space-3) 0;
    border-bottom: var(--xs-border-width) solid var(--xs-color-border);
  }

  .xs-nav__list .sub-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: var(--xs-space-4);
  }
}

/* ---------------------------------------------------------------------------
 * Site footer
 * ------------------------------------------------------------------------ */
.xs-site-footer {
  margin-top: var(--xs-space-9);
  padding-block: var(--xs-space-7) var(--xs-space-5);
  background-color: var(--xs-color-bg-inverse);
  color: var(--xs-color-text-inverse);
}

/* Widget columns: CSS grid auto-fills based on however many are active
   (see template-parts/footer/widgets.php) rather than a fixed 3-up layout. */
.xs-site-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--xs-space-6);
  padding-bottom: var(--xs-space-6);
  border-bottom: var(--xs-border-width) solid rgba(255, 255, 255, 0.12);
}

.xs-site-footer__widget-col .xs-widget-title {
  margin-bottom: var(--xs-space-3);
  font-size: var(--xs-fs-sm);
  letter-spacing: var(--xs-ls-wide);
  text-transform: uppercase;
  color: var(--xs-color-text-inverse);
}

.xs-site-footer__widget-col .xs-widget + .xs-widget {
  margin-top: var(--xs-space-5);
}

.xs-site-footer__widget-col,
.xs-site-footer__widget-col a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--xs-fs-sm);
  line-height: var(--xs-lh-loose);
}

.xs-site-footer__widget-col a:hover {
  color: var(--xs-color-text-inverse);
}

.xs-site-footer__widget-col ul li {
  margin-bottom: var(--xs-space-2);
}

/* Bottom bar */
.xs-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--xs-space-4);
  padding-top: var(--xs-space-5);
  font-size: var(--xs-fs-xs);
  color: rgba(255, 255, 255, 0.6);
}

.xs-site-footer__copyright {
  margin: 0;
}

.xs-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs-space-4);
}

.xs-footer-nav__list a {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--xs-fs-xs);
}

.xs-footer-nav__list a:hover {
  color: var(--xs-color-text-inverse);
}

.xs-footer-cookie-prefs {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: var(--xs-fs-xs);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--xs-duration-fast) var(--xs-ease-standard);
}

.xs-footer-cookie-prefs:hover,
.xs-footer-cookie-prefs:focus-visible {
  color: var(--xs-color-text-inverse);
}

.xs-back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--xs-radius-full);
  border: var(--xs-border-width) solid rgba(255, 255, 255, 0.24);
  color: var(--xs-color-text-inverse);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--xs-duration-base) var(--xs-ease-standard),
              transform var(--xs-duration-base) var(--xs-ease-standard),
              background-color var(--xs-duration-fast) var(--xs-ease-standard);
}

/* Added by footer.js once the page has scrolled past a threshold. */
.xs-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.xs-back-to-top:hover {
  background-color: var(--xs-color-brand);
  border-color: var(--xs-color-brand);
}

@media (max-width: 600px) {
  .xs-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}