/*
Theme Name:   OutdoorTrekLife
Theme URI:    https://outdoortreklife.com/
Description:  GeneratePress child theme for OutdoorTrekLife. Built for outdoor and camping gear reviews, buying guides and affiliate content. Includes silo category templates, product review components, auto table of contents and JSON-LD schema.
Author:       Felix Kebaya
Author URI:   https://kebayah.com/
Template:     generatepress
Version:      1.9.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  outdoortreklife
Tags:         blog, two-columns, right-sidebar, custom-colors, custom-menu, featured-images
*/

/* ==========================================================================
   1. Tokens
   Palette is sampled from the OutdoorTrekLife badge logo.
   ========================================================================== */

:root {
	/* Core palette */
	--otl-spruce:      #16211a; /* badge outline, darkest green */
	--otl-pine:        #223227; /* raised dark surface */
	--otl-moss:        #4a6b46; /* mid foliage green */
	--otl-ember:       #f0761a; /* badge ring and TREK lettering */
	--otl-ember-deep:  #c85c0a; /* pressed / hover state */
	--otl-cream:       #f4efe1; /* badge lettering */
	--otl-paper:       #fbfaf6; /* page background */
	--otl-lake:        #35637d; /* water and distant ridge blue */
	--otl-granite:     #5d6660; /* muted body text, rock tone */
	--otl-scree:       #e3e0d6; /* hairlines and card edges */

	/* Semantic */
	--otl-text:        #1b241e;
	--otl-text-muted:  var(--otl-granite);
	--otl-bg:          var(--otl-paper);
	--otl-surface:     #ffffff;
	--otl-line:        var(--otl-scree);
	--otl-accent:      var(--otl-ember);
	--otl-positive:    #3f7a4a;
	--otl-negative:    #a8462c;

	/* Type */
	--otl-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--otl-font-body:    "Newsreader", Georgia, "Times New Roman", serif;
	--otl-font-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* Scale, based on a 1.25 ratio off 18px */
	--otl-step--1: 0.889rem;
	--otl-step-0:  1rem;
	--otl-step-1:  1.25rem;
	--otl-step-2:  1.563rem;
	--otl-step-3:  1.953rem;
	--otl-step-4:  2.441rem;
	--otl-step-5:  3.052rem;

	/* Space */
	--otl-gap-xs: 0.5rem;
	--otl-gap-s:  0.875rem;
	--otl-gap-m:  1.5rem;
	--otl-gap-l:  2.5rem;
	--otl-gap-xl: 4rem;

	/* Shape */
	--otl-radius:    4px;
	--otl-radius-lg: 10px;
	--otl-shadow:    0 1px 2px rgba(22, 33, 26, 0.06), 0 8px 24px -16px rgba(22, 33, 26, 0.35);
	--otl-container: 1200px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	font-family: var(--otl-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--otl-text);
	background-color: var(--otl-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.otl-ui {
	font-family: var(--otl-font-display);
	color: var(--otl-spruce);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.18;
}

h1 { font-size: var(--otl-step-4); font-weight: 800; }
h2 { font-size: var(--otl-step-3); margin-top: 2.2em; }
h3 { font-size: var(--otl-step-2); margin-top: 1.8em; }
h4 { font-size: var(--otl-step-1); margin-top: 1.5em; }

.entry-content > *:first-child { margin-top: 0; }

a {
	color: var(--otl-lake);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus { color: var(--otl-ember-deep); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--otl-ember);
	outline-offset: 2px;
	border-radius: 2px;
}

img { height: auto; }

.otl-container {
	max-width: var(--otl-container);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Section rhythm. Scoped to direct sections only so nested blocks do not
   inherit padding and double up. */
.otl-section { padding-block: var(--otl-gap-xl); }
.otl-section--tight { padding-block: var(--otl-gap-l); }
.otl-section--dark {
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
}
.otl-section--dark h2,
.otl-section--dark h3 { color: var(--otl-cream); }

.otl-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--otl-gap-m);
	margin-bottom: var(--otl-gap-m);
	border-bottom: 2px solid var(--otl-spruce);
	padding-bottom: var(--otl-gap-xs);
}

.otl-section--dark .otl-section-head { border-bottom-color: var(--otl-moss); }

.otl-section-head h2 {
	margin: 0;
	font-size: var(--otl-step-2);
}

.otl-section-head .otl-viewall {
	font-family: var(--otl-font-ui);
	font-size: var(--otl-step--1);
	font-weight: 600;
	white-space: nowrap;
	color: var(--otl-ember-deep);
	text-decoration: none;
}

.otl-section-head .otl-viewall:hover { text-decoration: underline; }

/* ==========================================================================
   3. Header and navigation
   ========================================================================== */

.site-header {
	background-color: var(--otl-surface);
	border-bottom: 1px solid var(--otl-line);
}

.main-navigation {
	background-color: var(--otl-spruce);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-family: var(--otl-font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--otl-cream);
}

.main-navigation .main-nav ul li a { position: relative; }

.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 10px;
	height: 2px;
	background-color: var(--otl-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li a:focus::after { transform: scaleX(1); }

.main-navigation .main-nav ul ul { background-color: var(--otl-pine); }
.main-navigation .main-nav ul ul li a::after { display: none; }
.main-navigation .main-nav ul ul li:hover > a { background-color: var(--otl-moss); }

@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav ul li a::after { transition: none; }
}

/* Topbar strip above the logo */
.otl-topbar {
	background-color: var(--otl-pine);
	color: var(--otl-cream);
	font-family: var(--otl-font-ui);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.otl-topbar .otl-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-s);
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}

.otl-topbar a { color: var(--otl-cream); text-decoration: none; }
.otl-topbar a:hover { color: var(--otl-ember); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.otl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--otl-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--otl-radius);
	background-color: var(--otl-ember);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.otl-btn:hover,
