/* ===========================================================================
   RONROV — skin "rovblog" (Journal Pink) · cms-page.css
   ---------------------------------------------------------------------------
   The content pages rendered by page.php: terms (slug 246), privacy (543),
   licensing (422). Overrides assets/css/cms-page.css, which ships its own
   :root token set from before the 2026 redesign.

   Same discipline as skins/noir/css/cms-page.css: every selector is scoped
   body[data-skin="rovblog"] so it beats the base sheet on specificity alone.
   No !important anywhere.

   Colour rules taken from tokens.css and not negotiable here:
   - #FF3399 (--rb-accent) is ~3:1 on white. Fine for rules, borders, markers
     and icons. Never for small text: that is --rb-accent-ink.
   - Never as a background under white text: that is --rb-accent-solid.
   - Secular One (--rb-font-display) ships one weight. Never 700 on it.
   =========================================================================== */

/* The base sheet declares --page-* on :root (0-0-0). Re-pointing them here
   (0-1-1) carries most of the blocks over in one move. */
body[data-skin="rovblog"] {
  --page-bg:      var(--rb-bg);
  --page-text:    var(--rb-ink-2);
  --page-heading: var(--rb-ink);
  --page-accent:  var(--rb-accent-ink);
  --page-surface: var(--rb-surface);
  --page-border:  var(--rb-border);

  /* The document card and the hero band share one content width so their
     edges line up: 1180px shell minus its 1.5rem gutters. */
  --cms-w:      1180px;
  --cms-inner:  1132px;
}

body[data-skin="rovblog"] .cms-page-wrapper {
  background: var(--rb-bg);

  /* The base sheet sets overflow-x: hidden here, and an element with a
     clipped axis is a scroll container on both axes — which silently
     stops position: sticky working anywhere inside it. The contents
     column was scrolling away with the document because of this one
     declaration. clip does the same job without the scroll container. */
  overflow-x: clip;
}


/* ---- Hero band ---------------------------------------------------------- */

body[data-skin="rovblog"] .block-hero {
  background: linear-gradient(180deg, var(--rb-band) 0%, var(--rb-bg) 100%);
  border-bottom: 0;
  box-shadow: none;
  padding: 3.25rem 1.5rem 2.5rem;
  margin-bottom: 0;
  text-align: start;
}
body[data-skin="rovblog"] .block-hero .container-reading { max-width: var(--cms-inner); }

body[data-skin="rovblog"] .cms-crumbs {
  font-family: var(--rb-font-body);
  font-size: 0.8125rem;
  color: var(--rb-faint);
  margin-bottom: 1rem;
}
body[data-skin="rovblog"] .cms-crumbs a {
  color: var(--rb-faint);
  opacity: 1;
  border-radius: var(--rb-r-sm);
}
body[data-skin="rovblog"] .cms-crumbs a:hover { color: var(--rb-accent-ink); }
body[data-skin="rovblog"] .cms-crumbs-cur { color: var(--rb-ink-2); }

body[data-skin="rovblog"] .hero-title {
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0 0 1rem;

  /* The base sheet paints this heading with a grey gradient behind
     -webkit-text-fill-color: transparent. Text that is only visible because a
     background survived is text that disappears the moment it does not. */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

body[data-skin="rovblog"] .hero-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 1rem;
  border-radius: var(--rb-r-pill);
  background: linear-gradient(90deg, var(--rb-accent) 0%, var(--rb-violet) 100%);
}

body[data-skin="rovblog"] .hero-sub {
  font-family: var(--rb-font-body);
  font-size: 1.0625rem;
  color: var(--rb-muted);
  margin: 0;
  max-width: 60ch;
}


/* ---- Document shell: contents column + page card ------------------------ */

body[data-skin="rovblog"] .cms-doc-shell {
  max-width: var(--cms-w);
  padding: 2rem 1.5rem 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1100px) {
  body[data-skin="rovblog"] .cms-doc-shell {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2.25rem;
  }
}

body[data-skin="rovblog"] .cms-doc {
  background: var(--rb-surface);
  border: 1px solid var(--rb-hairline);
  border-radius: var(--rb-r-xl);
  box-shadow: var(--rb-sh-2);
  padding: 2.75rem 3rem;
}
body[data-skin="rovblog"] .cms-doc .page-section { padding: 0; }
body[data-skin="rovblog"] .cms-doc .page-section + .page-section { padding-top: 2rem; }


/* ---- Contents ----------------------------------------------------------- */

body[data-skin="rovblog"] .cms-toc {
  background: var(--rb-surface);
  border: 1px solid var(--rb-hairline);
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-sh-1);
  padding: 1rem 1.125rem;
  font-family: var(--rb-font-body);
}

