/*
Theme Name: UserPromo
Theme URI: https://userpromo.com/
Author: UserPromo
Author URI: https://userpromo.com/
Description: A fast, SEO-first WordPress theme built for Temu coupon codes for existing users. Long-form, keyword-rich homepage with tear-off coupon tickets and one-tap copy, built-in structured data (Article, FAQ, Organization, WebSite, Breadcrumbs), Open Graph tags, Customizer-managed codes and affiliate link, nine starter SEO guides, a spam-protected contact form, and auto-generated legal pages.
Version: 1.3.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: userpromo
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, blog
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--paper: #ffffff;
	--peach: #fff1e6;
	--peach-deep: #ffdcc2;
	--ink: #14213d;
	--ink-soft: #4a5568;
	--ink-mute: #7a869a;
	--rule: #e5e7eb;
	--orange: #ff6b1a;
	--orange-deep: #e5570a;
	--orange-tint: #fff4ec;
	--green: #0fa968;
	--green-deep: #0b7a4b;
	--green-tint: #e8f8f0;
	--gold: #ffc940;
	--red: #b42318;
	--red-tint: #fdecec;
	--notch: var(--paper);

	--font: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--radius: 14px;
	--radius-sm: 10px;
	--radius-pill: 999px;
	--shadow-ticket: 0 18px 40px -20px rgba(20, 33, 61, 0.35), 0 2px 6px rgba(20, 33, 61, 0.06);

	--container: 1120px;
	--measure: 760px;
	--gutter: clamp(16px, 4vw, 32px);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

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

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

a:hover {
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.95rem, 3.6vw, 2.9rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-size: 1.05rem;
}

p {
	margin: 0 0 1.1em;
}

code,
kbd {
	font-family: var(--mono);
}

table {
	width: 100%;
	border-collapse: collapse;
}

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

.container-narrow {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 18px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-weight: 700;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn svg {
	flex: none;
}

.btn-primary {
	background: var(--orange);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--orange-deep);
	color: #fff;
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn-ghost:hover {
	background: var(--ink);
	color: #fff;
}

.btn-light {
	background: #fff;
	color: var(--ink);
}

.btn-light:hover {
	background: var(--peach);
	color: var(--ink);
}

.btn-lg {
	padding: 15px 28px;
	font-size: 1.05rem;
}

.btn-block {
	width: 100%;
}

.btn.is-copied {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}

/* ==========================================================================
   4. Top bar + header
   ========================================================================== */
.topbar {
	background: var(--ink);
	color: #fff;
	font-size: 0.92rem;
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	min-height: 42px;
	padding-block: 6px;
	flex-wrap: wrap;
	text-align: center;
}

