/*
Theme Name: Gold Cloud
Description: Bold, dark, matte-gold theme for the Gold Cloud WoW gold farm database. Build pages as templates in /page-templates, then assign them to a page in WordPress.
Version: 1.15.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: goldcloud
*/

/* ==========================================================================
   Fonts (self-hosted, SIL Open Font License)
   ========================================================================== */
@font-face {
	font-family: "Anton";
	src: url("assets/fonts/anton-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Design tokens: change colours and fonts here
   ========================================================================== */
:root {
	/* Dark greys */
	--color-bg: #1b1c1f;          /* Page background */
	--color-bg-deep: #141517;     /* Header and footer */
	--color-surface: #232528;     /* Cards, alternate sections */
	--color-surface-2: #2c2e32;   /* Raised bits, table headers, inputs on hover */
	--color-border: #393c41;

	/* Text */
	--color-text: #f3f0e9;
	--color-muted: #a8a59e;

	/* Matte gold: always used for anything that IS gold (gold amounts, the coin, the site name) */
	--color-gold: #c9a54e;
	--color-gold-hover: #d8b96a;
	--color-gold-deep: #a3843c;   /* Darker gold for edges, e.g. the coin rim */

	/* Accent: buttons, highlights, active states. Gold on Retail, blue on Forever (see below). */
	--color-accent: var(--color-gold);
	--color-accent-hover: var(--color-gold-hover);
	--color-accent-deep: var(--color-gold-deep);
	--color-accent-ink: #17181a;  /* Text on the accent colour */
	--color-accent-soft: rgba(201, 165, 78, 0.12);

	/* Status */
	--color-success: #74c08b;
	--color-error: #e57373;

	--font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
	--font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--radius: 22px;
	--radius-sm: 12px;
	--max-width: 1180px;

	color-scheme: dark;
}

/* WoW Forever: the accent turns teal-blue (taken from the WoW Forever key art). Gold stays gold. */
.gc-version-forever {
	--color-accent: #3da5c2;
	--color-accent-hover: #64b7ce;
	--color-accent-deep: #2e7d93;
	--color-accent-soft: rgba(61, 165, 194, 0.14);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-top: 1.4em; }
h3 { font-size: 1.5rem; }
h4 { font-weight: 800; font-size: 1.1rem; }

strong, b { font-weight: 800; }

/* Gold highlight for key words: <span class="highlight">Gold</span> */
.highlight { color: var(--color-accent); }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}
.container--narrow { max-width: 820px; }

.site-main { flex: 1; padding: 48px 0 80px; }

/* Full-width bands for page templates */
.section { padding: 80px 0; }
.section--alt { background: var(--color-surface); }
.section--gold { background: var(--color-accent); color: var(--color-accent-ink); }
.section--gold a:not(.button) { color: var(--color-accent-ink); }
.section--gold .button { background: var(--color-accent-ink); color: var(--color-accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background: var(--color-bg-deep);
	border-bottom: 1px solid var(--color-border);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	min-height: 76px;
}

.site-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.8rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.site-title a { color: var(--color-gold); text-decoration: none; }
.custom-logo { display: block; max-height: 52px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.main-nav a,
.nav-account {
	display: block;
	padding: 6px 0;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.nav-account:hover { color: var(--color-accent); }

/* Unread notifications count: on "My account" in the header and the Notifications tab */
.count-dot {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: 6px;
	padding: 0 6px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: 1px;
}
.nav-account .count-dot { animation: count-pop 0.4s ease-out; }
@keyframes count-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-account .count-dot { animation: none; } }

/* My Account > Notifications */
.notification-list { margin: 0 0 14px; padding: 0; list-style: none; }
.notification { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.notification:last-child { border-bottom: 0; }
.notification__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--color-surface-2);
	border-radius: 50%;
	color: var(--color-accent);
	font-weight: 800;
}
.notification--run_rejected .notification__icon,
.notification--suggestion_rejected .notification__icon { color: var(--color-muted); }
.notification__body { display: grid; gap: 3px; min-width: 0; }
.notification__body a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.notification__body a:hover { color: var(--color-accent); }
.notification__time { font-size: 0.82rem; }
.notification.is-unread .notification__body a,
.notification.is-unread .notification__body { font-weight: 800; }
.notification.is-unread .notification__icon { background: var(--color-accent); color: var(--color-accent-ink); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-actions .button { padding: 10px 20px; }

/* Retail / WoW Forever switcher */
.site-header .version-switch {
	display: flex;
	margin: 0;
	padding: 4px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
}
.site-header .version-switch a {
	padding: 5px 14px;
	border-radius: 999px;
	color: var(--color-muted);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.site-header .version-switch a:hover { color: var(--color-text); }
.site-header .version-switch a.is-active { background: var(--color-accent); color: var(--color-accent-ink); }

/* Mobile menu button */
.nav-toggle.has-unread { position: relative; }
.nav-toggle.has-unread::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 4px;
	width: 10px;
	height: 10px;
	background: var(--color-accent);
	border: 2px solid var(--color-bg-deep);
	border-radius: 50%;
}
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 9px;
	background: none;
	border: 0;
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	height: 2px;
	background: var(--color-text);
	transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
	.site-header .container { flex-wrap: wrap; gap: 12px; min-height: 64px; }
	.site-title { font-size: 1.45rem; }
	.site-header .version-switch a { padding: 4px 10px; font-size: 0.72rem; }
	.nav-toggle { display: flex; }
	.main-nav { display: none; width: 100%; margin: 0; padding-bottom: 16px; }
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav a { padding: 12px 0; border-top: 1px solid var(--color-border); }
	.nav-actions { flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-border); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-bg-deep);
	border-top: 3px solid var(--color-accent);
	color: var(--color-muted);
	font-size: 0.95rem;
}
.site-footer a:not(.button) { color: var(--color-text); text-decoration: none; font-weight: 700; }
.site-footer a:not(.button):hover { color: var(--color-accent); }

.footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.8fr 1.4fr;
	gap: 40px;
	padding-top: 64px;
	padding-bottom: 48px;
}
.footer__logo {
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
}
.site-footer .footer__logo a { color: var(--color-gold); font-weight: 400; }
.footer__brand p { max-width: 320px; }
.footer__brand .footer__actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
.footer__actions .button { padding: 11px 20px; }
/* Button with an icon: icon and text centred on one line. */
.button.button--icon { display: inline-flex; align-items: center; gap: 9px; }
.button--icon .icon { flex: none; margin-top: -1px; }
.footer__icon-link { display: inline-flex; align-items: center; gap: 8px; }
.footer__title {
	margin: 0 0 16px;
	font-size: 1.25rem;
	color: var(--color-text);
}
.footer__col ul { list-style: none; margin: 0 0 10px; padding: 0; }
.footer__col li { margin-bottom: 10px; }
.site-footer .footer__col a { font-weight: 500; color: var(--color-muted); }
.site-footer .footer__col a:hover { color: var(--color-accent); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 24px;
	padding-top: 22px;
	padding-bottom: 26px;
	border-top: 1px solid var(--color-border);
	font-size: 0.8rem;
}
.footer__bottom p { margin: 0; }
.footer__disclaimer { flex-basis: 100%; color: #75736e; }

/* Coin flip minigame */
.coin-game {
	padding: 24px 26px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.coin-game__intro { margin: -8px 0 16px; }
.coin-game__play { display: flex; align-items: center; gap: 22px; }

.coin-stage {
	flex: none;
	padding: 10px;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	perspective: 500px;
}
.coin-jump { display: block; }
.coin-stage.is-flipping .coin-jump { animation: coin-jump 1.1s cubic-bezier(0.3, 0.6, 0.4, 1); }
.coin {
	position: relative;
	display: block;
	width: 92px;
	height: 92px;
	transform-style: preserve-3d;
	transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.coin-stage:not(.is-flipping):hover .coin-jump { transform: translateY(-3px); transition: transform 0.15s; }
.coin__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--color-gold);
	border: 5px solid var(--color-gold-deep);
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px rgba(23, 24, 26, 0.18);
	color: var(--color-accent-ink);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.coin__face--tails {
	transform: rotateX(180deg);
	font-family: var(--font-display);
	font-size: 2.6rem;
	line-height: 1;
}
@keyframes coin-jump {
	0%   { transform: translateY(0); }
	45%  { transform: translateY(-46px); }
	100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.coin { transition: none; }
	.coin-stage.is-flipping .coin-jump { animation: none; }
}

.coin-game__scores { flex: 1; min-width: 0; }
.coin-game__result { min-height: 1.5em; margin: 0 0 10px; color: var(--color-text); font-weight: 800; }
.coin-game__stats { display: flex; gap: 18px; margin: 0; }
.coin-game__stats dt {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.coin-game__stats dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; color: var(--color-text); }
.coin-game__stats div:first-child dd { color: var(--color-gold); }
.coin-game__reset {
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-muted);
	font: inherit;
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
}
.coin-game__reset:hover { color: var(--color-accent); }

@media (max-width: 1000px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	/* Brand and the coin game full width; Explore and Community side by side. */
	.footer__grid { gap: 32px 20px; padding-top: 48px; }
	.footer__brand,
	.coin-game { grid-column: 1 / -1; }
	.coin-game__play { gap: 14px; }
	.coin-game__stats { gap: 14px; }
}

/* ==========================================================================
   Buttons, pills and badges
   ========================================================================== */
.button {
	display: inline-block;
	padding: 13px 28px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border: 2px solid var(--color-accent);
	border-radius: 999px;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	white-space: nowrap; /* Button text stays on one line */
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.button:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-accent-ink);
	transform: translateY(-1px);
}
.button--outline { background: transparent; color: var(--color-accent); }
.button--outline:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.button--large { padding: 16px 36px; font-size: 1rem; }

