/* ==========================================================================
   Iron Acre — Layout: container, header, navigation, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container and section rhythm
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-inline-size: var(--container-wide);
}

.container--narrow {
  max-inline-size: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

/* Subtle tonal shift between adjacent sections. Deliberately close to the
   page background so the page reads as one dark surface, not as stripes.
   The hairlines articulate where a band begins and ends — without them the
   tint is too quiet to register and sections blur into one long void. */
.section--alt {
  background-color: var(--c-surface);
  border-block: 1px solid var(--c-border);
}

/* Heroes already close with a hairline; avoid doubling it. */
.page-hero + .section--alt,
.hero + .section--alt {
  border-block-start: none;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: 62ch;
  margin-block-end: var(--space-12);
}

/* --------------------------------------------------------------------------
   Grid
   Mobile-first: one column, then two, then three.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid {
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Header
   Fixed over the hero, then picks up a solid background once scrolled.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    block-size var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  background-color: rgba(7, 9, 6, 0.88);
  border-block-end-color: var(--c-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* While the drawer is open the bar must stay opaque regardless of scroll. */
.site-header.is-open {
  background-color: var(--c-void);
  border-block-end-color: var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  inline-size: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* The wordmark is shorter than a comfortable target, so the link is padded
     out to 44px. The header is taller than that, so nothing moves. */
  min-block-size: 44px;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.brand__logo {
  block-size: 34px;
  inline-size: auto;
}

/* Real brand lockup: the circular IA mark from the supplied logo artwork,
   paired with a typeset wordmark. The mark is the real logo (not a CSS
   recreation); the text keeps the name legible at header scale, where the
   full square lockup's own wordmark would be unreadably small. */
.brand__mark {
  flex: none;
  block-size: 38px;
  inline-size: auto;
}

.brand__word {
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--space-3);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__sub {
  color: var(--c-text-faint);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
}

/* --------------------------------------------------------------------------
   Primary navigation — desktop
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-inline-start: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  /* Keeps the desktop nav links at a 44px touch target for tablets, which get
     this layout from 900px up. */
  padding-block: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: var(--c-lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover {
  color: var(--c-lime);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link[aria-current="page"] {
  color: var(--c-lime);
}

/* Tablet and small-laptop band. The inline row starts at 900px, where the full
   "Permanent Lighting" label plus the CTA and the wordmark would otherwise run
   past the container's gutter. Tightening the gaps and the logo here buys back
   enough room to keep every label intact instead of abbreviating one of them. */
@media (min-width: 900px) and (max-width: 1199px) {
  .nav {
    gap: var(--space-6);
  }

  .nav__list {
    gap: var(--space-4);
  }

  .brand__logo {
    block-size: 30px;
  }

  .brand__mark {
    block-size: 32px;
  }

  .brand__word {
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   Hamburger toggle — hidden on desktop
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  margin-inline-end: calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  color: var(--c-text);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  inline-size: 24px;
  block-size: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 24px;
  block-size: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-toggle__bars::before {
  inset-block-start: -7px;
}

.nav-toggle__bars::after {
  inset-block-start: 7px;
}

/* Bars collapse into an X when expanded. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile drawer — below 900px
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    block-size: calc(100vh - var(--header-h));
    block-size: calc(100svh - var(--header-h));
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-8);
    margin: 0;
    padding: var(--space-8) var(--gutter) var(--space-12);
    background-color: var(--c-void);
    border-block-start: 1px solid var(--c-border);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Hidden by default; `visibility` keeps it out of the tab order. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li + li {
    border-block-start: 1px solid var(--c-border);
  }

  .nav__link {
    /* Comfortable thumb target, well above the 44px minimum. */
    display: flex;
    align-items: center;
    min-block-size: 60px;
    padding-block: var(--space-4);
    font-size: var(--fs-xl);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta {
    margin-block-start: auto;
  }

  /* The drawer CTA is a primary thumb target, so it overrides .btn--sm. */
  .nav__cta .btn {
    inline-size: 100%;
    min-block-size: 56px;
    font-size: var(--fs-sm);
  }
}

@media (min-width: 900px) {
  .site-header {
    block-size: var(--header-h-lg);
  }

  .brand__logo {
    block-size: 38px;
  }

  /* The drawer-only wrapper collapses into the inline row on desktop. */
  .nav {
    visibility: visible;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-block-start: 1px solid var(--c-border);
  background-color: var(--c-surface);
  padding-block: var(--space-16) var(--space-8);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--space-12);
  }

  /* Columns remove themselves when the business facts behind them are not
     confirmed (see applySiteConfig). Without this the grid would hold an empty
     track open and the footer would look lopsided rather than intentional.
     With a single column left, it sits against the right edge and reads as a
     deliberate two-part footer. */
  .site-footer__grid[data-footer-cols='1'] {
    grid-template-columns: 1fr auto;
  }

  .site-footer__grid[data-footer-cols='0'] {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .site-footer__grid[data-footer-cols='0'] {
    grid-template-columns: 1fr;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

/* The full square logo artwork, keyed to transparency. Sized as a quiet
   plate rather than a banner. */
.site-footer__logo {
  inline-size: 132px;
  block-size: auto;
}

.site-footer__tagline {
  color: var(--c-text-mute);
  max-inline-size: 42ch;
  font-size: var(--fs-sm);
}

.footer-col__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-block-end: var(--space-4);
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list a {
  display: inline-block;
  min-block-size: 24px;
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-list a:hover {
  color: var(--c-lime);
}

/* Two icon-only links under the contact rows. Deliberately small and low
   contrast: the footer's job is the phone number and the quote link, and a
   social row that competes with those is a downgrade. They read as part of the
   contact column rather than as a section of their own. */
.social-list {
  display: flex;
  gap: var(--space-1);
  /* Sits closer to the rows above than the columns sit to each other, so it
     reads as a continuation of Contact rather than a new block. */
  margin: var(--space-4) 0 0;
  /* The 44px hit areas carry padding the glyphs do not, so pulling the row
     back by half that difference lines the first icon up with the text above
     it instead of leaving it visibly indented. */
  margin-inline-start: -12px;
  padding: 0;
  list-style: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Full 44px touch target on every viewport; the glyph inside stays 20px. */
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  color: var(--c-text-mute);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.social-link:hover {
  color: var(--c-lime);
  background-color: var(--c-surface-2);
}

/* Stroked to match the button icons, a little thinner because these glyphs
   carry an outer box the button icons do not and 2px closes up the counters. */
.social-link__icon {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-border);
  color: var(--c-text-faint);
  font-size: var(--fs-xs);
}