/* ==========================================================================
   AI Search Rankings, homepage hero with the AI Visibility Audit form
   --------------------------------------------------------------------------
   Styles sections/home-hero-audit.php. One centered column: headline, short
   value statement, the audit form in a panel, then the engines and the phone
   line. Loaded in the head of the homepage, because it styles the first thing
   on the page.

   Rules this file keeps
   ---------------------
   1. Every rule is scoped under .hxa, so nothing else on the page is touched.
   2. Mobile first. The base rules describe a phone: one column, full width
      input, full width button.
   3. The background is white. The deep teal is used for the action, the
      accents, and the second line of the headline, and nowhere as a surface.
   4. No muted text. Every text colour is at least 7 to 1 on white. The input
      border is at least 3 to 1, so the field is visible before it is focused.
      tests/test-home-hero-audit.php computes these ratios from this file.
   5. Purple is never used.
   6. Motion is slight, and it stops when the visitor asks for reduced motion.
      Nothing is hidden waiting for an animation.
   ========================================================================== */

.hxa {
    --hxa-ink: #0f172a;
    --hxa-ink-2: #334155;
    --hxa-teal: #003737;
    --hxa-teal-deep: #002424;
    --hxa-wash: #e6f2f1;
    --hxa-line: #cfdedc;
    --hxa-control: #4d6f6b;
    --hxa-surface: #ffffff;
    --hxa-error: #8a1c1c;
    --hxa-display: 'Space Grotesk', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    background: var(--hxa-surface);
    color: var(--hxa-ink);
    /* The top is kept short on purpose. Everything above the audit field uses
       height the first screen does not have to spare. */
    padding-block: clamp(1.5rem, 3.2vw, 3rem) clamp(2.5rem, 5vw, 4.5rem);
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.hxa *,
.hxa *::before,
.hxa *::after { box-sizing: border-box; }

/* The site container, with the content held to a centered reading width. */
.hxa-wrap { width: min(100% - 40px, 1290px); margin-inline: auto; text-align: center; }
.hxa-head,
.hxa-panel,
.hxa-answer { max-width: 1000px; margin-inline: auto; }
/* The headline gets a little more room, so the typed question and the line
   under it each keep to one line on a desktop screen. */
.hxa-head { max-width: 1050px; }

.hxa a { color: var(--hxa-teal); text-underline-offset: 0.18em; font-weight: 700; }
.hxa :focus-visible { outline: 3px solid var(--hxa-teal); outline-offset: 3px; box-shadow: 0 0 0 3px #ffffff; }

/* --------------------------------------------------------------------------
   Headline
   -------------------------------------------------------------------------- */
.hxa-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    margin: 0 0 1.1rem; padding: 0.45rem 0.95rem;
    border: 1px solid var(--hxa-line); border-radius: 999px; background: var(--hxa-wash);
    font-family: var(--hxa-display); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--hxa-teal);
}
.hxa-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hxa-teal); }

.hxa-title {
    margin: 0 0 1.1rem;
    font-family: var(--hxa-display);
    font-size: clamp(2.125rem, 1.15rem + 3.6vw, 3.5rem);
    font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
    color: var(--hxa-ink); text-wrap: balance;
}
/* The headline has three lines. The first sets the scene, the second types out
   the questions customers ask, and the third asks the visitor about their own
   business. Each line is its own block, so one line changing length can never
   push the words of another. */
.hxa-title__lead {
    display: block; margin-bottom: 0.4em;
    font-size: 0.5em; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--hxa-ink);
}
/* The typed line keeps the height of two lines on a phone, where a question
   wraps, and one line on a tablet and a desktop screen. The space is held
   whether the question showing is long or short, so the audit form below it
   never moves while the headline types. A short question sits in the middle
   of that space.

   Two lines are 2.12em tall. The space held is 2.14em, a hair more, because a
   browser rounds each line to a fraction of a pixel, and two rounded lines can
   come out a sixty-fourth of a pixel taller than the same height written as
   one number. With the hair of room, the height is the same number every
   time. */
