/*
 * Fallback content styling for single.php / index.php — pages the original
 * .dc.html design bundle never designed (single News post, search results,
 * 404, taxonomy archives). Deliberately generic: reuses base.css tokens so
 * it doesn't clash visually, but doesn't try to invent a bespoke layout for
 * pages nobody handed us a design for.
 */

.gl-content {
	padding: clamp(40px, 6vh, 72px) 0 clamp(56px, 8vh, 96px);
	background: var(--gl-bg);
	flex: 1;
}

.gl-content__crumb {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gl-green-dark);
	margin-bottom: 14px;
}
/* Breadcrumb is a <nav><ol> (template-parts/breadcrumbs.php) — see the
   matching comment in pattern.css/range.css for why this needs spelling out
   rather than inheriting a reset. */
.gl-content__crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gl-content__crumb li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }

.gl-content__title {
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.05;
	margin-bottom: 14px;
	max-width: 780px;
}

.gl-content__meta {
	font-size: 13px;
	color: var(--gl-text-light-2);
	margin-bottom: 28px;
}

.gl-content__thumb {
	width: 100%;
	max-width: 780px;
	border-radius: var(--gl-radius-card);
	margin-bottom: 28px;
	overflow: hidden;
}
/* Capped height, width by ratio: the square product covers (e.g. CONQUEWIND
   R/T 1500x1500) filled 780x780, a whole screen. Wide covers still run full width. */
.gl-content__thumb img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(60vh, 520px); margin-inline: auto; }

.gl-content__body {
	max-width: 720px;
	font-size: 16px;
	line-height: 1.75;
	color: #333;
}
.gl-content__body p { margin: 0 0 1.2em; }
.gl-content__body h2, .gl-content__body h3 {
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	margin: 1.6em 0 0.6em;
}
.gl-content__body a { color: var(--gl-green-dark); text-decoration: underline; }
.gl-content__body img { max-width: 100%; border-radius: 6px; }

.gl-content__back {
	display: inline-block;
	margin-top: 32px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gl-green-dark);
}

/* index.php list mode (search results, archives, anything without a more
   specific template) */
.gl-content-list { display: grid; gap: 28px; max-width: 780px; }
.gl-content-list__item { border-bottom: 1px solid var(--gl-border); padding-bottom: 24px; }
.gl-content-list__item:last-child { border-bottom: none; }
.gl-content-list__title { font-size: 22px; margin-bottom: 8px; }
.gl-content-list__title a { color: var(--gl-text-light); }
.gl-content-list__title a:hover { color: var(--gl-green-dark); }
.gl-content-list__excerpt { font-size: 15px; line-height: 1.6; color: var(--gl-text-light-2); }

.gl-content__empty { font-size: 15px; color: var(--gl-text-light-2); }

/* Pagination — the_posts_pagination()'s markup is fixed by core, so these
   selectors target WordPress's own class names rather than gl-* ones. */
.pagination {
	max-width: 780px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--gl-border);
}
.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--gl-border-2);
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--gl-text-light);
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pagination a.page-numbers:hover {
	border-color: var(--gl-green);
	color: var(--gl-green-dark);
}
.pagination .page-numbers.current {
	background: var(--gl-green);
	border-color: var(--gl-green);
	color: #fff;
}
.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--gl-text-light-3);
	min-width: 24px;
	padding: 0 4px;
}
.pagination .prev,
.pagination .next {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
}

/* Article share links */
.gl-share {
	max-width: 720px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--gl-border);
}
.gl-share__label {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gl-text-light);
}
.gl-share__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
}
.gl-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	border: 1px solid var(--gl-border-2);
	border-radius: 4px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--gl-text-light);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.gl-share__link:hover,
.gl-share__link:focus-visible {
	border-color: var(--gl-green);
	background: var(--gl-green);
	color: #fff;
}