.topbar code {
	background: rgba(255, 255, 255, 0.12);
	padding: 2px 9px;
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.topbar .copy-btn {
	padding: 5px 12px;
	font-size: 0.82rem;
	border-color: rgba(255, 255, 255, 0.5);
	background: transparent;
	color: #fff;
}

.topbar .copy-btn:hover {
	background: #fff;
	color: var(--ink);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

/* Logged in, WordPress pins its toolbar over the page; keep the header below it. */
body.admin-bar .site-header {
	top: 32px;
}

body.admin-bar [id] {
	scroll-margin-top: 120px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 68px;
	flex-wrap: nowrap;
}

.header-cta {
	white-space: nowrap;
	flex: none;
	padding: 11px 18px;
	font-size: 0.95rem;
}

@media (max-width: 1180px) {
	.main-nav a {
		padding: 8px 9px;
		font-size: 0.95rem;
	}

	.header-inner {
		gap: 10px;
	}
}

.site-branding {
	margin-right: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-branding .custom-logo {
	max-height: 44px;
	width: auto;
}

.site-title {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1;
}

.site-title a {
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.logo-mark {
	width: 30px;
	height: 30px;
	background: var(--orange);
	border-radius: 9px 9px 9px 3px;
	display: inline-grid;
	place-items: center;
	color: #fff;
	flex: none;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;
}

.main-nav li {
	position: relative;
}

.main-nav a {
	display: block;
	padding: 8px 12px;
	color: var(--ink-soft);
	text-decoration: none;
	font-weight: 600;
	border-radius: 8px;
	white-space: nowrap;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	color: var(--ink);
	background: var(--peach);
}

.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	padding: 6px;
	flex-direction: column;
	box-shadow: var(--shadow-ticket);
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
	display: flex;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-weight: 700;
	padding: 8px 12px;
	border: 2px solid var(--ink);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle .bars {
	display: inline-block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.nav-toggle .bars::before,
.nav-toggle .bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.nav-toggle .bars::before {
	top: -6px;
}

.nav-toggle .bars::after {
	top: 6px;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
	}

	.header-cta {
		display: none;
	}

	.main-nav {
		display: none;
		position: absolute;
		left: calc(var(--gutter) * -1);
		right: calc(var(--gutter) * -1);
		top: 100%;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		padding: 8px var(--gutter) 16px;
		box-shadow: 0 20px 30px -20px rgba(20, 33, 61, 0.3);
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav ul {
		flex-direction: column;
	}

	.main-nav a {
		padding: 12px 10px;
		white-space: normal;
	}

	.main-nav .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		padding-left: 14px;
	}
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero {
	--notch: var(--peach);
	background: var(--peach);
	padding: clamp(36px, 5.5vw, 72px) 0 clamp(40px, 5.5vw, 76px);
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--paper);
	border: 1px solid var(--peach-deep);
	border-radius: var(--radius-pill);
	padding: 6px 14px 6px 10px;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--ink-soft);
	margin: 0 0 20px;
}

.eyebrow .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 3px var(--green-tint);
}

.lead {
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	color: var(--ink-soft);
	max-width: 56ch;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 22px;
}

.trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px 22px;
	color: var(--ink-soft);
	font-size: 0.95rem;
	font-weight: 500;
}

.trust-list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.trust-list svg {
	color: var(--green);
	flex: none;
}

.hero-card {
	position: relative;
}

.hero-card .ticket {
	transform: rotate(-2deg);
}

@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-card .ticket {
		transform: none;
		max-width: 500px;
	}
}

/* ==========================================================================
   6. Coupon ticket
   ========================================================================== */
.ticket {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(232px, 40%);
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow-ticket);
}

.ticket-main {
	padding: 26px 26px 22px;
	min-width: 0;
}

.ticket-stub {
	position: relative;
	padding: 24px 22px;
	border-left: 2px dashed var(--peach-deep);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	background: var(--orange-tint);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.ticket-stub::before,
.ticket-stub::after {
	content: "";
	position: absolute;
	left: -12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--notch);
	box-shadow: inset 0 -2px 4px rgba(20, 33, 61, 0.06);
}

.ticket-stub::before {
	top: -11px;
}

.ticket-stub::after {
	bottom: -11px;
}

.badge {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--gold);
	color: var(--ink);
	margin-bottom: 12px;
}

.badge-green {
	background: var(--green-tint);
	color: var(--green-deep);
}

.badge-peach {
	background: var(--peach);
	color: var(--orange-deep);
}

.badge-ink {
	background: var(--ink);
	color: #fff;
}

.ticket-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--orange-deep);
	margin-bottom: 10px;
}

.ticket-value .value {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
}

.ticket-value .label {
	font-size: 1.05rem;
	color: var(--ink-soft);
	letter-spacing: 0;
	font-weight: 600;
}

.ticket-title {
	font-size: 1.15rem;
	margin: 0 0 6px;
}

.ticket-desc {
	color: var(--ink-soft);
	margin: 0 0 10px;
	font-size: 0.98rem;
}

.ticket-meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ink-mute);
}

.stub-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.code-box {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap; /* the Copy button drops to a new line before the code would ever break */
	gap: 8px;
}

