/* ============================================================================
   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.

   It now carries the brand colour and stands as tall as both lines of type,
   which is what does the "highlight this" job that two sizes of grey text
   could not. A rule is the right instrument for it: it separates and it
   emphasises at the same time, and unlike a box or a background it cannot be
   mistaken for something you press.

   Faded rather than full strength - at 100% a yellow bar this tall competes
   with the CTA, and there should only ever be one loudest thing in a header. */
.czf-header__rule {
  flex: 0 0 auto;
  width: 2px;
  height: var(--space-32);
  border-radius: var(--radius-full);
  background: var(--c-shield);
  opacity: 0.55;
}

/* The tool's name carries the page. It is the product, not a caption on the
   logo, so it takes the ink and the objective sits under it in the quiet
   colour - the same relationship a headline has to a standfirst.

   Two lines and nothing else. Three attempts got here:

   A bordered plate read as a button - a rounded box with a background sitting
   next to a real button is a control, and a header must not contain something
   that looks clickable and is not.

   An eyebrow above the name read as clutter and as repetition: "The framework"
   stacked above "Car Protection Framework" says the same word twice in 9px
   type, in a bar that is 64px tall.

   What actually reads as premium in this category is restraint - wide tracking,
   real space, one accent, nothing decorative. So the hierarchy is built from
   type and space alone: the name uppercase and tracked in the display face
   (the treatment marques use on the car itself), the objective small and quiet
   underneath. The only ornament in the block is the hairline, and it is the
   one thing that carries the brand colour.

   Shrinks to its content rather than growing; the CTA's own auto margin holds
   the two ends of the bar apart. */
.czf-header__tool {
  flex: 0 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--space-4);
}

.czf-header__tool-name,
.czf-header__tool-sub {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uppercase, tracked, in the display face rather than mono. Mono said
   "technical readout"; this says "the name of the thing". */
.czf-header__tool-name {
  font-family: var(--font-display, inherit);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* The objective. Quiet on purpose - it is the answer to "what is this?", read
   once. Yellow here was tried and removed: with a yellow hairline to the left
   and a yellow CTA to the right, a third yellow made the bar restless. */
.czf-header__tool-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-3);
}

/* Below 900 the objective is the first thing to go - the name still says what
   this is, and two lines of mono in a narrow bar reads as clutter. */
@media (max-width: 899px) {
  .czf-header__tool-sub { display: none; }
}

/* Pushed hard right by its own margin now that the tool plate no longer grows
   to fill the bar. */
.czf-header__cta {
  flex: 0 0 auto;
  margin-inline-start: 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); }