/* AlphaTango customisations layered on top of the Lovable build (see tools/build.py). */

/* Emblem to the left of the ALPHATANGO wordmark in the top-left header, on every page.
   Spacing goes on the emblem (margin), not the link (gap): "Alpha" and "Tango" are
   separate flex items and must stay touching, since the wordmark is always one word. */
header a[href="/"].font-display {
  display: inline-flex;
  align-items: center;
}
header a[href="/"].font-display::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 2.6em;
  margin-right: 0.6rem;
  background: url(/assets/at-logo-mark.png) center / contain no-repeat;
}

/* Narrow phones: smaller emblem so the wordmark doesn't crowd the header button. */
@media (max-width: 480px) {
  header a[href="/"].font-display::before { width: 1.2em; height: 2em; margin-right: 0.4rem; }
}

/* Header links to the public Use Cases + Capacity Planner section (inserted by tools/build.py
   patch_header_nav as the first child of the header row; `order` puts them just left of the
   right-hand button/link while the logo stays far left). */
header .at-nav {
  order: 1;
  margin-left: auto;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
header .at-nav ~ :last-child { order: 2; }
header .at-nav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s, color .15s;
}
header .at-nav a:hover { opacity: 1; color: var(--signal); }

/* Phones: no room next to the logo and button, so the links move to a row under the header bar. */
@media (max-width: 767px) {
  header > div:has(> .at-nav) { flex-wrap: wrap; height: auto; padding-top: 1rem; padding-bottom: 0.85rem; row-gap: 0.7rem; }
  header .at-nav { order: 3; flex-basis: 100%; margin: 0; gap: 1.5rem; }
  /* Home page: the header floats over the hero, which reserves 5rem for it; add room for the link row. */
  header.absolute:has(.at-nav) + section { padding-top: 7.5rem; }
}