.code {
	font-family: var(--mono);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: var(--paper);
	border: 2px dashed var(--orange);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	color: var(--ink);
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap; /* a coupon code must never wrap mid-string */
	overflow-wrap: normal;
	min-width: max-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.copy-btn {
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.copy-btn:hover {
	background: var(--ink);
	color: #fff;
}

.copy-btn.is-copied {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}

.copy-btn.is-failed {
	background: var(--red-tint);
	border-color: var(--red);
	color: var(--red);
}

.ticket .btn-block {
	padding: 12px 14px;
	font-size: 0.98rem;
}

.ticket-fine {
	margin: 0;
	font-size: 0.8rem;
	color: var(--ink-mute);
	text-align: center;
}

/* Vertical ticket: featured in the hero, and every ticket on small screens */
.ticket.is-featured,
.ticket.is-vertical {
	grid-template-columns: 1fr;
}

.ticket.is-featured .ticket-stub,
.ticket.is-vertical .ticket-stub {
	border-left: 0;
	border-top: 2px dashed var(--peach-deep);
	border-radius: 0 0 var(--radius) var(--radius);
}

.ticket.is-featured .ticket-stub::before,
.ticket.is-vertical .ticket-stub::before {
	top: -11px;
	bottom: auto;
	left: -11px;
}

.ticket.is-featured .ticket-stub::after,
.ticket.is-vertical .ticket-stub::after {
	top: -11px;
	bottom: auto;
	left: auto;
	right: -11px;
}

.ticket.is-featured .ticket-value .value {
	font-size: clamp(3rem, 6vw, 4.2rem);
}

@media (max-width: 640px) {
	.ticket,
	.coupon-grid .ticket,
	.entry-content .coupon-grid .ticket {
		grid-template-columns: 1fr;
	}

	.ticket-main {
		padding: 22px 20px 18px;
	}

	.ticket-stub {
		padding: 20px;
		border-left: 0;
		border-top: 2px dashed var(--peach-deep);
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.ticket-stub::before {
		top: -11px;
		bottom: auto;
		left: -11px;
	}

	.ticket-stub::after {
		top: -11px;
		bottom: auto;
		left: auto;
		right: -11px;
	}
}

/* ==========================================================================
   7. Front page sections
   ========================================================================== */
.quick-answer {
	padding: 30px 0 0;
}

.answer-box {
	border-left: 4px solid var(--orange);
	background: var(--orange-tint);
	padding: 16px 20px;
	border-radius: 0 12px 12px 0;
	font-size: 1.02rem;
	margin: 0;
}

.answer-box code,
.inline-code {
	font-family: var(--mono);
	background: #fff;
	border: 1px solid var(--peach-deep);
	padding: 1px 8px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.95em;
	white-space: nowrap;
}

.coupons-section {
	padding: clamp(40px, 6vw, 72px) 0;
}

.section-head {
	max-width: 66ch;
	margin-bottom: 28px;
}

.section-head p {
	color: var(--ink-soft);
	margin: 0;
}

.coupon-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

/* An odd last card spans the row instead of leaving a hole beside it. */
.coupon-grid > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.coupon-grid .ticket-stub {
	padding: 22px 18px;
}

.coupon-grid .ticket .btn-block {
	font-size: 0.92rem;
	padding: 12px 10px;
	white-space: nowrap;
}

/* Two tickets side by side only when each one is genuinely wide enough. Below that the
   stub would eat the description column and the text would break one word per line. */
@media (min-width: 1101px) {
	.coupon-grid .ticket {
		grid-template-columns: minmax(0, 1fr) minmax(262px, 42%);
	}

	/* The stub is narrow here, so the code and its button stack. */
	.coupon-grid .code-box {
		flex-direction: column;
		align-items: stretch;
	}

	.coupon-grid .code-box .copy-btn {
		width: 100%;
	}

	/* The card that spans the row is wide, so it keeps a normal stub with the code and
	   Copy button side by side. */
	.coupon-grid > :last-child:nth-child(odd) .ticket {
		grid-template-columns: minmax(0, 1fr) 330px;
	}

	.coupon-grid > :last-child:nth-child(odd) .code-box {
		flex-direction: row;
		align-items: stretch;
	}

	.coupon-grid > :last-child:nth-child(odd) .code-box .copy-btn {
		width: auto;
	}
}

@media (max-width: 1100px) {
	.coupon-grid {
		grid-template-columns: 1fr;
	}

	.coupon-grid .ticket {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 32%);
	}
}

/* The shortcode grid inside a post or page only has the article width to work with,
   so it is always one ticket per row. */
.entry-content .coupon-grid {
	grid-template-columns: 1fr;
}

.entry-content .coupon-grid .ticket {
	grid-template-columns: minmax(0, 1fr) minmax(238px, 34%);
}

.entry-content .coupon-grid .code-box {
	flex-direction: row;
	align-items: stretch;
}

.entry-content .coupon-grid .code-box .copy-btn {
	width: auto;
}

.table-wrap {
	overflow-x: auto;
	margin-top: 36px;
	border: 1px solid var(--rule);
	border-radius: 12px;
}

.coupon-table {
	font-size: 0.96rem;
	min-width: 560px;
}

.coupon-table caption {
	text-align: left;
	padding: 14px 16px;
	font-weight: 700;
	caption-side: top;
}

.coupon-table th,
.coupon-table td {
	padding: 12px 16px;
	text-align: left;
	border-top: 1px solid var(--rule);
	vertical-align: top;
}

.coupon-table th {
	background: var(--peach);
	font-weight: 700;
}

.coupon-table code {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--green-tint);
	color: var(--green-deep);
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.status-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

/* Long-form article */
.article {
	padding: clamp(32px, 5vw, 56px) var(--gutter) 24px;
}

.article section {
	margin-bottom: clamp(36px, 5vw, 56px);
}

/* Every jump target clears the sticky header instead of hiding under it. */
[id] {
	scroll-margin-top: 88px;
}

.article h2 {
	margin-bottom: 0.6em;
}

.article h3 {
	margin-top: 1.6em;
}

.article p,
.article li {
	color: var(--ink-soft);
}

.article strong {
	color: var(--ink);
}

.article ul,
.article ol {
	padding-left: 1.3em;
}

.article li {
	margin-bottom: 0.5em;
}

.steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}

.steps li {
	position: relative;
	padding-left: 58px;
	margin-bottom: 24px;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--ink);
	color: #fff;
	font-weight: 800;
	display: grid;
	place-items: center;
	font-size: 1.05rem;
}