.otl-btn:focus {
	background-color: var(--otl-ember-deep);
	color: #fff;
}

.otl-btn--ghost {
	background-color: transparent;
	border-color: currentColor;
	color: var(--otl-cream);
}

.otl-btn--ghost:hover,
.otl-btn--ghost:focus {
	background-color: var(--otl-cream);
	color: var(--otl-spruce);
	border-color: var(--otl-cream);
}

.otl-btn--dark {
	background-color: var(--otl-spruce);
}

.otl-btn--dark:hover,
.otl-btn--dark:focus { background-color: var(--otl-moss); }

.otl-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.otl-btn { transition: none; }
}

/* ==========================================================================
   5. Cards
   ========================================================================== */

.otl-grid {
	display: grid;
	gap: var(--otl-gap-m);
}

.otl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.otl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.otl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.otl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.otl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.otl-grid--2,
	.otl-grid--3,
	.otl-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.otl-card {
	display: flex;
	flex-direction: column;
	background-color: var(--otl-surface);
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	overflow: hidden;
	height: 100%;
}

.otl-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--otl-scree);
}

.otl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.otl-card__body {
	padding: var(--otl-gap-s) var(--otl-gap-s) var(--otl-gap-m);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}

.otl-card__kicker {
	font-family: var(--otl-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--otl-ember-deep);
	text-decoration: none;
}

.otl-card__title {
	font-size: var(--otl-step-0);
	margin: 0;
	line-height: 1.3;
}

.otl-card__title a {
	color: var(--otl-spruce);
	text-decoration: none;
}

.otl-card__title a:hover { color: var(--otl-ember-deep); }

.otl-card__meta {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	color: var(--otl-text-muted);
	margin-top: auto;
	padding-top: var(--otl-gap-xs);
}

.otl-card--wide { flex-direction: row; align-items: stretch; }
.otl-card--wide .otl-card__media { flex: 0 0 38%; aspect-ratio: auto; }

@media (max-width: 600px) {
	.otl-card--wide { flex-direction: column; }
	.otl-card--wide .otl-card__media { flex: none; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   6. Home hero
   ========================================================================== */

.otl-hero {
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	position: relative;
	overflow: hidden;
}

.otl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--otl-hero-image, none);
	background-size: cover;
	background-position: center;
	opacity: 0.22;
}

.otl-hero .otl-container { position: relative; }

.otl-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--otl-gap-l);
	align-items: center;
	padding-block: var(--otl-gap-xl);
}

@media (max-width: 900px) {
	.otl-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.otl-hero__title {
	font-size: clamp(2.2rem, 5vw, var(--otl-step-5));
	color: var(--otl-cream);
	margin: 0 0 var(--otl-gap-s);
	font-weight: 800;
}

.otl-hero__lede {
	font-size: var(--otl-step-1);
	max-width: 52ch;
	margin: 0 0 var(--otl-gap-m);
	color: rgba(244, 239, 225, 0.86);
}

.otl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-s);
}

/* The featured post panel sitting beside the headline */
.otl-hero__feature {
	background-color: rgba(11, 17, 13, 0.55);
	border: 1px solid rgba(244, 239, 225, 0.18);
	border-radius: var(--otl-radius-lg);
	overflow: hidden;
	backdrop-filter: blur(2px);
}

.otl-hero__feature img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.otl-hero__feature-body { padding: var(--otl-gap-s) var(--otl-gap-m) var(--otl-gap-m); }

.otl-hero__feature-label {
	font-family: var(--otl-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--otl-ember);
}

.otl-hero__feature-title {
	font-size: var(--otl-step-1);
	margin: 0.3rem 0 0;
	color: var(--otl-cream);
}

.otl-hero__feature-title a { color: inherit; text-decoration: none; }
.otl-hero__feature-title a:hover { color: var(--otl-ember); }

/* ==========================================================================
   7. Category tiles
   ========================================================================== */

.otl-cattile {
	position: relative;
	display: block;
	border-radius: var(--otl-radius);
	overflow: hidden;
	min-height: 180px;
	background-color: var(--otl-pine);
	text-decoration: none;
	color: var(--otl-cream);
}

.otl-cattile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.62;
}

.otl-cattile__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 180px;
	padding: var(--otl-gap-s);
	background: linear-gradient(to top, rgba(11, 17, 13, 0.92) 12%, rgba(11, 17, 13, 0.1) 78%);
}

.otl-cattile__name {
	font-family: var(--otl-font-display);
	font-size: var(--otl-step-1);
	font-weight: 700;
	line-height: 1.2;
	color: var(--otl-cream);
}

.otl-cattile__count {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	color: var(--otl-ember);
	font-weight: 600;
}

.otl-cattile:hover .otl-cattile__name { color: var(--otl-ember); }

/* ==========================================================================
   8. Category block rows on the homepage
   ========================================================================== */

.otl-catblock + .otl-catblock { margin-top: var(--otl-gap-l); }

.otl-catblock__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: var(--otl-gap-m);
	align-items: start;
}

@media (max-width: 860px) {
	.otl-catblock__layout { grid-template-columns: minmax(0, 1fr); }
}

.otl-catblock__list { list-style: none; margin: 0; padding: 0; }

.otl-catblock__list li {
	border-bottom: 1px solid var(--otl-line);
	padding-block: 0.7rem;
}

.otl-catblock__list li:first-child { padding-top: 0; }
.otl-catblock__list li:last-child { border-bottom: 0; }

.otl-catblock__list a {
	font-family: var(--otl-font-display);
	font-weight: 600;
	font-size: var(--otl-step-0);
	color: var(--otl-spruce);
	text-decoration: none;
	line-height: 1.35;
	display: block;
}