.hxa-title__ask {
    display: flex; align-items: center; justify-content: center;
    min-height: 2.14em;
    color: var(--hxa-teal); text-wrap: wrap;
}
.hxa-title__close { display: block; color: var(--hxa-ink); }
/* A tablet has room for every question on one line when the typed line is a
   little smaller than the line under it, so it holds one line, not two. */
@media (min-width: 48rem) {
    .hxa-title__ask { min-height: 1.08em; font-size: 0.9em; white-space: nowrap; }
}
@media (min-width: 62rem) {
    .hxa-title__ask { font-size: 1em; }
}

/* The site typewriter engine, assets/js/typewriter.js, adds its own styles for
   headings that sit on the left of a page: a fixed width for the typed text,
   with the cursor parked at the end of that width. This headline is centered
   and already holds its height, so here the typed text takes only the room it
   needs, stays centered, wraps on a small screen, and the cursor follows the
   last letter. These rules are scoped to this headline and change no other
   page. */
.hxa-title__ask [data-typewriter] { display: block; position: relative; max-width: 100%; }
.hxa-title__ask [data-typewriter] .tw-text {
    display: inline; min-width: 0; white-space: inherit;
    color: inherit; -webkit-text-fill-color: currentColor;
}
/* The cursor is taken out of the line, so it takes no room in it. It still
   sits where the next letter would go, because a positioned element with no
   offsets keeps the place it would have had. A cursor that took room could
   drop to a line of its own when a question fills the line, and that would
   move the form below. It is a plain bar, so the character the engine puts
   inside it is not painted. */
.hxa-title__ask .tw-cursor {
    position: absolute;
    width: 3px; min-width: 3px; height: 0.8em;
    margin: 0.13em 0 0 0.07em;
    overflow: hidden; border-radius: 2px;
    color: transparent; -webkit-text-fill-color: transparent;
    background: var(--hxa-teal);
}

.hxa-lede {
    margin: 0 auto; max-width: 56rem;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.6;
    color: var(--hxa-ink-2); text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The audit panel
   -------------------------------------------------------------------------- */
.hxa-panel {
    margin-top: clamp(1.25rem, 2.6vw, 2rem);
    padding: clamp(1.25rem, 2.6vw, 1.875rem);
    border: 1px solid var(--hxa-line); border-top: 5px solid var(--hxa-teal); border-radius: 1.5rem;
    background: var(--hxa-surface);
    box-shadow: 0 2px 6px rgba(0, 55, 55, 0.06), 0 24px 60px rgba(0, 55, 55, 0.13);
    text-align: left;
}
.hxa-panel__head { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.25rem; }
.hxa-panel__title {
    margin: 0 0 0.35rem; font-family: var(--hxa-display);
    font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em;
    color: var(--hxa-ink);
}
.hxa-panel__sub { margin: 0; max-width: 44rem; font-size: 1rem; line-height: 1.6; color: var(--hxa-ink-2); }
.hxa-panel__badge {
    display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start;
    margin: 0; padding: 0.4rem 0.8rem; border-radius: 999px;
    background: var(--hxa-teal); color: #ffffff;
    font-size: 0.8125rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}

.hxa-form { margin: 0; }
.hxa-label { display: block; margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--hxa-ink); }
.hxa-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

/* The wrap is its own stacking context, and the icon sits above the field, so
   the icon stays visible whatever a global focus rule does to the input. */