.steps h3 {
	margin: 6px 0 4px;
	font-size: 1.1rem;
}

.steps p {
	margin: 0;
}

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

.checklist li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
}

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--green-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a4b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.checklist.is-issues li::before {
	background-color: var(--peach);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5570a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.pick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 14px;
	margin: 18px 0 6px;
}

/* No orphan card hanging alone on the last row. */
.pick-grid > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.pick-card {
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 16px 18px;
	background: var(--paper);
}

.pick-card .inline-code {
	display: inline-block;
	margin-bottom: 8px;
}

.pick-card p {
	margin: 0;
	font-size: 0.95rem;
}

.pick-card strong {
	display: block;
	margin-bottom: 4px;
}

/* FAQ */
.faq-list {
	border-top: 1px solid var(--rule);
}

.faq-item {
	border-bottom: 1px solid var(--rule);
}

.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 44px 18px 0;
	font-weight: 700;
	font-size: 1.05rem;
	position: relative;
	color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.faq-answer {
	padding: 0 0 20px;
	color: var(--ink-soft);
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

.author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 18px 20px;
	font-size: 0.95rem;
	color: var(--ink-soft);
}

.author-box .avatar {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 800;
	flex: none;
}

.author-box p {
	margin: 0;
}

.author-box strong {
	color: var(--ink);
}

.entry-content.home-extra {
	padding: 0 var(--gutter) 40px;
}

/* Final CTA band */
.final-cta {
	background: var(--ink);
	color: #fff;
	padding: clamp(40px, 6vw, 72px) 0;
}

.final-cta h2 {
	color: #fff;
}

.final-cta p {
	color: rgba(255, 255, 255, 0.78);
	max-width: 58ch;
}

.final-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
}

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

.final-cta .code {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--orange);
	color: #fff;
	flex: none;
	font-size: 1.3rem;
	padding: 11px 18px;
}

@media (max-width: 760px) {
	.final-cta-inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Pages, posts, archives
   ========================================================================== */
.page-hero {
	background: var(--peach);
	padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
}

.page-hero h1 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.breadcrumbs {
	font-size: 0.9rem;
	color: var(--ink-mute);
	margin-bottom: 14px;
}

.breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 6px;
	color: var(--ink-mute);
}

.breadcrumbs a {
	color: var(--ink-soft);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--orange-deep);
	text-decoration: underline;
}

.entry-meta {
	color: var(--ink-mute);
	font-size: 0.92rem;
	margin: 0;
}

.entry-meta a {
	color: var(--ink-soft);
}

.entry-content,
.entry-footer {
	max-width: var(--measure);
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px) var(--gutter) 0;
}

.entry-footer {
	padding-top: 24px;
}

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

.entry-content h2 {
	margin-top: 1.8em;
}

