/* ============================================================================
   MCT CHEMICALS — WEBSITE 2.0
   FILE: site-chrome.css  —  responsive utility bar + primary nav + mobile menu
   ----------------------------------------------------------------------------
   Replaces the demo's inline-styled header (which wrapped badly on mobile).
   Desktop: full horizontal nav. <=900px: hamburger -> slide-down panel.
   ========================================================================== */

/* ---------- utility bar ---------- */
.util {
  background: var(--c-ink-900, #0A1622); color: var(--c-slate-300, #C3CEDA);
  font-size: var(--type-small);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.util__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; gap: var(--space-4); flex-wrap: wrap;
}
.util__identity { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.util__dot { opacity: .4; }
.util__contact { display: flex; align-items: center; gap: var(--space-4); }
.util__contact a { color: inherit; }
.util__contact a.is-accent { color: var(--accent); font-weight: 600; }
/* on small screens, keep only the essentials on one line */
@media (max-width: 720px) {
  .util__identity .util__dot, .util__identity span:nth-child(n+3) { display: none; }
  .util__contact a:not(.is-accent):not([href^="tel"]) { display: none; }
}

/* ---------- primary header ---------- */
.site-header {
  background: var(--c-ink-800, #0F2233); color: var(--text-on-dark, #F4F7FA);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 40;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: var(--space-5);
}
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand img { display: block; height: 40px; width: auto; aspect-ratio: 1451 / 915; }
.brand strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text-on-dark); }
.brand span { font-size: var(--type-small); color: var(--c-slate-400); }

.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav > .btn { display: none; } /* in-nav CTA only shows in mobile panel */
.site-nav a { color: var(--text-on-dark); position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--accent); transition: right var(--dur-fast, .15s) var(--ease-standard, ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }

.site-header__cta { flex: none; }

/* hamburger — hidden on desktop */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; color: var(--text-on-dark); border-radius: var(--radius-sm);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .25s var(--ease-standard, ease), opacity .2s ease;
  margin-inline: auto;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- mobile layout ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-header__cta { display: none; } /* moves into the panel */

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-ink-800, #0F2233);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-2) var(--gutter) var(--space-4);
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.4));
  }
  .site-nav.is-open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
  .site-nav a { padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .site-nav a::after { display: none; }
  .site-nav > .btn { display: flex; margin-top: var(--space-3); width: 100%; }
}