/*
  ARCLO V2 — LAYOUT
  Header, primary navigation, mobile menu, footer.
  Shared across index.html and work.html.
*/

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* Note: intentionally no backdrop-filter here. A filter/backdrop-filter
   on this element would create a CSS containing block for descendant
   position:fixed elements, trapping the mobile nav overlay inside the
   header's own (short) box instead of letting it cover the viewport. */

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(8, 31, 59, 0.02), var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

/* Wordmark: the Arclo icon (see assets/brand/arclo-mark.svg) plus the
   text, as one inline lockup. Inline SVG rather than <img src="...">
   so the icon can use fill="currentColor" and follow .wordmark's own
   color — including the dark-section override below — without a
   separate white/navy file variant. .wordmark__icon is sized in `em`
   so it scales automatically with every font-size override already
   applied to .wordmark elsewhere (e.g. .site-footer__brand .wordmark). */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  flex-shrink: 0;
}

.wordmark__icon {
  width: 0.56em;
  height: 0.56em;
  flex-shrink: 0;
}

.section--dark .wordmark,
.section--deep .wordmark {
  color: var(--color-on-dark);
}

/* The footer wordmark uses a larger font-size (see
   .site-footer__brand .wordmark below), which made the em-sized icon
   scale up with it and read too large next to the small tagline
   underneath. Pinned to a smaller ratio here instead of scaling with
   the text. */
.site-footer__brand .wordmark__icon {
  width: 0.4em;
  height: 0.4em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.primary-nav__link {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink-soft);
  padding-block: var(--space-2);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--duration-base) var(--ease-spring);
}

.primary-nav__link:hover {
  color: var(--color-ink);
}

.primary-nav__link:hover::after {
  right: 0;
}

/* ---------------------------------------------------------------
   Services nav dropdown
   Desktop: floating panel, opens on hover/focus/click, closes on a
   short delay so the cursor can travel from trigger to panel.
   Mobile (see @media below): becomes an inline accordion instead.
--------------------------------------------------------------- */

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.nav-dropdown__chevron {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-spring);
}

.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease,
    visibility 180ms ease;
  z-index: var(--z-overlay);
}

.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__item {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: var(--color-bg-alt);
}

.nav-dropdown__item-title {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
}

.nav-dropdown__item-desc {
  display: block;
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
  margin-top: 1px;
}

.nav-dropdown__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) var(--space-2);
}

.nav-dropdown__item--overview .nav-dropdown__item-title {
  font-weight: 500;
  color: var(--color-ink-soft);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-spring),
    opacity var(--duration-base) var(--ease-spring),
    top var(--duration-base) var(--ease-spring);
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}

.nav-toggle__bars span:nth-child(2) {
  top: 6px;
}

.nav-toggle__bars span:nth-child(3) {
  top: 12px;
}

.nav-open .nav-toggle__bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-open .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle__bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.nav-open {
  overflow: hidden;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-bg);
    flex-direction: column;
    /* flex-start, not center: centering on the container competes
       with the child's margin:auto below and, when content overflows
       a short viewport, clips the overflow above the scrollable area
       where overflow-y:auto can never reach it (scrollTop can't go
       negative). flex-start + the list's own margin:auto gives the
       same centered look while it fits, and scrolls correctly once
       it doesn't. */
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--space-9) var(--container-pad-x);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .nav-open .primary-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
  }

  .primary-nav__link {
    font-size: var(--text-h3);
    font-family: var(--font-display);
    font-weight: 500;
  }

  .primary-nav .btn {
    align-self: flex-start;
  }

  /* Services becomes an inline accordion instead of a floating panel */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown__panel {
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    max-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    transition: max-height 250ms ease;
  }

  /* Same specificity as the desktop open-state rule above
     (.nav-dropdown.is-open .nav-dropdown__panel), which still sets
     transform: translateX(-50%) translateY(0) — the mobile reset
     above this block only targets the plain .nav-dropdown__panel
     selector (lower specificity), so without repeating the compound
     selector here that desktop transform kept winning and shifted
     the whole open panel (and every service link in it) off-screen
     to the left by half its own now-100%-wide box. */
  .nav-dropdown.is-open .nav-dropdown__panel {
    max-height: 480px;
    padding-top: var(--space-4);
    transform: none;
  }

  .nav-dropdown__item {
    padding: var(--space-3) 0;
  }

  .nav-dropdown__divider {
    margin-inline: 0;
  }
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */

.site-footer {
  background: var(--color-bg-dark-deep);
  color: var(--color-on-dark);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

.site-footer__brand .wordmark {
  color: var(--color-on-dark);
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
}

.site-footer__tagline {
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
  max-width: 26ch;
}

.site-footer__heading {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-4);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__list a {
  font-size: var(--text-small);
  color: var(--color-on-dark-soft);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__list a:hover {
  color: var(--color-on-dark);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-on-dark);
  font-size: var(--text-micro);
  color: var(--color-on-dark-muted);
}

@media (max-width: 760px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-7);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}