.otl-catblock__list a:hover { color: var(--otl-ember-deep); }

/* ==========================================================================
   9. Article layout
   ========================================================================== */

.otl-breadcrumbs {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	color: var(--otl-text-muted);
	margin-bottom: var(--otl-gap-s);
}

.otl-breadcrumbs a { color: var(--otl-text-muted); text-decoration: none; }
.otl-breadcrumbs a:hover { color: var(--otl-ember-deep); text-decoration: underline; }
.otl-breadcrumbs span[aria-hidden] { padding-inline: 0.4em; opacity: 0.6; }

.otl-entry-meta {
	font-family: var(--otl-font-ui);
	font-size: 14px;
	color: var(--otl-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-s);
	align-items: center;
	border-block: 1px solid var(--otl-line);
	padding-block: 0.7rem;
	margin-bottom: var(--otl-gap-m);
}

.otl-entry-meta__author { font-weight: 600; color: var(--otl-text); }

.entry-content p,
.entry-content li { max-width: 74ch; }

.entry-content li { margin-bottom: 0.35em; }

.entry-content blockquote {
	border-left: 4px solid var(--otl-ember);
	background-color: #fff;
	margin-inline: 0;
	padding: var(--otl-gap-s) var(--otl-gap-m);
	font-style: normal;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--otl-font-ui);
	font-size: 15px;
	margin-block: var(--otl-gap-m);
}

.entry-content table th {
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	text-align: left;
	font-weight: 700;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--otl-line);
	padding: 0.7em 0.9em;
	vertical-align: top;
}

.entry-content table tbody tr:nth-child(even) { background-color: #f6f4ee; }

/* Inline affiliate disclosure under the title */
.otl-disclosure-inline {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--otl-text-muted);
	background-color: #f6f4ee;
	border-left: 3px solid var(--otl-ember);
	padding: 0.7rem 0.9rem;
	margin-bottom: var(--otl-gap-m);
}

.otl-disclosure-inline a { color: var(--otl-text-muted); }

/* ==========================================================================
   10. Table of contents
   ========================================================================== */

.otl-toc {
	background-color: #fff;
	border: 1px solid var(--otl-line);
	border-top: 3px solid var(--otl-ember);
	border-radius: var(--otl-radius);
	padding: var(--otl-gap-s) var(--otl-gap-m);
	margin-bottom: var(--otl-gap-m);
	font-family: var(--otl-font-ui);
}

.otl-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otl-gap-s);
}

.otl-toc__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
}

.otl-toc__toggle {
	background: none;
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 0.25em 0.7em;
	cursor: pointer;
	color: var(--otl-text-muted);
}

.otl-toc ol {
	margin: var(--otl-gap-s) 0 0;
	padding-left: 1.2em;
	font-size: 15px;
}

.otl-toc ol ol { font-size: 14px; margin-top: 0.3em; }
.otl-toc li { margin-bottom: 0.3em; }
.otl-toc a { color: var(--otl-lake); text-decoration: none; }
.otl-toc a:hover { text-decoration: underline; }
.otl-toc[data-collapsed="true"] ol { display: none; }

/* Offset for the sticky header when jumping to a heading */
.entry-content :is(h2, h3)[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   11. Product review components
   ========================================================================== */

.otl-product {
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	background-color: #fff;
	overflow: hidden;
	margin-block: var(--otl-gap-m);
}

.otl-product__head {
	display: flex;
	align-items: center;
	gap: var(--otl-gap-s);
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	padding: 0.7rem var(--otl-gap-s);
	font-family: var(--otl-font-ui);
}

.otl-product__rank {
	flex: 0 0 auto;
	font-weight: 800;
	font-size: 15px;
	background-color: var(--otl-ember);
	color: #fff;
	border-radius: var(--otl-radius);
	padding: 0.2em 0.6em;
}

.otl-product__award {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.otl-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: var(--otl-gap-m);
	padding: var(--otl-gap-m);
}

@media (max-width: 680px) {
	.otl-product__grid { grid-template-columns: minmax(0, 1fr); }
}

.otl-product__media img {
	width: 100%;
	display: block;
	border-radius: var(--otl-radius);
}

.otl-product__name {
	font-size: var(--otl-step-1);
	margin: 0 0 0.4rem;
}

.otl-product__specs {
	list-style: none;
	margin: 0 0 var(--otl-gap-s);
	padding: 0;
	font-family: var(--otl-font-ui);
	font-size: 15px;
	display: grid;
	gap: 0.25rem;
}

.otl-product__specs li {
	display: flex;
	gap: 0.6em;
	border-bottom: 1px dotted var(--otl-line);
	padding-bottom: 0.25rem;
	max-width: none;
}

.otl-product__specs strong { flex: 0 0 38%; color: var(--otl-text-muted); font-weight: 600; }

/* Pros and cons */
.otl-verdict {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	overflow: hidden;
	margin-block: var(--otl-gap-m);
	font-family: var(--otl-font-ui);
	font-size: 15px;
}

@media (max-width: 600px) {
	.otl-verdict { grid-template-columns: minmax(0, 1fr); }
}

.otl-verdict__col { padding: var(--otl-gap-s) var(--otl-gap-m); background-color: #fff; }
.otl-verdict__col + .otl-verdict__col { border-left: 1px solid var(--otl-line); }

@media (max-width: 600px) {
	.otl-verdict__col + .otl-verdict__col { border-left: 0; border-top: 1px solid var(--otl-line); }
}

.otl-verdict__label {
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}

.otl-verdict__col--pro .otl-verdict__label { color: var(--otl-positive); }
.otl-verdict__col--con .otl-verdict__label { color: var(--otl-negative); }

.otl-verdict ul { list-style: none; margin: 0; padding: 0; }
.otl-verdict li { position: relative; padding-left: 1.4em; margin-bottom: 0.4em; max-width: none; }

.otl-verdict__col--pro li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.7em;
	height: 0.35em;
	border-left: 2px solid var(--otl-positive);
	border-bottom: 2px solid var(--otl-positive);
	transform: rotate(-45deg);
}

.otl-verdict__col--con li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.75em;
	width: 0.7em;
	height: 2px;
	background-color: var(--otl-negative);
}