@media (min-width: 1100px) {
  body[data-skin="rovblog"] .cms-toc {
    position: sticky;
    top: calc(var(--header-h, 70px) + 1.25rem);
    max-height: calc(100vh - var(--header-h, 70px) - 3rem);
    overflow-y: auto;
  }
  /* Open and not collapsible on the wide layout, so the marker is noise. */
  body[data-skin="rovblog"] .cms-toc-head { cursor: default; list-style: none; }
  body[data-skin="rovblog"] .cms-toc-head::-webkit-details-marker { display: none; }
}

body[data-skin="rovblog"] .cms-toc-head {
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--rb-ink);
}

body[data-skin="rovblog"] .cms-toc-list {
  list-style: none;
  padding-inline-start: 0;
  margin: 0.875rem 0 0;
  border-top: 1px solid var(--rb-hairline);
  padding-top: 0.75rem;
}
body[data-skin="rovblog"] .cms-toc-list li { margin: 0; }

body[data-skin="rovblog"] .cms-toc-link {
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--rb-r-sm);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--rb-muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
body[data-skin="rovblog"] .cms-toc-link:hover {
  color: var(--rb-ink);
  background: var(--rb-surface-2);
  text-decoration: none;
}
body[data-skin="rovblog"] .cms-toc-link.is-active {
  color: var(--rb-accent-ink);
  background: var(--rb-accent-soft);
  border-inline-start-color: var(--rb-accent);
  text-decoration: none;
}


/* ---- Document body ------------------------------------------------------ */

body[data-skin="rovblog"] .block-text {
  font-family: var(--rb-font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--rb-ink-2);
}

/* With the repeated <h1> gone (page.php), the opening line of every one of
   these documents is either a last-updated date or a one-line summary. Both
   read better as a lede than as body copy. */
body[data-skin="rovblog"] .cms-doc .block-text .container-reading > p:first-child {
  font-size: 1.125rem;
  color: var(--rb-muted);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rb-hairline);
}
body[data-skin="rovblog"] .cms-doc .block-text .container-reading > p:first-child strong { color: var(--rb-ink-2); }

body[data-skin="rovblog"] .block-text h2 {
  font-family: var(--rb-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--rb-ink);
  margin: 2.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rb-hairline);
  position: relative;
}
body[data-skin="rovblog"] .block-text h2::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 40px;
  height: 2px;
  background: var(--rb-accent);
}

body[data-skin="rovblog"] .block-text h3 {
  font-family: var(--rb-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--rb-ink);
  margin: 2rem 0 0.625rem;
}

body[data-skin="rovblog"] .block-text p { margin: 0 0 1.25rem; }
body[data-skin="rovblog"] .block-text strong { color: var(--rb-ink); font-weight: 600; }
body[data-skin="rovblog"] .block-text em { color: var(--rb-muted); }

body[data-skin="rovblog"] .block-text ul,
body[data-skin="rovblog"] .block-text ol {
  margin: 0 0 1.5rem;
  padding-inline-start: 1.375rem;
}
body[data-skin="rovblog"] .block-text li { margin-bottom: 0.5rem; }
body[data-skin="rovblog"] .block-text li::marker { color: var(--rb-accent); }

body[data-skin="rovblog"] .block-text a {
  color: var(--rb-accent-ink);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rb-accent-glow);
}
body[data-skin="rovblog"] .block-text a:hover {
  opacity: 1;
  text-decoration-color: var(--rb-accent);
}

body[data-skin="rovblog"] .block-text blockquote {
  background: var(--rb-surface-2);
  border-inline-start: 3px solid var(--rb-accent);
  border-radius: var(--rb-r-md);
  box-shadow: none;
  font-style: normal;
  color: var(--rb-ink-2);
  margin: 1.75rem 0;
  padding: 1.125rem 1.375rem;
}

body[data-skin="rovblog"] .block-text hr {
  border: 0;
  border-top: 1px solid var(--rb-hairline);
  margin: 2.25rem 0;
}

body[data-skin="rovblog"] .block-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
body[data-skin="rovblog"] .block-text th,
body[data-skin="rovblog"] .block-text td {
  border: 1px solid var(--rb-hairline);
  padding: 0.625rem 0.75rem;
  text-align: start;
}
body[data-skin="rovblog"] .block-text th { background: var(--rb-surface-2); color: var(--rb-ink); }

body[data-skin="rovblog"] .block-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rb-r-md);
}

body[data-skin="rovblog"] .block-text :is(h2, h3, p, li, a):focus-visible,
body[data-skin="rovblog"] .cms-toc-link:focus-visible,
body[data-skin="rovblog"] .cms-crumbs a:focus-visible {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}


/* ---- Image, CTA, draft badge, empty state ------------------------------- */

