/* uinc_header.css
   Universal header + nav unification
   - PHSM geometry & social buttons
   - Index dropdown behavior
   - Shared warm gradient + accessible colors
*/

/* --------------------------------------------------
   0. Color Tokens – warm, non-harsh gradient
-------------------------------------------------- */

:root {
  /* Soft amber → brief brand orange → chocolate → deep cocoa */
  --header-bg-gradient: linear-gradient(
    90deg,
    #b45e18 0%,
    /* muted amber-brown, not bright */ #d8681a 18%,
    /* soft warm orange */ #ff6a13 30%,
    /* narrow band of brand orange */ #cc651c 52%,
    /* darker burnt orange */ #6d3a00 78%,
    /* cocoa */ #130800 100% /* deep cocoa-black */
  );

  /* Solid tone for compact / mobile header */
  --header-bg-solid: #6d3a00;

  --header-text: #fff8f0;
  --header-border: rgba(0, 0, 0, 0.4);

  /* Dropdown palette (dark panel, light text) */
  --header-dropdown-bg: rgba(24, 13, 5, 0.98);
  --header-dropdown-border: rgba(255, 166, 110, 0.45);
  --header-dropdown-text: #fbe9d9;
  --header-dropdown-hover-bg: rgba(255, 138, 70, 0.3);
  --header-dropdown-hover-text: #ffffff;
}

/* --------------------------------------------------
   1. Header Container (height + gradient)
-------------------------------------------------- */

header.header,
header.header.glass {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: var(--header-bg-gradient) !important;
  color: var(--header-text);

  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow: visible;
}

/* Sticky variant keeps the same background */
header.header.glass.sticky {
  background: var(--header-bg-gradient) !important;
}

/* Full-width header shell on all pages (INDEX + PHSM + HPM) */
header.header > .container,
header.header.glass > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: none !important; /* so zoomed-out INDEX isn’t narrower */
}

.header .header-inner {
  /* PHSM-style grid, applied everywhere */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 72px; /* base unified height */
  padding-block: 0.45rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
  overflow: visible;
}

/* --------------------------------------------------
   2. Logo & Social Icons (PHSM style, universal)
-------------------------------------------------- */

.header .logo,
.header .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--header-text);
}

.header .logo svg,
.header .navbar-brand svg,
.header .logo img,
.header .navbar-brand img,
img.logo-img {
  max-height: clamp(2.2rem, 3.2vw, 3rem);
  width: auto;
  display: block;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Let inline SVG text follow header color if using currentColor */
.header .logo svg path,
.header .navbar-brand svg path {
  fill: currentColor !important;
}

/* Black circular social buttons everywhere (from PHSM) */
.header .social-icons a,
.footer .footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
}

.header .social-icons a:hover,
.footer .footer-social a:hover {
  background: var(--orange, #ff6a13);
}

/* X icon sizing */
.header .social-icons a[aria-label="X (Twitter)"] i,
.footer .footer-social a[aria-label="Twitter"] svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Header action cluster */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* --------------------------------------------------
   3. Mobile toggle visibility / focus
-------------------------------------------------- */

.mobile-toggle,
.mnav-close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  color: var(--header-text);
}

.mobile-toggle:focus-visible,
.mnav-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffd8b0;
  border-radius: 10px;
}

/* --------------------------------------------------
   4. Nav text (all viewports)
-------------------------------------------------- */

.header .nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  text-align: center;
  align-items: stretch;
  overflow: visible;
}

.header .nav-item {
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--header-text);
  position: relative;
  cursor: default;
  user-select: none;
  text-transform: uppercase;
}

