/* ============================================================================
   landing.css — the marketing landing page's own components (index.html only).

   Why a second stylesheet rather than a block appended to styles.css: styles.css
   is the site-wide sheet every page loads, and these rules are needed by exactly
   one page. Loading it AFTER styles.css means the shared `.hero` grid still owns
   layout and source order — these rules only add the two components the hero
   gained (the search entry and the four-step strip) and never re-declare
   `.hero`, `.hero__copy`, or `.hero__art`.

   No inline styles anywhere (strict CSP, style-src 'self') — see
   tests/e2e/tests/no-inline-style.spec.ts.
   ========================================================================== */

/* ---------- hero search entry (ENT-1) -------------------------------------- */
/* The landing page's primary action: type a park or a place, land in explore
   with that query applied. Visually a sibling of the old email row it replaced,
   so the hero's rhythm is unchanged. */
.hero-search { margin: 1.6rem 0 0; }

.hero-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.45rem;
  background: var(--paper-card);
  border: 1.5px solid var(--line-control);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 10px 30px -22px rgba(28, 63, 47, 0.5);
  max-width: 30rem;
}
.hero-search__row:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(44, 90, 67, 0.16);
}

.hero-search input[type="search"] {
  flex: 1 1 11rem;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.72rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  /* Safari renders a rounded, inset-shadowed pill for type=search by default,
     which fights the row's own frame. */
  -webkit-appearance: none;
  appearance: none;
}
.hero-search input[type="search"]::placeholder { color: #9aa093; }
.hero-search input[type="search"]:focus { outline: none; }
/* WebKit's built-in clear affordance sits on top of our padding. */
.hero-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Fill, text colour, weight, hover/active motion and focus ring all come from
   the canonical .btn system (styles.css, docs/standards/web-ux.md "canonical
   button system") — the markup carries class="btn". What stays HERE is only
   what is private to sitting inside this row's pill: a shorter vertical
   padding than .btn's default so the button matches the input's own height,
   and .btn's slightly larger corner radius would poke past the row's frame at
   this height, so it is pinned back to the row's own --radius. */
.hero-search button[type="submit"] {
  flex: 0 0 auto;
  padding: 0.72rem 1.15rem;
  border-radius: var(--radius);
}

.hero-search__status { margin: 0.6rem 0 0; font-size: 0.9rem; min-height: 1.2em; color: var(--sage); }
.hero-search__status.is-err { color: #a8392a; }

.hero-search__note { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--sage); max-width: 30rem; }
.hero-search__note a { color: var(--forest-deep); }