/* Bottom line callout */
.otl-bottomline {
	border-left: 4px solid var(--otl-moss);
	background-color: #f2f5f0;
	padding: var(--otl-gap-s) var(--otl-gap-m);
	margin-block: var(--otl-gap-m);
}

.otl-bottomline__label {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--otl-moss);
	display: block;
	margin-bottom: 0.3rem;
}

.otl-bottomline p:last-child { margin-bottom: 0; }

/* Comparison table wrapper so wide tables scroll rather than break layout */
.otl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.otl-tablewrap table { min-width: 620px; margin-block: 0; }

/* ==========================================================================
   12. Author box, related posts, sticky CTA
   ========================================================================== */

.otl-authorbox {
	display: flex;
	gap: var(--otl-gap-m);
	align-items: flex-start;
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	background-color: #fff;
	padding: var(--otl-gap-m);
	margin-top: var(--otl-gap-l);
}

.otl-authorbox img { border-radius: 50%; flex: 0 0 auto; }
.otl-authorbox__name { font-size: var(--otl-step-1); margin: 0 0 0.3rem; }
.otl-authorbox__bio { font-size: 16px; margin: 0; color: var(--otl-text-muted); }

@media (max-width: 600px) { .otl-authorbox { flex-direction: column; } }

.otl-related { margin-top: var(--otl-gap-l); }

.otl-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: none;
	align-items: center;
	gap: var(--otl-gap-s);
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	padding: 0.6rem 0.9rem;
	font-family: var(--otl-font-ui);
	box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, 0.6);
}

.otl-sticky-cta__text {
	font-size: 14px;
	line-height: 1.3;
	flex: 1;
	min-width: 0;
}

.otl-sticky-cta .otl-btn { padding: 0.6em 1.1em; font-size: 14px; }

.otl-sticky-cta__close {
	background: none;
	border: 0;
	color: rgba(244, 239, 225, 0.7);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0.2em 0.35em;
}

@media (max-width: 768px) {
	.otl-sticky-cta.is-visible { display: flex; }
	body.otl-has-sticky-cta { padding-bottom: 66px; }
}

/* ==========================================================================
   13. Deals strip and newsletter
   ========================================================================== */

.otl-deals__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--otl-gap-m);
}

.otl-deal {
	display: flex;
	flex-direction: column;
	background-color: var(--otl-pine);
	border: 1px solid rgba(244, 239, 225, 0.16);
	border-radius: var(--otl-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--otl-cream);
}

.otl-deal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.otl-deal__body { padding: var(--otl-gap-s); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.otl-deal__title { font-family: var(--otl-font-display); font-weight: 700; font-size: var(--otl-step-0); }
.otl-deal__desc { font-size: 15px; color: rgba(244, 239, 225, 0.8); }
.otl-deal__cta { font-family: var(--otl-font-ui); font-weight: 700; font-size: 14px; color: var(--otl-ember); margin-top: auto; }
.otl-deal:hover .otl-deal__title { color: var(--otl-ember); }

.otl-newsletter {
	background-color: var(--otl-moss);
	color: #fff;
	border-radius: var(--otl-radius-lg);
	padding: var(--otl-gap-l);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--otl-gap-m);
	align-items: center;
}

@media (max-width: 800px) { .otl-newsletter { grid-template-columns: minmax(0, 1fr); } }

.otl-newsletter h2 { color: #fff; margin: 0 0 0.4rem; }
.otl-newsletter p { margin: 0; color: rgba(255, 255, 255, 0.88); }

/* ==========================================================================
   14. Archive header
   ========================================================================== */

.otl-archive-head {
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	padding-block: var(--otl-gap-l);
	margin-bottom: var(--otl-gap-l);
}

.otl-archive-head h1 { color: var(--otl-cream); margin: 0 0 0.4rem; }
.otl-archive-head p { max-width: 68ch; margin: 0; color: rgba(244, 239, 225, 0.82); }
.otl-archive-head .otl-breadcrumbs { color: rgba(244, 239, 225, 0.66); }
.otl-archive-head .otl-breadcrumbs a { color: rgba(244, 239, 225, 0.66); }
.otl-archive-head .otl-breadcrumbs a:hover { color: var(--otl-ember); }

.otl-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-xs);
	margin-top: var(--otl-gap-m);
	list-style: none;
	padding: 0;
}

.otl-subcats a {
	display: inline-block;
	font-family: var(--otl-font-ui);
	font-size: 14px;
	font-weight: 600;
	padding: 0.35em 0.9em;
	border: 1px solid rgba(244, 239, 225, 0.35);
	border-radius: 999px;
	color: var(--otl-cream);
	text-decoration: none;
}

.otl-subcats a:hover {
	background-color: var(--otl-ember);
	border-color: var(--otl-ember);
	color: #fff;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--otl-spruce);
	color: rgba(244, 239, 225, 0.8);
	font-family: var(--otl-font-ui);
	font-size: 15px;
}

.site-footer a { color: rgba(244, 239, 225, 0.8); text-decoration: none; }
.site-footer a:hover { color: var(--otl-ember); }
.site-footer .widget-title { color: var(--otl-cream); font-size: 15px; letter-spacing: 0.03em; }