.hxa-inputwrap { position: relative; isolation: isolate; }
.hxa-inputwrap .bi {
    position: absolute; z-index: 3; left: 1.1rem; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; color: var(--hxa-teal); pointer-events: none;
}
/* 16px or more, so a phone does not zoom the page when the field is tapped. */
.hxa-input {
    width: 100%; height: 3.75rem; padding: 0 1.1rem 0 3.1rem;
    border: 2px solid var(--hxa-control); border-radius: 0.9rem;
    background: var(--hxa-surface); color: var(--hxa-ink);
    font: inherit; font-size: 1.0625rem; line-height: 1.2;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.hxa-input::placeholder { color: var(--hxa-ink-2); opacity: 0.85; }
.hxa-input:hover { border-color: var(--hxa-teal); }
.hxa-input:focus { border-color: var(--hxa-teal); outline: none; box-shadow: 0 0 0 4px rgba(0, 55, 55, 0.2); }
.hxa-input[aria-invalid="true"] { border-color: var(--hxa-error); box-shadow: 0 0 0 4px rgba(138, 28, 28, 0.16); }

.hxa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    width: 100%; min-height: 3.75rem; padding: 0.75rem 1.5rem;
    border: 2px solid var(--hxa-teal); border-radius: 0.9rem;
    background: var(--hxa-teal); color: #ffffff;
    font: inherit; font-family: var(--hxa-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.hxa-btn .bi { transition: transform 150ms ease; }
.hxa-btn:hover { background: var(--hxa-teal-deep); border-color: var(--hxa-teal-deep); box-shadow: 0 10px 24px rgba(0, 55, 55, 0.24); }
.hxa-btn:hover .bi { transform: translateX(3px); }
.hxa-btn:active { transform: translateY(1px); box-shadow: none; }
.hxa-btn[aria-busy="true"] { cursor: progress; background: var(--hxa-teal-deep); border-color: var(--hxa-teal-deep); }
.hxa-btn[aria-busy="true"] .bi { animation: hxa-spin 900ms linear infinite; }

.hxa-error {
    display: flex; align-items: flex-start; gap: 0.45rem;
    margin: 0.65rem 0 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.45; color: var(--hxa-error);
}
.hxa-error[hidden] { display: none; }
.hxa-hint { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--hxa-ink-2); }

.hxa-trust {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hxa-line);
    font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--hxa-ink);
}
.hxa-trust .bi { flex: 0 0 auto; margin-top: 0.1rem; font-size: 1.1rem; color: var(--hxa-teal); }

