@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');

/*
Theme Name: RB Changelog
Theme URI: https://rbupdates.wpenginepowered.com/
Author: Josh MacDonald
Description: Minimal changelog theme for Ritchie Bros. Timeline layout with a sticky date gutter, built on the RB brand palette.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rb-changelog
*/

:root {
  --rb-gutter: 200px;
  --rb-gutter-gap: 2rem;
  --rb-entry-gap: 3.5rem;
  --rb-header-h: 4.5rem;
  --rb-dot: 6px;
  /* Brand orange (#e87511) reads warm/burnt; this is a hotter, more digital
     variant reserved for interaction accents like link hover states. */
  --rb-orange-hot: #ff6b1a;
}

/* WP Engine's persistent object cache holds the compiled theme.json for a
   subset of font-size presets after theme.json is redeployed, so the front
   end drifts from the source of truth. Mirror the theme.json values here so
   style.css (which loads after global-styles-inline-css) can override the
   stale customs. Keep in sync with theme.json's fontSizes; remove once the
   cache invalidates reliably on deploy. */
:root {
  --wp--preset--font-size--small: 0.6875rem;
  --wp--preset--font-size--medium: 0.9375rem;
  --wp--preset--font-size--large: 1rem;
  --wp--preset--font-size--x-large: 2rem;
  --wp--preset--font-size--xx-large: 2.5rem;
}

/* Orange never carries body-size text on white (3.01:1 fails WCAG AA).
   It is reserved here for accents, button fills, and the timeline dot. */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* RA-style condensed display face applied only to titles. Font-size flows
   from the x-large / xx-large presets (bumped in :root above) since the
   has-*-font-size classes WordPress emits carry !important. */
