/* ============================================================
   MCNEISH SOLUTION LLC — LAYOUT & NAVIGATION
   ============================================================ */

/* ─── LEFT-RAIL VERTICAL NAVIGATION ─────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;
  background: var(--steel);
  border-right: var(--border-copper);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-24) 0;
  overflow: hidden;
}

/* Logo mark in nav */
.site-nav__logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: var(--space-40);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-nav__logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Nav items container */
.site-nav__items {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
}

/* Individual nav item */
.nav-item {
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  overflow: hidden;
}

.nav-item__text {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transition: color var(--duration-mid) var(--ease-out-expo),
              transform var(--duration-mid) var(--ease-out-expo);
  white-space: nowrap;
  user-select: none;
}

.nav-item__fill {
  position: absolute;
  inset: 0;
  background: var(--copper-10);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--duration-mid) var(--ease-out-expo);
}

.nav-item__indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 24px;
  background: var(--copper);
  transition: transform var(--duration-mid) var(--ease-out-expo);
}

/* States */
.nav-item:hover .nav-item__text,
.nav-item.active .nav-item__text {
  color: var(--ivory);
}

.nav-item:hover .nav-item__fill,
.nav-item.active .nav-item__fill {
  transform: scaleY(1);
}

.nav-item.active .nav-item__indicator {
  transform: translateY(-50%) scaleY(1);
}

/* Nav bottom — contact CTA */
.site-nav__cta {
  margin-top: var(--space-32);
  flex-shrink: 0;
}

.nav-cta-btn {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
  border: var(--border-copper);
  padding: var(--space-16) var(--space-8);
  transition: background var(--duration-mid) var(--ease-out-expo),
              color var(--duration-mid) var(--ease-out-expo);
}

.nav-cta-btn:hover {
  background: var(--copper);
  color: var(--void);
}

/* Emergency indicator dot */
.site-nav__emergency {
  position: absolute;
  bottom: var(--space-16);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember), 0 0 16px rgba(255, 87, 51, 0.4);
  animation: pulse-emergency 2s ease-in-out infinite;
}

@keyframes pulse-emergency {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* ─── FLOATING TOP BAR (appears after scroll) ────────────── */
.top-bar {
  position: fixed;
  top: 0;
  left: var(--nav-width);
  right: 0;
  height: 56px;
  background: rgba(10, 11, 13, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: var(--border-copper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-40);
  z-index: calc(var(--z-nav) - 1);
  transform: translateY(-100%);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.top-bar.visible { transform: translateY(0); }

.top-bar__brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ivory);
}

.top-bar__brand span { color: var(--copper); }

.top-bar__cta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
  border: var(--border-copper);
  padding: var(--space-8) var(--space-20);
  transition: all var(--duration-mid) var(--ease-out-expo);
}

.top-bar__cta:hover {
  background: var(--copper);
  color: var(--void);
}

/* ─── MOBILE NAV PANEL ───────────────────────────────────── */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: var(--space-20);
  right: var(--space-20);
  z-index: calc(var(--z-nav) + 1);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: none;
}

.hamburger {
  width: 24px;
  height: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger__line {
  width: 100%;
  height: 1px;
  background: var(--ivory);
  transform-origin: center;
  transition: all var(--duration-mid) var(--ease-out-expo);
}

.hamburger__line:nth-child(2) { width: 65%; margin-left: auto; }

.mobile-nav-toggle.open .hamburger__line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.mobile-nav-toggle.open .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-nav-toggle.open .hamburger__line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  width: 100%;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--void);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-80) var(--space-40);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.mobile-nav.open { transform: translateX(0); }

.mobile-nav__item {
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-style: italic;
  font-weight: 700;
  color: var(--ivory-dim);
  padding: var(--space-8) 0;
  transition: color var(--duration-mid) var(--ease-out-expo),
              padding-left var(--duration-mid) var(--ease-out-expo);
  transform: translateY(100%);
}

.mobile-nav__link:hover {
  color: var(--copper);
  padding-left: var(--space-16);
}

.mobile-nav.open .mobile-nav__link {
  transform: translateY(0);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              color var(--duration-mid),
              padding-left var(--duration-mid);
}

.mobile-nav__cta {
  margin-top: var(--space-48);
}

.mobile-nav__emergency {
  margin-top: var(--space-32);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ember);
  letter-spacing: 0.1em;
}

/* ─── GRID SYSTEM ────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-24);
}

.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric grids */
.grid-60-40 { grid-template-columns: 60fr 40fr; }
.grid-40-60 { grid-template-columns: 40fr 60fr; }
.grid-70-30 { grid-template-columns: 70fr 30fr; }

/* ─── SECTION TRANSITIONS ────────────────────────────────── */

/* Section hairline divider */
.section-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper) 30%, var(--copper) 70%, transparent);
  opacity: 0.2;
  margin: 0;
}

/* Section label accent */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
}

.section-label::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--copper);
  flex-shrink: 0;
}

/* ─── FOOTER / ENDPLATE ──────────────────────────────────── */
.site-footer {
  background: var(--steel);
  border-top: var(--border-copper);
  padding: var(--space-80) 0 var(--space-32);
  position: relative;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-64);
  margin-bottom: var(--space-64);
}

.footer-brand__logo {
  margin-bottom: var(--space-24);
}

.footer-brand__tagline {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--bone);
  line-height: 1.5;
  margin-bottom: var(--space-24);
}

.footer-nav__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--space-20);
}

.footer-nav__link {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ash-light);
  margin-bottom: var(--space-12);
  transition: color var(--duration-fast) var(--ease-out-expo),
              padding-left var(--duration-fast) var(--ease-out-expo);
}

.footer-nav__link:hover {
  color: var(--ivory);
  padding-left: var(--space-8);
}

/* Footer compass rose */
.footer-compass {
  position: absolute;
  right: var(--space-64);
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  opacity: 0.08;
  animation: compass-rotate 60s linear infinite;
}

@keyframes compass-rotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Footer bottom strip — technical hatching */
.footer-bottom {
  border-top: var(--border-steel);
  padding-top: var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.footer-bottom__copy {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ash);
  letter-spacing: 0.1em;
}

.footer-bottom__hatching {
  flex: 1;
  height: 12px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--copper-10),
    var(--copper-10) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ─── RESPONSIVE BREAKPOINTS ─────────────────────────────── */

@media (max-width: 1024px) {
  .page-content { margin-left: 0; }
  .site-nav { display: none; }
  .top-bar { left: 0; }
  .mobile-nav-toggle { display: flex; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: clamp(3rem, 6vw, 5rem);
  }

  .container { padding: 0 var(--space-24); }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-60-40, .grid-40-60, .grid-70-30 { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .footer-compass { display: none; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-20); }
}

/* ─── LIGHT MODE LAYOUT OVERRIDES ────────────────────────── */
html.light-mode .top-bar {
  background: rgba(245, 239, 235, 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

html.light-mode .mobile-nav {
  background: var(--void);
}

html.light-mode .page-transition-wall {
  background: var(--copper);
}