.otl-footer-disclosure {
	background-color: var(--otl-pine);
	color: rgba(244, 239, 225, 0.72);
	font-size: 13px;
	line-height: 1.6;
	padding-block: var(--otl-gap-m);
}

.otl-footer-disclosure img { max-width: 190px; margin-bottom: var(--otl-gap-s); }
.otl-footer-disclosure p { max-width: 90ch; margin: 0 0 0.6rem; }

/* ==========================================================================
   16. Utilities
   ========================================================================== */

.otl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.otl-backtotop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 800;
	width: 42px;
	height: 42px;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: var(--otl-spruce);
	color: var(--otl-cream);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--otl-shadow);
}

.otl-backtotop.is-visible { display: flex; }
.otl-backtotop:hover { background-color: var(--otl-ember); }

@media (max-width: 768px) {
	body.otl-has-sticky-cta .otl-backtotop { bottom: 78px; }
}

@media print {
	.otl-sticky-cta,
	.otl-backtotop,
	.main-navigation,
	.otl-toc { display: none !important; }
}

/* ==========================================================================
   17. Late additions
   ========================================================================== */

/* Nested section heads inside category blocks use h3 */
.otl-section-head h3 {
	margin: 0;
	font-size: var(--otl-step-1);
}

.otl-catblock .otl-section-head {
	border-bottom-width: 1px;
	border-bottom-color: var(--otl-ember);
}

/* Pagination */
.otl-pagination,
.navigation.pagination {
	margin-block: var(--otl-gap-l);
	font-family: var(--otl-font-ui);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-xs);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.7em;
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	background-color: #fff;
	color: var(--otl-spruce);
	font-weight: 600;
	text-decoration: none;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover {
	background-color: var(--otl-spruce);
	border-color: var(--otl-spruce);
	color: var(--otl-cream);
}

/* Archive grid needs breathing room below the dark masthead */
.otl-archive-head + .otl-container { padding-bottom: var(--otl-gap-l); }

/* Sidebar widget that sticks while the article scrolls */
.otl-sticky-widget { position: sticky; top: 90px; }

@media (max-width: 768px) {
	.otl-sticky-widget { position: static; }
}

/* ==========================================================================
   18. Forms, Contact Form 7 and static pages
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	width: 100%;
	font-family: var(--otl-font-ui);
	font-size: 16px;
	line-height: 1.4;
	padding: 0.7em 0.85em;
	color: var(--otl-text);
	background-color: #fff;
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus { border-color: var(--otl-moss); }

textarea { min-height: 160px; resize: vertical; }

input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	font-family: var(--otl-font-ui);
	font-size: 16px;
	font-weight: 700;
	padding: 0.85em 1.8em;
	border: 0;
	border-radius: var(--otl-radius);
	background-color: var(--otl-ember);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover { background-color: var(--otl-ember-deep); }

@media (prefers-reduced-motion: reduce) {
	input, select, textarea, input[type="submit"], button[type="submit"] { transition: none; }
}

/* Contact Form 7 */
.wpcf7 { max-width: 640px; }

.wpcf7 label {
	display: block;
	font-family: var(--otl-font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--otl-spruce);
	margin-bottom: 0.3rem;
}

.wpcf7 p { margin-bottom: var(--otl-gap-s); max-width: none; }

.wpcf7 .wpcf7-list-item { margin-left: 0; }

.wpcf7 .wpcf7-acceptance label {
	font-weight: 400;
	font-size: 14px;
	color: var(--otl-text-muted);
	display: flex;
	gap: 0.5em;
	align-items: flex-start;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin-top: 0.25em;
	flex: 0 0 auto;
	accent-color: var(--otl-ember);
}

.wpcf7 .wpcf7-not-valid { border-color: var(--otl-negative); }

.wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	color: var(--otl-negative);
	margin-top: 0.25rem;
}

.wpcf7 form .wpcf7-response-output {
	font-family: var(--otl-font-ui);
	font-size: 15px;
	border-width: 1px;
	border-radius: var(--otl-radius);
	padding: 0.8em 1em;
	margin: var(--otl-gap-s) 0 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--otl-positive);
	background-color: #f0f6f0;
	color: var(--otl-positive);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--otl-negative);
	background-color: #fbf1ee;
	color: var(--otl-negative);
}

.wpcf7-spinner { margin-left: 0.6em; }

/* Search form */
.search-form,
.wp-block-search__inside-wrapper { display: flex; gap: var(--otl-gap-xs); }
.search-form input[type="submit"] { flex: 0 0 auto; }

/* Static pages: narrower measure, the legal pages are long */
.otl-page .entry-content { max-width: 72ch; }
.otl-page .entry-header { margin-bottom: var(--otl-gap-m); }

.otl-page .entry-content h2 {
	border-bottom: 1px solid var(--otl-line);
	padding-bottom: 0.3em;
}

.otl-page .entry-content code {
	font-size: 0.9em;
	background-color: #f1efe8;
	padding: 0.15em 0.4em;
	border-radius: 3px;
}

/* Yoast breadcrumb wrapper matches the theme trail */
.otl-breadcrumbs .breadcrumb_last { color: var(--otl-text-muted); }

/* ==========================================================================
   19. Layout corrections against the GeneratePress shell
   These override the parent theme container so full bleed sections reach
   the edge of the viewport instead of sitting in a narrow content box.
   ========================================================================== */

/* --- Front page: let the sections run full width ----------------------- */

body.otl-front-page #page,
body.otl-front-page .site-content,
body.otl-front-page #content {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

body.otl-front-page #primary,
body.otl-front-page .content-area {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	float: none;
}

body.otl-front-page .otl-home > section { width: 100%; }

/* The parent theme adds a separating margin above the footer. On the
   homepage the last section already carries its own padding. */
