/* ============================================================================
   Purpose: Site header and the shared button. Tokens only.

   The header sits at the top of the page and scrolls away with it. Not sticky:
   on a single-goal page a persistent bar is a permanent invitation to leave,
   and it steals height from the diagnostic on short screens.
   ========================================================================= */

.czf-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-sticky);
}

/* On small screens the hero no longer fills the viewport, so an absolutely
   positioned header can end up scrolled past before it is ever read. Below
   768 it becomes part of the flow with its own background. */
@media (max-width: 767px) {
  .czf-header {
    position: relative;
    background: rgba(6, 7, 8, 0.72);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-line);
  }
}

.czf-header__in {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-20);
}

.czf-header__brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.czf-header__logo {
  height: var(--space-24);
  width: auto;
}

/* A hairline between the mark and the tool name, so the tool reads as a
   product OF CarzSpa rather than as part of the logo. */
.czf-header__rule {
  flex: 0 0 auto;
  width: 1px;
  height: var(--space-20);
  background: var(--c-line-2);
}

.czf-header__tool {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}

.czf-header__cta { flex: 0 0 auto; }

/* Below 600 the tool name is dropped for width. It was also the only element
   with flex-grow, so without it the mark and the action bunched up on the left
   and the bar read as unfinished. The two ends push apart instead: mark hard
   left, action hard right, both on the same optical centre line. */
@media (max-width: 599px) {
  .czf-header__in {
    gap: var(--space-12);
    padding-block: var(--space-16);
    justify-content: space-between;
  }
  .czf-header__rule,
  .czf-header__tool  { display: none; }
  .czf-header__logo  { height: var(--space-20); }
  .czf-header__cta   { margin-inline-start: auto; }
}

/* ============================================================================
   Buttons - one component, three weights. Squared off; this is an instrument.
   ========================================================================= */

.czf-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}

.czf-btn:active { transform: translateY(1px); }

/* Primary - gold. Exactly one of these is visible at a time. */
.czf-btn--primary {
  background: var(--c-shield);
  color: var(--c-ink-inv);
  box-shadow: var(--glow-shield-soft);
}

.czf-btn--primary:hover {
  background: var(--c-shield-hi);
  color: var(--c-ink-inv);
}

/* A sheen crossing the face on hover.
 *
 * `--grad-sheen` had been in the design system since the start wired to
 * nothing. It is exactly this: a raking highlight, the kind that travels
 * across a lacquered panel when you move past it. On a solid-filled button it
 * reads as the surface catching the light rather than as a UI animation - so
 * it belongs to both filled weights, gold and WhatsApp, and to neither ghost.
 *
 * Transform only, and a single pass on hover - no loop.
 *
 * z-index -1 inside the button's own stacking context, NOT a raised label. A
 * button's label is usually a bare text node, and a text node cannot be given
 * a z-index, so lifting the label is not available. Dropping the sheen instead
 * works because a negative-index child paints above the element's background
 * but below its inline content, which is precisely the layer a highlight on a
 * surface belongs in. `isolation` keeps the -1 from escaping behind the button
 * altogether. */
.czf-btn--primary::before,
.czf-btn--wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-sheen);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.czf-btn--primary:hover::before,
.czf-btn--wa:hover::before { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .czf-btn--primary::before,
  .czf-btn--wa::before { display: none; }
}

/* WhatsApp.
 *
 * Stands on its own rather than layering over --primary, because the gold
 * primary is now the PDF button and "exactly one --primary at a time" has to
 * keep meaning something. It carries the same weight as a primary - solid
 * fill, dark label - in WhatsApp's own green. */
.czf-btn--wa {
  background: var(--c-whatsapp);
  color: var(--c-ink-inv);
}

.czf-btn--wa:hover { background: var(--c-whatsapp-hi); color: var(--c-ink-inv); }

/* Icons.
   Sized in `em` so they track the label rather than a fixed pixel value - the
   ghost buttons run at a smaller font size than the primary and a 16px glyph
   would be oversized on them. `flex: 0 0 auto` stops a long label squashing
   the glyph, which is what happens by default in a flex row. */
.czf-btn__icon {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  /* base.css sets `svg { max-width: 100% }` for content images. On a glyph in
     a tight button that clamps the icon to whatever space is left over and it
     collapses. It has a fixed size on purpose. */
  max-width: none;
  margin-inline-start: calc(var(--space-4) * -1);
}

/* Ghost - the header action and any secondary step. */
.czf-btn--ghost {
  background: transparent;
  border-color: var(--c-line-2);
  color: var(--c-ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-8) var(--space-16);
}

.czf-btn--ghost:hover {
  border-color: var(--c-shield);
  color: var(--c-shield);
}

.czf-btn--lg {
  padding: var(--space-16) var(--space-32);
  font-size: var(--fs-lead);
}

.czf-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ============================================================================
   Footer - one quiet strip. Every link here leaves the page, so there are as
   few as the law and the brand allow.
   ========================================================================= */

.czf-footer {
  position: relative;
  z-index: var(--z-raised);
  /* No top margin. The section above already carries the page's vertical
     rhythm as its own padding; adding a margin here stacked two gaps and left
     a hole between the form and the footer. */
  padding-block: var(--space-48);
  border-top: 1px solid var(--c-line);
  background: rgba(6, 7, 8, 0.72);
  backdrop-filter: blur(10px);
}

.czf-footer__in {
  display: grid;
  gap: var(--space-24);
  align-items: center;
}

@media (min-width: 900px) {
  .czf-footer__in {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-48);
    row-gap: var(--space-16);
  }
  .czf-footer__nav   { justify-self: end; }
  .czf-footer__legal { grid-column: 1 / -1; }
  .czf-footer__fine  { grid-column: 1 / -1; }
}

.czf-footer__brand { display: block; line-height: 0; }
.czf-footer__logo  { height: var(--space-24); width: auto; opacity: 0.85; }

.czf-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
}

.czf-footer__nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-decoration: none;
}

.czf-footer__nav a:hover { color: var(--c-shield); }

.czf-footer__legal,
.czf-footer__fine {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--c-ink-3);
}

.czf-footer__fine { max-width: var(--measure); line-height: var(--lh-normal); }