/* =====================================================================
   RONROV — skin "rovblog" (Journal Pink) · global.css
   ---------------------------------------------------------------------
   Loads after tokens.css, before the page_map file.
   assets/css/footer-redesign.css is linked from inc/footer.php AFTER this
   file, so every footer selector here is body[data-skin="rovblog"]-scoped
   to win on specificity — never on order, never with !important.

   !important budget (the noir discipline — 3 max outside search-page.css):
   currently ZERO here. Keep it that way.
   ===================================================================== */

/* --- base ------------------------------------------------------------ */
body[data-skin="rovblog"] {
  background: var(--rb-bg);
  color: var(--rb-ink);
  font-family: var(--rb-font-body);
}

body[data-skin="rovblog"] h1,
body[data-skin="rovblog"] h2,
body[data-skin="rovblog"] h3 {
  font-family: var(--rb-font-display);
  font-weight: 400;           /* Secular One is single-weight — see tokens */
  letter-spacing: 0;
}

body[data-skin="rovblog"] a {
  color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] a:hover {
  color: var(--rb-accent-hover);
}

body[data-skin="rovblog"] ::selection {
  background: var(--rb-accent-soft);
}

/* --- header ---------------------------------------------------------- */
body[data-skin="rovblog"] .header-wrap {
  height: var(--rb-header-h);
  background: var(--rb-surface);
  border-bottom: 0;
  box-shadow: var(--rb-sh-1);
  backdrop-filter: none;
}

body[data-skin="rovblog"] .brand-logo-img {
  height: 38px;
  max-width: 180px;
}

body[data-skin="rovblog"] .nav {
  gap: 28px;
}

body[data-skin="rovblog"] .nav-link {
  color: var(--rb-ink-2);
  font-family: var(--rb-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}
body[data-skin="rovblog"] .nav-link:hover {
  color: var(--rb-ink);
}
body[data-skin="rovblog"] .nav-link.active,
body[data-skin="rovblog"] .nav-link[aria-current="page"] {
  color: var(--rb-accent-ink);
  font-weight: 600;
}

body[data-skin="rovblog"] .nav-link--lang {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-r-pill);
  padding: 6px 14px;
  height: auto;
}
body[data-skin="rovblog"] .nav-link--lang:hover {
  border-color: var(--rb-accent);
  color: var(--rb-accent-ink);
}

body[data-skin="rovblog"] .icon-bar {
  background: var(--rb-ink);
}

/* --- generic buttons -------------------------------------------------- */
body[data-skin="rovblog"] .btn {
  background: var(--rb-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--rb-r-pill);
  font-family: var(--rb-font-body);
  font-weight: 600;
  box-shadow: var(--rb-sh-accent);
  transition: background var(--rb-t-fast), transform var(--rb-t-fast);
}
body[data-skin="rovblog"] .btn:hover {
  background: var(--rb-accent-hover);
  transform: translateY(-1px);
}
body[data-skin="rovblog"] .btn.light {
  background: var(--rb-surface);
  color: var(--rb-ink);
  border: 1px solid var(--rb-border);
  box-shadow: none;
}
body[data-skin="rovblog"] .btn.light:hover {
  background: var(--rb-surface-2);
  color: var(--rb-ink);
}

/* --- scrollbar (Blink/WebKit) ----------------------------------------- */
body[data-skin="rovblog"]::-webkit-scrollbar {
  width: 12px;
  background: var(--rb-bg);
}
body[data-skin="rovblog"]::-webkit-scrollbar-thumb {
  background: #CFCCC6;
  border-radius: 6px;
  border: 3px solid var(--rb-bg);
}

/* =====================================================================
   Pre-footer brand hub (.rb-hub — markup added, skin-gated, in
   inc/footer.php right before the .csh section)
   ===================================================================== */
body[data-skin="rovblog"] .rb-hub {
  max-width: var(--rb-maxw);
  margin: 56px auto 0;
  padding: 0 24px;
}
body[data-skin="rovblog"] .rb-hub-inner {
  position: relative;
  overflow: hidden;
  background: var(--rb-surface);
  border-radius: var(--rb-r-xl);
  box-shadow: var(--rb-sh-2);
  padding: 46px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 84px;
}
body[data-skin="rovblog"] .rb-hub-glow {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 420px;
  height: 190px;
  transform: translate(50%, -50%) rotate(-18deg);
  background: var(--rb-glow);
  filter: blur(52px);
  pointer-events: none;
}
body[data-skin="rovblog"] .rb-hub-logo {
  position: relative;
  display: block;
  height: 96px;
  width: auto;
}
body[data-skin="rovblog"] .rb-hub-links {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
body[data-skin="rovblog"] .rb-hub-links--start { align-items: flex-end; }
body[data-skin="rovblog"] .rb-hub-links--end   { align-items: flex-start; }
body[data-skin="rovblog"] .rb-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--rb-ink);
  text-decoration: none;
}
body[data-skin="rovblog"] .rb-hub-link:hover {
  color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] .rb-hub-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rb-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rb-accent);
  flex-shrink: 0;
}
body[data-skin="rovblog"] .rb-hub-icon svg {
  width: 17px;
  height: 17px;
}