body.otl-front-page .site-footer { margin-top: 0; }

/* --- Navigation: full width dark bar ------------------------------------ */

.main-navigation {
	width: 100%;
	max-width: none;
	flex: none;
}

.main-navigation .inside-navigation {
	max-width: var(--otl-container);
	margin-inline: auto;
	padding-inline: 20px;
	width: 100%;
}

/* Stop the menu wrapping to a second line by tightening the item padding
   before the breakpoint rather than after it. */
.main-navigation .main-nav ul li a {
	padding-inline: 14px;
	line-height: 56px;
}

.main-navigation .main-nav ul li a::after {
	left: 14px;
	right: 14px;
	bottom: 14px;
}

@media (min-width: 1025px) and (max-width: 1240px) {
	.main-navigation .main-nav ul li a {
		padding-inline: 10px;
		font-size: 14px;
	}
}

/* Dropdown items keep normal line height */
.main-navigation .main-nav ul ul li a {
	line-height: 1.5;
	padding-block: 10px;
}

/* Header: logo left, breathing room, no cramped box */
.site-header .inside-header {
	max-width: var(--otl-container);
	margin-inline: auto;
	padding: 14px 20px;
}

.site-header .site-logo img,
.site-header .header-image {
	max-height: 76px;
	width: auto;
}

/* --- Top bar: a real row, not a bullet list ----------------------------- */

.otl-topbar__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--otl-gap-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.otl-topbar__menu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.otl-topbar__menu a {
	font-weight: 600;
	font-size: 13px;
	line-height: 38px;
	display: block;
}

.otl-topbar__text { opacity: 0.82; }

@media (max-width: 768px) {
	.otl-topbar .otl-container { justify-content: center; }
	.otl-topbar__text { display: none; }
	.otl-topbar__menu { gap: var(--otl-gap-m); }
}

/* --- Hero: solo state and link row -------------------------------------- */

.otl-hero__inner { min-height: 0; }

.otl-hero--solo .otl-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 780px;
	padding-block: 5rem;
}

.otl-hero--solo .otl-hero__title { max-width: 18ch; }

.otl-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--otl-gap-xs);
	list-style: none;
	margin: var(--otl-gap-l) 0 0;
	padding: 0;
}

.otl-hero__links li { margin: 0; }

.otl-hero__links a {
	display: inline-block;
	font-family: var(--otl-font-ui);
	font-size: 14px;
	font-weight: 600;
	padding: 0.4em 0.95em;
	border: 1px solid rgba(244, 239, 225, 0.32);
	border-radius: 999px;
	color: var(--otl-cream);
	text-decoration: none;
}

.otl-hero__links a:hover,
.otl-hero__links a:focus {
	background-color: var(--otl-ember);
	border-color: var(--otl-ember);
	color: #fff;
}

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

.site-info {
	background-color: var(--otl-spruce);
	color: rgba(244, 239, 225, 0.66);
	font-family: var(--otl-font-ui);
	font-size: 13px;
	text-align: center;
	padding-block: var(--otl-gap-s);
}

.site-info a { color: rgba(244, 239, 225, 0.66); }

/* --- Archive and single pages also need the dark bands full width ------- */

/* The archive masthead goes full width by unwinding the parent container
   on the body class instead of a 100vw trick. 100vw includes the scrollbar,
   which pushed the page sideways and left a strip down the right. */

@media (max-width: 768px) {
	.otl-hero--solo .otl-hero__inner { padding-block: 3rem; }
	.otl-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ==========================================================================
   20. Reference layout: header, mosaic, category cards, guide cards
   ========================================================================== */

/* --- Header: logo centred on white, dark nav bar below ------------------ */

.site-header {
	background-color: var(--otl-surface);
	border-bottom: 0;
	text-align: center;
}

.site-header .inside-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	max-width: var(--otl-container);
	margin-inline: auto;
	padding: 18px 20px;
	float: none;
}

.site-header .site-logo,
.site-header .site-branding { float: none; margin: 0; }

.site-header .site-logo img,
.site-header .header-image {
	max-height: 92px;
	width: auto;
	display: block;
	margin-inline: auto;
}

.site-header .site-branding-container { justify-content: center; }

/* Nav bar spans the viewport, items centred inside the container.
   GeneratePress puts .grid-container on the nav element itself when the
   navigation width is set to contained, and that selector outranks a bare
   .main-navigation, which is why the bar stayed boxed. Matching the same
   specificity fixes it whichever GP setting is in use. */
.main-navigation,
.main-navigation.grid-container,
.main-navigation.is-stuck,
.site-header .main-navigation {
	background-color: var(--otl-spruce);
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	float: none;
}

/* The nav bar runs full bleed, so it is allowed a wider inner measure than
   the 1200 content container. Nine items plus the search need about 1170,
   and 1280 leaves slack for a longer category name later. */
.main-navigation .inside-navigation,
.main-navigation .inside-navigation.grid-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* GeneratePress floats the menu inside the bar. Floats are ignored inside a
   flex container, but the declaration is cleared anyway so nothing shifts
   if the parent theme changes. */
.main-navigation .main-nav,
.main-navigation .menu-bar-items { float: none; }

.main-navigation .main-nav { flex: 0 1 auto; }

.main-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.main-navigation .main-nav ul li a {
	padding-inline: 9px;
	line-height: 52px;
	font-size: 13px;
	letter-spacing: 0;
	white-space: nowrap;
}

.main-navigation .main-nav ul li a::after {
	left: 9px;
	right: 9px;
	bottom: 12px;
}

/* GeneratePress dropdown arrows add width to every parent item. Pull them
   in so a nine item menu still clears one line. */
.main-navigation .main-nav ul li a .dropdown-menu-toggle {
	padding-left: 4px;
	padding-right: 0;
	font-size: 11px;
}