.rb-page-head__title,
.wp-block-post-title {
  font-family: "Barlow Condensed", "Eina 01", Manrope, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Kill the default block-gap between the back link and the article title. */
.rb-single > .wp-block-post-title {
  margin-top: 0.25rem;
}

/* Sticky-footer scaffold. Grid (not flex) — Safari's sticky positioning
   inside a flex column with min-height:100vh loses grip past the first
   viewport of scroll, breaking the sticky header on long pages. Grid rows
   auto/1fr/auto give header + footer their natural height and let <main>
   absorb the slack without the containment weirdness. */
.wp-site-blocks {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* ---------- Header ---------- */

/* Sticky is on the outer template-part wrapper (the direct flex item), not
   this inner element — otherwise the sticky loses grip as soon as the outer
   wrapper's natural height scrolls past. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.rb-header {
  background: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The header group is flow, not constrained, so its bottom border can span the
   full viewport. That means `alignwide` on the inner row is inert and the wide
   cap has to be reproduced here instead.

   The padding matters as much as the cap: above the wide size the auto margins
   create the side gap, but below it there is no leftover margin and content
   would sit flush against the viewport edge. Padding the row and widening the
   cap to compensate keeps the content box exactly wide-size, so this lines up
   with the constrained content below at every width. */
.rb-header__inner {
  min-height: var(--rb-header-h);
  max-width: calc(
    var(--wp--style--global--wide-size) +
    var(--wp--style--root--padding-left) +
    var(--wp--style--root--padding-right)
  );
  margin-inline: auto;
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* Brand logo, inlined by [rb_logo] rather than uploaded — WordPress rejects
   SVG uploads by default. Height is driven by --rb-logo-h so one rule serves
   the header and footer. */
.rb-logo {
  --rb-logo-h: 26px;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.rb-logo svg {
  display: block;
  height: var(--rb-logo-h);
  width: auto;
}

/* The shortcode block's output gets wrapped in a paragraph by wpautop; it
   becomes a flex item in the header/footer, so strip its spacing. */
p:has(> .rb-logo) {
  margin: 0;
  line-height: 0;
}

.rb-header__logo img,
.rb-header__logo svg {
  display: block;
  height: 26px;
  width: auto;
}

.rb-header .wp-block-navigation {
  font-size: 0.9375rem;
}

.rb-header .wp-block-navigation a {
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  transition: color 0.15s ease;
}

.rb-header .wp-block-navigation a:hover,
.rb-header .wp-block-navigation .current-menu-item a {
  color: var(--wp--preset--color--black);
}

/* Nav item marked as a CTA renders as a pill button — outlined at rest, black
   fill wipes in from the left on hover. Same interaction pattern as the tag
   chips and the article's "View all" CTA. */
.rb-header .wp-block-navigation .rb-cta > a {
  position: relative;
  overflow: hidden;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.1em;
  background: transparent;
  color: var(--wp--preset--color--black);
  border: 1px solid var(--wp--preset--color--black);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.35s ease;
}

.rb-header .wp-block-navigation .rb-cta > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--black);
  transform: translateX(-101%);
  transition: transform 0.35s ease;
}

.rb-header .wp-block-navigation .rb-cta > a:hover {
  color: var(--wp--preset--color--white);
}

.rb-header .wp-block-navigation .rb-cta > a:hover::before {
  transform: translateX(0);
}

/* ---------- Page head ---------- */

.rb-page-head {
  padding-block: calc(var(--rb-entry-gap) * 0.7) var(--wp--preset--spacing--50);
}

.rb-page-head__title {
  margin: 0 0 var(--wp--preset--spacing--50);
}

.rb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.9375rem;
  /* Flex items keep display:list-item, so their markers survive without this. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-filters li::marker {
  content: none;
}

.rb-filters a {
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  transition: color 0.15s ease;
}

.rb-filters a:hover {
  color: var(--rb-orange-hot);
}

.rb-filters .rb-filters__item--active a {
  color: var(--wp--preset--color--black);
}

.rb-filters .rb-filters__item--active a {
  font-weight: 600;
}

/* ---------- Timeline ---------- */

.rb-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-entry {
  display: grid;
  grid-template-columns: var(--rb-gutter) minmax(0, 1fr);
  column-gap: var(--rb-gutter-gap);
  /* Baseline-align the meta column (small date) with the body column (big
     title) so the date text sits on the same horizontal line as the title
     — the browser accounts for font metrics automatically. */
  align-items: baseline;
}

.rb-entry__meta {
  padding-left: 1.5rem;
  padding-block: var(--rb-entry-gap) 0;
}

.rb-entry:first-child .rb-entry__meta {
  padding-top: 0;
}

.rb-entry__date {
  position: sticky;
  top: calc(var(--rb-header-h) + 1.5rem);
  font-size: 0.75rem;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

.rb-entry__date a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rb-entry__date a:hover {
  color: var(--rb-orange-hot);
}

/* Hollow dot by default; timeline.js marks the currently-read entry with
   .is-current, which fills the dot orange. */
.rb-entry__date::before {
  content: "";
  position: absolute;
  left: calc(-1rem - (var(--rb-dot) / 2));
  top: 0.6em;
  width: var(--rb-dot);
  height: var(--rb-dot);
  border-radius: 50%;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--muted);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.rb-entry.is-current .rb-entry__date::before,
.rb-entry:hover .rb-entry__date::before {
  background: var(--rb-orange-hot);
  border-color: var(--rb-orange-hot);
}

/* Caps the whole entry column — title, image and prose — at one readable
   measure. Without it the content stretches to the full wide width and lines
   run far past a comfortable reading length. */
.rb-entry__body {
  padding-block: var(--rb-entry-gap) 0;
  min-width: 0;
  max-width: 46rem;
}

.rb-entry:first-child .rb-entry__body {
  padding-top: 0;
}

.rb-entry__body > :last-child {
  margin-bottom: 0;
}

.rb-entry__title {
  margin: 0 0 var(--wp--preset--spacing--40);
}

/* Kill any block-editor-injected top margin on the first child of an entry
   so the title lines up with the sibling date+dot in the meta column. */
.rb-entry__body > *:first-child {
  margin-top: 0;
}

.rb-entry__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rb-entry__title a:hover {
  color: var(--rb-orange-hot);
}

.rb-entry .wp-block-post-featured-image {
  margin-bottom: var(--wp--preset--spacing--50);
}

.rb-entry .wp-block-post-featured-image img {
  border-radius: 10px;
  border: 1px solid var(--wp--preset--color--border);
}

/* ---------- Entry prose ---------- */

.rb-prose > * + * {
  margin-top: var(--wp--preset--spacing--40);
}

.rb-prose ul,
.rb-prose ol {
  padding-left: 1.25rem;
}

.rb-prose ul {
  list-style-type: circle;
}

.rb-prose li + li {
  margin-top: 0.5rem;
}

.rb-prose h2,
.rb-prose h3 {
  margin-top: var(--wp--preset--spacing--50);
}

.rb-prose img {
  border-radius: 10px;
}

.rb-prose code {
  background: var(--wp--preset--color--surface-raised);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.875em;
}

/* Inline "— lede" text inside an H3, styled lighter and smaller so the title
   and its explainer read as one line without competing for weight. */
.rb-h3-lede {
  font-weight: 400;
}

/* ---------- Phone mockup ---------- */

/* Wraps a full-screen mobile screenshot in an iPhone-Pro-style body with a
   Dynamic Island overlay. */
.rb-phone {
  position: relative;
  width: 280px;
  max-width: 100%;
  margin: 2.5rem auto;
  padding: 12px;
  background: var(--wp--preset--color--black);
  border-radius: 44px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.rb-phone img {
  display: block;
  width: 100%;
  border-radius: 32px;
}

.rb-phone__island {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}

/* ---------- Taxonomy chips ---------- */

/* Category chip sits at the end of the entry as trailing metadata; small,
   square, unobtrusive. */
.rb-entry .wp-block-post-terms,
.rb-single .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--wp--preset--spacing--40);
}

.rb-entry .wp-block-post-terms a,
.rb-single .wp-block-post-terms a {
  position: relative;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 2px;
  padding: 0.25em 0.5em;
  transition: color 0.35s ease, border-color 0.35s ease;
}

/* Black fill slides in from the left, sitting behind the label text. Parent's
   z-index:0 gives us a stacking context so z-index:-1 stays below the text
   but still visible inside the chip. */
.rb-entry .wp-block-post-terms a::before,
.rb-single .wp-block-post-terms a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--black);
  transform: translateX(-101%);
  transition: transform 0.35s ease;
}