@media (min-width: 48rem) {
    .hxa-panel__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
    .hxa-panel__badge { align-self: flex-start; flex: 0 0 auto; }
    .hxa-row { grid-template-columns: minmax(0, 1fr) auto; }
    .hxa-btn { width: auto; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Keeping the audit field on the first screen

   The field is the point of this hero, so on the two kinds of screen that are
   short of height, the parts above it give up room.
   -------------------------------------------------------------------------- */

/* Phones. The first screen is small, and the bar with the call and text
   buttons covers its bottom edge. Three things that repeat what is already on
   the screen are left out here: the opening sentence of the paragraph, which
   the headline now says, and the line and the badge above the field, which the
   field's own label, hint, and button already say. Nothing is left out on a
   wider screen. */
@media (max-width: 35.98rem) {
    .hxa { padding-top: 1.25rem; }
    .hxa-eyebrow {
        gap: 0.45rem; margin-bottom: 0.8rem; padding: 0.35rem 0.75rem;
        font-size: 0.75rem; letter-spacing: 0.04em; text-wrap: balance;
    }
    .hxa-title { margin-bottom: 0.75rem; }
    .hxa-lede__context { display: none; }
    .hxa-panel { margin-top: 1.1rem; padding-top: 1.1rem; }
    .hxa-panel__head { margin-bottom: 0.8rem; }
    .hxa-panel__title { margin-bottom: 0; }
    .hxa-panel__sub,
    .hxa-panel__badge { display: none; }
    .hxa-input { height: 3.5rem; }
    .hxa-btn { min-height: 3.5rem; }
}

/* Laptops. A wide screen that is not tall, which is most laptops once the
   browser's own bars are taken off. The headline drops to the smallest size the
   design allows on a desktop screen, and the gaps close up. */
@media (min-width: 62rem) and (max-height: 47.5rem) {
    .hxa { padding-top: 1.5rem; }
    .hxa-eyebrow { margin-bottom: 0.8rem; }
    .hxa-title { margin-bottom: 0.8rem; font-size: 3rem; }
    .hxa-lede { font-size: 1.125rem; line-height: 1.55; }
    .hxa-panel { margin-top: 1.25rem; padding: 1.4rem 1.875rem 1.5rem; }
    .hxa-panel__head { margin-bottom: 0.9rem; }
}

/* The floating call and text pill, includes/partials/call-text-cta.php. On a
   desktop screen it floats in the bottom right corner, and on most laptops
   that is exactly where the audit button is, so the pill covered the button.
   On this page only, the pill waits below the screen while the audit form is
   in view, and assets/js/home-hero-audit.js lets it in once the form has
   scrolled away. It is hidden as well as moved, so the keyboard cannot reach
   a link nobody can see. A desktop header already shows the phone number.

   On a phone and a tablet the same element is a bar along the bottom edge. It
   covers nothing there, so it is left exactly as it is. The 821px here is the
   width at which that file turns the bar into the pill. */
@media (min-width: 821px) {
    html:not(.hxa-past-form) .ct-bar { transform: translateY(calc(100% + 2.5rem)); visibility: hidden; }
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
    html .ct-bar { transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; }
    html:not(.hxa-past-form) .ct-bar { transition-delay: 0s, 260ms; }
}

/* --------------------------------------------------------------------------
   Engines, the company sentence, and the phone line
   -------------------------------------------------------------------------- */
.hxa-engines { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.hxa-engines__label {
    margin: 0 0 0.9rem; font-family: var(--hxa-display); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--hxa-ink-2);
}
.hxa .hxa-engines__list {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
    margin: 0; padding: 0; list-style: none;
}
.hxa .hxa-engine {
    display: inline-flex; align-items: center; gap: 0.55rem;
    margin: 0; padding: 0.45rem 0.95rem 0.45rem 0.55rem;
    border: 1px solid var(--hxa-line); border-radius: 999px; background: var(--hxa-surface);
    font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: var(--hxa-ink);
    box-shadow: 0 1px 2px rgba(0, 55, 55, 0.05);
}
.hxa-engine img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }

/* The sentence that says what the company is. It is set left aligned in a
   narrower column, because the shared component draws a rule down its left
   edge, and a rule beside centered text reads as a mistake. */
.hxa-answer { max-width: 52rem; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); text-align: left; }
.hxa-answer p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--hxa-ink-2); }
.hxa-answer strong { color: var(--hxa-ink); }

.hxa-human { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--hxa-ink-2); }
.hxa-human strong { color: var(--hxa-ink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Motion. Slight, and only when the visitor has not asked for less.
   -------------------------------------------------------------------------- */
@keyframes hxa-spin { to { transform: rotate(360deg); } }
@keyframes hxa-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hxa-float { from { transform: translateY(0); } to { transform: translateY(-5px); } }

@media (prefers-reduced-motion: no-preference) {
    .hxa-head { animation: hxa-rise 520ms ease-out both; }
    .hxa-panel { animation: hxa-rise 620ms ease-out 90ms both; }
    .hxa .hxa-engine { animation: hxa-float 3.2s ease-in-out infinite alternate; }
    .hxa .hxa-engine:nth-child(2) { animation-delay: 0.35s; }
    .hxa .hxa-engine:nth-child(3) { animation-delay: 0.7s; }
    .hxa .hxa-engine:nth-child(4) { animation-delay: 1.05s; }
    .hxa .hxa-engine:nth-child(5) { animation-delay: 1.4s; }
}
@media (prefers-reduced-motion: reduce) {
    .hxa-input, .hxa-btn, .hxa-btn .bi { transition: none; }
    /* The engine does not type for these visitors, so a cursor would be a bar
       beside a sentence that never changes. */
    .hxa-title__ask .tw-cursor { display: none; }
    .hxa-btn[aria-busy="true"] .bi { animation: none; }
}