/* ---------------------------------------------------------------------------
 * va-fixes.css
 *
 * Hand written rules that cannot live in the Tailwind source, because this
 * host has no node toolchain and assets/css/app.css cannot be recompiled.
 * Loaded right after app.css so it always wins. Keep it small and commented.
 * ------------------------------------------------------------------------- */

/* Heroes used to be locked to a fixed viewport height with overflow:hidden,
 * so a headline that grew past that height was silently clipped under the
 * fixed header (home page H1 lost its first line). The viewport height now
 * acts as a minimum and the section grows when the copy needs more room, and
 * the content column reserves the header height so nothing hides behind it. */

.va-hero[aria-label="Hero"],
.va-hero-wrap > .va-hero {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
}

.va-hero[aria-label="Hero"] > .va-container,
.va-hero-wrap > .va-hero > .va-container {
  height: auto;
  flex: 1 1 auto;
  padding-top: 6rem;
}

/* clamp() reproduces the original h-[Nvh] + min-h + max-h sizing exactly,
 * while height:auto above lets the section outgrow it when the copy needs to. */
.va-hero[aria-label="Hero"] { min-height: clamp(640px, 88vh, 920px); }
.va-hero-wrap > .va-hero:not([aria-label="Hero"]) { min-height: clamp(560px, 78vh, 820px); }

@media (min-width: 768px) {
  .va-hero[aria-label="Hero"] { min-height: clamp(720px, 88vh, 920px); }
}

@media (min-width: 1024px) {
  .va-hero[aria-label="Hero"] > .va-container,
  .va-hero-wrap > .va-hero > .va-container { padding-top: 7rem; }
}

/* Home hero also carries the offer card on wide screens. Its display headline
 * is set to clamp(2.6rem, 8vw, 7rem), which needs the full container width, so
 * it is capped while the card is holding the right rail. */
@media (min-width: 1024px) and (min-height: 720px) {
  .va-hero-wrap > .va-hero[aria-label="Hero"] h1 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
}

/* The floating contact launcher now sits bottom-left, where the home hero puts
 * its award badges. Extra bottom padding keeps the badge row clear of it. */
@media (min-width: 1024px) {
  .va-hero-wrap > .va-hero[aria-label="Hero"] > .va-container { padding-bottom: 7rem; }
}