.entry-content h3 {
	margin-top: 1.4em;
}

.entry-content p,
.entry-content li {
	color: var(--ink-soft);
}

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

.entry-content img {
	border-radius: 12px;
}

.entry-content blockquote {
	border-left: 4px solid var(--orange);
	margin: 1.5em 0;
	padding: 4px 20px;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--rule);
	padding: 10px 12px;
	text-align: left;
}

.entry-content th {
	background: var(--peach);
}

.entry-content .alignwide,
.entry-content .alignfull {
	max-width: none;
}

.post-thumbnail {
	max-width: var(--container);
	margin: 28px auto 0;
	padding-inline: var(--gutter);
}

.post-thumbnail img {
	width: 100%;
	border-radius: var(--radius);
}

.cta-box {
	max-width: var(--measure);
	margin: 44px auto 0;
	padding-inline: var(--gutter);
}

.cta-box h2 {
	font-size: 1.35rem;
	margin-bottom: 14px;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}

.post-navigation a {
	text-decoration: none;
	font-weight: 600;
	color: var(--ink);
}

.post-navigation a:hover {
	color: var(--orange-deep);
}

.page-links {
	margin: 20px 0;
	font-weight: 600;
}

.post-list {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	padding: 36px 0 40px;
}

.post-card {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--paper);
}

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

.post-card-body {
	padding: 20px;
}

.post-card h2 {
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.post-card h2 a {
	color: var(--ink);
	text-decoration: none;
}

.post-card h2 a:hover {
	color: var(--orange-deep);
}

.post-card p {
	color: var(--ink-soft);
	font-size: 0.96rem;
	margin: 0 0 10px;
}

.read-more {
	font-weight: 700;
	text-decoration: none;
}

.pagination,
.nav-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 48px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--rule);
	border-radius: 8px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
}

.pagination .page-numbers.current {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.empty-state {
	padding: 48px var(--gutter);
	max-width: var(--measure);
	margin-inline: auto;
}

/* ==========================================================================
   9. Forms, notices, comments, search
   ========================================================================== */
.contact-form p {
	margin-bottom: 18px;
}

.contact-form label,
.comment-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ink);
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-form input[type="search"] {
	width: 100%;
	font: inherit;
	padding: 12px 14px;
	border: 2px solid var(--rule);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--ink);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.comment-form textarea:focus,
.comment-form input:focus,
.search-form input[type="search"]:focus {
	border-color: var(--ink);
	outline: none;
}

.hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
}

.notice {
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	margin-bottom: 20px;
	font-weight: 600;
}

.notice-success {
	background: var(--green-tint);
	color: var(--green-deep);
}

.notice-error {
	background: var(--red-tint);
	color: var(--red);
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
}

.search-form .search-submit {
	flex: none;
}

.comments-area {
	max-width: var(--measure);
	margin: 40px auto 0;
	padding-inline: var(--gutter);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.comment-list .comment {
	border-top: 1px solid var(--rule);
	padding: 18px 0;
}

.comment-list .children {
	list-style: none;
	padding-left: 24px;
}

.comment-author .avatar {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 8px;
}

.comment-metadata {
	font-size: 0.85rem;
	color: var(--ink-mute);
}

.comment-content p {
	color: var(--ink-soft);
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font: inherit;
	font-weight: 700;
	background: var(--orange);
	color: #fff;
	border: 2px solid transparent;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--orange-deep);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
	background: var(--paper);
	border-top: 1px solid var(--rule);
	padding: 44px 0 28px;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
}

.footer-grid.has-legal {
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
}