.rb-entry .wp-block-post-terms a:hover,
.rb-single .wp-block-post-terms a:hover {
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--black);
}

.rb-entry .wp-block-post-terms a:hover::before,
.rb-single .wp-block-post-terms a:hover::before {
  transform: translateX(0);
}

.rb-entry .wp-block-post-terms__separator,
.rb-single .wp-block-post-terms__separator {
  display: none;
}

/* ---------- Pagination ---------- */

.rb-pagination {
  margin-top: var(--rb-entry-gap);
  padding: var(--wp--preset--spacing--50) 0 var(--rb-entry-gap);
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 0.9375rem;
}

.rb-pagination a {
  text-decoration: none;
}

.rb-pagination a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rb-orange-hot);
}

/* ---------- Footer ---------- */

.rb-footer {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--50);
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
}

/* Same as the header: the footer group is flow so its top border spans the
   viewport, which leaves `alignwide` inert on the inner row. */
.rb-footer__inner {
  max-width: calc(
    var(--wp--style--global--wide-size) +
    var(--wp--style--root--padding-left) +
    var(--wp--style--root--padding-right)
  );
  margin-inline: auto;
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* ---------- Single ---------- */

.rb-single {
  padding-block: var(--rb-entry-gap);
}

/* Plain text back-link with an arrow that nudges left on hover. The arrow is
   an ::before so it can transform independently of the label text. */
.rb-single__back {
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: 0.75rem;
}

.rb-single__back a {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.rb-single__back a::before {
  content: "\2190";
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.15s ease;
}

.rb-single__back a:hover {
  color: var(--rb-orange-hot);
}

.rb-single__back a:hover::before {
  transform: translateX(-3px);
}

/* Trailing metadata below the article body, paired with the category chip. */
.rb-single__date {
  font-size: 0.75rem;
  color: var(--wp--preset--color--muted);
  margin-top: 0.5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 840px) {
  :root {
    --rb-entry-gap: 2.25rem;
  }

  /* The gutter line and sticky date depend on a two-column grid; both are
     dropped on narrow screens rather than reflowed. */
  .rb-entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .rb-entry__meta {
    border-left: 0;
    padding-left: 0;
    padding-block: var(--rb-entry-gap) var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--border);
  }

  .rb-entry:first-child .rb-entry__meta {
    border-top: 0;
  }

  .rb-entry__date {
    position: static;
  }

  .rb-entry__date::before {
    display: none;
  }

  .rb-entry__body {
    padding-block: 0;
  }
}

@media (max-width: 600px) {
  /* Stack the footer row on a phone rather than letting it wrap awkwardly. */
  .rb-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}