/*
Theme Name: RiderMates News
Theme URI: https://ridermates.co.nz/news
Author: RiderMates
Description: News and guides theme for RiderMates. Matches the RiderMates app design: category filters, featured stories, ad slots, newsletter signup, most-read list, reading time, auto table of contents and links back into the Marketplace, Group Rides and Cafe Stop.
Version: 1.8.5
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ridermates
*/

/* ---------- Tokens ---------- */
:root {
	--bg: #f1f1f3;
	--card: #ffffff;
	--ink: #111111;
	--ink2: #2a2a30;
	--muted: #5f5f66;
	--line: #ececef;
	--tint: #fbf1ea;
	--orange: #d9603b;
	--orange-dark: #c24f2c;
	--accent: #a3401c;
	--good: #1f6b5c;
	--dark: #141414;
	--radius: 22px;
	--display: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
	--body: "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;
	--wrap: 1280px;
	--gutter: clamp(16px, 3vw, 40px);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { color: #7d2f12; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; background: var(--card); color: var(--ink); padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.hidden { display: none !important; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Buttons, chips, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .2s, transform .12s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid #d6d6d9; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { width: 100%; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.chip:hover { background: #e6e6e9; color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field, .search-field { width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid #d6d6d9; padding: 0 18px; font: inherit; font-size: 15px; background: var(--card); color: var(--ink); }
.field:focus, .search-field:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(217, 96, 59, .15); }

/* ---------- Header ---------- */
.site-header { padding-top: 12px; padding-bottom: 12px; }
.site-header .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand .badge { background: var(--ink); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 18px; }
.brand .dot { color: var(--orange); }
.custom-logo { max-height: 44px; width: auto; }
.main-nav { flex: 1; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.main-nav a { display: block; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 13px; border-radius: 999px; }
.main-nav a:hover { background: #e6e6e9; color: var(--ink); }
.main-nav .current-menu-item > a, .main-nav .is-current > a, .main-nav .current_page_parent > a { background: #e3e3e7; }
.nav-toggle { display: none; margin-left: auto; }
@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	.main-nav { flex-basis: 100%; order: 3; display: none; }
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; }
	.header-cta { order: 2; }
}

/* ---------- Layout ---------- */
.site-main { padding-top: 16px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 24px; }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.page-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4.5vw, 56px); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.page-intro { margin: 6px 0 0; font-size: 17px; color: var(--ink2); }
.head-search { width: min(100%, 360px); }
.columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.section-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--card); border-radius: var(--radius); }
.pad { padding: 20px; }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.meta { font-size: 13px; color: var(--muted); }
.story { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.story:hover { color: var(--ink); }
.story:hover .story-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story-title { margin: 0; font-size: 17px; line-height: 1.25; }
.story-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; min-width: 0; }
.thumb { position: relative; overflow: hidden; border-radius: 14px; background: #dfe4da; aspect-ratio: 16 / 10; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.t1 { background: #e9d9cf; } .thumb.t2 { background: #d7e2e4; } .thumb.t3 { background: #e4e1d3; } .thumb.t4 { background: #dad7e6; }
.thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.grid .story { padding: 12px 12px 16px; }

/* Featured */
.featured { display: flex; flex-wrap: wrap; gap: 16px; }
.lead { flex: 2 1 560px; min-width: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
.lead .thumb { border-radius: 0; aspect-ratio: auto; min-height: 300px; }
.lead-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.lead-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; }
.lead-excerpt { margin: 0; font-size: 16px; color: var(--ink2); }
.featured-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mini { padding: 18px; flex: 1; flex-direction: row; gap: 14px; align-items: center; }
.mini .thumb { width: 110px; height: 90px; flex-shrink: 0; aspect-ratio: auto; }
.mini .story-body { padding: 0; }

/* Most read */
.most-read a { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.most-read a:hover span:last-child { text-decoration: underline; }
.most-read .n { font-family: var(--display); font-weight: 900; font-size: 24px; color: var(--orange); line-height: 1; width: 22px; flex-shrink: 0; }
.most-read .t { font-size: 15px; font-weight: 600; line-height: 1.35; }

/* Newsletter, dark banner */
.newsletter { background: var(--tint); display: flex; flex-direction: column; gap: 12px; }
.newsletter-title { font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1.05; margin: 0; }
.newsletter form { display: flex; flex-direction: column; gap: 10px; }
.banner { background: var(--dark); color: #fff; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.banner .kicker { color: #ffb08f; }
.banner-title { font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1.05; margin: 4px 0; }
.banner p { margin: 0; color: #cfcfd4; font-size: 15px; }

/* Ads */
.ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.ad-placeholder { border: 1.5px dashed #c9c9ce; border-radius: 16px; color: #6b6b72; font-size: 13px; background: #f7f7f8; padding: 12px; }
.ad-placeholder b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8a90; }
.ad-leaderboard { width: 100%; max-width: 970px; align-self: center; min-height: 100px; }
.ad-sidebar { min-height: 250px; }
.ad-inarticle { min-height: 120px; margin: 8px 0 26px; }
.ad .widget { width: 100%; }

/* Pagination */
.pagination { display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; }

/* ---------- Single ---------- */
.breadcrumb { font-size: 14px; display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); }
.breadcrumb a { color: var(--ink); font-weight: 600; text-decoration: none; }
.entry-header { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.entry-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4.6vw, 58px); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; }
.entry-dek { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink2); }
.byline { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.author { display: flex; gap: 12px; align-items: center; }
.author img { border-radius: 999px; width: 42px; height: 42px; }
.author strong { display: block; font-size: 15px; }
.actions { display: flex; gap: 8px; }
.hero { border-radius: 24px; overflow: hidden; margin: 0; }
.hero img { width: 100%; max-height: 520px; object-fit: cover; }
.hero figcaption { font-size: 13px; color: var(--muted); padding: 8px 4px 0; }
.article-cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.article { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.article-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.summary { background: var(--tint); padding: 22px 24px; margin-bottom: 28px; }
.summary ul { margin: 10px 0 0; padding-left: 20px; }
.toc a { display: block; padding: 7px 0; text-decoration: none; color: var(--ink2); font-size: 14px; font-weight: 500; }
.toc a:hover { color: var(--accent); }

.entry-content { font-size: 18px; line-height: 1.7; color: var(--ink2); }
.entry-content > * { margin-top: 0; margin-bottom: 18px; }
.entry-content h2 { font-family: var(--display); font-weight: 900; font-size: 26px; text-transform: uppercase; letter-spacing: -.01em; margin: 36px 0 14px; line-height: 1.05; color: var(--ink); }
.entry-content h3 { font-size: 21px; margin: 28px 0 10px; color: var(--ink); }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li { margin-bottom: 6px; }
.entry-content blockquote { margin: 6px 0 24px; padding: 20px 22px; background: var(--dark); color: #fff; border-radius: var(--radius); font-size: 17px; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content figure { margin: 0 0 24px; }
.entry-content img { border-radius: 16px; }
.entry-content figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content a { text-underline-offset: 3px; }
.alignwide, .alignfull { max-width: 100%; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.feedback, .discuss { padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.feedback-done { font-weight: 600; color: var(--good); }
.promo { padding: 20px; margin: 30px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* Comments */
.comments { margin-top: 24px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 14px; }
.comment-list .children { list-style: none; padding-left: 24px; margin-top: 14px; }
.comment-body { background: var(--card); border-radius: 18px; padding: 16px 18px; }
.comment-meta { font-size: 13px; color: var(--muted); }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { width: 100%; border: 1.5px solid #d6d6d9; border-radius: 16px; padding: 12px 16px; font: inherit; background: var(--card); }
.comment-form .submit { background: var(--orange); color: #fff; border: 0; border-radius: 999px; min-height: 44px; padding: 0 22px; font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #cfcfd4; margin-top: 24px; padding-top: 36px; padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.site-footer a { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .brand .badge { background: #fff; color: var(--dark); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { text-decoration: none; font-weight: 600; }
.footer-note { font-size: 14px; flex-basis: 100%; margin: 0; }

/* 404 / empty */
.empty { padding: 36px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* WP core classes */
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: 13px; color: var(--muted); }
.sticky, .bypostauthor { }
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { margin-left: auto; margin-right: auto; }

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

/* Version 1.1: responsive content, menus and editing controls. */
:root { --orange:#b74726; --orange-dark:#963719; --article-width:720px; --spacing:24px; --body-size:16px; }
body { font-size:var(--body-size); }
.site-main { gap:var(--spacing); }
.article { max-width:var(--article-width); }
.btn { height:auto; padding-top:10px; padding-bottom:10px; max-width:100%; white-space:normal; text-align:center; overflow-wrap:anywhere; }
.btn-primary:hover { background:var(--orange); filter:brightness(.88); }
.btn:disabled { opacity:.65; cursor:wait; }
.field,.search-field { font-size:16px; min-width:0; }
.chip { min-height:44px; overflow-wrap:anywhere; }
.entry-content,.entry-title,.page-title,.story-title,.lead-title,.newsletter-title,.most-read .t,.comment-body,.widget { overflow-wrap:anywhere; }
.entry-content pre { max-width:100%; overflow:auto; white-space:pre; }
.entry-content iframe,.entry-content video,.entry-content embed,.entry-content object { max-width:100%; }
.entry-content .wp-block-table { overflow:auto; }
.entry-content::after { content:""; display:table; clear:both; }
.grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.lead { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.custom-logo-link { display:block; max-width:100%; min-width:0; }
.custom-logo { object-fit:contain; height:auto; max-width:100%; }
.toc { margin-bottom:24px; }
.toc a { min-height:44px; padding:10px 0; overflow-wrap:anywhere; }
.ad { max-width:100%; min-width:0; overflow-x:auto; }
.ad .widget { min-width:0; max-width:100%; }
/* Fixed creatives scroll inside their slot; use responsive ad code for best fit. */
.ad .widget iframe { display:block; margin-inline:auto; }
.rm-block-area { min-width:0; overflow-wrap:anywhere; }
.site-header-blocks,.site-footer-blocks { padding:20px var(--gutter); }
.site-header-blocks > *,.site-footer-blocks > * { max-width:var(--wrap); margin-inline:auto; }
.saved-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.saved-row a { flex:1 1 220px; overflow-wrap:anywhere; }
.rm-status { flex-basis:100%; margin:6px 0; font-size:14px; }
.rm-status:empty { display:none; }
.main-nav li { position:relative; }
.main-nav .sub-menu { display:block; margin-left:12px; padding:8px; background:var(--card); border-radius:12px; }
.main-nav .has-disclosure > .sub-menu { display:none; position:absolute; top:100%; left:0; width:230px; max-width:calc(100vw - 32px); z-index:20; box-shadow:0 8px 24px #0002; }
.main-nav .has-disclosure.submenu-open > .sub-menu { display:block; }
.main-nav .has-disclosure > a { padding-right:44px; }
.submenu-toggle { position:absolute; right:0; top:0; width:44px; height:44px; border:0; border-radius:12px; color:var(--ink); background:transparent; cursor:pointer; font:inherit; }
.main-nav .sub-menu .has-disclosure > .sub-menu { position:static; width:auto; box-shadow:none; margin-left:8px; }
.footer-nav .sub-menu { display:block; padding-left:16px; }
@media (max-width:860px) {
 .nav-toggle { display:none; }
 .main-nav { display:block; }
 .rm-js-nav .nav-toggle { display:inline-flex; }
 .rm-js-nav .main-nav { display:none; }
 .rm-js-nav .main-nav.is-open { display:block; }
 .main-nav .has-disclosure > .sub-menu { position:static; width:auto; max-width:100%; box-shadow:none; }
 .article-side { position:static; flex-basis:100%; }
 .article { max-width:100%; }
 .article-cols { gap:24px; }
}
@media (max-width:480px) {
 .site-header .wrap { gap:12px; }
 .site-header .custom-logo-link { max-width:calc(100% - 112px); }
 .header-cta { width:100%; }
 .lead-body { padding:20px; }
 .lead .thumb { min-height:220px; }
 .mini { padding:14px; gap:12px; }
 .mini .thumb { width:88px; height:80px; }
 .entry-dek { font-size:18px; }
 .entry-content { font-size:17px; }
 .entry-content .alignleft,.entry-content .alignright { float:none; margin:0 0 18px; }
 .comment-list .children { padding-left:12px; }
 .summary,.feedback,.discuss { padding:18px; }
 .empty { padding:24px 16px; }
 .hero { border-radius:16px; }
 .page-title,.entry-title { line-height:1.05; }
}
/* Core widget forms must remain usable in a narrow sidebar. */
.widget .wp-block-search__inside-wrapper { min-width:0; flex-wrap:wrap; gap:8px; }
.widget .wp-block-search__input { min-width:100px; flex:1 1 140px; font-size:16px; max-width:100%; }
.widget .wp-block-search__button { flex:0 0 auto; min-height:44px; margin-left:0; white-space:nowrap; }
.widget select,.widget input,.widget textarea { max-width:100%; }
.banner .banner-title { font-size:24px; color:#fff; margin:4px 0; }
@media(max-width:480px){.banner .banner-title{font-size:22px;}}

/* Bundled demo placeholders. */
.rm-demo-note { font-size:14px; padding:12px 16px; background:var(--tint); border-radius:12px; }
.rm-demo-ad { min-height:110px; padding:24px; background:var(--tint); border:1px dashed var(--accent); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink); overflow-wrap:anywhere; }
.rm-demo-ad span { font-size:11px; letter-spacing:.12em; color:var(--muted); }
.ad-sidebar .rm-demo-ad { min-height:250px; }

/* Motorcycle editorial layouts. */
.editorial-shelf { display:flex; flex-direction:column; gap:16px; }
.editorial-shelf .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.section-link { display:inline-flex; align-items:center; min-height:44px; font-weight:700; }
.coverage-note { padding:12px 16px; background:var(--tint); border-left:4px solid var(--accent); font-weight:600; border-radius:8px; }
.bike-specs,.editorial-verdict { margin:20px 0 26px; }
.spec-scroll { overflow-x:auto; max-width:100%; }
.bike-specs table { border-collapse:collapse; width:100%; font-size:15px; table-layout:fixed; }
.bike-specs th,.bike-specs td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.bike-specs thead th { background:var(--tint); }
.verdict-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.verdict-columns ul { padding-left:20px; }
.review-score { font-family:var(--display); font-size:42px; margin:12px 0; }
.review-score span { font-size:18px; color:var(--muted); }
.editorial-sources { margin:24px 0; overflow-wrap:anywhere; }
@media(max-width:700px){.editorial-shelf .grid{grid-template-columns:1fr}.verdict-columns{grid-template-columns:1fr;gap:4px}.bike-specs th,.bike-specs td{padding:10px 6px;font-size:14px}}

/* Per-article layouts */
.article-cols.rm-focused,.article-cols.rm-wide{display:block}.rm-focused .article{margin-inline:auto;width:100%;max-width:var(--article-width)}.rm-wide .article{width:100%;max-width:none}.hero.rm-hero-natural img{height:auto;max-height:none;object-fit:contain}.entry-content .wp-block-table{overflow-x:auto}.entry-content .wp-block-table table{width:100%}

/* Compact editorial reading and distinct comparison columns. */
.rm-palette-teal-amber{--bike-a:#125c64;--bike-a-soft:#eaf5f4;--bike-b:#805014;--bike-b-soft:#fff4de}
.rm-palette-blue-rose{--bike-a:#234e85;--bike-a-soft:#edf3fc;--bike-b:#953955;--bike-b-soft:#fff0f4}
.rm-palette-plum-green{--bike-a:#653b81;--bike-a-soft:#f5eefb;--bike-b:#326746;--bike-b-soft:#edf7ef}
.rm-comparison .bike-specs{border:1px solid var(--line);overflow:hidden}
.rm-comparison .bike-specs thead th:nth-child(2){background:var(--bike-a);color:#fff;border-top:4px solid var(--bike-a)}
.rm-comparison .bike-specs thead th:nth-child(3){background:var(--bike-b);color:#fff;border-top:4px solid var(--bike-b)}
.rm-comparison .bike-specs tbody td:nth-child(2){background:var(--bike-a-soft);color:#20252b}
.rm-comparison .bike-specs tbody td:nth-child(3){background:var(--bike-b-soft);color:#20252b}
.rm-comparison .bike-specs tbody th{background:#f5f6f8;color:#343b46}
.rm-comparison .coverage-note{background:var(--bike-a-soft);border-left-color:var(--bike-a);color:#20252b}
.rm-comparison .editorial-verdict{background:var(--bike-b-soft);border:1px solid var(--bike-b);color:#20252b}
.rm-comparison .entry-content h2{border-left:4px solid var(--bike-a);padding-left:12px}
.rm-comparison .summary{background:var(--bike-a-soft);color:#20252b}
.rm-density-compact main.wrap{gap:18px}
.rm-density-compact .entry-header{gap:10px}
.rm-density-compact .entry-title{font-size:clamp(28px,3.6vw,46px);line-height:1.08;text-transform:none;letter-spacing:-.025em}
.rm-density-compact .entry-dek{font-size:18px;line-height:1.45;margin:0}
.rm-density-compact .byline{margin-top:8px}
.rm-density-compact .hero img{max-height:380px}
.rm-density-compact .hero.rm-hero-natural img{max-height:none}
.rm-density-compact .article-cols{gap:24px}
.rm-density-compact .summary,.rm-density-compact .toc,.rm-density-compact .bike-specs,.rm-density-compact .editorial-verdict{padding:16px;margin:0 0 18px;border-radius:12px}
.rm-density-compact .entry-content{line-height:1.65}
.rm-density-compact .entry-content p{margin:0 0 16px}
.rm-density-compact .entry-content h2{font-size:25px;line-height:1.2;margin:26px 0 12px;text-transform:none}
.rm-density-compact .toc a{padding:4px 0}
.rm-density-compact .bike-specs th,.rm-density-compact .bike-specs td{padding:9px 8px;font-size:14px;line-height:1.45}
.rm-density-compact .promo,.rm-density-compact .feedback,.rm-density-compact .discuss{padding:16px;margin:16px 0;border-radius:12px}
.rm-density-compact .editorial-sources{margin:18px 0;font-size:14px}
@media(max-width:600px){.rm-density-compact .entry-title{font-size:29px}.rm-density-compact .entry-dek{font-size:17px}.rm-density-compact .summary,.rm-density-compact .toc,.rm-density-compact .bike-specs,.rm-density-compact .editorial-verdict{padding:12px}.rm-density-compact .bike-specs th,.rm-density-compact .bike-specs td{font-size:13px;padding:8px 6px}.rm-density-compact .entry-content h2{font-size:23px}}

.rm-card-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}.rm-card-specs div{padding:8px;background:var(--bg);border-radius:8px;min-width:0}.rm-card-specs dt{font-size:11px;color:var(--muted)}.rm-card-specs dd{margin:3px 0 0;font-size:12px;font-weight:700;overflow-wrap:anywhere}.rm-card-excerpt{font-size:14px;line-height:1.5;margin:8px 0}.rm-header-search{position:relative}.rm-header-search summary{cursor:pointer;padding:10px}.rm-header-search .search-form{position:absolute;right:0;top:100%;width:min(320px,85vw);background:var(--card);padding:12px;border:1px solid var(--line);z-index:101;border-radius:12px}

/* Ad manager also works when the previous magazine layout is selected. */
.rm-ad-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rm-ad-creative{width:100%;min-width:0;max-width:100%;overflow:auto}.rm-ad-creative img{display:block;max-width:100%;height:auto;margin:auto}.rm-managed-ad{min-height:0;gap:8px}.rm-ad-desktop{display:flex}.rm-ad-mobile{display:none}@media(max-width:760px){.rm-ad-desktop{display:none}.rm-ad-mobile{display:flex}}

/* ---------- Archive pages: calmer layout (added 1.8.4) ---------- */
.archive .page-head { margin-bottom: 8px; }
.archive .page-title { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.01em; }
.archive .page-intro { max-width: 60ch; margin-top: 6px; }
.archive .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.archive .chips::-webkit-scrollbar { display: none; }
.archive .chips > * { flex: 0 0 auto; }
.col-main .grid.rm-archive-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.col-main .grid.rm-archive-grid.is-few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rm-archive-grid .story.card { padding: 12px 12px 20px; }
.rm-archive-grid .story.card .thumb { aspect-ratio: 16 / 10; height: auto; margin-bottom: 14px; }
.rm-archive-grid .story.card .thumb img { width: 100%; height: 100%; }
.rm-archive-grid .story-body { padding: 0 6px; }
.rm-archive-grid .story.card .story-title { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.category .rm-archive-grid .cat { display: none; }
.rm-archive-grid .meta { margin-top: 8px; color: var(--muted); }
.archive .most-read .n { font-size: 18px; opacity: 0.55; }
.archive .most-read .t { font-size: 15px; font-weight: 500; line-height: 1.4; }
@media (max-width: 560px) { .col-main .grid.rm-archive-grid.is-few { grid-template-columns: 1fr; } }

/* ---------- Article TOC: collapsible, closed by default (added 1.8.5) ---------- */
.rm-mobile-disclosure.rm-toc-disclosure { background: var(--bg); border-radius: 12px; margin: 0 0 20px; }
.rm-mobile-disclosure.rm-toc-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; min-height: 44px; margin: 0; padding: 18px 20px; background: transparent; border-radius: 12px; color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.rm-toc-disclosure > summary::-webkit-details-marker { display: none; }
.rm-toc-disclosure > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.rm-toc-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rm-toc-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rm-mobile-disclosure.rm-toc-disclosure[open] > summary { margin-bottom: 0; }
.rm-toc-disclosure .toc { background: transparent; margin: 0; padding: 0 20px 16px; }
.rm-toc-disclosure .toc .kicker { display: none; }

/* ---- Categories widget: theme-styled chips ---- */
.rm-cat-widget .kicker { margin: 0 0 14px; }
.rm-cat-widget .rm-cat-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rm-cat-widget .rm-cat-chips li { margin: 0; padding: 0; }
.rm-cat-widget .rm-cat-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .2s, color .2s; }
.rm-cat-widget .rm-cat-chips a:hover,
.rm-cat-widget .rm-cat-chips a:focus-visible { background: var(--accent); color: #fff; }
.rm-cat-widget .rm-cat-chips .current-cat a { background: var(--ink); color: #fff; }

/* ---- Mobile: article body runs full width ---- */
@media (max-width: 760px) {
  .single .rm-reading-layout > .rm-mag-body {
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + (var(--gutter) * 2));
    max-width: none;
    border-radius: 0;
  }
}