/* ============================================================================
   RevFramework — the product layer
   ----------------------------------------------------------------------------
   Everything structural now comes from `revbydesign-docs`, the shared
   RevByDesign skin, which this file is loaded after so that it wins.

   What used to be here: ~600 lines across this file and revframework_site.css,
   copied by hand into RevLearning and Snap Studio Pro and drifted in three
   directions. That is gone. What remains below is the two things that are
   genuinely RevFramework's — its accent, and the components its hand-authored
   pages actually use.

   See revbydesign.studio `docs/decisions.md` D049.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. The accent
   ----------------------------------------------------------------------------
   Steel blue — technical, precise, unexcited. Not chosen here: this is the
   value RevFramework already carries on revbydesign.studio's work index, read
   from `src/styles/products.css`, so the product page and its documentation
   cannot disagree about what colour RevFramework is.

   Verified at 5.39:1 (light) and 6.96:1 (dark) as link text against the page.
   ------------------------------------------------------------------------- */

:root {
  --rbd-accent-light: #2f6ba4;
  --rbd-accent-dark: #6e9fd4;
  --rbd-accent-ink-light: #ffffff;
  --rbd-accent-ink-dark: #07111c;
}

/* ----------------------------------------------------------------------------
   2. Components
   ----------------------------------------------------------------------------
   Used by index.md, getting_started.md and why_it_works_this_way.md, as raw
   HTML. The class names are unchanged on purpose — why_it_works_this_way.md is
   generated from a source README and is not ours to edit for a restyle.

   Retokenised rather than redesigned: the cards previously carried a #020617
   fill, a radial-gradient wash on hover, a 3px lift and a 20px drop shadow, on
   a site whose parent brand is hairlines and near-square corners. Same removal
   D028 made in the RevLearning Tools, and for the same reason.
   ------------------------------------------------------------------------- */

.md-typeset .rf-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.md-typeset .rf-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.md-typeset .rf-card {
  position: relative;
  padding: 1.1rem 1.2rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
  transition: border-color 120ms cubic-bezier(0.2, 0, 0.1, 1);
}

.md-typeset .rf-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.md-typeset .rf-card > :last-child {
  margin-bottom: 0;
}

/* A card that is a link is a whole clickable tile. It takes the accent on its
   edge rather than lifting off the page — the construction line is the
   affordance here, which is how the main site marks an active row. */
.md-typeset .rf-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.md-typeset .rf-card-link:hover {
  border-color: var(--rbd-accent, var(--md-accent-fg-color));
}

.md-typeset .rf-card-link h3,
.md-typeset .rf-card-link p {
  color: inherit;
}

/* The intro and tagline blocks: a hairline and a quiet surface, not a panel
   with a shadow under it. The tagline keeps its accent edge, because that edge
   is the only thing distinguishing it from body copy. */
.md-typeset .rf-docs-intro {
  padding: 1.1rem 1.3rem;
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
}

.md-typeset .rf-docs-intro > :last-child,
.md-typeset .rf-docs-tagline > :last-child {
  margin-bottom: 0;
}

.md-typeset .rf-docs-tagline {
  padding: 0.8rem 1.1rem;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  background: var(--rbd-bg-sunken, var(--md-code-bg-color));
  border-left: 2px solid var(--rbd-accent, var(--md-accent-fg-color));
  border-radius: 0 var(--rbd-radius, 2px) var(--rbd-radius, 2px) 0;
}

.md-typeset .rf-docs-title {
  margin-bottom: 0.5rem;
}

.md-typeset .rf-section-heading {
  margin-top: 2.5rem;
}

/* Responsive video embed. A bare iframe has fixed pixel dimensions and
   overflows on phones; aspect-ratio keeps it 16:9 at any width and the
   max-width stops it dominating a wide desktop viewport. Kept from the
   previous file — it was correct, and it is the one rule here that was never
   a styling decision. */
.md-typeset .rf-video {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 1.2rem auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rbd-line, var(--md-default-fg-color--lightest));
  border-radius: var(--rbd-radius, 2px);
  overflow: hidden;
}

.md-typeset .rf-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}