/* Farm type filter */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pills a {
	padding: 7px 18px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.pills a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pills a.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

.badge {
	display: inline-block;
	padding: 4px 12px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.badge--small { padding: 2px 8px; font-size: 0.66rem; margin-left: 6px; vertical-align: 2px; }

.status {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.status--live { background: rgba(116, 192, 139, 0.15); color: var(--color-success); }
.status--review { background: var(--color-accent-soft); color: var(--color-accent); }

/* ==========================================================================
   Shared bits
   ========================================================================== */
.muted { color: var(--color-muted); }
.gold { color: var(--color-gold); font-weight: 800; }
.small { font-size: 0.9rem; }

.page-header { margin-bottom: 28px; }
.page-header h1 { margin-bottom: 10px; }
h1 .muted { color: var(--color-accent); }

.breadcrumb {
	margin: 0 0 10px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }

.card {
	padding: 30px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.card h2 { margin-top: 0; }

/* ==========================================================================
   Notices
   ========================================================================== */
.notice {
	margin-bottom: 22px;
	padding: 16px 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius-sm);
}
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 0; padding-left: 18px; }
.notice--success { border-left-color: var(--color-success); }
.notice--error { border-left-color: var(--color-error); }
.notice--outdated { border-left-color: var(--color-muted); }
.notice--celebrate {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: 1.05rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap {
	overflow-x: auto;
	margin-bottom: 28px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.gc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.gc-table th,
.gc-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	white-space: nowrap;
	vertical-align: top;
}
.gc-table th {
	background: var(--color-surface-2);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.gc-table tbody tr:last-child td { border-bottom: 0; }
.gc-table tbody tr:hover { background: var(--color-surface-2); }
.gc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gc-table details { white-space: normal; max-width: 260px; }
.gc-table summary { cursor: pointer; color: var(--color-accent); font-weight: 700; white-space: nowrap; }

/* Less important columns hidden on phones so gold/hr stays on screen */
@media (max-width: 640px) {
	.gc-table .hide-sm { display: none; }
	.gc-table th,
	.gc-table td { padding: 12px; }
}
.farm-link { color: var(--color-text); font-weight: 800; text-decoration: none; }
.farm-link:hover { color: var(--color-accent); }

/* Farm lists: the farm's Featured Image, faded in from the left behind its name */
.gc-table .farm-cell { position: relative; }
.gc-table .farm-cell--bg { min-width: 200px; }
.gc-table .farm-cell--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--farm-bg) center / cover no-repeat;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 100%);
	pointer-events: none;
	transition: opacity 0.2s;
}
.gc-table tr:hover .farm-cell--bg::before { opacity: 0.5; }
.gc-table .farm-cell > * { position: relative; } /* Text above the image */
.gc-table .farm-cell--bg .farm-link { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
	font-weight: 700;
}
.pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

/* ==========================================================================
   Farm list filters
   ========================================================================== */
.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.filters__search { flex: 1 1 220px; }
.filters__search input { width: 100%; }
.filters__reset { font-size: 0.85rem; font-weight: 700; }
.filters .button { padding: 10px 22px; }

/* ==========================================================================
   Farm page
   ========================================================================== */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
	margin-bottom: 36px;
}
.stat {
	padding: 22px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.stat:first-child { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.stat:first-child .stat__label,
.stat:first-child .gold { color: var(--color-accent-ink); }
.stat__label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.stat__value { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; line-height: 1.1; }
/* A stat that's about gold (e.g. Avg gold/hr) stays gold on every version. */
.stat.stat--gold { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-accent-ink); }
.stat.stat--gold .stat__label,
.stat.stat--gold .gold { color: var(--color-accent-ink); }

@media (max-width: 640px) {
	.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.stat { padding: 16px 18px; border-radius: var(--radius-sm); }
	.stat__value { font-size: 1.8rem; }
}
/* Farm hero banner (the farm's Featured Image) behind the breadcrumb and title */
.farm-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	margin-bottom: 28px;
	padding: 40px;
	border-radius: var(--radius);
	background: var(--color-bg-deep);
}
.farm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* Dark wash so the title stays readable, heaviest at the bottom-left where the text sits. */
.farm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(20, 21, 23, 0.9) 0%, rgba(20, 21, 23, 0.45) 55%, rgba(20, 21, 23, 0.15) 100%),
		linear-gradient(to right, rgba(20, 21, 23, 0.6) 0%, rgba(20, 21, 23, 0) 70%);
}
.farm-hero .breadcrumb,
.farm-hero .breadcrumb a { color: var(--color-text); }
.farm-hero .breadcrumb a:hover { color: var(--color-accent); }
.farm-hero .page-header { margin-bottom: 0; }
.farm-hero .page-header h1 { margin-bottom: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) {
	.farm-hero { min-height: 220px; padding: 24px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
	padding: 11px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font: inherit;
}
input::placeholder, textarea::placeholder { color: #75736e; }
/* Dropdowns: our own chevron with room around it, instead of the browser's arrow squeezed
   against the edge. The SVG can't read CSS tokens, so its colour is --color-muted (#a8a59e). */
select:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8a59e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12px 8px;
	cursor: pointer;
}
select option { background: var(--color-bg); color: var(--color-text); }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.gc-form fieldset {
	margin: 0 0 26px;
	padding: 26px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.gc-form legend {
	padding: 0 8px;
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.gc-form legend .muted { font-family: var(--font); font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
.gc-form .field { margin: 0 0 18px; }
.gc-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.gc-form .field--inline label { display: inline-flex; gap: 8px; font-size: 0.9rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.gc-form input[type="text"],
.gc-form input[type="email"],
.gc-form input[type="password"],
.gc-form input[type="url"],
.gc-form select,
.gc-form textarea { width: 100%; }
.gc-form .hint { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--color-muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.gc-form .required { color: var(--color-accent); }
.gc-form .required-note { margin: 0 0 18px; font-size: 0.85rem; color: var(--color-muted); }

/* A required field that was left empty */
.gc-form .has-error label { color: var(--color-error); }
.gc-form .has-error input,
.gc-form .has-error select,
.gc-form .has-error textarea { border-color: var(--color-error); }
.gc-form .has-error input:focus,
.gc-form .has-error select:focus,
.gc-form .has-error textarea:focus { box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.25); }
.gc-form .field-error { display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: var(--color-error); }
input[type="checkbox"] { accent-color: var(--color-accent); }

/* "Profession required" tick boxes, shown as toggle pills */
.gc-form .field-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.professions-field .hint { margin: 0 0 12px; }
.profession-group { margin-bottom: 12px; }
.profession-group__title {
	display: block;
	margin-bottom: 6px;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-form .check { display: inline-flex; margin: 0; font-size: 0.9rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span {
	padding: 7px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.check span:hover { border-color: var(--color-accent); }
.check input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.check input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gc-table td.requires { white-space: normal; min-width: 110px; }

/* Spam trap: hidden from people */
.hp { position: absolute !important; left: -9999px; }

.run-preview {
	margin: 4px 0 0;
	padding: 16px 20px;
	background: var(--color-accent-soft);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: 1.1rem;
}
.run-preview .gold { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }

/* ==========================================================================
   Trust and account
   ========================================================================== */
.trust {
	margin-bottom: 26px;
	padding: 20px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.trust p { margin: 0 0 12px; }
.trust--trusted { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress { height: 10px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--color-accent); border-radius: 999px; }

.account-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.account-hello { font-size: 1.05rem; }
.account-section { margin: 0 0 24px; }
.account-section h2 { margin-top: 0; font-size: 1.8rem; }
.account-section .gc-form .field { max-width: 420px; }
.account-section .field-row .field { max-width: none; }
.account-username { font-size: 0.95rem; }
.account-narrow { max-width: 520px; }

.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ==========================================================================
   Farmer profiles and Top Farmers
   ========================================================================== */
.farmer-link { color: var(--color-text); font-weight: 700; text-decoration: none; }
.farmer-link:hover { color: var(--color-accent); text-decoration: underline; }

.profile-header { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.profile-header h1 { margin: 0 0 8px; }
.profile-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	background: var(--color-accent);
	border: 5px solid var(--color-accent-deep);
	border-radius: 50%;
	color: var(--color-accent-ink);
	font-family: var(--font-display);
	font-size: 3rem;
	line-height: 1;
}
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; color: var(--color-muted); font-size: 0.9rem; }
.profile-bio { max-width: 620px; margin: 12px 0 0; font-size: 1.05rem; }

.profile-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -14px 0 32px; padding: 0; list-style: none; }
.profile-facts span {
	margin-right: 6px;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.profile-facts a { font-weight: 800; }

.leaderboard td { vertical-align: middle; }

/* ==========================================================================
   Run upvotes
   ========================================================================== */
.vote-form { margin: 0; }
.vote {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 58px;
	padding: 5px 12px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
.vote__arrow { font-size: 0.7rem; color: var(--color-muted); transition: color 0.15s; }
a.vote:hover,
button.vote:hover { border-color: var(--color-accent); color: var(--color-accent); }
button.vote:hover .vote__arrow { color: var(--color-accent); }
button.vote:active { transform: scale(0.95); }
.vote.is-voted { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.vote.is-voted .vote__arrow { color: var(--color-accent-ink); }
.vote.is-voted:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.vote--own { cursor: default; opacity: 0.7; }
.vote:disabled { opacity: 0.6; }

.badge--confirmed { background: rgba(116, 192, 139, 0.18); color: var(--color-success); }

/* Runs and farms left out of the averages because they're old */
.badge--outdated { background: var(--color-surface-2); color: var(--color-muted); cursor: help; }
.outdated-text { color: var(--color-muted); }
.stats--outdated .stat__value { opacity: 0.6; }
.stats-note { margin: -22px 0 28px; font-size: 0.88rem; }
.runs-table .run-row.is-outdated > td:not(:last-child) { opacity: 0.55; }
.runs-table .run-row.is-outdated:hover > td { opacity: 1; }
.gc-table .num .badge--confirmed { margin-left: 8px; }
.gc-table td { vertical-align: middle; }

/* Farm page runs: one compact row each, with a details panel that opens underneath */
.run-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}
.run-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.run-toggle__extras { font-weight: 600; color: var(--color-muted); }
.run-toggle__chevron { font-size: 0.7rem; transition: transform 0.15s; }
.run-toggle[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.run-toggle[aria-expanded="true"] .run-toggle__chevron { transform: rotate(180deg); }

.runs-table .run-row.is-open td { border-bottom-color: transparent; background: var(--color-surface-2); }
.runs-table .run-details td {
	padding: 4px 16px 20px;
	background: var(--color-surface-2);
	white-space: normal;
}
.runs-table tbody tr.run-details:hover { background: none; }
.run-details__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 32px; }
.run-facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0; align-content: flex-start; }
.run-facts dt {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.run-facts dd { margin: 2px 0 0; font-weight: 700; }
.run-notes__title {
	display: block;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}
.run-notes p { margin: 4px 0 10px; }
.run-details__more > p { margin: 0 0 10px; }
.run-details__by { font-size: 0.85rem; }
.button.button--small { padding: 7px 16px; font-size: 0.75rem; }

.show-sm { display: none; }
.requires-inline { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); white-space: normal; }

@media (max-width: 640px) {
	.show-sm { display: block; }
	.run-details__grid { grid-template-columns: 1fr; }
	/* Just the arrow on phones; the word "Details" stays for screen readers. */
	.run-toggle { padding: 6px 10px; }
	.run-toggle__extras { display: none; }
	.run-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.runs-table th,
	.runs-table td { padding-left: 8px; padding-right: 8px; }
	.runs-table .vote { min-width: 0; padding: 5px 9px; }
}

/* Favourite farms: the star button on farm pages, and the marker in lists */
.fav-form { display: inline-block; margin: 0 0 4px; }
.fav {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
}
.fav:hover { border-color: var(--color-gold); color: var(--color-text); }
.fav__star::before { content: "\2606"; font-size: 1.15rem; line-height: 1; color: var(--color-gold); }
.fav.is-favourite { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-accent-ink); }
.fav.is-favourite .fav__star::before { content: "\2605"; color: var(--color-accent-ink); }
.fav:disabled { opacity: 0.7; cursor: wait; }
.farm-hero .fav { background: rgba(20, 21, 23, 0.6); }
.farm-hero .fav.is-favourite { background: var(--color-gold); }
.fav-marker { color: var(--color-gold); font-size: 0.9em; }
.pills .pill-favourites { margin-left: auto; }

/* My Account > Favourites: fit phone screens without sideways scrolling */
@media (max-width: 560px) {
	.favourites-table th,
	.favourites-table td { padding-left: 10px; padding-right: 10px; }
	.favourites-table .farm-cell--bg { min-width: 0; }
	.favourites-table td.farm-cell { white-space: normal; }
}

/* "Submit a run for this farm" under the farm's stats */
.farm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -12px 0 36px; }
.farm-submit .muted { font-size: 0.9rem; }
.runs-head { margin: 1.4em 0 6px; }
.runs-head h2 { margin: 0; }
.runs-hint { margin: 0 0 16px; font-size: 0.92rem; }
.pills--small { margin: 0; }
.pills--small a { padding: 5px 14px; font-size: 0.72rem; }
.stat__sub { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 700; color: var(--color-muted); }
.leaderboard__rank { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-muted); }
.leaderboard__top .leaderboard__rank { color: var(--color-accent); font-size: 1.4rem; }

@media (max-width: 560px) {
	.profile-header { align-items: flex-start; gap: 16px; }
	.profile-avatar { width: 64px; height: 64px; font-size: 2rem; border-width: 4px; }
}

/* My Account tabs */
.account-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 28px;
	padding: 5px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	width: fit-content;
	max-width: 100%;
}
.account-tabs a {
	padding: 9px 20px;
	border-radius: 999px;
	color: var(--color-muted);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.account-tabs a:hover { color: var(--color-text); }
.account-tabs a.is-active { background: var(--color-accent); color: var(--color-accent-ink); }

/* Delete account */
.account-section--danger { border-color: rgba(229, 115, 115, 0.45); }
.danger-zone summary { cursor: pointer; color: var(--color-error); font-weight: 800; }
.danger-zone .gc-form { margin-top: 18px; }
.button--danger { background: var(--color-error); border-color: var(--color-error); color: var(--color-accent-ink); }
.button--danger:hover { background: #ec8b8b; border-color: #ec8b8b; }

@media (max-width: 480px) {
	.account-tabs { border-radius: var(--radius-sm); }
	.account-tabs a { padding: 8px 14px; }
}

/* ==========================================================================
   Homepage (page-templates/template-home.php)
   ========================================================================== */
.page-template-page-templatestemplate-home-php .site-main { padding: 0; }
.section > .container > h2:first-child,
.section-head h2 { margin-top: 0; }

.eyebrow {
	margin: 0 0 18px;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-accent);
}
.text-link { font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Hero */
.hero {
	padding: 96px 0 88px;
	background: var(--color-bg-deep);
}
.hero__title {
	max-width: 13ch;
	margin: 0 0 22px;
	font-size: clamp(3rem, 8.5vw, 6.8rem);
	line-height: 0.95;
}
.hero__title .highlight { color: var(--color-gold); } /* "Gold farms" is always gold */
.hero__lead {
	max-width: 560px;
	margin: 0 0 34px;
	font-size: 1.2rem;
	color: var(--color-muted);
}
.hero__search {
	display: flex;
	gap: 10px;
	max-width: 620px;
	margin-bottom: 22px;
	padding: 8px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
}
.hero__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 12px 18px;
	background: transparent;
	border: 0;
	font-size: 1.05rem;
}
.hero__search input[type="search"]:focus { box-shadow: none; }
.hero__search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

/* Hero background image (the Home page's Featured Image) */
.hero--image {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 120px 0 112px;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* Dark wash over the image so the text stays readable: darkest behind the text on the left,
   and fading into the page colour at the bottom. */
.hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(20, 21, 23, 0) 60%, var(--color-bg-deep) 100%),
		linear-gradient(to right, rgba(20, 21, 23, 0.92) 0%, rgba(20, 21, 23, 0.7) 40%, rgba(20, 21, 23, 0.25) 70%, rgba(20, 21, 23, 0.1) 100%);
}
.hero--image .hero__lead { color: var(--color-text); }
.hero__credit {
	position: absolute;
	right: 20px;
	bottom: 14px;
	margin: 0;
	font-size: 0.72rem;
	color: var(--color-muted);
}
.hero__credit a { color: var(--color-text); }

/* "#1 right now" card beside the hero text */
.hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 48px; }
.spotlight {
	display: flex;
	flex-direction: column;
	padding: 36px;
	background: var(--color-accent);
	border-radius: var(--radius);
	color: var(--color-accent-ink);
	text-decoration: none;
	transition: transform 0.15s, background 0.15s;
}
.spotlight:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); transform: translateY(-3px); }
.spotlight__label {
	margin-bottom: 18px;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.spotlight__name { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.spotlight__type { margin-top: 6px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.spotlight__gph { margin: 26px 0 6px; font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5rem); line-height: 0.95; }
.spotlight__gph small { font-size: 0.35em; }
.spotlight__meta { font-size: 0.95rem; font-weight: 500; }
.spotlight__cta {
	align-self: flex-start;
	margin-top: 26px;
	padding: 11px 24px;
	background: var(--color-accent-ink);
	color: var(--color-accent);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Numbers strip */
.numbers {
	padding: 34px 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.number__value { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.number__label {
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-muted);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 24px;
	margin-bottom: 26px;
}

/* Top farm cards */
.farm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.farm-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 28px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.farm-card__link:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
.farm-card__rank {
	position: absolute;
	top: 22px;
	right: 26px;
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--color-border);
}
.farm-card__type {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-muted);
}
.farm-card__name { margin: 4px 0 14px; padding-right: 50px; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.farm-card__gph { margin-top: auto; font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: var(--color-gold); }
.farm-card__gph small { font-size: 1.2rem; }
.farm-card__meta { margin-top: 8px; font-size: 0.9rem; color: var(--color-muted); }

.farm-card--first .farm-card__link { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.farm-card--first .farm-card__link:hover { border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
.farm-card--first .farm-card__rank,
.farm-card--first .farm-card__type,
.farm-card--first .farm-card__meta,
.farm-card--first .farm-card__gph { color: var(--color-accent-ink); }

/* Top farm cards: the farm's Featured Image, faded in from the left behind the text */
.farm-card__link--bg { isolation: isolate; overflow: hidden; }
.farm-card__link--bg::before {
	content: "";
	position: absolute;
	inset: 0 30% 0 0;
	z-index: -1; /* Above the card's background, below its text */
	background: var(--farm-bg) center / cover no-repeat;
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
	pointer-events: none;
	transition: opacity 0.2s;
}
.farm-card__link--bg:hover::before { opacity: 0.45; }
/* On the gold #1 card, blend the image into the gold so it stays matte and the dark text readable */
.farm-card--first .farm-card__link--bg::before { opacity: 0.22; mix-blend-mode: multiply; filter: grayscale(1); }
.farm-card--first .farm-card__link--bg:hover::before { opacity: 0.3; }

/* How it works */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.step {
	padding: 28px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.step__num { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--color-accent); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--color-muted); }

/* Farm types */
.type-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.type-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.type-card:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
.type-card__name { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; }
.type-card__count { font-size: 0.85rem; font-weight: 800; color: var(--color-accent); }

/* Gold call to action band */
.cta-band { text-align: center; }
.cta-band h2 { margin: 0 0 10px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.cta-band p { max-width: 560px; margin: 0 auto 26px; font-size: 1.15rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-bottom: 0 !important; }
.cta-band__link { font-weight: 800; }

@media (max-width: 860px) {
	.hero { padding: 64px 0 60px; }
	.hero--image { padding: 72px 0 76px; }
	.hero--image::before {
		background:
			linear-gradient(to bottom, rgba(20, 21, 23, 0) 60%, var(--color-bg-deep) 100%),
			rgba(20, 21, 23, 0.8);
	}
	.hero__credit { left: 20px; text-align: right; }
	/* The #1 farm is already first in Top farms below. */
	.hero__grid { display: block; }
	.spotlight { display: none; }
	.numbers__grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: 1fr; }
	.type-cards { grid-template-columns: repeat(2, 1fr); }
	.section { padding: 60px 0; }
}
@media (max-width: 480px) {
	.hero__search { flex-direction: column; border-radius: var(--radius-sm); }
	.hero__search .button { width: 100%; }
	.type-card { padding: 20px; }
	.type-card__name { font-size: 1.5rem; }
	.farm-cards { grid-template-columns: 1fr; }
	.farm-card:nth-child(n+4) { display: none; } /* Top 3 on phones; "See all farms" for more */
}

/* ==========================================================================
   Tips page (page-templates/template-tips.php)
   ========================================================================== */
.page-template-page-templatestemplate-tips-php .site-main { padding-bottom: 0; }
.tips { padding-bottom: 72px; }
.tips__lead { max-width: 640px; margin: 0; font-size: 1.15rem; color: var(--color-muted); }
.tips__steps { margin-bottom: 56px; }
.tips__steps .step { background: var(--color-surface); }
.tips__steps .step p a { font-weight: 700; }

/* The farming tips typed in the page editor */
.tips__content { max-width: 760px; }
.tips__content h2 { margin: 56px 0 16px; scroll-margin-top: 24px; }
.tips__content h3 {
	margin: 32px 0 8px;
	font-family: var(--font);
	font-size: 1.25rem;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}
.tips__content h2 + h3 { margin-top: 20px; }
.tips__content li { margin-bottom: 8px; }
.tips__content a { font-weight: 700; }

.under-construction { max-width: 760px; }
.under-construction h2 { margin: 14px 0 10px; }
.under-construction p:last-child { margin-bottom: 0; }

/* Discord invite */
.discord-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 40px;
	margin-top: 64px;
	padding: 34px 36px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-accent);
	border-radius: var(--radius);
	scroll-margin-top: 24px;
}
.discord-card__text { flex: 1 1 380px; }
.discord-card h2 { margin: 0 0 10px; }
.discord-card p { max-width: 620px; margin: 0; color: var(--color-muted); }
@media (max-width: 560px) {
	.discord-card { padding: 26px 22px; }
	.discord-card .button { width: 100%; justify-content: center; }
}

.tips__site { margin-top: 64px; scroll-margin-top: 24px; }
.tips__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tips__grid .card { padding: 24px; }
.tips__grid h3 { margin: 0 0 8px; }
.tips__grid p { margin: 0; color: var(--color-muted); }

/* ==========================================================================
   Community goal (template-parts/community-goal.php)
   ========================================================================== */
.section--goal { padding: 48px 0 0; }
.community-goal {
	padding: 28px 32px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.community-goal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.community-goal__label {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
}
.community-goal__numbers { margin: 0; }
.community-goal__numbers .gold { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.community-goal__of { margin-left: 6px; font-weight: 700; color: var(--color-muted); }
.community-goal__bar {
	height: 14px;
	margin: 16px 0 10px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	overflow: hidden;
}
.community-goal__bar span { display: block; height: 100%; min-width: 6px; background: var(--color-gold); border-radius: 999px; }
.community-goal__meta { margin: 0; font-size: 0.9rem; font-weight: 700; }
.community-goal__about { margin: 10px 0 0; font-size: 0.9rem; }
.community-goal.is-reached { border-color: var(--color-gold-deep); }
.community-goal--compact { margin: 0 0 22px; padding: 20px 24px; }
.community-goal--compact .community-goal__numbers .gold { font-size: 1.9rem; }

/* ==========================================================================
   Top Farmers: This month / All time (page-templates/template-farmers.php)
   ========================================================================== */
.leaderboard-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; }
.leaderboard-month { max-width: 760px; margin: 0 0 22px; }
.leaderboard-month .muted { display: block; margin-top: 4px; font-size: 0.88rem; }

/* Profile social links (farmer-profile.php) */
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.profile-link {
	display: inline-block;
	padding: 6px 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.profile-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ==========================================================================
   Farm guide: "How to do this farm" on farm pages (single-gc_farm.php)
   ========================================================================== */
.farm-guide { margin: 48px 0 56px; scroll-margin-top: 24px; }
.farm-guide h2 { margin-bottom: 20px; }
.farm-guide h3 {
	margin: 32px 0 12px;
	font-family: var(--font);
	font-size: 1.15rem;
	font-weight: 800;
	text-transform: none;
	letter-spacing: 0;
}
.farm-guide__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.farm-guide__top--single { grid-template-columns: minmax(0, 760px); }
.farm-guide__where { padding: 26px; }
.farm-guide__where h3:first-child { margin-top: 0; }
.farm-guide__where p:last-child { margin-bottom: 0; }

.guide-facts { display: grid; gap: 12px; margin: 0; }
.guide-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.guide-facts dt { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); padding-top: 3px; }
.guide-facts dd { margin: 0; font-weight: 700; }

.waypoint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 20px 0 0;
	padding: 14px 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.waypoint__label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted); }
.waypoint__code { font-size: 0.95rem; color: var(--color-accent); overflow-wrap: anywhere; }
.waypoint__hint { flex-basis: 100%; font-size: 0.82rem; }

.farm-guide__images { display: grid; gap: 14px; }
.guide-image { margin: 0; }
.guide-image a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); cursor: zoom-in; }
.guide-image img { display: block; width: 100%; height: auto; }
.guide-image figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--color-muted); }

