/* ============================================================================
   Marc Infotech — layout.css
   ----------------------------------------------------------------------------
   Page-level structure: container widths, header, footer, mobile menu.

   Load order: after base.css and components.css.

   The header is sticky with a transparent → solid transition. JS in
   /js/header.js adds .site-header--solid once the user scrolls past 8px.
   The footer is a 3-column grid on desktop and stacks on mobile.

   No design tokens are redefined here — only composition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-8); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-12); } }

.container--narrow {
  max-width: var(--container-content);
}

.container--bleed {
  /* Used when a section needs to break out of container padding
     (e.g. a full-bleed background tint with contained content). */
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Section spacing — vertical rhythm between page sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-16);
}
@media (min-width: 768px)  { .section { padding-block: var(--space-20); } }
@media (min-width: 1024px) { .section { padding-block: var(--space-24); } }

.section--tight   { padding-block: var(--space-12); }
.section--hero    { padding-block: var(--space-16) var(--space-20); }
@media (min-width: 1024px) {
  .section--hero { padding-block: var(--space-24) var(--space-32); }
}

.section--surface-1 { background-color: var(--color-surface-1); }
.section--surface-2 { background-color: var(--color-surface-2); }
.section--deep      { background-color: var(--color-bg-deep); }

/* --------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------
   - Sticky, top of viewport
   - Transparent at top of page; gains .site-header--solid after 8px scroll
   - Logo on the left (typeset wordmark, no SVG mark in v1)
   - Nav + CTA on the right
   - Mobile: hamburger toggles .site-nav--open
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--motion-base),
    border-color var(--motion-base),
    backdrop-filter var(--motion-base);
}

.site-header--solid {
  background-color: rgba(11, 11, 13, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--color-border);
}
[data-theme="light"] .site-header--solid {
  background-color: rgba(250, 250, 247, 0.85);
}

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

/* Wordmark logo — typeset, no SVG mark in v1 */
.site-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25ch;
  white-space: nowrap;
}
.site-logo:hover { color: var(--color-accent); }
.site-logo__accent {
  /* Subtle visual mark without a logo file — accent-coloured dot after the name */
  color: var(--color-accent);
  font-weight: var(--fw-regular);
}

/* Primary nav — hidden on mobile, replaced by hamburger drawer */
.site-nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
}
.site-nav__link {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--motion-fast);
  position: relative;
  padding-block: var(--space-2);
}
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="page"] {
  color: var(--color-text);
}
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background-color: var(--color-accent);
}

.site-header__actions > .btn {
  display: none;
}

@media (min-width: 640px) {
  .site-header__actions > .btn { display: inline-flex; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile menu toggle — visible only below 1024px */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color var(--motion-fast);
}
.site-nav-toggle:hover { background-color: var(--color-surface-1); }
.site-nav-toggle__bars,
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  position: relative;
}
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav-toggle__bars::before { top: -6px; }
.site-nav-toggle__bars::after  { top:  6px; }
/* When open, transform into an X */
[aria-expanded="true"] .site-nav-toggle__bars { background-color: transparent; }
[aria-expanded="true"] .site-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .site-nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .site-nav-toggle { display: none; }
}

/* Mobile drawer — full-width panel that slides down under the header */
.site-nav--open {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6);
  box-shadow: var(--shadow-2);
}
.site-nav--open .site-nav__link {
  font-size: var(--fs-body);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.site-nav--open .site-nav__link:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   Hero composition
   --------------------------------------------------------------------------
   Asymmetric, left-aligned, 12-col grid on desktop. Text occupies cols 1-7,
   terminal panel occupies cols 8-12. On mobile, stacks (text first, then
   terminal). NO center stack.
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-16);
  }
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
  max-width: 18ch;     /* keep measure tight on the hero headline */
}
@media (min-width: 1024px) {
  .hero__title { max-width: 16ch; }
}

.hero__subhead {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.hero__media {
  /* Defensive: the panel itself controls width via .terminal */
  min-width: 0;
}
@media (max-width: 1023px) {
  .hero__media { order: 2; }
}

/* --------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------
   Three columns on desktop:
     1. Sitemap (pages)
     2. Company (LinkedIn, email, copyright, ABN)
     3. Tagline + city (Melbourne, AU)
   Stacks on mobile.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

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

.site-footer__col-title {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__list a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--motion-fast);
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible { color: var(--color-text); }

.site-footer__brand {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.site-footer__tagline {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: 36ch;
}
.site-footer__city {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.site-footer__abn {
  font-family: var(--font-mono);
}

/* Skip link — accessibility. Hidden until focused. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  text-decoration: none;
  z-index: var(--z-overlay);
  transition: top var(--motion-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);
}