/* ==========================================================
   PROJECT XAMUCO

   File: header.css

   Version: 1.1.0

   Description: Site Header
========================================================== */

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

.site-header {
  position: fixed;

  inset: 0 0 auto 0;

  width: 100%;

  height: var(--header-height);

  z-index: var(--z-header);

  background: transparent;

  transition:
    background-color var(--transition-normal) var(--ease-out),
    backdrop-filter var(--transition-normal) var(--ease-out),
    transform var(--transition-normal) var(--ease-out);
}

/* ======================================================
   SITE HEADER · HIDDEN
====================================================== */

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

/* ======================================================
   SITE HEADER · SCROLLED
====================================================== */

.site-header.is-scrolled {
  background: rgba(71, 0, 0, 0.92);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);
}

/* ======================================================
   HEADER LAYOUT
====================================================== */

.header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;
}

/* ======================================================
   LOGO
====================================================== */

.header__logo {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  text-decoration: none;

  transition: transform var(--transition-normal) var(--ease-out);
}

.header__logo img {
  display: block;

  width: 10rem;

  height: auto;
}

.header__logo:hover {
  transform: scale(1.02);
}

/* ======================================================
   NAVIGATION
====================================================== */

.header__nav {
  display: flex;
}

.header__menu {
  display: flex;

  align-items: center;

  gap: 3rem;

  margin: 0;

  padding: 0;

  list-style: none;
}

/* ======================================================
   ITEMS
====================================================== */

.header__item {
  display: flex;

  align-items: center;
}

/* Optical alignment correction for first navigation item */
.header__item:first-child {
  transform: translateY(4px);
}

/* ======================================================
   LINKS
====================================================== */

.header__link {
  position: relative;

  display: inline-flex;

  align-items: center;

  color: var(--color-background);

  font-family: var(--font-body);

  font-size: var(--fs-md);

  line-height: 1;

  letter-spacing: var(--tracking-body);

  text-decoration: none;

  transition: color var(--transition-normal) var(--ease-out);
}

.header__link::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: -8px;

  width: 0;

  height: 1px;

  background: currentColor;

  transform: translateX(-50%);

  transition: width var(--transition-normal) var(--ease-out);
}

.header__link:hover::after {
  width: 100%;
}

/* ======================================================
   CTA
====================================================== */

.header__cta {
  display: none;
}

/* ======================================================
   MOBILE TOGGLE
====================================================== */

.header__toggle {
  display: none;

  cursor: pointer;

  background: none;

  border: none;
}

.header__toggle span {
  display: block;

  width: 28px;

  height: 2px;

  margin: 6px 0;

  background: var(--color-background);

  transition: all var(--transition-normal);
}