.guide-route { max-width: 760px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.guide-route li {
	position: relative;
	margin-bottom: 10px;
	padding: 14px 18px 14px 58px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	counter-increment: step;
}
.guide-route li::before {
	content: counter(step);
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-accent);
}

.guide-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.guide-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.guide-item__image { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); }
.guide-item__image--blank { display: grid; place-items: center; background: var(--color-surface-2); font-family: var(--font-display); font-size: 1.5rem; color: var(--color-muted); }
.guide-item__text { display: grid; gap: 2px; min-width: 0; }
.guide-item__name { font-weight: 800; }
.guide-item__note { font-size: 0.88rem; color: var(--color-muted); }

/* Full-size picture viewer (assets/js/main.js) */
.lightbox {
	max-width: min(1400px, 94vw);
	max-height: 94vh;
	padding: 0;
	background: transparent;
	border: 0;
	overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 10, 12, 0.88); }
.lightbox__image { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; border-radius: var(--radius-sm); }
.lightbox__caption { margin: 10px 0 0; text-align: center; color: var(--color-text); }
.lightbox__caption:empty { display: none; }
.lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border: 0;
	border-radius: 50%;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 860px) {
	.farm-guide__top { grid-template-columns: minmax(0, 1fr); }
	.guide-facts div { grid-template-columns: 110px 1fr; }
	.lightbox__close { top: 8px; right: 8px; }
}

