/* ==========================================================================
   The Measurement Lab — Layout
   Sticky nav, progress bar, containers, footer. Shared by every page.
   Lifted from the Claude Design output's inline styles; values preserved.
   Mobile rules land in the responsive pass — desktop values here are final.
   ========================================================================== */

/* --- Container -----------------------------------------------------------
   Width and gutter come from tokens so services.html can override both on
   :root without touching this rule. Home 1200/44, Services 1180/40 — a real
   per-page difference in the design, not drift. */
.tml-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Sticky header ------------------------------------------------------- */
.tml-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ui-nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ui-border-soft);
}

/* The header is fixed, so every page reserves its height to avoid the
   content jumping underneath it (addendum §5: no layout shift). */
.tml-header-spacer { height: calc(var(--nav-h) + var(--progress-h)); }

.tml-nav {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Wordmark lockup ---- */
.tml-lockup { display: flex; align-items: center; gap: 13px; }
.tml-lockup-text {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-regular);
  font-size: var(--fs-base);
  letter-spacing: 0.26em;
  color: var(--tml-purple);
  white-space: nowrap;
}

/* --- Hamburger -----------------------------------------------------------
   Hidden at desktop; mobile.css reveals it at ≤768px. Three bars morph into
   a cross when open. */
.tml-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* optical alignment with the container edge */
  background: none;
  border: 0;
  cursor: pointer;
}
.tml-nav-toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tml-purple);
  transition: background 0.12s ease;
}
.tml-nav-toggle-bars::before,
.tml-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--tml-purple);
  transition: transform 0.16s ease;
}
.tml-nav-toggle-bars::before { top: -7px; }
.tml-nav-toggle-bars::after  { top: 7px; }

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

/* --- Nav links ---- */
.tml-nav-links { display: flex; align-items: center; gap: 34px; }

.tml-nav-link {
  font-size: var(--fs-md);
  color: var(--ui-nav-link);
}
.tml-nav-link[aria-current="page"] {
  color: var(--tml-dark);
  font-weight: var(--weight-bold);
}
.tml-nav-link:hover { color: var(--tml-purple); }

/* --- Services dropdown ---------------------------------------------------
   The design drove this from component state (onmouseenter/onmouseleave).
   In vanilla it is hover + focus-within, so it opens for keyboard users too,
   with JS only maintaining aria-expanded. */
.tml-nav-svc { position: relative; }

.tml-nav-svc-toggle {
  font-size: var(--fs-md);
  color: var(--ui-nav-link);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tml-nav-svc-toggle:hover { color: var(--tml-purple); }
.tml-nav-svc-caret { font-size: var(--fs-3xs); color: var(--tml-purple-mid); }

.tml-nav-menu {
  position: absolute;
  top: 30px;
  right: 0;
  width: 320px;
  background: var(--tml-white);
  border: 1px solid var(--ui-border-menu);
  border-radius: 10px;
  box-shadow: var(--ui-shadow-menu);
  padding: var(--space-2);
  display: none;
}
.tml-nav-svc:hover .tml-nav-menu,
.tml-nav-svc:focus-within .tml-nav-menu { display: block; }

.tml-nav-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 7px;
  font-weight: var(--weight-bold);
  font-size: var(--fs-base);
  color: var(--tml-purple);
}
.tml-nav-menu a:hover { background: var(--tml-purple-light); }

/* --- Buttons -------------------------------------------------------------
   --cta exists because the design exposed accent as an editor prop. It is
   fixed to terracotta here per the locked accent system: terracotta is the
   spotlight (action), purple is structure. */
.tml-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
  color: var(--tml-white);
  background: var(--cta);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.tml-btn:hover { background: #b96a49; }

.tml-btn-lg  { font-size: var(--fs-lg);   padding: 15px 28px; }

/* Inverted CTA: white on purple, for the close band on Home and About.
   Lives here rather than in home.css because more than one page uses it —
   about.html does not load home.css, so it was rendering unstyled there.
   The section is already purple, so a terracotta button would put the accent
   on a field that is itself the emphasis: one hero accent per viewport. */
.tml-close-cta {
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
  color: var(--tml-purple);
  background: var(--tml-white);
  padding: 16px 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.tml-close-cta:hover { background: var(--tml-purple-light); }

/* Text-link CTA with arrow */
.tml-link-arrow {
  font-weight: var(--weight-bold);
  color: var(--tml-purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tml-link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Scroll progress bar -------------------------------------------------
   Width is driven by JS on scroll. Height is reserved by the spacer above so
   it never shifts layout. */
.tml-progress-track {
  height: var(--progress-h);
  background: var(--ui-progress-track);
}
.tml-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--cta);
  transition: width 0.08s linear;
}

/* --- Sections ------------------------------------------------------------
   Per-section vertical padding is set on the section itself in home.css,
   preserving the design's per-section values. */
.tml-section-purple {
  background: var(--tml-purple);
  color: var(--tml-white);
}
.tml-section-grey { background: var(--tml-grey); }

/* --- Eyebrow -------------------------------------------------------------
   Approved strings live in Copy v2. */
.tml-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tml-purple-mid);
}

/* --- Footer -------------------------------------------------------------- */
.tml-footer {
  background: var(--tml-white);
  border-top: 1px solid var(--ui-border-soft);
  padding: 52px 0 44px;
}
.tml-footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: start;
}
.tml-footer-brand { max-width: 560px; }
.tml-footer-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tml-footer-lockup-text {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-regular);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  color: var(--tml-purple);
}
.tml-footer-descriptor {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ui-text-faint);
}
.tml-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-base);
  text-align: right;
}
.tml-footer-links a { color: var(--ui-text); font-weight: var(--weight-bold); }
.tml-footer-links a:hover { color: var(--tml-purple); }
.tml-footer-legal {
  margin-top: 28px;
  font-size: var(--fs-xs);
  color: var(--ui-text-ghost);
}
/* Privacy link sits in the copyright line — the most subordinate slot in the
   footer. Inherits the ghost tone so it reads as fine print, purple on hover. */
.tml-footer-legal a { color: inherit; }
.tml-footer-legal a:hover { color: var(--tml-purple); }
.tml-footer-legal-sep { margin: 0 4px; }