/* The nav is capped by the container, not the viewport, so nothing loosens
   on a wider screen. Keeping one set of values avoids a menu that fits at
   1280 and wraps at 1440. */

/* Search sits at the right end of the bar */
.main-navigation .menu-bar-items {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.otl-nav-search {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	height: 52px;
}

.otl-nav-search form { display: flex; }

.otl-nav-search input[type="search"] {
	width: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	background-color: var(--otl-pine);
	color: var(--otl-cream);
	transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.otl-nav-search.is-open input[type="search"] {
	width: 190px;
	opacity: 1;
	padding: 0.45em 0.7em;
	border: 1px solid rgba(244, 239, 225, 0.25);
}

.otl-nav-search__toggle {
	background-color: var(--otl-ember);
	border: 0;
	color: #fff;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--otl-radius);
	margin-left: 6px;
}

.otl-nav-search__toggle:hover { background-color: var(--otl-ember-deep); }

@media (max-width: 1024px) {
	.otl-nav-search { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.otl-nav-search input[type="search"] { transition: none; }
}

/* --- Centred section titles -------------------------------------------- */

.otl-section-title {
	text-align: center;
	font-family: var(--otl-font-body);
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0;
	font-size: var(--otl-step-3);
	margin: 0 0 var(--otl-gap-l);
	position: relative;
	padding-bottom: 0.55rem;
}

.otl-section-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	background-color: var(--otl-ember);
}

/* --- Hero mosaic -------------------------------------------------------- */

.otl-mosaic {
	background-color: var(--otl-spruce);
	padding-block: 0;
}

.otl-mosaic .otl-container { padding-inline: 0; }

.otl-mosaic__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 4px;
	background-color: var(--otl-spruce);
}

.otl-mosaic__side {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.otl-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--otl-pine);
	text-decoration: none;
	min-height: 150px;
}

.otl-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.otl-tile:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.otl-tile img { transition: none; }
	.otl-tile:hover img { transform: none; }
}

.otl-tile__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.45rem;
	padding: var(--otl-gap-s);
	background: linear-gradient(to top, rgba(8, 13, 10, 0.88) 8%, rgba(8, 13, 10, 0.05) 62%);
}

.otl-tile__badge {
	align-self: flex-start;
	font-family: var(--otl-font-ui);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--otl-ember);
	color: #fff;
	padding: 0.25em 0.7em;
	border-radius: 2px;
}

.otl-tile__title {
	font-family: var(--otl-font-display);
	font-weight: 700;
	line-height: 1.25;
	color: var(--otl-cream);
	font-size: 15px;
}

.otl-tile:hover .otl-tile__title { color: var(--otl-ember); }

.otl-tile--lead { min-height: 420px; }

.otl-tile--lead .otl-tile__body { padding: var(--otl-gap-m); }

.otl-tile--lead .otl-tile__title { font-size: var(--otl-step-2); }

/* The lead tile keeps its height, the side grid matches it */
.otl-mosaic__side { min-height: 420px; }

@media (max-width: 900px) {
	.otl-mosaic__grid { grid-template-columns: minmax(0, 1fr); }
	.otl-tile--lead { min-height: 280px; }
	.otl-mosaic__side { min-height: 320px; }
}

@media (max-width: 520px) {
	.otl-mosaic__side { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
	.otl-tile { min-height: 190px; }
}

/* --- Featured category cards -------------------------------------------- */

.otl-catcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background-color: var(--otl-line);
	border: 1px solid var(--otl-line);
}

@media (max-width: 1024px) { .otl-catcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .otl-catcards { grid-template-columns: minmax(0, 1fr); } }

.otl-catcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otl-gap-s);
	background-color: var(--otl-surface);
	padding: 0.85rem 1rem;
	text-decoration: none;
	min-height: 74px;
}

.otl-catcard:hover { background-color: #f7f5ef; }

.otl-catcard__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.otl-catcard__name {
	font-family: var(--otl-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--otl-spruce);
	line-height: 1.3;
}

.otl-catcard:hover .otl-catcard__name { color: var(--otl-ember-deep); }

.otl-catcard__count {
	font-family: var(--otl-font-ui);
	font-size: 12px;
	color: var(--otl-text-muted);
}

.otl-catcard__media { flex: 0 0 auto; }

.otl-catcard__media img {
	width: 64px;
	height: 48px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

/* --- Guides and reviews cards ------------------------------------------- */

.otl-guides { background-color: #f4f2ec; }

.otl-guidecards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--otl-gap-m);
}

@media (max-width: 1024px) { .otl-guidecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .otl-guidecards { grid-template-columns: minmax(0, 1fr); } }

.otl-guidecard {
	display: flex;
	flex-direction: column;
	background-color: var(--otl-surface);
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	overflow: hidden;
}

.otl-guidecard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otl-gap-xs);
	padding: 0.7rem 0.9rem;
	background-color: #f7f5ef;
	border-bottom: 1px solid var(--otl-line);
	text-decoration: none;
}

.otl-guidecard__name {
	font-family: var(--otl-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--otl-spruce);
	line-height: 1.3;
}

.otl-guidecard__head:hover .otl-guidecard__name { color: var(--otl-ember-deep); }

.otl-guidecard__head img {
	width: 52px;
	height: 39px;
	object-fit: cover;
	border-radius: 2px;
	flex: 0 0 auto;
	display: block;
}

.otl-guidecard__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.9rem;
	flex: 1;
}

.otl-guidecard__list li { margin: 0; max-width: none; }

.otl-guidecard__list li + li { border-top: 1px solid var(--otl-line); }

.otl-guidecard__list a {
	display: block;
	font-family: var(--otl-font-ui);
	font-size: 14px;
	line-height: 1.4;
	padding-block: 0.6rem;
	color: var(--otl-lake);
	text-decoration: none;
}

