/* =========================================================
   SOUVENRA NEXUS — HEADER
   HEADER #01 — CLEAN 3-COLUMN BALANCED LAYOUT
   ========================================================= */


/* =========================================================
   HEADER HOST
   ========================================================= */

souvenra-header {

  display: block;

  width: 100%;

  margin: 0 !important;

  padding: 0 !important;
}


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

.header {

  --header-bg-current:
    var(
      --header-bg,
      rgba(7, 10, 17, 0.78)
    );

  --header-bg-scrolled-current:
    var(
      --header-bg-scrolled,
      rgba(6, 8, 14, 0.94)
    );


  --header-border-current:
    transparent;

  --header-border-scrolled-current:
    transparent;


  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  box-sizing: border-box;


  background:
    var(--header-bg-current);


  border: none !important;

  border-bottom: none !important;


  box-shadow:
    none !important;


  backdrop-filter:
    blur(16px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(140%);


  font-family:
    var(
      --font-body,
      "Inter",
      sans-serif
    );


  transition:
    background-color 300ms
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );
}


/* =========================================================
   SCROLLED HEADER
   ========================================================= */

.header.scrolled {

  background:
    var(--header-bg-scrolled-current);

  border: none !important;

  border-bottom: none !important;

  box-shadow:
    none !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

[data-theme="light"] .header,
html[data-theme="light"] .header {

  --header-bg-current:
    rgba(255, 255, 255, 0.88);

  --header-bg-scrolled-current:
    rgba(247, 248, 250, 0.96);

  --header-border-current:
    transparent;

  --header-border-scrolled-current:
    transparent;
}


/* =========================================================
   MAIN HEADER CONTAINER
   ========================================================= */

.header-container {

  width: 100% !important;

  max-width: var(--content-max-width, 1280px) !important;

  min-height: 84px;


  margin-left: auto !important;

  margin-right: auto !important;


  padding-left:
    clamp(
      1.5rem,
      4vw,
      3.5rem
    ) !important;

  padding-right:
    clamp(
      1.5rem,
      4vw,
      3.5rem
    ) !important;


  box-sizing: border-box !important;


  display: grid;


  /*
    LEFT        CENTER        RIGHT
    1fr         auto          1fr
  */

  grid-template-columns:
    minmax(260px, 1fr)
    auto
    minmax(260px, 1fr);


  align-items: center;


  column-gap: 30px;
}


/* =========================================================
   LEFT — BRAND
   ========================================================= */

.header-logo {

  grid-column: 1;

  justify-self: start;


  display: inline-flex;

  align-items: center;


  gap: 13px;


  color:
    var(
      --text-primary,
      #f4f6fa
    );


  text-decoration: none;


  flex-shrink: 0;

  min-width: 0;
}


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

.header-logo-mark {

  width: 50px;

  height: 50px;


  display: flex;

  align-items: center;

  justify-content: center;


  flex-shrink: 0;
}


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

.header-logo-img {

  width: 100%;

  height: 100%;


  object-fit: contain;


  padding: 7px;


  box-sizing: border-box;


  display: block;
}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.header-logo-text {

  display: flex;

  flex-direction: column;


  gap: 3px;


  line-height: 1;


  white-space: nowrap;
}


/* =========================================================
   BRAND NAME
   ========================================================= */

.brand-name {

  font-family:
    var(
      --font-display,
      "Space Grotesk",
      sans-serif
    );


  font-size: 15px;

  font-weight: 600;


  letter-spacing: 0.06em;


  color:
    var(
      --text-primary,
      #f4f6fa
    );
}


/* =========================================================
   BRAND ACCENT
   ========================================================= */

.brand-name-accent {

  color:
    var(
      --accent-color,
      #3d8bfd
    );
}


/* =========================================================
   BRAND TAGLINE
   ========================================================= */

.brand-tagline {

  font-size: 9px;

  font-weight: 500;


  letter-spacing: 0.14em;


  text-transform: uppercase;


  color:
    var(
      --text-muted,
      #5c6478
    );
}


/* =========================================================
   CENTER — NAVIGATION
   ========================================================= */

.header-nav {

  grid-column: 2;

  justify-self: center;


  display: flex;

  align-items: center;

  justify-content: center;


  gap: 34px;


  margin: 0;

  padding: 0;


  white-space: nowrap;
}


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

.nav-link {

  position: relative;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  color:
    var(
      --text-secondary,
      #8d96a8
    );


  text-decoration: none;


  font-size: 13.5px;

  font-weight: 500;


  white-space: nowrap;


  padding: 10px 0;


  transition:
    color 160ms ease;
}


/* =========================================================
   ACTIVE LINE
   ========================================================= */

.nav-link::after {

  content: "";


  position: absolute;


  left: 0;

  bottom: 4px;


  width: 0;

  height: 1.5px;


  background:
    var(
      --accent-color,
      #3d8bfd
    );


  transition:
    width 260ms ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.nav-link:hover {

  color:
    var(
      --text-primary,
      #f4f6fa
    );
}


.nav-link:hover::after {

  width: 100%;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.nav-link.active {

  color:
    var(
      --accent-color,
      #3d8bfd
    );
}


.nav-link.active::after {

  width: 100%;
}


/* =========================================================
   RIGHT — HEADER ACTIONS
   ========================================================= */

.header-actions {

  grid-column: 3;

  justify-self: end;


  display: flex;

  align-items: center;

  justify-content: flex-end;


  gap: 14px;


  min-width: 0;


  white-space: nowrap;
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle {

  width: 38px;

  height: 38px;


  display: flex;

  align-items: center;

  justify-content: center;


  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );


  border-radius:
    var(
      --radius-sm,
      8px
    );


  background:
    transparent;


  color:
    var(
      --text-secondary,
      #8d96a8
    );


  cursor: pointer;


  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}


.theme-toggle-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;


  width: 16px;

  height: 16px;


  font-size: 17px;

  line-height: 1;
}


.theme-toggle svg {

  width: 16px;

  height: 16px;
}


.theme-toggle:hover {

  border-color:
    var(
      --accent-color,
      #3d8bfd
    );


  color:
    var(
      --text-primary,
      #f4f6fa
    );


  background:
    rgba(
      61,
      139,
      253,
      0.08
    );
}


/* =========================================================
   LET'S BUILD CTA
   ========================================================= */

.header-cta {

  min-height: 38px;


  display: inline-flex;

  align-items: center;

  justify-content: center;


  gap: 8px;


  padding: 0 18px;


  border:
    1px solid
    rgba(
      61,
      139,
      253,
      0.55
    );


  border-radius:
    var(
      --radius-sm,
      8px
    );


  background:
    transparent;


  color:
    var(
      --accent-color,
      #3d8bfd
    );


  text-decoration: none;


  font-family:
    var(
      --font-body,
      "Inter",
      sans-serif
    );


  font-size: 13px;

  font-weight: 500;


  letter-spacing: 0.01em;


  white-space: nowrap;


  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}


.header-cta:hover {

  background:
    rgba(
      61,
      139,
      253,
      0.14
    );


  border-color:
    var(
      --accent-color,
      #3d8bfd
    );


  box-shadow:
    0 0 20px
    rgba(
      61,
      139,
      253,
      0.12
    );
}


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

.header-cta-arrow {

  font-size: 14px;

  line-height: 1;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-toggle {

  width: 38px;

  height: 38px;


  display: none;


  flex-direction: column;

  align-items: center;

  justify-content: center;


  gap: 5px;


  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );


  border-radius:
    var(
      --radius-sm,
      8px
    );


  background:
    transparent;


  cursor: pointer;
}


/* =========================================================
   MOBILE MENU LINES
   ========================================================= */

.mobile-menu-toggle span {

  width: 16px;

  height: 1.5px;


  background:
    var(
      --text-primary,
      #f4f6fa
    );


  transition:
    transform 260ms ease,
    opacity 260ms ease;
}


/* =========================================================
   MOBILE MENU ACTIVE
   ========================================================= */

.mobile-menu-toggle.active
span:nth-child(1) {

  transform:
    translateY(6.5px)
    rotate(45deg);
}


.mobile-menu-toggle.active
span:nth-child(2) {

  opacity: 0;
}


.mobile-menu-toggle.active
span:nth-child(3) {

  transform:
    translateY(-6.5px)
    rotate(-45deg);
}


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

.mobile-navigation {

  display: none;


  position: absolute;


  top: 100%;

  left: 0;


  width: 100%;


  padding:
    18px 24px 26px;


  box-sizing: border-box;


  background:
    var(
      --header-bg-scrolled-current
    );


  box-shadow: none;


  border-top: none;

  border-bottom: none;


  backdrop-filter:
    blur(16px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(140%);
}


/* =========================================================
   MOBILE NAV ACTIVE
   ========================================================= */

.mobile-navigation.active {

  display: flex;

  flex-direction: column;

  gap: 2px;
}


/* =========================================================
   MOBILE NAV LINK
   ========================================================= */

.mobile-nav-link {

  display: block;


  padding:
    15px 4px;


  color:
    var(
      --text-secondary,
      #8d96a8
    );


  text-decoration: none;


  font-size: 14px;

  font-weight: 500;


  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );


  transition:
    color 160ms ease;
}


.mobile-nav-link:hover {

  color:
    var(
      --accent-color,
      #3d8bfd
    );
}


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

.mobile-nav-cta {

  margin-top: 16px;


  padding: 14px;


  text-align: center;


  border:
    1px solid
    rgba(
      61,
      139,
      253,
      0.4
    );


  border-radius:
    var(
      --radius-sm,
      8px
    );


  background:
    transparent;


  color:
    var(
      --accent-color,
      #3d8bfd
    );


  text-decoration: none;


  font-size: 13px;

  font-weight: 500;
}


/* =========================================================
   RESPONSIVE — 1250px
   ========================================================= */

@media (max-width: 1250px) {

  .header-container {

    grid-template-columns:
      minmax(230px, 1fr)
      auto
      minmax(230px, 1fr);


    column-gap: 20px;
  }


  .header-nav {

    gap: 23px;
  }


  .header-actions {

    gap: 10px;
  }


  .header-cta {

    padding: 0 14px;
  }
}


/* =========================================================
   RESPONSIVE — 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .header-nav {

    gap: 18px;
  }


  .nav-link {

    font-size: 12.5px;
  }
}


/* =========================================================
   RESPONSIVE — 980px
   ========================================================= */

@media (max-width: 980px) {

  .brand-tagline {

    display: none;
  }


  .header-container {

    grid-template-columns:
      1fr
      auto;


    min-height: 76px;
  }


  .header-logo {

    grid-column: 1;
  }


  .header-actions {

    grid-column: 2;
  }


  .header-nav {

    display: none;
  }


  .mobile-menu-toggle {

    display: flex;
  }
}


/* =========================================================
   RESPONSIVE — 600px
   ========================================================= */

@media (max-width: 600px) {

  .header-container {

    min-height: 68px;


    padding-left:
      1rem !important;


    padding-right:
      1rem !important;


    column-gap: 12px;
  }


  .header-logo {

    gap: 8px;
  }


  .header-logo-mark {

    width: 36px;

    height: 36px;
  }


  .header-logo-img {

    padding: 4px;
  }


  .brand-name {

    font-size: 12.5px;
  }


  .header-cta {

    display: none;
  }


  .theme-toggle {

    width: 36px;

    height: 36px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .header,
  .nav-link,
  .nav-link::after,
  .theme-toggle,
  .header-cta,
  .mobile-menu-toggle span {

    transition: none;
  }
}