/**
 * Daily Rider Community: the look of the site's own layouts, built from WordPress's core blocks (1.22.0, when
 * GreenShift and Blocksy Companion went). The blocks carry their own settings (colours, padding, sizes) where the
 * block editor has one; what the editor cannot say (a different size on phones, a label pill, a hover zoom) is here,
 * by a class on the block. Loaded on the site and in the block editor, so editing looks like the page.
 *
 * TRAP: the theme pads every group that has a background colour (:root :where(.wp-block-group.has-background), same
 * weight as one class, and it loads later), so a padding here is written .wp-block-group.<class>, all four sides.
 */

/* ---------- The subscribe band above the footer (content block 625) ---------- */
/* GreenShift's row with base.css's slimmer padding (1.7.0), on the theme's breakpoints: heading and form side by side,
   100px apart (50px below 1000px); stacked 30px apart, the heading centred, below 690px. Core stacks its columns below
   782px with rules of its own, hence the longer selectors. */
.wp-block-group.drc-subscribe-band { padding: 28px 0; }
.wp-block-group.drc-subscribe-band > .wp-block-columns { flex-wrap: wrap !important; justify-content: space-between; align-items: center; gap: 0; width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin-inline: auto; margin-block: 0; }
.wp-block-group.drc-subscribe-band > .wp-block-columns > .wp-block-column { flex: 0 0 calc(50% - 50px) !important; }
.drc-subscribe-band__title { margin: 0; font-size: 21px; line-height: 1.3; }
.wp-block-group.drc-subscribe-band__box { padding: 8px; border-radius: 3px; }
@media (max-width: 999.98px) {
	.wp-block-group.drc-subscribe-band { padding: 24px 0; }
	.wp-block-group.drc-subscribe-band > .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 25px) !important; }
	.drc-subscribe-band__title { font-size: 19px; }
}
@media (max-width: 689.98px) {
	.wp-block-group.drc-subscribe-band > .wp-block-columns { row-gap: 30px; }
	.wp-block-group.drc-subscribe-band > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.drc-subscribe-band__title { text-align: center; }
}

