/* ============================================================================
   home.css - Saacho homepage (/apps/internal/landing_page/mobile.php)

   LAYOUT MECHANICS: Ant.
   BRAND EXPRESSION: Saacho (teal #0e8a7d, gold dot, sans wordmark).

   History
   -------
   This page carried its entire stylesheet in an inline <style> block, which
   also meant it could not be cached, versioned, or diffed. It also linked
   landing.css, which styles the orphaned index.php layout - zero of landing
   css's 56 classes appear on this page, so it was 12.5KB of dead request
   weight. Both are gone; this file replaces them.

   Direction: Ant structure, Saacho surface.
     taken from Ant  - contained 1100px grid, 24px gutters, 8px cards with
                       --shadow-1, hover elevation to --shadow-2, 6px control
                       radius, 32/40px control heights, 14px control text,
                       soft --focus-ring on fields, grey canvas under white
                       cards, real card grid instead of a dot-separated link
                       strip, chips at 24px.
     kept from before- the teal/gold identity, the centred wordmark, the
                       logo mark, the tagline, the bottom tab bar (a mobile
                       nav idiom worth keeping), and the system font stack.

   Colour rules, per the saacho.css v1.1 header:
     --brand / --gold are FILL colours. Any brand or gold *text* here uses
     --brand-text / --gold-text, which are the AA-passing values.
   ========================================================================= */

/* ── Page-local geometry ─────────────────────────────────────────────────── */
:root {
  --home-max: 1100px;      /* matches .footer-grid in saacho.css */
  --home-gutter: 24px;     /* Ant's standard gutter */
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
}

a { color: var(--brand-text); text-decoration: none; }

/* Keyboard focus only. Ant hides the ring for mouse users but never for
   keyboard users; :focus-visible does exactly that split. */
.mh-top :focus-visible,
.mh-main :focus-visible,
.mh-tabs :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.mh-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--nav-h);
  padding: 8px var(--home-gutter);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--card-bg);
  border-bottom: var(--hairline);
}

.mh-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mh-brand img { width: 28px; height: 28px; border-radius: 50%; }

.mh-actions { display: flex; align-items: center; gap: 8px; }

/* Square icon control, 32px, 6px radius - Ant, not a 999px pill. */
.mh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mh-icon-btn:hover { color: var(--brand-text); border-color: var(--brand-border); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  padding: 0 16px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: var(--hairline);
  background: var(--card-bg);
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-body);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.mh-btn:hover { border-color: var(--brand-border); color: var(--brand-text); }

/* Primary keeps the brand teal fill. NOTE: white on #0e8a7d is 4.24:1 and
   does not reach AA for normal text - the same deliberate residual carried
   by .btn-brand in saacho.css. Held here so every primary button on the
   site stays one colour. Flagged, not silently changed. */
.mh-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.mh-btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.mh-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}
.mh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 700;
}
.mh-user img { width: 28px; height: 28px; border-radius: 50%; }

/* ── Page shell ──────────────────────────────────────────────────────────── */
main.mh-main {
  width: 100%;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 var(--home-gutter) 104px;
  min-height: 70vh;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.mh-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 0 24px;
}

/* 76px, down from 112px. Ant heroes lead with the headline, not a logo. */
.mh-mark { width: 76px; height: 76px; border-radius: 50%; margin: 0 0 20px; }

/* The wordmark is brand expression, so it stays large and heavy - just
   tightened onto a v1.1 scale with negative tracking. */
.mh-name {
  margin: 0 0 8px;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.mh-lede {
  max-width: 46ch;
  margin: 0 0 32px;
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* ── Search ──────────────────────────────────────────────────────────────── */
/* Ant's hero search: one card, one input, one button. The old version was a
   2rem pill with a 2px border and a hardcoded 3px glow. */
.mh-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  padding: 8px;
  background: var(--card-bg);
  border: var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mh-search:focus-within {
  border-color: var(--brand);
  box-shadow: var(--focus-ring), var(--shadow-1);
}

.mh-search__input {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--control-h-lg) - 8px);
  padding: 0 8px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: var(--fs-md);
}
.mh-search__input::placeholder { color: var(--ink-mute); }

.mh-search__go {
  flex-shrink: 0;
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.mh-search__go:hover { background: var(--brand-dark); }

/* ── Calls to action ─────────────────────────────────────────────────────── */
.mh-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.mh-cta .mh-btn { min-height: var(--control-h-lg); padding: 0 20px; }

/* ── Services ────────────────────────────────────────────────────────────── */
/* The old page rendered these as a dot-separated inline strip
   (word · word · word · word) that wrapped awkwardly and offered no
   affordance. Now a real card grid: 1 col, 2 col, then 4 across. */
.mh-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.mh-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  text-align: left;
  background: var(--card-bg);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
/* Ant's hover signature: lift one pixel and step up an elevation tier. */
.mh-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.mh-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--ink);
}
.mh-card__sub {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}
.mh-card__go {
  margin-top: 4px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--brand-text);
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */
/* Plain sentence -> three Ant chips. */
.mh-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.mh-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: var(--hairline);
  color: var(--ink-mute);
  font-size: var(--fs-xs);
  line-height: var(--control-h-sm);
  letter-spacing: 0.04em;
}

/* ── Bottom tab bar ──────────────────────────────────────────────────────── */
/* A mobile nav idiom worth keeping; restated here in v1.1 tokens. */
.mh-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: var(--card-bg);
  border-top: var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.mh-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-mute);
}
.mh-tab svg { width: 22px; height: 22px; }
/* --brand-text, not --brand: the fill teal fails AA as small text. */
.mh-tab.mh-active { color: var(--brand-text); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (width >= 560px) {
  .mh-cards { grid-template-columns: repeat(2, 1fr); }
  .mh-card { flex-direction: row; align-items: center; gap: 12px; }
  .mh-card__body { flex: 1; min-width: 0; }
}

@media (width >= 900px) {
  .mh-tabs { display: none; }
  main.mh-main { padding-bottom: 48px; }
  .mh-hero { padding-top: 64px; }
  .mh-cards { grid-template-columns: repeat(4, 1fr); }
  .mh-card { flex-direction: column; align-items: flex-start; }
}

@media (width < 900px) {
  .footer-brand { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
/* Dark mode is owned by saacho.css, which publishes the full ramp under
   html.theme-dark. This file used to keep a private copy here; it was
   redundant once the shared ramp landed, and it had drifted - it still
   pinned the old #14a08f fill, which measures only 3.25:1 against the white
   label .btn-brand paints on it. Removed so the homepage reads from one
   ramp like every other page.

   The two border overrides below stay: they are genuinely page-specific
   (the search bar and cards need an explicit border in dark, where the
   shared --card-shadow is dropped and depth has to come from a border). */
html.theme-dark .mh-search,
html.theme-dark .mh-card { border-color: var(--border); }
html.theme-dark .mh-card:hover { border-color: var(--brand-border); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mh-card,
  .mh-search,
  .mh-btn,
  .mh-icon-btn,
  .mh-search__go { transition: none; }
  .mh-card:hover { transform: none; }
}