/* ============================================================================
   registry-home.css — LANDING PAGE ONLY (home.html, served at "/" and
   "/home.html")
   Owner: RD-LANDING.

   SCOPE RULE (INTEGRATION-CONTRACT §2): everything in the shared vocabulary
   lives in registry.css and is consumed here by class name. This file adds
   ONLY the page-specific layout glue the landing page needs and that no other
   page can reuse:  the bilingual kicker row, the loading-block SIZES that sit
   on top of the shared `.rg-skeleton` shimmer, the results <ul> reset, and the
   grid placement of a server-authored `unavailableReason` inside a tariff row.

   Every rule is prefixed `.rgh-` so it can never collide with `.rg-*` (the
   foundation's namespace) or with another page's stylesheet. The only two
   unprefixed rules are the document-level scroll behaviour needed by the
   in-page anchor nav — registry.css does not set them, so there is no
   collision, and both are switched off under prefers-reduced-motion.

   No colours, no type scale, no borders are invented here: every value below
   is either a shared token or a pure geometry number.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. DOCUMENT — anchor nav under a sticky header
   ------------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  /* Clear the sticky .rg-nav (20px + 36px medallion + 20px + hairline) so an
     anchored section heading is not hidden underneath it. */
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   2. NAV BRAND — the medallion + wordmark pair is a link to the top of the
      page. It contains only canvases, so the shared `a:hover { color: ivory }`
      has nothing to colour; pin it so a future change cannot tint the canvas
      fallback text mid-hover.
   ------------------------------------------------------------------------ */
.rgh-brand {
  color: inherit;
  text-decoration: none;
}
.rgh-brand:hover,
.rgh-brand:focus-visible { color: inherit; }

/* ---------------------------------------------------------------------------
   3. HERO — the bilingual kicker is TWO elements, not one.
      i18n renders through textContent (i18n.js:889), so a single element with
      nested spans would have its children destroyed on every language switch.
      Two siblings + a separator keeps each script translatable on its own and
      lets the Arabic half carry the Naskh face.
   ------------------------------------------------------------------------ */
.rgh-kicker {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rgh-kicker__sep {
  color: var(--rg-gold-dim);
}
/* The Arabic half of a kicker: Naskh, kicker size, no tracking (letter-spacing
   pulls Arabic joins apart). Colour matches the Latin half, not the gold `.rg-ar`
   default, because here the two halves are one sentence. */
.rgh-kicker__ar {
  font-family: var(--rg-arabic);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--rg-warm);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Heading rhythm under an Arabic eyebrow now lives in registry.css as
   `.rg-h2--eyebrow` / `.rg-h2--loose` (RD-foundation), so this page no longer
   defines its own. */

/* ---------------------------------------------------------------------------
   4. SEARCH — the microcopy under the bar.
      While the tariff is in flight the domain COUNT is unknown, so the count
      clause is replaced by a shimmer rather than a guess (contract §5: the
      count is data, and a wrong count is a lie the day a domain is added).
   ------------------------------------------------------------------------ */
.rgh-note-skeleton {
  display: inline-block;
  width: 300px;
  max-width: 80%;
  height: 9px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   5. RESULTS — the rows are a real list for assistive tech; strip the marker.
      `.rg-row` (grid) does the rest.
   ------------------------------------------------------------------------ */
.rgh-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The server-authored `unavailableReason` uses the shared `.rg-hint` voice and
   an unknown price uses the shared `.rg-unknown` — both owned by registry.css.
   These two rules only re-seat them in the cell a price would have occupied:
   hard against the end edge, no stacked margin. */
.rgh-hint-cell {
  margin-top: 0;
  text-align: end;
}
/* Inside the bento card's flex foot the hint must not stretch past the blurb. */
.rgh-hint-foot {
  flex: none;
  max-width: 55%;
}
/* When the server sent no blurb the card renders no description element, so
   `justify-content:space-between` has a single child and would park it at the
   start. Pin whatever occupies the end slot — price, hint or unknown — to the
   end edge itself, rather than propping the layout up with an empty span. */
.rgh-foot-end { margin-inline-start: auto; }

/* ---------------------------------------------------------------------------
   6. LOADING BLOCKS — geometry only. The shimmer itself is `.rg-skeleton`,
      owned by registry.css; these rules give each placeholder the size and
      placement of the real thing it stands in for, so nothing reflows when
      the data lands.
   ------------------------------------------------------------------------ */
/* A bento placeholder is a real `.rg-bento__card --soon` (inert, no pointer)
   that only needs the flagship/standard height reserved. */
.rgh-skeleton-card { min-height: 190px; }
.rgh-skeleton-card--flagship { min-height: 250px; }
/* Skeleton lines inside an end-aligned tariff cell must hug the end edge. */
.rgh-skeleton-end { margin-inline-start: auto; }
/* The word placeholder in a bento card sits where the 40/64px wordmark will. */
.rgh-skeleton-word { height: 34px; width: 62%; }

/* ---------------------------------------------------------------------------
   7. TARIFF — a non-sellable domain shows its reason across the two money
      columns instead of a price. `.rg-tariff__row` is
      `1fr 180px 180px 220px`; the reason takes columns 2–3 and stays
      end-aligned with the numbers it replaces.
   ------------------------------------------------------------------------ */
.rgh-tariff-reason {
  grid-column: 2 / 4;
  text-align: end;
}
/* Ultra-rare badge sits inline after the domain name, baseline-aligned. */
.rgh-tariff-badge { margin-inline-start: 10px; }

/* ---------------------------------------------------------------------------
   8. RESPONSIVE — mirrors registry.css's two breakpoints (900 / 560).
      At 900 the tariff collapses to `1fr auto`, so a 2/4 placement would
      invent a third column; send the reason to its own full-width line.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .rgh-tariff-reason {
    grid-column: 1 / -1;
    text-align: start;
  }
  .rgh-skeleton-card,
  .rgh-skeleton-card--flagship { min-height: 150px; }
}

@media (max-width: 560px) {
  .rgh-kicker { gap: 8px; }
  .rgh-note-skeleton { width: 200px; }
}