body[data-skin="rovblog"] .img-card {
  background: var(--rb-surface);
  border: 1px solid var(--rb-hairline);
  border-radius: var(--rb-r-lg);
  box-shadow: var(--rb-sh-1);
}
body[data-skin="rovblog"] .img-card img { border-radius: var(--rb-r-md); }
body[data-skin="rovblog"] .img-caption {
  font-family: var(--rb-font-body);
  color: var(--rb-faint);
}

body[data-skin="rovblog"] .cta-btn {
  background: var(--rb-accent-solid);
  color: #fff;
  font-family: var(--rb-font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--rb-r-pill);
  box-shadow: var(--rb-sh-accent);
}
body[data-skin="rovblog"] .cta-btn:hover {
  background: var(--rb-accent-solid-hover);
  box-shadow: var(--rb-sh-2);
}

body[data-skin="rovblog"] .draft-badge {
  background: var(--rb-accent-soft);
  border: 1px solid var(--rb-accent);
  color: var(--rb-accent-ink);
  border-radius: var(--rb-r-pill);
}

body[data-skin="rovblog"] .empty-page {
  background: var(--rb-surface);
  border: 1px dashed var(--rb-border);
  border-radius: var(--rb-r-xl);
}


/* ---- Reading progress and back to top ----------------------------------- */

body[data-skin="rovblog"] .cms-progress span {
  background: linear-gradient(90deg, var(--rb-accent) 0%, var(--rb-violet) 100%);
}

body[data-skin="rovblog"] .cms-top {
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  color: var(--rb-accent-ink);
  box-shadow: var(--rb-sh-2);
}
body[data-skin="rovblog"] .cms-top:hover {
  border-color: var(--rb-accent);
  color: var(--rb-accent-hover);
}


/* ---- Mobile ------------------------------------------------------------- */
/* The skin opts out of the legacy mobile layer and its own mobile.css has no
   CMS selectors, so before this block these pages had no phone styling at
   all beyond the desktop numbers in the base sheet. */

@media (max-width: 900px) {
  body[data-skin="rovblog"] .block-hero { padding: 2rem 1.25rem 1.75rem; }
  body[data-skin="rovblog"] .hero-title { font-size: clamp(1.625rem, 6.5vw, 2.125rem); }
  body[data-skin="rovblog"] .hero-sub { font-size: 1rem; }

  body[data-skin="rovblog"] .cms-doc-shell { padding: 1.25rem 1rem 2.5rem; }
  body[data-skin="rovblog"] .cms-doc {
    padding: 1.5rem 1.25rem;
    border-radius: var(--rb-r-lg);
    box-shadow: var(--rb-sh-1);
  }

  body[data-skin="rovblog"] .block-text { font-size: 1rem; line-height: 1.8; }
  body[data-skin="rovblog"] .cms-doc .block-text .container-reading > p:first-child { font-size: 1.0625rem; }
  body[data-skin="rovblog"] .block-text h2 { font-size: 1.3125rem; margin-top: 2.25rem; }
  body[data-skin="rovblog"] .block-text h3 { font-size: 1.0625rem; }

  /* The vertical offset is the base sheet's business: it has to clear the
     site's bottom bar, which is not this skin's element. */
  body[data-skin="rovblog"] .cms-top { width: 40px; height: 40px; }
}


/* ---- Print -------------------------------------------------------------- */
/* These are the pages people actually print. */

@media print {
  body[data-skin="rovblog"] .block-hero {
    background: none;
    padding: 0 0 1rem;
  }
  body[data-skin="rovblog"] .hero-title::after { display: none; }
  body[data-skin="rovblog"] .cms-crumbs,
  body[data-skin="rovblog"] .cms-toc,
  body[data-skin="rovblog"] .cms-progress,
  body[data-skin="rovblog"] .cms-top { display: none; }
  body[data-skin="rovblog"] .cms-doc-shell { padding: 0; display: block; }
  body[data-skin="rovblog"] .cms-doc {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  body[data-skin="rovblog"] .block-text h2,
  body[data-skin="rovblog"] .block-text h3 { break-after: avoid; }
}


/* ---- Reduced motion ----------------------------------------------------- */
/* page.php writes an inline animation-delay on every .page-section, and the
   base sheet starts them at opacity 0. */

@media (prefers-reduced-motion: reduce) {
  body[data-skin="rovblog"] .page-section { animation: none; opacity: 1; }
  body[data-skin="rovblog"] .cms-toc-link,
  body[data-skin="rovblog"] .cms-top,
  body[data-skin="rovblog"] .cta-btn { transition: none; }
}

/* A page written in h3 alone still gets a contents list; nested entries are
   set in one step from the top level. */
body[data-skin="rovblog"] .cms-toc-link.is-sub {
  font-size: 0.8125rem;
  padding-inline-start: 1.25rem;
}