/* Tyre size index (/tyre-sizes/, [grenlander_size_index] shortcode). */
.gl-sizes{margin:8px 0 48px}
.gl-sizes__summary{margin:0 0 20px}
.gl-sizes__tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin:0 0 16px}
.gl-sizes__label{flex-basis:100%;font-weight:700}
.gl-sizes__input{flex:1 1 280px;max-width:420px;height:48px;padding:0 14px;font:inherit;font-size:16px;border:1px solid #a7b39f;border-radius:4px;background:#fff}
.gl-sizes__input:focus{outline:2px solid transparent;border-color:#365e1c;box-shadow:0 0 0 3px rgba(108,187,51,.35)}
.gl-sizes__count{margin:0;font-size:14px;color:#526049}
.gl-sizes__jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.gl-sizes__jump a{display:inline-block;padding:6px 12px;border:1px solid #d6dad2;border-radius:999px;background:#fff;color:#1a1d20;font-size:14px;font-weight:700;text-decoration:none}
.gl-sizes__jump a:hover,.gl-sizes__jump a:focus-visible{border-color:#365e1c;color:#365e1c}
.gl-sizes__group{margin:0 0 12px;scroll-margin-top:96px}
.gl-sizes__rim{margin:0 0 12px;font-size:22px}
/* Rim groups fold into <details> so the 485-size index stays short; search and the rim buttons open them. */
.gl-sizes__toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid #d6dad2;border-radius:8px;background:#fff;cursor:pointer;list-style:none}
.gl-sizes__toggle::-webkit-details-marker{display:none}
.gl-sizes__toggle::after{content:"";flex:none;width:10px;height:10px;margin:-5px 4px 0 0;border-right:2px solid #365e1c;border-bottom:2px solid #365e1c;transform:rotate(45deg)}
.gl-sizes__toggle:hover,.gl-sizes__toggle:focus-visible{border-color:#365e1c}
.gl-sizes__toggle .gl-sizes__rim{margin:0;font-size:20px}
.gl-sizes__details[open]>.gl-sizes__toggle{margin-bottom:12px;border-color:#365e1c}
.gl-sizes__details[open]>.gl-sizes__toggle::after{margin-top:5px;transform:rotate(-135deg)}
.gl-sizes__details[open]{margin-bottom:28px}
.gl-sizes__scroll{max-width:100%;overflow-x:auto}
.gl-trade-page .gl-sizes__table{margin:0;min-width:520px}
.gl-sizes__table th[scope=row]{white-space:nowrap;font-weight:800}
.gl-sizes__table thead th:first-child,.gl-sizes__table th[scope=row]{width:1%;padding-right:32px}
.gl-sizes__patterns{list-style:none;margin:0;padding:0}
.gl-sizes__patterns li{margin:0 0 6px;max-width:none}
.gl-sizes__patterns li:last-child{margin-bottom:0}
.gl-sizes__patterns a{font-weight:700}
.gl-sizes__type{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#eef3e7;color:#365e1c;font-size:12px;font-weight:700}
.gl-sizes__variants{display:block;font-size:13px;color:#596052}
.gl-sizes__none{padding:16px;border-left:4px solid var(--gl-green);background:#f0f3ed}
.gl-sizes__note{font-size:14px;color:#526049}
@media(max-width:600px){.gl-trade-page .gl-sizes__table{min-width:0}.gl-sizes__table th[scope=row],.gl-sizes__table thead th:first-child{padding-right:12px}.gl-sizes__rim{font-size:19px}.gl-sizes__toggle{padding:12px 14px}.gl-sizes__toggle .gl-sizes__rim{font-size:17px}}

/* Post images in listings (2026-09-29): /news/ rows and Trade Resources cards. */
.gl-content-list__item--media{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:28px;align-items:start}
.gl-content-list__image,.gl-post-card__image{aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#eef0ec}
/* contain, not cover: blog covers (1.5-2.5:1) carry text and logos to their edges; cover cut them. */
.gl-content-list__image img,.gl-post-card__image img{display:block;width:100%;height:100%;object-fit:contain}
.gl-content-list__image--placeholder,.gl-post-card__image--placeholder{display:flex;align-items:center;justify-content:center}
.gl-content-list__image--placeholder img,.gl-post-card__image--placeholder img{width:45%;height:auto;object-fit:contain;opacity:.85}
.gl-post-card__media{display:block;margin:0 0 18px}
.gl-content-list__image--product,.gl-post-card__image--product{background:#fff;border:1px solid #e2e5e0}
.gl-content-list__image--product img,.gl-post-card__image--product img{object-fit:contain;padding:8px}
.gl-trade-card.gl-post-card{display:flex;flex-direction:column}
.gl-trade-page .gl-post-card__image img{max-width:none;margin:0}
@media(max-width:700px){.gl-content-list__item--media{grid-template-columns:1fr;gap:14px}}