/* The React header/footer are the only visible page chrome. Keep the parent
   footer's modal, cookie consent and wp_footer() output in the DOM. */
body.ava-react-poc { margin: 0; }

/* React owns a fixed header, unlike the historical .header.navbar. The value
   is the occupied toolbar bottom in viewport coordinates, including wraps. */
body.ava-react-poc.admin-bar #ava-home-root .site-header {
  top: var(--ava-react-adminbar-bottom, var(--wp-admin--admin-bar--height, 32px));
}

body.ava-react-poc > footer.footer,
body.ava-react-poc > .btn-scroll-top {
  display: none !important;
}

body.ava-react-poc .ava-react-poc-page {
  display: block;
  min-height: 100svh;
  padding: 0;
}

body.ava-react-poc #ava-home-root {
  display: block;
  min-width: 0;
  background: #101112;
  color: #f6f4ef;
  font-family: 'Inter Variable', Arial, sans-serif;
}

/* Quickvcard sets a dark heading color globally. Let the prototype headings
   inherit their own section color; its explicit gray/dark accents still win. */
#ava-home-root :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* WordPress-only hero weight: target the mount itself so it does not depend on
   a body class supplied by the page template. */
#ava-home-root .more-headline .headline-intro { font-weight: 700 !important; font-variation-settings: 'wght' 700; }
#ava-home-root .more-headline .headline-card,
#ava-home-root .more-headline .headline-visit {
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900;
  -webkit-text-stroke: .75px currentColor;
  paint-order: stroke fill;
}

body.ava-react-poc .ava-home-fallback {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem;
  background: #101112;
  color: #f6f4ef;
  font-family: 'Inter Variable', Arial, sans-serif;
  opacity: 1;
  visibility: visible;
}

body.ava-react-poc .ava-home-fallback[hidden] { display: none; }
body.ava-react-poc .ava-home-fallback.is-error {
  opacity: 1;
  visibility: visible;
}
body.ava-react-poc .ava-home-fallback-inner { max-width: 46rem; }
body.ava-react-poc .ava-home-fallback-brand { color: #ff8300; font-weight: 700; }
body.ava-react-poc .ava-home-fallback h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1; }
body.ava-react-poc .ava-home-fallback a { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
