/* ============================================================================
   Cenex — contact page hero + info card
   ----------------------------------------------------------------------------
   Loaded only by contact.html, after css/styles.css. Additive: nothing in the
   691 KB monolith is edited.

   Pairs with js/contact-hero.js (constellation field). The hero is deliberately
   spare — headline, one line of proof, two actions — because the animation is
   the visual, and every element in there is a rect the sky has to fade around.
   ========================================================================== */

/* ---- 1. Hero shell ------------------------------------------------------- */
.contact-hero {
  min-height: clamp(28rem, 62vh, 40rem);
  padding-top: calc(5rem + var(--space-12));
  padding-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The canvas sits above the grid/glow of .page-header__bg but below the copy.
   pointer-events stay off — js/contact-hero.js listens on the section itself,
   so the cursor still reaches links and buttons. */
.contact-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.contact-hero .page-header__container {
  z-index: 2;
}

/* ---- 1b. Quieten the competing layers ------------------------------------
   The header was running four textures at once: the constellation, the
   heroGlow gradient, an 80px grid at 0.7, and a 1px ctaScan line sweeping
   across at 0.34. For a field that is supposed to be the visual, that is
   noise. The scan line goes; the grid drops back to a hint of structure. */
.contact-hero .page-header__bg::after {
  display: none;
}

.contact-hero .page-header__bg-grid {
  opacity: 0.28;
}

/* ---- 1c. Depth ----------------------------------------------------------
   Two off-centre teal auras plus a vignette. The brighter aura sits under the
   right-hand field where the Southern Cross is placed, so that side of the
   composition carries weight instead of reading as dead space. */
.contact-hero__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 62% at 74% 40%, rgba(43, 203, 186, 0.14), transparent 62%),
    radial-gradient(56% 48% at 20% 82%, rgba(43, 203, 186, 0.06), transparent 70%),
    radial-gradient(125% 105% at 50% 46%, transparent 42%, rgba(0, 0, 0, 0.6) 100%);
}

/* The number is the whole point of the sentence; it was plain white. */
.contact-hero__accent {
  color: var(--color-accent);
}

/* The stars fade around anything marked [data-sky-protect], so the copy never
   competes with a moving point. Keep the measure short — a wide paragraph
   carves a wide hole in the field. */
.contact-hero .page-header__title {
  max-width: 20ch;
}

.contact-hero .page-header__description {
  max-width: 46ch;
}

/* ---- 2. Actions ---------------------------------------------------------- */
.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* The live stylesheet's AA remediation darkens .btn--secondary to #086a5f and
   restores bright teal only inside .section--dark (styles.css:27083-27084).
   This header is dark but is NOT .section--dark, so without this the secondary
   CTA lands at ~2.1:1 on #0a0a0a. */
.contact-hero .btn--secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-hero .btn--secondary:hover {
  color: var(--color-black);
  background: var(--color-accent);
}

.contact-hero .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* The active nav link is bright teal on a light nav bar in light theme =
   2.03:1 at 14px. Site-wide and pre-existing — the July AA remediation block
   (styles.css:26996-27084) never touches nav. Same fix as projects-uplift.css;
   both are page-scoped, so it wants folding into styles.css eventually. */
:root:not([data-theme="dark"]) .nav__link--active {
  color: #086a5f;
}

:root:not([data-theme="dark"]) .nav__link--active::after {
  background: #086a5f;
}

/* ---- 3. Proof line ------------------------------------------------------- */
/* Replaces the terminal's credential line, which rendered at 11px / 40% white
   = 3.82:1. This is 12.5px at 78% = 8.9:1 on the header. */
.contact-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(43, 203, 186, 0.18);
  /* Wider than the description: this is a single thin strip, so a long
     protected rect costs the sky very little, and 46ch forced a wrap. */
  max-width: 62ch;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.contact-hero__proof strong {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

.contact-hero__proof-sep {
  color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
  .contact-hero {
    min-height: 0;
  }
  .contact-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 3b. Form top spacing ------------------------------------------------
   The 48x1 teal rule is .contact-form::before, pinned at top:0. The first
   label ("Full Name") sat on that exact line — both at y=797 — so the accent
   crowded the text. Padding moves the fields down while the rule stays on the
   form's top edge, which also brings the first label closer to level with the
   info card's title. */
.contact-section .contact-form {
  padding-top: var(--space-5);
}

/* ---- 4. Contact information card ---------------------------------------- */
/* In dark theme the card was #0a0a0a on a #0a0a0a body — it stopped reading as
   a card entirely, leaving the two teal corner brackets floating. */
[data-theme="dark"] .contact-info {
  background: #111416;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-info__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 203, 186, 0.45);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-info__value a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.contact-info__value a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Credentials block at the foot of the card — the detail a procurement reader
   actually looks for, so it gets real contrast rather than 40% opacity. */
.contact-info__creds {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--space-2);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.contact-info__creds strong {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}