/* ---------- The strip under an article's title: breadcrumbs, and the share buttons (content block 719) ---------- */
.wp-block-group.drc-post-strip { padding: 15px 0; margin: 0; border-bottom: 1px solid var(--theme-palette-color-5, #e8ebed); }
.drc-post-strip__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin: 0 auto; }
.drc-post-strip__row > * { width: calc(50% - 15px); margin: 0 !important; }
.drc-post-strip__share { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; column-gap: 20px; }
.drc-post-strip__share > * { margin: 0 !important; }
.drc-post-strip__label { font-size: 14px; font-weight: 600; color: var(--theme-palette-color-3, #5e5e5e); }
/* On the theme's breakpoints. "Share your love" stays up below 1000px: GreenShift's rule to hide it there never matched
   (it was written "body body #..."), and the page has always shown it. */
@media (max-width: 999.98px) {
	.drc-post-strip__row { row-gap: 10px; }
	.drc-post-strip__row > * { width: 100%; }
	.drc-post-strip__share { justify-content: flex-start; }
}
@media (max-width: 689.98px) { .wp-block-group.drc-post-strip { display: none; } }

/* ---------- The black band at the top of category and tag pages (content block 673) ---------- */
.wp-block-group.drc-archive-hero { padding: 0; margin: 0; }
.drc-archive-hero__inner { width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin: 0 auto !important; padding: 60px 0; border-top: 1px solid #ffffff33; }
.drc-archive-hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; align-content: flex-end; margin: 0 !important; }
.drc-archive-hero__row > * { width: calc(50% - 25px); margin: 0 !important; }
.drc-archive-hero__share { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; column-gap: 20px; }
.drc-archive-hero__share > * { margin: 0 !important; }
.drc-archive-hero__label { font-size: 14px; font-weight: 600; color: #ffffffa8; }
/* On the theme's breakpoints: no "Share your love" below 1000px; stacked below 690px, the buttons 20px lower. */
@media (max-width: 999.98px) { .drc-archive-hero__label { display: none; } }
@media (max-width: 689.98px) {
	.drc-archive-hero__row > * { width: 100%; }
	.drc-archive-hero__share { transform: translateY(20px); }
}

/* ---------- Shared pieces ---------- */
/* A heading row: the title at the left, a "View More" link at the right. */
.drc-more-link { margin: 0; }
.drc-more-link a { display: inline-flex; align-items: center; min-height: var(--theme-button-min-height, 40px); font-size: 15px; font-weight: 500; color: #ffffffa8; text-decoration: none; }
.drc-more-link a:hover { color: #fff; }
.drc-more-link a::after { content: ""; width: 15px; height: 15px; margin-left: 13px; background: currentColor; -webkit-mask: var(--drc-arrow) center / contain no-repeat; mask: var(--drc-arrow) center / contain no-repeat; }
:root { --drc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 896 1024'%3E%3Cpath d='M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z'/%3E%3C/svg%3E"); }
/* Tags and categories as coloured pills (each term's colours from term-colours.php, by .ct-term-ID). A term with no
   colours of its own shows white text on the theme's blue (base.css 1.17.3 did this for Blocksy's pills); rows that
   wrap are 6px apart (each pill 3px above and below, the box pulled back 3px; Additional CSS 2026-10-23 did this). */
.wp-block-post-terms.drc-pills.drc-pills { margin-block: -3px; } /* outweighs WordPress's first-child margin reset in flow layouts */
.drc-pills a { --theme-link-initial-color: #ffffff; --theme-link-hover-color: #ffffff; display: inline-flex; margin-block: 3px; padding: 5px 10px; border-radius: 2px; color: var(--theme-link-initial-color); background-color: var(--theme-button-background-initial-color); text-decoration: none; }
.drc-pills a:hover { color: var(--theme-link-hover-color); background-color: var(--theme-button-background-hover-color); }
/* A dark card: the article's photo fills it, dimmed, and grows a little on hover; the words sit at the bottom. */
.wp-block-group.drc-card-overlay { position: relative; display: flex; flex-direction: column; padding: 20px; overflow: hidden; margin: 0; }
.drc-card-overlay__photo { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: .8; overflow: hidden; border-radius: 2px; transition: all .5s cubic-bezier(.165, .84, .44, 1); }
.drc-card-overlay__photo img { width: 100%; height: 100%; object-fit: cover; }
.drc-card-overlay:hover .drc-card-overlay__photo { transform: scale(1.1); }
.drc-card-overlay__body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; margin: 0 !important; }
.drc-card-overlay__body > .drc-card-overlay__tags { position: absolute; top: 0; left: 0; margin-inline: 0; }
@media (max-width: 999.98px) { .wp-block-group.drc-card-overlay { padding: 40px; } }
@media (max-width: 689.98px) { .wp-block-group.drc-card-overlay { padding: 30px; } }

/* ---------- The laptop menu drawer's news (content block 854) ---------- */
.drc-drawer-head { margin: 0 !important; }
.drc-drawer-head--next { margin-top: 50px !important; }
.drc-drawer-head__title { margin: 0; font-size: 18px; color: var(--theme-palette-color-10, #fff); }
.drc-drawer-list { margin-top: var(--theme-content-spacing, 24px) !important; }

/* ---------- Article sidebar: the "Breaking" card (widget block-1) and the "Hot" list (widget block-7) ---------- */
.ct-sidebar .wp-block-query.drc-sidebar-card { margin-top: var(--wp--preset--spacing--20); } /* outweighs the first-child reset; Blocksy set it inline */
.drc-side-list .wp-block-post-template > li { margin-block: 0 24px; }
.drc-side-list .wp-block-post-template > li > .wp-block-columns { margin-bottom: 0; }
.wp-block-group.drc-card-overlay--tall { padding: 30px; }
.drc-card-overlay--tall .drc-card-overlay__photo { transition: all .5s cubic-bezier(.42, 0, .58, 1); }
.drc-card-overlay--tall .drc-card-overlay__body { min-height: 450px; }
.drc-pills--dark a, .drc-pills--dark a:hover { color: #fff; background-color: #000; }
/* Blocksy's zoom on hover, for core's Featured Image (image_hover_effect zoom-in). */
.drc-hover-zoom-in { overflow: hidden; }
.drc-hover-zoom-in img { transition: transform .5s ease; }
.drc-hover-zoom-in:hover img { transform: scale(1.1); }

/* ---------- "Share Your Ride. Become a Daily Rider Author." (Contact and the home page) ---------- */
/* GreenShift's row, on the theme's breakpoints: two columns 50px apart, half and half; two thirds and a third below
   1000px; stacked 20px apart below 690px, where the padding drops to 30px. Core stacks its
   columns below 782px with rules of its own, hence the longer selectors. */
.wp-block-cover.drc-cta-band { min-height: 0; padding: 50px; border-radius: 5px; overflow: hidden; align-items: stretch; }
.wp-block-cover.drc-cta-band .wp-block-cover__background, .wp-block-cover.drc-cta-band .wp-block-cover__image-background { border-radius: 5px; }
.drc-cta-band > .wp-block-cover__inner-container { width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin-inline: auto; }
.wp-block-columns.drc-cta-band__row { flex-wrap: wrap !important; justify-content: space-between; gap: 0; margin: 0 !important; }
.wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__text { flex: 0 0 calc(50% - 25px) !important; }
.wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__action { flex: 0 0 calc(50% - 25px) !important; }
.drc-cta-band__action { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.drc-cta-band .drc-cta-band__title { margin: 0 0 15px; font-size: 23px; color: var(--theme-palette-color-10, #fff); }
.drc-cta-band__line { margin: 0; font-size: 15px; color: #ffffffbd; }
/* Contact's button box sat 2px up from the foot of its column; the home page's did not. */
.drc-cta-band .drc-cta-band__action > .wp-block-buttons { margin: 0 0 2px; }
.drc-cta-band--home .drc-cta-band__action > .wp-block-buttons { margin-bottom: 0; }
.drc-cta-band .drc-cta-band__button .wp-block-button__link { display: inline-block; padding: 10px 25px; font-size: 16px; /* the old <button>'s size */ color: #fff; background-color: #000; border: 2px solid #1a1a1a; border-radius: 5px; box-shadow: 0 1px 3px 0 #00000005; text-decoration: none; transition: .25s; }
.drc-cta-band__button .wp-block-button__link:hover { box-shadow: 0 8px 15px 0 #00000040; transform: translateY(-3px); }
@media (max-width: 999.98px) {
	.wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__text { flex-basis: calc(200% / 3 - 25px) !important; }
	.wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__action { flex-basis: calc(100% / 3 - 25px) !important; }
	/* Contact's button dropped to the foot of its column; the home page's stayed in the middle. Both stay centred
	   across (GreenShift's right-aligning box was only as wide as the button). */
	.drc-cta-band__action { justify-content: flex-end; }
	.drc-cta-band--home .drc-cta-band__action { justify-content: center; }
}
@media (max-width: 689.98px) {
	.wp-block-cover.drc-cta-band { padding: 30px; }
	.wp-block-columns.drc-cta-band__row { row-gap: 20px; }
	.wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__text, .wp-block-columns.drc-cta-band__row > .wp-block-column.drc-cta-band__action { flex-basis: 100% !important; }
	.drc-cta-band__action { justify-content: center; }
	.drc-cta-band .drc-cta-band__title { font-size: 20px; }
}

/* ---------- About (page 2), from GreenShift's settings for it ----------
   Its groups have no automatic gap (blockGap 0), which WordPress enforces by zeroing every child's margins at one
   class's weight; so each margin here is written under its section's class, to outweigh that. */
.drc-about-values__row, .drc-about-story__row, .drc-about-authors__row, .drc-about-promise__row { display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin: 0 auto !important; }
.drc-about-values p, .drc-about-story p, .drc-about-authors p, .drc-about-promise p { margin: 0; }
.drc-about-values img, .drc-about-story img, .drc-about-authors img, .entry-content .drc-about-hero img { display: inline-block; vertical-align: top; }

.entry-content .wp-block-image.drc-about-hero { margin: 0 0 50px; filter: brightness(.9); }
.drc-about-hero img { border-radius: 2px; }

.entry-content .drc-about-values { margin: 0 0 80px; }
.drc-about-values .drc-about-values__item { width: calc(100% / 3 - 25px); }
.drc-about-values .drc-about-values__title { margin: 0 0 20.5px; }

.entry-content .wp-block-group.drc-about-story { margin: 0 0 80px; padding: 80px 0; border-radius: 2px; }
.drc-about-story .drc-about-story__aside { width: calc(45% - 40px); }
.drc-about-story .drc-about-story__main { width: calc(55% - 40px); }
.drc-about-story .wp-block-image.drc-about-story__photo { margin: 0 0 20px; }
.drc-about-story__photo img { width: 100%; height: auto; border-radius: 2px; }
.drc-about-story .wp-block-pullquote { margin: 0 0 25px; }
.drc-about-story .drc-about-founder { display: flex; flex-direction: row; align-items: center; column-gap: 20px; margin: 20px 0 0; }
.drc-about-story .wp-block-image.drc-about-founder__photo { margin: 0; }
.drc-about-founder__photo img { width: 75px; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 26%; border-radius: 200px; }
.drc-about-story .drc-about-founder__name { margin: 0; color: var(--theme-palette-color-10, #fff); }
.drc-about-story p.drc-about-founder__role { font-size: 14px; font-weight: 500; color: var(--theme-palette-color-10, #fff); }
.drc-about-story .drc-about-story__title { margin: 0 0 30px; font-size: 50px; line-height: 1.3em; color: var(--theme-palette-color-10, #fff); }
.drc-about-story p.drc-about-story__text { color: var(--theme-palette-color-10, #fff); }

.entry-content .drc-about-authors-title { margin: 0 0 25px; font-size: 23px; }
.entry-content .drc-about-authors { margin: 0 0 80px; }
.drc-about-authors .drc-about-authors__row { row-gap: 40px; }
.drc-about-authors .drc-author-card { width: calc(25% - 20px); }
.drc-about-authors .wp-block-image.drc-author-card__photo { margin: 0 0 25px; }
.drc-author-card__photo img { border-radius: 2px; }
.drc-about-authors .drc-author-card__name { margin: 0 0 5px; }
.drc-about-authors p.drc-author-card__role { font-size: 13px; font-weight: 500; text-transform: uppercase; }

.entry-content .drc-about-promise { margin: 0; }
.drc-about-promise .wp-block-group.drc-about-promise__panel { width: calc(50% - 25px); padding: 40px; border-radius: 2px; }
.drc-about-promise .drc-about-promise__item { display: flex; flex-direction: row; align-items: flex-start; column-gap: 20px; margin: 0 0 50px; }
.drc-about-promise .drc-about-promise__item:last-child { margin-bottom: 0; }
.drc-about-promise__item::before { content: ""; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: var(--theme-palette-color-10, #fff) var(--drc-check) center / 20px 20px no-repeat; }
:root { --drc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23106abf' d='M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z'/%3E%3C/svg%3E"); }
.drc-about-promise .drc-about-promise__title { margin: 0 0 10px; font-size: 20px; }
.drc-about-promise .drc-about-promise__belief { width: calc(50% - 25px); }
.drc-about-promise .drc-about-promise__headline { margin: 0 0 20px; max-width: 500px; font-size: 50px; line-height: 1.3em; }
.drc-about-promise p.drc-about-promise__lead { margin-bottom: 50px; }
.drc-about-promise .drc-about-promise__button-wrap { margin: 0; }
.drc-about-promise__button .wp-block-button__link { padding: 14px 25px; font-size: 15px; font-weight: 600; text-transform: uppercase; }

@media (max-width: 999.98px) {
	.entry-content .drc-about-values { margin-bottom: 60px; }
	.drc-about-values .drc-about-values__item { width: calc(100% / 3 - 15px); }
	.entry-content .wp-block-group.drc-about-story { margin-bottom: 60px; padding: 60px 0; }
	.drc-about-story .drc-about-story__row { row-gap: 70px; }
	.drc-about-story .drc-about-story__aside, .drc-about-story .drc-about-story__main { width: 100%; }
	.drc-about-story__photo img { height: 500px; object-fit: cover; }
	.drc-about-story .drc-about-founder { justify-content: flex-start; }
	.drc-about-story .drc-about-story__title, .drc-about-promise .drc-about-promise__headline { font-size: 30px; }
	.drc-about-promise .drc-about-promise__row { row-gap: 50px; }
	.drc-about-promise .wp-block-group.drc-about-promise__panel { width: 100%; padding: 30px; }
	.drc-about-promise .drc-about-promise__belief { width: 100%; }
}
@media (max-width: 689.98px) {
	.drc-about-values .drc-about-values__row { row-gap: 30px; }
	.drc-about-values .drc-about-values__item, .drc-about-authors .drc-author-card { width: 100%; }
	.drc-about-story__photo img { height: 400px; }
	.drc-about-story .drc-about-founder { justify-content: center; }
	.drc-about-founder__photo img { width: 60px; }
	.drc-about-values__title, .drc-about-values__line, .drc-about-story__title, .drc-about-story__text, .drc-about-authors-title, .drc-author-card__name, .drc-author-card__role, .drc-about-promise__title, .drc-about-promise__text, .drc-about-promise__headline, .drc-about-promise__lead { text-align: center; }
	.drc-about-promise .drc-about-promise__item { flex-direction: column; align-items: center; row-gap: 20px; }
	.drc-about-promise .drc-about-promise__button-wrap { justify-content: center; }
}

/* The icons and counters drawn with ::before are scoped to .entry-content like the layout rules beside them, so the
   block editor (which has no .entry-content) shows the plain list or text rather than half a design. */

/* ---------- Shared pieces for the home page's lists ---------- */
/* Blocksy's grids went to 2 columns on tablets and 1 on phones; core's keep their count, so they are told. */
@media (max-width: 999.98px) { .wp-block-query[class*="drc-"] > .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 689.98px) { .wp-block-query[class*="drc-"] > .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
/* Excerpts were bare text in Blocksy's lists: no paragraph margins. */
.wp-block-query[class*="drc-"] .wp-block-post-excerpt__excerpt { margin: 0; }
/* A linked date takes its text colour until hovered, as Blocksy's field links did (.ct-dynamic-data a). */
.wp-block-query[class*="drc-"] .wp-block-post-date a { --theme-link-initial-color: initial; }
/* A small heading with an icon before it (the icons were GreenShift icon boxes; their shapes are below). */
.entry-content .drc-head { display: flex; flex-direction: row; align-items: center; column-gap: 10px; margin: 0 0 25px; }
.entry-content .drc-head::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: #ffffffb8; -webkit-mask: var(--drc-head-icon) center / contain no-repeat; mask: var(--drc-head-icon) center / contain no-repeat; }
.drc-head--trending { --drc-head-icon: var(--drc-icon-trending); }
.drc-head--breaking { --drc-head-icon: var(--drc-icon-breaking); }
.drc-head--fire { --drc-head-icon: var(--drc-icon-fire); }
.entry-content .drc-head .drc-head__title { margin: 0; font-size: 15px; font-weight: 600; text-transform: uppercase; color: #ffffffb8; }
/* A photo with the article's categories as black labels over its bottom-left corner. */
.drc-media { position: relative; }
.drc-media .wp-block-post-featured-image { margin: 0; }
/* GreenShift placed the labels' box 15px from the corner; the label row overhung that box by 3px (its -3px margins). */
.drc-media__pills { position: absolute !important; left: 15px; bottom: 12px; margin: 0 !important; }
/* "date / category" on one line, and a list line under a thin rule. */
.drc-meta-line { display: flex; flex-direction: row; column-gap: 5px; }
.drc-meta-line > * { margin: 0 !important; }
.entry-content .drc-list-line { margin: 0; padding-top: 20px; border-top: 1px solid var(--theme-palette-color-5, #e8ebed); }
.entry-content .drc-list-line--dark { border-top-color: #ffffff36; }
:root {
	--drc-icon-trending: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27m16.8 4.8 2.8 2.8-5.9 5.9-4.8-4.9L0 17.5l1.7 1.7L8.9 12l4.8 4.8 7.5-7.6L24 12V4.8h-7.2z%27/%3E%3C/svg%3E");
	--drc-icon-breaking: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M0 9.8V14c0 .8.5 1.6 1.3 1.8l3.3 1v3.5c0 1 .8 1.8 1.8 1.8h3.7c1 0 1.8-.8 1.8-1.8V19l9.6 2.8c.2 0 .3.1.5.1 1 0 1.8-.8 1.8-1.8v-16c0-.2 0-.3-.1-.5-.3-1-1.3-1.5-2.3-1.3L1.3 8C.5 8.2 0 8.9 0 9.8zm12 7.1V6.8l10.2-3v16L12 16.9zm-5.5.3 3.7 1.1v1.9H6.5v-3zM1.8 9.8l8.3-2.4v9L1.8 14V9.8z%27/%3E%3C/svg%3E");
	--drc-icon-clock: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1024 1024%27%3E%3Cpath d=%27M981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472-246.997 52.565-331.861 137.472-137.472 202.283-137.472 331.861 52.565 246.997 137.472 331.861 202.283 137.472 331.861 137.472 246.997-52.565 331.861-137.472 137.472-202.283 137.472-331.861zM896 512c0 106.069-42.923 201.984-112.469 271.531s-165.461 112.469-271.531 112.469-201.984-42.923-271.531-112.469-112.469-165.461-112.469-271.531 42.923-201.984 112.469-271.531 165.461-112.469 271.531-112.469 201.984 42.923 271.531 112.469 112.469 165.461 112.469 271.531zM469.333 256v256c0 16.597 9.472 31.019 23.595 38.144l170.667 85.333c21.077 10.539 46.72 2.005 57.259-19.072s2.005-46.72-19.072-57.259l-147.115-73.515v-229.632c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667z%27/%3E%3C/svg%3E");
	--drc-icon-play: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 40%27%3E%3Cpath d=%27M20 0C9 0 0 9 0 20s9 20 20 20 20-9 20-20S31 0 20 0zm-4.2 27.5V13.3l10.8 7.1-10.8 7.1z%27/%3E%3C/svg%3E");
	--drc-icon-fire: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 24C6 24 1.2 19.5 1.2 13.9c0-2.5 1.2-5.4 3.4-8.6.3-.3.7-.5 1.1-.4.4 0 .8.3 1 .6.6 1.2 1.2 2.1 1.9 2.7.2.2.4.4.6.5.2-1.7.6-3.1 1.2-4.4.8-1.7 1.9-3.1 3.3-4.1.5-.3 1.1-.3 1.5.1 3.5 3.3 7.6 7.7 7.6 13.6C22.8 19.5 18 24 12 24zM5.5 8.3c-1.3 2.1-1.9 4-1.9 5.6 0 4.2 3.8 7.7 8.4 7.7 4.6 0 8.4-3.4 8.4-7.7 0-4.6-3-8.2-6.1-11.1-.7.7-1.3 1.5-1.7 2.5-.7 1.4-1.1 3.2-1.3 5.2 0 .3-.2.6-.5.9-.3.2-.6.3-.9.2-1.2-.2-2.2-.8-3.1-1.6-.4-.5-.8-1-1.3-1.7zm7.9 10.9c2.4-.4 4.3-2.3 4.7-4.7.1-.7-.3-1.3-1-1.4-.7-.1-1.3.3-1.4 1-.2 1.4-1.3 2.4-2.7 2.7-.7.1-1.1.7-1 1.4.1.6.6 1 1.2 1 .1.1.1 0 .2 0z%27/%3E%3C/svg%3E");
}

/* ---------- Home (page 7), from GreenShift's settings for it ---------- */
.drc-home-hero__row, .drc-home-pair__row, .drc-home-picks__row, .drc-home-stories__row, .drc-home-cats__row { display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin: 0 auto !important; }
.entry-content .drc-home-title { margin: 0 0 25px; font-size: 22px; }
/* Blocksy's own heading spacing, which a zero-gap group takes away. */
.entry-content .drc-home-title--flush { margin-top: 0; margin-bottom: calc(.3em + 10px); }

/* 1. The photo band at the top. */
.entry-content .wp-block-cover.drc-home-hero { min-height: 0; margin: 0 0 60px; padding: 100px 0; }
.drc-home-hero__main { width: calc(200% / 3 - 50px); display: flex; flex-direction: column; justify-content: space-between; }
.drc-home-hero__side { width: calc(100% / 3 - 50px); }
.entry-content .drc-home-hero__lead { max-width: 650px; margin: 0; }
.entry-content .drc-home-hero__trending { max-width: 650px; margin: 50px 0 0; }
/* Blocksy's article lists laid each article out as a flow: every piece but a heading had the content spacing
   below it, the last none; a list given its own gap used that instead. Core's list items are not a flow, so the
   home lists are given the same rule. */
:where(.wp-block-query[class*="drc-home"]) .wp-block-post > :where(:not(h1, h2, h3, h4, h5, h6)) { margin-block: 0 var(--drc-item-gap, var(--theme-content-spacing)); }
.drc-home-lead, .drc-home-worth, .drc-home-videos, .drc-home-cat-lead { --drc-item-gap: 30px; }
.drc-home-talked { --drc-item-gap: 20px; }
.drc-home-cat-more { --drc-item-gap: 0px; }
:where(.wp-block-query[class*="drc-home"]) .wp-block-post > :last-child { margin-block-end: 0; }
/* GreenShift's 15px under the tags, less the 3px the pill rows give back. */
.drc-home-lead .wp-block-post-terms.drc-pills.drc-home-lead__tags { margin-bottom: 12px; }
.drc-home-trending .drc-media .wp-block-post-featured-image img, .drc-home-popular .wp-block-post-featured-image img, .drc-home-editors .wp-block-post-featured-image img, .drc-home-worth .wp-block-post-featured-image img, .drc-home-videos .wp-block-post-featured-image img, .drc-home-cat-lead .wp-block-post-featured-image img, .drc-home-side .wp-block-post-featured-image img { border-radius: 2px; }

/* 2. "Breaking News" and "Popular Now". */
.entry-content .drc-home-pair { margin: 0 0 60px; }
.drc-home-pair__col { width: calc(50% - 15px); }
.wp-block-group.drc-card-overlay--hero { padding: 50px; }
.drc-card-overlay--hero .drc-card-overlay__body { min-height: 550px; }

/* 3. "Share Your Ride" on the home page: the GreenShift button here wore the theme's button size. */
.entry-content .wp-block-cover.drc-cta-band--home { margin: 0 0 60px; }
.drc-cta-band--home .drc-cta-band__line { color: #ffffffe6; }
.drc-cta-band.drc-cta-band--home .drc-cta-band__button .wp-block-button__link { padding: var(--theme-button-padding, 5px 20px); font-size: var(--theme-button-font-size, 15px); }

/* 4. "Editor Choice", "Worth Reading" and the newsletter box. */
.entry-content .drc-home-picks { margin: 0 0 60px; }
.drc-home-picks__main { width: calc(75% - 15px); }
.drc-home-picks__side { width: calc(25% - 15px); }
.entry-content .wp-block-group.drc-home-newsletter { margin: 30px 0 0; padding: 30px; border-radius: 2px; }
/* Inside the box the theme's spacing applied: headings .3em + 10px below, paragraphs the content spacing. */
.wp-block-group.drc-home-newsletter > h3 { margin-bottom: calc(.3em + 10px); }
.wp-block-group.drc-home-newsletter > p { margin-bottom: var(--theme-content-spacing); }

/* 5. The rider stories photo band. */
.entry-content .wp-block-cover.drc-home-stories { min-height: 0; margin: 0 0 60px; padding: 120px 0; }
.drc-home-stories__main { width: calc(200% / 3 - 15px); display: flex; flex-direction: column; justify-content: flex-start; }
.entry-content .drc-home-stories__side { width: calc(100% / 3 - 15px); padding: 0 0 0 30px; border-left: 1px solid #ffffff36; }
.entry-content .drc-home-stories__lead { max-width: 650px; margin: 0; }
.entry-content .drc-home-story__top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 15px; }
.drc-home-story__when { display: flex; flex-direction: row; align-items: center; column-gap: 5px; }
.drc-home-story__when::before { content: ""; width: 15px; height: 15px; flex: 0 0 15px; background: var(--theme-palette-color-10, #fff); -webkit-mask: var(--drc-icon-clock) center / contain no-repeat; mask: var(--drc-icon-clock) center / contain no-repeat; }
.drc-home-story__when > * { margin: 0 !important; }
.entry-content .drc-home-stories__more { margin: 70px 0 20px; font-size: 15px; font-weight: 600; text-transform: uppercase; color: var(--theme-palette-color-10, #fff); }
.entry-content .drc-home-explore { display: flex; flex-direction: row; align-items: center; column-gap: 15px; margin: 70px 0 0; }
.entry-content .drc-home-explore::before { content: ""; width: 40px; height: 40px; flex: 0 0 40px; background: var(--theme-palette-color-10, #fff); -webkit-mask: var(--drc-icon-play) center / contain no-repeat; mask: var(--drc-icon-play) center / contain no-repeat; }
/* Near-white on the dark photo in both modes (the palette colour GreenShift used turns near-black in dark mode). */
.entry-content .drc-home-explore__link { margin: 0; font-size: 15px; font-weight: 600; text-transform: uppercase; color: #fbfbfc; }
.drc-home-explore__link a { color: #fbfbfc; }

/* 6. Three categories. */
/* The last section keeps its 60px: GreenShift set it by id, above core's last-child rule. */
.entry-content .wp-block-group.drc-home-cats { margin: 0 0 60px; }
.drc-home-cats__col { width: calc(100% / 3 - 15px); }
.entry-content .drc-home-cats__title { margin: 0 0 20px; font-size: 15px; font-weight: 600; text-transform: uppercase; }
.entry-content .drc-home-cat-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--theme-palette-color-5, #e8ebed); }
.drc-home-cat-line__thumb { width: calc(30% - 10px); }
.drc-home-cat-line__text { width: calc(70% - 10px); }
.drc-home-cat-line .wp-block-post-featured-image { margin: 0; }

@media (max-width: 999.98px) {
	.drc-home-hero__main, .drc-home-pair__col, .drc-home-picks__main, .drc-home-picks__side, .drc-home-stories__main { width: 100%; }
	.entry-content .drc-home-hero__lead, .entry-content .drc-home-hero__trending, .entry-content .drc-home-stories__lead { max-width: 100%; }
	.drc-home-hero__side, .entry-content .drc-home-explore, .drc-home-cat-line__thumb { display: none; }
	.drc-home-pair__row, .drc-home-picks__row, .drc-home-stories__row { row-gap: 60px; }
	.wp-block-group.drc-card-overlay--hero { padding: 40px; }
	.entry-content .wp-block-cover.drc-home-stories { padding: 80px 0; }
	.entry-content .drc-home-stories__side { width: 100%; padding: 60px 0 0; border-left: 0; border-top: 1px solid #ffffff36; }
	.drc-home-cat-line__text { width: 100%; }
	.drc-home-cat-line { row-gap: 20px; }
}
@media (max-width: 689.98px) {
	.entry-content .drc-home-hero__trending { display: none; }
	.wp-block-group.drc-card-overlay--hero { padding: 30px; }
	.drc-home-cats__row { row-gap: 50px; }
	.drc-home-cats__col { width: 100%; }
	.drc-cta-band--home .drc-cta-band__title, .drc-cta-band--home .drc-cta-band__line { text-align: center; }
}

/* ---------- Posts: the table of contents (was GreenShift's, the same look in every post) ---------- */
/* A numbered list of links to the post's main headings: bordered, alternate rows grey, the numbers in red circles. */
.entry-content ol.drc-toc { counter-reset: drc-toc; margin: 15px 0 30px; padding: 0; list-style: none; border: 1px solid #dddddd7d; }
.entry-content ol.drc-toc > li { counter-increment: drc-toc; display: flex; align-items: center; margin: 0; padding: 15px 15px 15px 5px; font-size: 18px; line-height: 24px; background-color: #fff; }
.entry-content ol.drc-toc > li:nth-child(2n) { background-color: #eee; }
.entry-content ol.drc-toc > li::before { content: counter(drc-toc); flex: 0 0 25px; width: 25px; height: 25px; margin: 0 20px 0 15px; border-radius: 50%; font-size: 16px; font-weight: 700; line-height: 25px; text-align: center; color: #fff; background-color: #de1414; }
.entry-content ol.drc-toc a { color: #000; text-decoration: none; }
/* A heading jumped to stops 50px below the top, as GreenShift's script scrolled it (the theme's own offset, plus 50). */
body:has(.drc-toc) { --scroll-margin-top: 50px; }

/* ---------- Posts: the green note (was GreenShift's info box, post 1540) ---------- */
/* The info icon (GreenShift's) sits in the padding, 28px square, with the text 15px past it. */
:root { --drc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0C114.497 0 0 114.507 0 256c0 141.503 114.507 256 256 256 141.503 0 256-114.507 256-256C512 114.497 397.492 0 256 0zm0 472c-119.393 0-216-96.615-216-216 0-119.393 96.615-216 216-216 119.393 0 216 96.615 216 216 0 119.393-96.616 216-216 216z'/%3E%3Cpath d='M256 214.33c-11.046 0-20 8.954-20 20v128.793c0 11.046 8.954 20 20 20s20-8.955 20-20.001V234.33c0-11.046-8.954-20-20-20z'/%3E%3Ccircle cx='256' cy='162.84' r='27'/%3E%3C/svg%3E"); }
.entry-content .wp-block-group.drc-infobox { position: relative; margin: 0 0 25px; padding: 20px 35px 20px 63px; border-left: 5px solid #c3e6cb; color: #155724; background-color: #d4edda; }
.entry-content .wp-block-group.drc-infobox::before { content: ""; position: absolute; top: 20px; left: 20px; width: 28px; height: 28px; background-color: #30a030; -webkit-mask: var(--drc-icon-info) center / contain no-repeat; mask: var(--drc-icon-info) center / contain no-repeat; }
.wp-block-group.drc-infobox > p:not(:last-child) { margin-bottom: 20px; }

/* ---------- Posts: the price tables (were GreenShift elements, post 1540) ---------- */
.wp-block-table.drc-spec-table table { border-collapse: collapse; width: 100%; }
.wp-block-table.drc-spec-table :is(td, th) { padding: 6px 12px; border: 1px solid #00000012; font-size: 14px; }
.wp-block-table.drc-spec-table th { font-size: 16px; background-color: var(--wp--preset--color--lightbg, #cddceb21); }

/* ---------- Posts: two embeds side by side (was a GreenShift row, post 886) ---------- */
/* The row, its inner box at the container width, and two half columns that stack below 690px, as GreenShift laid them. */
.entry-content .wp-block-group.drc-embed-pair { display: flex; flex-wrap: wrap; justify-content: space-between; margin-block: 0; }
.wp-block-group.drc-embed-pair__inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--theme-container-width, 1200px); max-width: var(--theme-normal-container-max-width, 1200px); margin: 0 auto; }
.wp-block-group.drc-embed-pair__col { box-sizing: border-box; width: 50%; padding: 15px min(3vw, 20px); }
@media (max-width: 689.98px) { .wp-block-group.drc-embed-pair__col { width: 100%; } }

/* ---------- Posts: the large quote (was a GreenShift element, post 499) ---------- */
/* 30px on every screen, as GreenShift set it (a size set on the block would turn fluid, smaller on phones). */
.wp-block-quote.drc-big-quote { font-size: 30px; }