@media (max-width: 960px) {
	.footer-grid.has-legal {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid.has-legal > :first-child {
		grid-column: 1 / -1;
	}
}

.footer-grid h3,
.footer-heading {
	font-size: 1rem;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

.footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-grid li {
	margin-bottom: 8px;
}

.footer-grid a {
	color: var(--ink-soft);
	text-decoration: none;
}

.footer-grid a:hover {
	color: var(--orange-deep);
	text-decoration: underline;
}

.footer-about p {
	margin-bottom: 12px;
}

.footer-widgets {
	margin-top: 28px;
}

.footer-disclosure {
	border-top: 1px solid var(--rule);
	margin-top: 32px;
	padding-top: 20px;
	font-size: 0.88rem;
	color: var(--ink-mute);
}

.footer-disclosure p {
	margin: 0 0 8px;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 0.88rem;
	color: var(--ink-mute);
}

.footer-bottom a {
	color: var(--ink-soft);
}

@media (max-width: 760px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid > :first-child {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   11. WordPress core classes
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin: 1em auto;
	clear: both;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption,
.wp-block-image figcaption {
	font-size: 0.88rem;
	color: var(--ink-mute);
	text-align: center;
	margin-top: 6px;
}

.sticky {
	border-color: var(--orange);
}

.bypostauthor .comment-author {
	font-weight: 700;
}

.wp-block-button__link {
	border-radius: var(--radius-pill);
	background: var(--orange);
}

/* ==========================================================================
   Added in 1.1.0: table of contents, callouts, guides, comparison tables
   ========================================================================== */
.toc {
	margin-top: 18px;
	padding: 14px 18px;
	border: 1px solid var(--rule);
	border-radius: 12px;
	background: var(--paper);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.toc-label {
	font-weight: 800;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-mute);
	margin-right: 4px;
}

.toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.toc a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--peach);
	color: var(--ink);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.toc a:hover,
.toc a:focus-visible {
	background: var(--orange);
	color: #fff;
}

.section-note {
	margin: 22px 0 0;
	color: var(--ink-soft);
	max-width: 80ch;
}

.callout {
	border: 1px solid var(--peach-deep);
	border-left: 4px solid var(--orange);
	background: var(--orange-tint);
	border-radius: 0 12px 12px 0;
	padding: 18px 22px;
}

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

.compare-table th[scope="row"],
.calendar-table td:first-child {
	font-weight: 700;
	background: var(--paper);
}

.calendar-table td:first-child {
	white-space: nowrap;
}

.compare-table {
	table-layout: fixed;
}

.compare-table th[scope="row"] {
	background: var(--orange-tint);
	width: 30%;
}

.compare-table th[scope="col"]:not(:first-child),
.compare-table td {
	width: 35%;
}

.country-grid .pick-card p {
	font-size: 0.95rem;
}

.article .table-wrap {
	margin: 20px 0 24px;
}

/* Guides (homepage + related posts) */
.guides {
	margin-top: clamp(24px, 4vw, 40px);
}

.guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

/* The whole card is clickable, but only the title is a link: a link wrapped around the
   title plus the excerpt makes one very long anchor text. */
.guide-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 18px;
	background: var(--paper);
	color: var(--ink-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.guide-card:hover,
.guide-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-ticket);
	border-color: var(--peach-deep);
}

.guide-title {
	font-weight: 800;
	color: var(--ink);
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0;
}

.guide-title a {
	color: inherit;
	text-decoration: none;
}

.guide-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.guide-title a:hover,
.guide-title a:focus-visible {
	color: var(--orange-deep);
}

.guide-excerpt {
	font-size: 0.93rem;
	line-height: 1.5;
	margin: 0;
}

.guide-more {
	margin-top: auto;
	font-weight: 700;
	color: var(--orange-deep);
	font-size: 0.9rem;
}

.guides-all {
	margin: 16px 0 0;
	font-weight: 700;
}

.site-main > .guides,
.site-main > article > .guides {
	max-width: var(--measure);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--gutter);
}

.cta-box-more {
	margin: 16px 0 0;
	font-size: 0.95rem;
	color: var(--ink-soft);
}

/* Tables inside post content (guides) */
.entry-content table {
	border: 1px solid var(--rule);
	border-radius: 12px;
	overflow: hidden;
	font-size: 0.95rem;
}

.entry-content th {
	background: var(--peach);
}

.entry-content .coupon-grid {
	margin: 20px 0 28px;
}

.entry-content .table-wrap {
	margin: 20px 0 28px;
}

.entry-content .table-wrap table {
	border: 0;
	border-radius: 0;
}

/* Share row on single posts */
.share-row {
	max-width: var(--measure);
	margin: 32px auto 0;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.share-label {
	font-weight: 700;
	color: var(--ink-mute);
	font-size: 0.9rem;
	margin-right: 4px;
}

.share-link {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-pill);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	background: var(--paper);
}

.share-link:hover,
.share-link:focus-visible {
	background: var(--peach);
	border-color: var(--peach-deep);
	color: var(--ink);
	text-decoration: none;
}