/* "Help improve this guide" (template-parts/suggest-guide.php) */
.suggest { margin: 0 0 56px; padding: 28px 30px; scroll-margin-top: 24px; }
.suggest h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
.suggest__intro p { max-width: 640px; margin: 0 0 18px; }
.suggest__details > summary { display: inline-block; list-style: none; }
.suggest__details > summary::-webkit-details-marker { display: none; }
.suggest__details[open] > summary { margin-bottom: 20px; }
.suggest__types { margin-bottom: 18px; }
.suggest__hint { margin: 0 0 14px; font-size: 0.92rem; }
.suggest__fields { padding-top: 4px; }
.suggest__form input[type="file"] { display: block; max-width: 100%; color: var(--color-muted); }
.js-suggest .suggest__fields[hidden] { display: none; }
.guide-credits { margin: 24px 0 0; font-size: 0.92rem; }

/* ==========================================================================
   "Best of" pages (best-of.php)
   ========================================================================== */
.gc-best-page .site-main { padding-bottom: 0; }
.best { padding-bottom: 72px; }
.best__intro { max-width: 680px; margin: 0 0 8px; font-size: 1.15rem; }
.best__how { max-width: 680px; margin: 0; font-size: 0.92rem; }

.best-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.best-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 26px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.best-card:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
.best-card__name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; }
.best-card__top { flex: 1; font-size: 0.95rem; }
.best-card__top .gold { display: block; font-weight: 800; }
.best-card__cta { font-size: 0.85rem; font-weight: 800; color: var(--color-accent); }

.best-table__rank { width: 1%; font-family: var(--font-display); font-size: 1.3rem; color: var(--color-accent); }
.best-table__type { display: block; font-size: 0.82rem; }
.best__more { margin-top: 48px; }
.best__more h2 { margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
	.best-card { transition: none; }
	.best-card:hover { transform: none; }
}

/* ==========================================================================
   Classic Editor content
   ========================================================================== */
.entry-content { font-size: 1.05rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--color-accent);
	font-size: 1.15rem;
	font-weight: 500;
}
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-muted); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   Your custom styles below
   ========================================================================== */