/* =====================================================================
   Colour-search band (.csh) — keep it, dress it light
   ===================================================================== */
body[data-skin="rovblog"] .csh {
  background: var(--rb-bg);
}
body[data-skin="rovblog"] .csh-frame {
  background: var(--rb-surface);
  border: 0;
  border-radius: var(--rb-r-xl);
  box-shadow: var(--rb-sh-2);
  padding: 42px 36px 38px;
  /* one content line for the whole page: every homepage section sits on
     the container's 24px inset — the base frame was 16px narrower */
  max-width: calc(var(--rb-maxw) - 48px);
  margin-inline: auto;
}
/* a hard 12-column grid: all colours on ONE row, always — a flex wrap kept
   orphaning the last swatch onto its own row at narrower windows */
body[data-skin="rovblog"] .csh-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px 2px;
  padding: 0;
  margin: 14px 0 0;
  overflow: visible;
}
body[data-skin="rovblog"] .csh-cta-row {
  margin-top: 32px;
}
@media (max-width: 1100px) {
  body[data-skin="rovblog"] .csh-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
body[data-skin="rovblog"] .csh-card-wrap {
  min-width: 0;
  width: auto;
  flex: none;
}
body[data-skin="rovblog"] .csh-card {
  width: 100%;
  box-sizing: border-box;
}
body[data-skin="rovblog"] .csh-corner {
  display: none;                     /* the decorative corner ticks */
}
body[data-skin="rovblog"] .csh-title {
  font-family: var(--rb-font-display);
  font-weight: 400;
  color: var(--rb-ink);
}
body[data-skin="rovblog"] .csh-sub {
  color: var(--rb-muted);
}
/* the colour cards lose the cream boxes and radio dots — a clean circle
   swatch + label, pink ring on hover, matching the rest of the skin */
body[data-skin="rovblog"] .csh-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: var(--rb-r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 5px;              /* tight enough for all 12 on one row */
  text-decoration: none;
  transition: background var(--rb-t-fast);
}
body[data-skin="rovblog"] .csh-card:hover {
  background: var(--rb-surface-2);
  border: 0;
  box-shadow: none;
}
body[data-skin="rovblog"] .csh-swatch {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(22, 24, 29, 0.16), 0 0 0 1px var(--rb-border);
  background-size: cover;
  background-position: center;
  transition: box-shadow var(--rb-t-fast), transform var(--rb-t-fast);
}
body[data-skin="rovblog"] .csh-card:hover .csh-swatch {
  box-shadow: 0 6px 16px rgba(22, 24, 29, 0.22), 0 0 0 2px var(--rb-accent);
  transform: scale(1.06);
}
body[data-skin="rovblog"] .csh-label {
  color: var(--rb-ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}
body[data-skin="rovblog"] .csh-card:hover .csh-label {
  color: var(--rb-accent-ink);
}
body[data-skin="rovblog"] .csh-radio {
  display: none;
}
body[data-skin="rovblog"] .csh-cta {
  color: #FFFFFF;
  background: var(--rb-accent);
  border: 0;
  border-radius: var(--rb-r-pill);
  box-shadow: var(--rb-sh-accent);
  text-decoration: none;
}
body[data-skin="rovblog"] .csh-cta:hover {
  background: var(--rb-accent-hover);
  color: #FFFFFF;
}

/* =====================================================================
   Footer (.sfd) — dark ink, brand + full one-line menu + socials.
   The five old link columns collapse; the skin-gated .rb-footer-menu row
   (markup in inc/footer.php) replaces them.
   ===================================================================== */
body[data-skin="rovblog"] .sfd {
  background: var(--rb-footer);
  color: var(--rb-on-dark);
}
body[data-skin="rovblog"] .sfd-art {
  display: none;                     /* decorative mountain SVGs */
}
body[data-skin="rovblog"] .sfd-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid #2A2C33;
}
body[data-skin="rovblog"] .sfd-col:not(.sfd-col--brand) {
  display: none;
}
body[data-skin="rovblog"] .sfd-col--brand {
  max-width: 360px;
}
body[data-skin="rovblog"] .sfd-tagline {
  color: var(--rb-on-dark-2);
  font-size: 0.84375rem;
  line-height: 1.7;
}
body[data-skin="rovblog"] .sfd-social a,
body[data-skin="rovblog"] .sfd-social .sfd-social-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #3A3D45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rb-on-dark);
}
body[data-skin="rovblog"] .sfd-social a:hover {
  border-color: var(--rb-accent);
  color: var(--rb-accent);
}

body[data-skin="rovblog"] .rb-footer-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 22px 0 0;
  font-size: 0.90625rem;
}
body[data-skin="rovblog"] .rb-footer-menu a {
  color: var(--rb-on-dark);
  text-decoration: none;
}
body[data-skin="rovblog"] .rb-footer-menu a:hover {
  color: var(--rb-accent);
}
body[data-skin="rovblog"] .rb-menu-sep {
  color: #4A4D55;
}

body[data-skin="rovblog"] .sfd-base {
  border-top: 0;
  padding-top: 18px;
  text-align: center;
}
body[data-skin="rovblog"] .sfd-copy {
  color: var(--rb-on-dark-2);
  font-size: 0.8125rem;
}