.otl-guidecard__list a:hover { color: var(--otl-ember-deep); }

.otl-guidecard__more {
	align-self: center;
	margin: 0.4rem 0.9rem 1rem;
	font-family: var(--otl-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--otl-ember-deep);
	border: 1px solid var(--otl-ember);
	border-radius: var(--otl-radius);
	padding: 0.5em 1.3em;
	text-decoration: none;
}

.otl-guidecard__more:hover {
	background-color: var(--otl-ember);
	color: #fff;
}

/* --- Footer disclosure: logo beside the text ---------------------------- */

.otl-footer-disclosure .otl-container {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	gap: var(--otl-gap-l);
	align-items: center;
}

.otl-footer-disclosure__logo {
	background-color: #fff;
	border-radius: var(--otl-radius);
	padding: var(--otl-gap-s);
	text-align: center;
}

.otl-footer-disclosure__logo img { max-width: 100%; height: auto; margin: 0; }

@media (max-width: 760px) {
	.otl-footer-disclosure .otl-container { grid-template-columns: minmax(0, 1fr); }
}

/* --- Archive masthead full width without a viewport hack ---------------- */

body.otl-wide-header #page,
body.otl-wide-header .site-content,
body.otl-wide-header #content {
	max-width: none;
	padding-inline: 0;
}

body.otl-wide-header #primary,
body.otl-wide-header .content-area {
	padding-inline: 0;
}

body.otl-wide-header .otl-archive-head {
	width: 100%;
	max-width: none;
}

/* Put the container padding back on the inner content of archive pages */
body.otl-wide-header #primary > .otl-container,
body.otl-wide-header #primary > .otl-pagination { padding-inline: 20px; }

/* ==========================================================================
   21. Navigation bar: force full width regardless of GeneratePress settings
   The bar stayed boxed because the constraint can come from three different
   places depending on which GP layout options are set: .grid-container on
   the nav itself, a capped .inside-header when the nav is a header item, or
   the site container. Rather than guess which one is active, all three are
   unwound and the key declarations are marked important so the child theme
   wins whatever the parent is doing.
   ========================================================================== */

.site-header,
.site-header.grid-container {
	max-width: none !important;
	width: 100%;
	padding-inline: 0 !important;
}

/* The header inner wrapper stays visually centred, but stops capping the
   navigation when GeneratePress renders the nav inside it. */
.site-header .inside-header,
.site-header .inside-header.grid-container {
	max-width: none !important;
	padding-inline: 0 !important;
	width: 100%;
}

/* Logo keeps its own centred measure now that the wrapper is uncapped. */
.site-header .inside-header .site-logo,
.site-header .inside-header .site-branding {
	padding: 18px 20px;
}

#site-navigation,
.main-navigation,
.main-navigation.grid-container,
.site-header .main-navigation {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	background-color: var(--otl-spruce);
}

.main-navigation .inside-navigation,
.main-navigation .inside-navigation.grid-container {
	box-sizing: border-box;
	max-width: 1280px !important;
	margin-inline: auto !important;
	padding-inline: 20px !important;
	width: 100%;
}

/* One row: menu centred, search pinned right. Desktop only. Below GP's
   mobile breakpoint the menu becomes a toggle, and forcing nowrap there
   held the item list at full width and pushed the page sideways. */
@media (min-width: 769px) {
	.main-navigation .inside-navigation,
	.main-navigation .inside-navigation.grid-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: center;
	}
}

.main-navigation .main-nav {
	flex: 0 1 auto;
	float: none !important;
}

.main-navigation .menu-bar-items {
	flex: 0 0 auto;
	float: none !important;
	margin-left: auto;
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Featured Categories grid: draw the rules on the cards themselves so a row
   that is not full does not leave a grey block where the gap shows through.
   -------------------------------------------------------------------------- */

/* Standalone bordered cards rather than a shared grid rule. A shared rule
   only looks right when the last row is full; with one or two categories it
   left a line stretching across empty space. */
.otl-catcards {
	background-color: transparent;
	border: 0;
	gap: 10px;
}

.otl-catcard {
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
}

/* ==========================================================================
   22. Featured Categories and Guides cards
   Only the top level silos appear here, so each card can carry more weight
   than when every subcategory was competing for the same grid.
   ========================================================================== */

.otl-catcards { align-items: stretch; }

.otl-catcard {
	min-height: 78px;
	padding: 0.9rem 1rem;
	background-color: var(--otl-surface);
	border: 1px solid var(--otl-line);
	border-radius: var(--otl-radius);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.otl-catcard:hover {
	background-color: #fff;
	border-color: var(--otl-ember);
}

@media (prefers-reduced-motion: reduce) {
	.otl-catcard { transition: none; }
}

.otl-catcard__text { gap: 0.25rem; }

.otl-catcard__name {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--otl-spruce);
	line-height: 1.3;
}

.otl-catcard:hover .otl-catcard__name { color: var(--otl-ember-deep); }

.otl-catcard__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--otl-text-muted);
}

/* A silo that already has articles earns the accent colour, so the active
   parts of the site stand out from the ones still being written. */
.otl-catcard__count--live { color: var(--otl-ember-deep); }

.otl-catcard__media img {
	width: 62px;
	height: 47px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

/* --- Subcategory lists inside a guide card with no articles yet -------- */

.otl-guidecard__list--subs a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--otl-spruce);
	font-weight: 600;
}

.otl-guidecard__list--subs a::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--otl-ember);
	opacity: 0.55;
}

.otl-guidecard__list--subs a:hover { color: var(--otl-ember-deep); }
.otl-guidecard__list--subs a:hover::before { opacity: 1; }