/* Daily Rider: the magazine's own pages, for every reader (1.9.3): article tables, the comment area, the 404 page.
   Colours come from the theme's palette, so light and dark mode both hold.

   Tables on phones (Jean's screenshot of the Rocket 3 comparison: "Triump / h", "R445,0 / 00"). WordPress gives a
   table equal, fixed columns and the theme lets words break anywhere, so six columns on a phone cut every word.
   Here each column is as wide as its longest word and words only wrap at spaces; a table wider than the screen
   slides sideways inside its frame, with a soft shadow at the edge while there is more to see; and the first
   column (the bike, the spec) stays in place while it slides. The theme's own colours keep light and dark mode. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@media (max-width: 767.98px) {
	.single-post .wp-block-table {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		/* Scroll shadows: the covers move with the table, the shadows stay at the frame's edges. */
		background:
			linear-gradient(to right, var(--theme-palette-color-7, #fbfbfc) 30%, transparent) left / 24px 100% no-repeat local,
			linear-gradient(to left, var(--theme-palette-color-7, #fbfbfc) 30%, transparent) right / 24px 100% no-repeat local,
			radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 12px 100% no-repeat scroll;
	}
	/* Each cell draws its own lines (the theme collapses them into the table), so the pinned column fully covers what slides under it. */
	.single-post .wp-block-table table,
	.single-post .wp-block-table table.has-fixed-layout { table-layout: auto; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
	.single-post .wp-block-table th,
	.single-post .wp-block-table td { border: 0; border-right: 1px solid var(--theme-palette-color-5, #e8ebed); border-bottom: 1px solid var(--theme-palette-color-5, #e8ebed); }
	.single-post .wp-block-table tr > :first-child { border-left: 1px solid var(--theme-palette-color-5, #e8ebed); }
	.single-post .wp-block-table table > :first-child > tr:first-child > * { border-top: 1px solid var(--theme-palette-color-5, #e8ebed); }
	.single-post .wp-block-table thead th { border-bottom-width: 2px; }
	.single-post .wp-block-table th,
	.single-post .wp-block-table td {
		padding: 9px 10px;
		font-size: 15px;
		line-height: 1.4;
		vertical-align: top;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}
	.single-post .wp-block-table th:first-child,
	.single-post .wp-block-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--theme-palette-color-7, #fbfbfc);
		box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .18);
	}
}

/* ---------- Comments on articles ---------- */

.single-post .ct-comments { --drc-cm-line: var(--theme-palette-color-5, #e8ebed); --drc-cm-muted: var(--theme-palette-color-3, #5e5e5e); --drc-cm-ink: var(--theme-palette-color-4, #000); --drc-cm-card: var(--theme-palette-color-8, #fff); }
.single-post #comments .ct-comments-title { margin: 0 0 6px; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0; }

/* The list: the photo on the left; the name, the words, then the date and Reply on the right. Replies hang off the
   comment they answer. (The theme places the photo absolutely and the date on the far right; both are undone here.) */
.single-post #comments .ct-comment-list, .single-post #comments .ct-comment-list .children { margin: 0; padding: 0; list-style: none; }
.single-post #comments .ct-comment-list > li { border-top: 1px solid var(--drc-cm-line); }
.single-post #comments .ct-comment-list > li:first-child { border-top: 0; }
.single-post #comments .ct-comment-inner { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 0; border: 0; }
.single-post #comments .ct-comment-inner > .ct-comment-meta { display: contents; }
.single-post #comments .ct-comment-inner .ct-media-container { position: static; grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
.single-post #comments .ct-comment-inner .ct-media-container img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.single-post #comments .ct-comment-inner .ct-comment-author { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: auto; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.single-post #comments .ct-comment-author cite { font-style: normal; color: var(--drc-cm-ink); }
.single-post #comments .bypostauthor > .ct-comment-inner .ct-comment-author::after { content: "Author"; padding: 2px 6px; border-radius: 2px; background: #106abf; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; }
.single-post #comments .ct-comment-inner .ct-comment-content { grid-column: 2; grid-row: 2; margin: 2px 0 0; padding: 0; color: var(--drc-cm-ink); font-size: 16px; line-height: 1.55; }
.single-post #comments .ct-comment-inner .ct-comment-content > * { margin-inline: 0; }
.single-post #comments .ct-comment-content p { margin: 0 0 8px; }
.single-post #comments .ct-comment-content p:last-child { margin-bottom: 0; }
.single-post #comments .ct-comment-inner .ct-comment-meta-data { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 14px; margin: 8px 0 0; font-size: 13px; line-height: 1.4; text-transform: none; }
.single-post #comments .ct-comment-inner .ct-comment-meta-data > * { margin: 0; }
.single-post #comments .ct-comment-meta-data a { color: var(--drc-cm-muted); font-weight: 500; text-decoration: none; text-transform: none; letter-spacing: 0; }
.single-post #comments .ct-comment-meta-data .comment-reply-link, .single-post #comments .ct-comment-meta-data .comment-reply-login { color: #106abf; font-weight: 600; }
.single-post #comments .ct-comment-meta-data a:hover { color: #106abf; text-decoration: underline; }
/* 1.10.1 (Jean: "reply comment button issue", "when hovering"): the theme turns Reply into a blue button when the
   comment is hovered, and our blue text on it left an empty blue box. Reply stays a plain blue link like the rest
   of the row, underlined on hover. */
.single-post #comments .ct-comment-meta-data .comment-reply-link { height: auto; margin-inline-start: 0; padding: 0; border-radius: 0; background: none; }
.single-post #comments .ct-comment-inner:hover .ct-comment-meta-data .comment-reply-link,
.single-post #comments .ct-comment-meta-data .comment-reply-link:hover { background: none; color: #106abf; }
.single-post #comments .ct-comment-list .children { margin-left: 58px; border-left: 2px solid var(--drc-cm-line); }
.single-post #comments .ct-comment-list .children > li { padding-left: 16px; }
.single-post #comments .ct-comment-list .children .ct-comment-inner { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0; }
.single-post #comments .ct-comment-list .children .ct-media-container, .single-post #comments .ct-comment-list .children .ct-media-container img { width: 36px; height: 36px; }

/* The form: a card that says who is writing, a proper text box, the follow-up options, one clear button. */
.single-post .comment-respond { margin-top: 28px; padding: 24px 24px 22px; border: 1px solid var(--drc-cm-line); border-radius: 5px; background: var(--drc-cm-card); }
.single-post #comments .comment-respond .comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; padding: 0; border: 0; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0; }
.single-post .comment-reply-title small, .single-post .ct-cancel-reply { font-family: inherit; font-size: 14px; font-weight: 600; text-transform: none; }
.single-post .ct-cancel-reply a { color: var(--drc-cm-muted); }
.single-post .drc-cm-as { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; color: var(--drc-cm-muted); font-size: 14px; line-height: 1.4; }
.single-post .drc-cm-as__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.single-post .drc-cm-as__who strong { color: var(--drc-cm-ink); }
.single-post .drc-cm-as__links { margin-left: auto; }
.single-post .drc-cm-as__links a { color: var(--drc-cm-muted); text-decoration: underline; }
.single-post .comment-form .comment-form-field-textarea { margin: 0 0 14px; }
.single-post .comment-form .comment-form-field-textarea label { display: block; margin-bottom: 6px; color: var(--drc-cm-ink); font-size: 14px; font-weight: 600; }
.single-post .comment-form textarea#comment { display: block; width: 100%; min-height: 130px; padding: 12px 14px; border: 1px solid #8a9097; border-radius: 3px; background: var(--theme-palette-color-8, #fff); color: var(--drc-cm-ink); font-size: 16px; line-height: 1.5; resize: vertical; transition: border-color .15s ease, box-shadow .15s ease; }
.single-post .comment-form textarea#comment::placeholder { color: var(--drc-cm-muted); opacity: .8; }
.single-post .comment-form textarea#comment:focus { border-color: #106abf; outline: 0; box-shadow: 0 0 0 3px rgba(16, 106, 191, .2); }
.single-post .comment-subscription-form { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; color: var(--drc-cm-muted); font-size: 14px; line-height: 1.4; }
.single-post .comment-subscription-form input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #106abf; }
.single-post .comment-subscription-form label { margin: 0; cursor: pointer; }
.single-post .comment-form .form-submit { margin: 16px 0 0; }
.single-post .comment-form .form-submit .submit { min-height: 44px; padding: 12px 24px; border: 1px solid #106abf; border-radius: 3px; background: #106abf; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color .15s ease, transform .08s ease; }
.single-post .comment-form .form-submit .submit:hover { background: #00509d; border-color: #00509d; }
.single-post .comment-form .form-submit .submit:active { transform: scale(.97); }

/* Visitors: a way in, not "You must be logged in". */
.single-post .drc-cm-join p { margin: 0; color: var(--drc-cm-muted); font-size: 16px; line-height: 1.5; }
.single-post .drc-cm-join__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.single-post .drc-cm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border: 1px solid #106abf; border-radius: 3px; background: #106abf; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; }
.single-post .drc-cm-btn:hover { background: #00509d; border-color: #00509d; }
.single-post .drc-cm-btn--ghost { background: transparent; color: #106abf !important; }
.single-post .drc-cm-btn--ghost:hover { background: rgba(16, 106, 191, .08); border-color: #106abf; }

@media (max-width: 600px) {
	.single-post .comment-respond { padding: 20px 16px 18px; }
	.single-post .drc-cm-as__links { margin-left: 0; width: 100%; }
	.single-post .comment-form .form-submit .submit, .single-post .drc-cm-btn { width: 100%; }
	.single-post #comments .ct-comment-list .children { margin-left: 22px; }
	.single-post #comments .ct-comment-list .children > li { padding-left: 12px; }
}

/* ---------- The 404 page: "Wrong turn." ---------- */

.drc-404 { --drc-404-line: var(--theme-palette-color-5, #e8ebed); --drc-404-ink: var(--theme-palette-color-4, #000); --drc-404-muted: var(--theme-palette-color-3, #5e5e5e); --drc-404-card: var(--theme-palette-color-8, #fff); padding-bottom: 64px; }
.drc-404 *, .drc-404 *::before, .drc-404 *::after { box-sizing: border-box; }
.drc-404__inner { width: var(--theme-container-width, 90vw); max-width: var(--theme-normal-container-max-width, 1290px); margin: 0 auto; } /* 1.9.7: the theme's own container, lined up with the header and footer */
.drc-404__hero { margin-bottom: 40px; padding: 72px 0 64px; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .78) 50%, rgba(0, 0, 0, .45) 100%), #000 url(auth-bear-650.webp) right center / cover no-repeat; color: #fff; }
.drc-404__eyebrow { margin: 0; color: #4aa3f5; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.drc-404__title { margin: 10px 0 0; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: clamp(56px, 10vw, 104px); font-weight: 700; line-height: .9; letter-spacing: 0; text-transform: uppercase; }
.drc-404__lead { max-width: 560px; margin: 18px 0 0; color: rgba(255, 255, 255, .88); font-size: 18px; line-height: 1.55; }
.drc-404__search { display: flex; max-width: 560px; margin-top: 28px; border-radius: 3px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* 1.9.4: the theme's own search-field rule (40px tall, a light border) beat these, leaving a line across the box (Jean's screenshot). */
.drc-404 .drc-404__search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 52px; min-height: 52px; margin: 0; padding: 0 18px; border: 0; border-radius: 3px 0 0 3px; background: transparent; box-shadow: none; color: #111; font-size: 16px; line-height: 52px; }
.drc-404 .drc-404__search input[type="search"]:focus,
.drc-404 .drc-404__search input[type="search"]:focus-visible { border: 0; outline: 0; box-shadow: inset 0 0 0 2px #106abf; }
.drc-404 .drc-404__search button[type="submit"] { flex: none; height: 52px; min-height: 52px; margin: 0; padding: 0 24px; border: 0; border-radius: 0 3px 3px 0; background: #106abf; box-shadow: none; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; }
.drc-404 .drc-404__search button[type="submit"]:hover { background: #00509d; }
.drc-404__roads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.drc-404__road { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 48px 20px 20px; border: 1px solid var(--drc-404-line); border-radius: 5px; background: var(--drc-404-card); color: var(--drc-404-ink) !important; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.drc-404__road:hover { border-color: #106abf; box-shadow: 0 8px 22px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.drc-404__road-title { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.drc-404__road-text { color: var(--drc-404-muted); font-size: 15px; line-height: 1.45; }
.drc-404__road-go { position: absolute; top: 50%; right: 18px; color: #106abf; font-size: 22px; transform: translateY(-50%); }
.drc-404__h2 { margin: 44px 0 16px; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 30px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.drc-404__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.drc-404__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--drc-404-line); border-radius: 5px; background: var(--drc-404-card); color: var(--drc-404-ink) !important; text-decoration: none !important; transition: box-shadow .15s ease, transform .15s ease; }
.drc-404__card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.drc-404__card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.drc-404__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drc-404__card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.drc-404__card-cat { color: #106abf; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.drc-404__card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.drc-404__card-date { color: var(--drc-404-muted); font-size: 13px; }
@media (max-width: 900px) {
	.drc-404__roads, .drc-404__cards { grid-template-columns: minmax(0, 1fr); }
	.drc-404__cards { gap: 12px; }
	.drc-404__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
	.drc-404__card-img { aspect-ratio: auto; height: 100%; min-height: 92px; }
}
@media (max-width: 600px) {
	.drc-404__hero { padding: 48px 0 44px; }
	.drc-404__lead { font-size: 16px; }
	.drc-404 .drc-404__search button[type="submit"] { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.drc-404__road, .drc-404__card, .single-post .comment-form .form-submit .submit { transition: none; }
	.drc-404__road:hover, .drc-404__card:hover { transform: none; }
}


/* 1.14.0: phones take the 800px riding photo (49 KB; the full one is 177 KB). */
@media (max-width: 720px) {
	.drc-404__hero { background-image: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .78) 50%, rgba(0, 0, 0, .45) 100%), url(auth-bear-800.webp); }
}