/* Base link styling */
.header .nav-item > a {
  display: inline-block;
  font-family: var(--font-heading, "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(0.92rem, 0.75rem + 0.35vw, 1.02rem);
  padding: 0.5rem 0;
  line-height: 1.1;
  color: var(--header-text);
  text-decoration: none;
}

.header .nav-item > a:hover,
.header .nav-item > a:focus {
  color: #ffe0c2;
}

/* --------------------------------------------------
   5. Desktop dropdown behavior (INDEX-style, global)
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Clean one-row layout */
  .header .nav-links {
    align-items: center;
    gap: 2rem;
  }

  /* Kill stray <br> in nav labels */
  .header .nav-links br {
    display: none !important;
  }

  .header .nav-item {
    padding: 0.75rem 0;
  }

  /* Caret on all has-dropdown levels (top + nested) */
  header.header.glass .has-dropdown::after {
    margin-left: 0.35rem;
    font-size: 0.8em;
    color: #ffe0c2;
  }

  /* Base dropdown panel (dark, INDEX style) */
  header.header.glass .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: 0.5rem 0;
    border-radius: 12px;
    background: var(--header-dropdown-bg) !important;
    border: 1px solid var(--header-dropdown-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
    z-index: 1200;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    text-align: left; /* NEW: ensure left-aligned text */
  }

  /* Nested dropdowns open to the right (multi-level like INDEX) */
  header.header.glass .dropdown .dropdown {
    top: 0;
    left: 100%;
    margin-left: 0.4rem;
    text-align: left; /* NEW: keep nested panels left-aligned */
  }

  /* Dropdown items – high contrast, capitalized + left-aligned */
  header.header.glass .dropdown-item {
    display: block;
    padding: 0.6rem 1rem;
    margin: 0;
    color: var(--header-dropdown-text) !important;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 0;
    font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    font-size: 0.95rem;
    text-transform: capitalize;
    text-align: left; /* NEW: all dropdown text to the left */
  }

  header.header.glass .dropdown-item:hover,
  header.header.glass .dropdown-item:focus {
    background: var(--header-dropdown-hover-bg) !important;
    color: var(--header-dropdown-hover-text) !important;
  }

  /* Show submenu on hover OR keyboard focus –
     works for top-level and nested .dropdown-item.has-dropdown */
  header.header.glass .has-dropdown:hover > .dropdown,
  header.header.glass .has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Ensure header always overlays hero sections */
  .header {
    z-index: 1000;
  }
}

/* --------------------------------------------------
   6. Accessibility Focus Rings
-------------------------------------------------- */

header.header a:focus-visible,
header.header button:focus-visible {
  outline: 2px solid #ffd8b0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------
   7. Mobile Color Treatment (overlay nav)
-------------------------------------------------- */

@media (max-width: 999px) {
  .header.glass {
    background: var(--header-bg-solid) !important;
  }

  #mobile-nav.mnav {
    background: rgba(24, 13, 5, 0.96);
    color: var(--header-text);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
  }

  .mnav-root a,
  .mnav-sub a {
    color: #f2e5d8;
  }

  .mnav-root a:hover,
  .mnav-sub a:hover {
    background: rgba(255, 150, 75, 0.22);
    color: #ffffff;
  }
}

/* --------------------------------------------------
   8. Cross-page header typography + spacing normalize
-------------------------------------------------- */

header.header,
header.header.glass {
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* Lock header inner height & kill weird margins */
.header .header-inner {
  min-height: 76px;
  padding-block: 0.55rem;
}

/* Make sure nav row isn’t adding extra vertical space */
.header .nav-links {
  margin: 0;
  align-items: center;
}

/* Reset nav item margins and unify vertical padding */
.header .nav-item,
.header .nav-item > a {
  margin: 0;
}

/* Final nav link typography, same everywhere */
.header .nav-item > a {
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.9rem, 0.82rem + 0.28vw, 1.05rem);
  line-height: 1.1;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* --------------------------------------------------
   9. Hard header height lock (INDEX / PHSM / HPM)
-------------------------------------------------- */

header.header,
header.header.glass,
header.header.glass.sticky {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop: enforce explicit header height via header-inner */
@media (min-width: 768px) {
  .header .header-inner {
    min-height: 80px;
    max-height: 80px; /* NEW: cap height so HPM can’t stretch */
    padding-block: 0.7rem;
    align-items: center;
  }

  .header .nav-item {
    padding-top: 0;
    padding-bottom: 0;
  }

  .header .nav-item > a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    line-height: 1.1;
  }
}

/* Mobile: slightly tighter but still unified */
@media (max-width: 767.98px) {
  .header .header-inner {
    min-height: 72px;
    max-height: none;
    padding-block: 0.5rem;
  }

  .header .nav-item > a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* --------------------------------------------------
   10. HPM page-specific safety net
   (handles weird tall header on hpm.html)
-------------------------------------------------- */

#page-hpm header.header.glass,
#page-hpm header.header.glass.sticky {
  height: auto !important;
}

#page-hpm .header .header-inner {
  min-height: 80px !important;
  max-height: 80px !important;
  padding-block: 0.6rem !important;
}

section#hero-standard {
  max-height: 80px;
  max-width: 2400px;
  margin: 0px 30px;
}