/* site.css — shared public-surface baseline on top of Pico classless.
 * Theme JSON emits :root --site-* vars (theme.go) which bridge onto Pico's
 * variable API; this file carries the structural defaults every renderer
 * shares PLUS the `as-*` classes for the agent-site kit (themed entirely by
 * the --site-* vars, so one stylesheet serves every site's palette).
 * Site-specific looks belong in theme vars, page CSS, or (style_mode=free)
 * global_styles — never hardcoded colors here. */

body > header nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

body > footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color, #e5e7eb);
  font-size: 0.875rem;
  opacity: 0.85;
}
body > footer > p:first-child {
  font-size: 1rem;
  opacity: 1;
}

/* Headings pick up the theme's display face when one is set. */
h1, h2, h3 {
  font-family: var(--site-heading-font, var(--pico-font-family));
}

/* ── agent-site kit ─────────────────────────────────────────────────── */

/* Signature device: letterspaced small-caps label with a hairline rule. */
.as-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-secondary, var(--pico-primary, #365a86));
}
.as-eyebrow::after {
  content: "";
  flex: 1;
  max-width: 8rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.as-hero {
  padding: 2.5rem 0 1.5rem;
}
.as-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  max-width: 22ch;
}
.as-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 58ch;
}
.as-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.as-hero-actions [role="button"] {
  margin: 0;
}

.as-search {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 1.25rem 0;
}
.as-search input[type="search"] {
  flex: 1;
  margin: 0;
}
.as-search button {
  width: auto;
  margin: 0;
}

.as-section {
  margin-top: 3rem;
}

.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.as-card {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
  border-left: 3px solid var(--site-secondary, var(--pico-primary, #365a86));
  box-shadow: none;
}
.as-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.as-card p {
  font-size: 0.925rem;
  margin-bottom: 0.4rem;
}
.as-card p:last-child {
  margin-bottom: 0;
}

.as-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.as-point h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.as-point p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

.as-band {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--site-primary, #365a86) 7%, transparent);
  border-radius: var(--site-radius, var(--pico-border-radius, 0.25rem));
}
.as-band p {
  margin-bottom: 0.25rem;
}
.as-band p:last-child {
  margin-bottom: 0;
}

.as-guide h2 {
  margin-top: 2rem;
  font-size: 1.35rem;
}
.as-guide .as-lede p {
  font-size: 1.125rem;
}

.as-contact-form {
  max-width: 34rem;
}

/* Listing cards (engine grids) get a quiet hover lift; stays put under
 * reduced motion. */
.as-section article,
[data-widget-rendered="listing-grid"] article {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .as-section article:hover,
  [data-widget-rendered="listing-grid"] article:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 600px) {
  .as-hero {
    padding-top: 1.5rem;
  }
  .as-search {
    flex-direction: column;
  }
}