/*
Theme Name: Gran Canaria
Theme URI: https://grancanaria.nl
Description: Gran Canaria affiliate-thema — hotels, activiteiten en tips voor Gran Canaria. Maspalomas-duinen + Atlantic teal palet.
Author: Elixer Media
Author URI: https://elixermedia.nl
Version: 1.0
Text Domain: grancanaria
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* Kleuren (overschreven door customizer) */
	--color-primary: #C2410C;       /* terracotta / vulkaansteen */
	--color-primary-text: #ffffff;
	--color-accent: #0891B2;        /* Atlantic teal */
	--color-accent-text: #ffffff;
	--color-deep: #7C2D12;          /* lavabruin */
	--color-deep-text: #ffffff;
	--color-warm: #F59E0B;          /* Maspalomas-zon */
	--color-sand: #FDF6E3;          /* duinbeige */

	--color-text: #1C1917;
	--color-muted: #78716C;
	--color-border: #E7E5E4;
	--color-bg: #ffffff;
	--color-bg-soft: #FAFAF7;

	/* Radius — iets scherper dan tenerife (duinen-vibe: minder afgerond) */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Shadows — warmere basis dan ocean-deep schaduwen */
	--shadow-card: 0 4px 14px rgba(124, 45, 18, 0.09);
	--shadow-hover: 0 12px 30px rgba(124, 45, 18, 0.18);

	/* Typografie */
	--font-heading: 'Fraunces', Georgia, serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	padding-top: 104px;
	line-height: 1.65;
}
@media (max-width: 767px) {
	body { padding-top: 64px; }
}

.full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-deep);
	line-height: 1.15;
	letter-spacing: -.01em;
	font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-accent); }

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

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--radius-pill);
	padding: 0.55rem 1.2rem;
	transition: all .2s ease;
	border: 2px solid transparent;
	line-height: 1.3;
	letter-spacing: .01em;
}
.btn-sm { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
.btn-lg { font-size: 1.05rem; padding: 0.75rem 1.6rem; }

.btn-primary, .btn-gc-primary {
	background: var(--color-primary);
	color: var(--color-primary-text);
	border-color: var(--color-primary);
}
.btn-primary:hover, .btn-gc-primary:hover {
	background: var(--color-deep);
	border-color: var(--color-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-card);
}

.btn-accent, .btn-aff {
	background: var(--color-accent);
	color: var(--color-accent-text);
	border-color: var(--color-accent);
}
.btn-accent:hover, .btn-aff:hover {
	background: #0E7490;
	border-color: #0E7490;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-card);
}

.btn-warm {
	background: var(--color-warm);
	color: var(--color-deep);
	border-color: var(--color-warm);
}
.btn-warm:hover {
	background: #D97706;
	border-color: #D97706;
	color: #fff;
}

.btn-outline-deep {
	background: transparent;
	color: var(--color-deep);
	border-color: var(--color-deep);
}
.btn-outline-deep:hover { background: var(--color-deep); color: #fff; }

.btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.45);
}
.btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; border-color: #fff; }

/* ==========================================================================
   Header fixed wrapper
   ========================================================================== */
.site-header-fixed {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1030;
}

.usp-topbar {
	background: var(--color-deep);
	color: #fff;
	font-size: 0.8rem;
	padding: 0.4rem 0;
	background-image: linear-gradient(90deg, var(--color-deep) 0%, #5B1F0D 100%);
}
.usp-topbar__inner {
	display: flex;
	justify-content: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}
.usp-topbar__item i { color: var(--color-warm); margin-right: 0.4rem; }
@media (max-width: 767px) { .usp-topbar { display: none; } }

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-navbar {
	background: #fff !important;
	box-shadow: none;
	border-bottom: 1px solid var(--color-border);
	padding: 0.6rem 0;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.site-navbar.scrolled {
	box-shadow: 0 4px 20px rgba(124, 45, 18, 0.12);
	border-bottom-color: transparent;
}

.site-navbar .navbar-brand { display: flex; align-items: center; gap: 0.6rem; }
.site-navbar .site-logo { height: 44px; width: auto; }
.site-navbar .site-wordmark {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--color-deep);
	letter-spacing: -.01em;
}

.site-navbar .navbar-nav .nav-link {
	font-weight: 500;
	color: var(--color-deep) !important;
	padding: 0.5rem 0.9rem !important;
	border-radius: var(--radius-sm);
	transition: all .2s ease;
}
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .current-menu-item > .nav-link,
.site-navbar .navbar-nav .current_page_item > .nav-link {
	color: var(--color-primary) !important;
	background: rgba(194, 65, 12, 0.08);
}

.site-navbar .dropdown-menu {
	border: 0;
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-md);
	padding: 0.5rem;
}
.site-navbar .dropdown-item {
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.75rem;
	color: var(--color-deep);
}
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus,
.site-navbar .dropdown-item.active {
	background: rgba(194, 65, 12, 0.1);
	color: var(--color-primary);
}

.btn-header-cta {
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 0.5rem 1.15rem;
	font-weight: 600;
	border: 0;
	transition: all .2s ease;
}
.btn-header-cta:hover {
	background: var(--color-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* Search */
.site-search .form-control {
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	border-right: 0;
	border-color: var(--color-border);
}
.site-search .btn-search {
	background: var(--color-accent);
	color: #fff;
	border: 0;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	padding: 0 0.9rem;
}
.site-search .btn-search:hover { background: #0E7490; }

.navbar-toggler { border: 0 !important; }
.navbar-toggler:focus { box-shadow: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	padding: 3.2rem 0 3rem;
	background:
		radial-gradient(ellipse at 85% 10%, rgba(245, 158, 11, 0.18) 0%, transparent 55%),
		radial-gradient(ellipse at 10% 90%, rgba(8, 145, 178, 0.12) 0%, transparent 55%),
		linear-gradient(135deg, var(--color-sand) 0%, #fff 100%);
	overflow: hidden;
	margin-bottom: 2rem;
}
.hero--bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -1.5rem;
	padding-top: 4.5rem;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero--bleed > .container { padding-top: 0; padding-bottom: 0; }
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-deep);
	background: #fff;
	border: 1px solid var(--color-border);
	padding: .35rem .8rem;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	margin-bottom: 1rem;
}
.hero__eyebrow i { color: var(--color-warm); }
.hero__title {
	font-size: clamp(2.1rem, 4.8vw, 3.4rem);
	margin-bottom: 1rem;
	color: var(--color-deep);
}
.hero__title em {
	color: var(--color-primary);
	font-style: italic;
	font-weight: 500;
}
.hero__sub {
	font-size: 1.05rem;
	color: var(--color-muted);
	margin-bottom: 1.5rem;
	max-width: 36rem;
	line-height: 1.65;
}
.hero__img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-hover);
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
}

.masthead {
	background-size: cover;
	background-position: center;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin-bottom: 2rem;
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -1rem;
}
.masthead h1 { color: #fff; margin: 0; padding: 2.2rem 0; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.masthead > .container { width: 100%; }

/* ==========================================================================
   USP row
   ========================================================================== */
.usp-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-bottom: 2.5rem;
	box-shadow: var(--shadow-card);
}
.usp-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-weight: 600;
	color: var(--color-deep);
	font-size: 0.95rem;
}
.usp-item i {
	font-size: 1.3rem;
	color: var(--color-primary);
	width: 2.4rem;
	height: 2.4rem;
	background: var(--color-sand);
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.usp-item--duplicate { display: none; }

@media (max-width: 767px) {
	.usp-row {
		display: flex;
		gap: 2rem;
		overflow: hidden;
		padding: 1rem;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	}
	.usp-row > * {
		flex: 0 0 auto;
		animation: uspScroll 22s linear infinite;
	}
	.usp-item--duplicate { display: flex; }
	.usp-row:hover > *, .usp-row:active > * { animation-play-state: paused; }
}
@keyframes uspScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* ==========================================================================
   Region cards (pijlers)
   ========================================================================== */
.region-card, .cat-card {
	position: relative;
	display: block;
	aspect-ratio: 4/3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: all .25s ease;
	color: #fff;
}
.region-card:hover, .cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	color: #fff;
}
.region-card img, .cat-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.region-card:hover img, .cat-card:hover img { transform: scale(1.06); }
.region-card__overlay, .cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(124,45,18,0.88) 0%, rgba(124,45,18,0.25) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.3rem;
}
.region-card__title, .cat-card__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 600;
}
.region-card__sub, .cat-card__count {
	font-size: 0.85rem;
	opacity: 0.95;
}

/* ==========================================================================
   Post card
   ========================================================================== */
.post-card {
	background: #fff;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: all .25s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.post-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--color-sand); }
.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card__cat {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.post-card__title {
	font-family: var(--font-heading);
	font-size: 1.22rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--color-deep);
	line-height: 1.25;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__excerpt { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 1rem; flex: 1; }
.post-card__meta { font-size: 0.8rem; color: var(--color-muted); display: flex; gap: 0.75rem; }
.post-card__meta i { color: var(--color-accent); margin-right: 0.3rem; }

/* ==========================================================================
   Section styles
   ========================================================================== */
.section { padding: 3rem 0; }
.section--sand { background: var(--color-sand); }
.section--deep { background: var(--color-deep); color: #fff; }
.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section__title { text-align: center; margin-bottom: 2.2rem; }
.section__title small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-primary);
	margin-bottom: 0.5rem;
	font-weight: 700;
}

/* ==========================================================================
   Showcase card (hotels / activiteiten)
   ========================================================================== */
.showcase-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	background: #fff;
	transition: all .25s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
}
.showcase-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.showcase-card__media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.showcase-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.showcase-card:hover .showcase-card__media img { transform: scale(1.05); }
.showcase-card__badge {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	background: var(--color-warm);
	color: var(--color-deep);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.32rem 0.65rem;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.showcase-card__body {
	padding: 1.15rem 1.3rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.showcase-card__title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--color-deep);
	line-height: 1.25;
}
.showcase-card__region { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 0.9rem; }
.showcase-card__region i { color: var(--color-primary); margin-right: 0.3rem; }
.showcase-card__cta { margin-top: auto; }

/* ==========================================================================
   CTA / Newsletter
   ========================================================================== */
.cta-section {
	background:
		radial-gradient(ellipse at top right, rgba(245, 158, 11, 0.35) 0%, transparent 50%),
		linear-gradient(135deg, var(--color-primary) 0%, var(--color-deep) 100%);
	color: #fff;
	padding: 3.2rem 2rem;
	border-radius: var(--radius-lg);
	text-align: center;
	margin: 3rem 0;
	position: relative;
	overflow: hidden;
}
.cta-section h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-section p { color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; }

.newsletter {
	background: var(--color-sand);
	padding: 3rem 2rem;
	border-radius: var(--radius-lg);
	text-align: center;
	margin: 3rem 0;
	border: 1px solid var(--color-border);
}

/* ==========================================================================
   Single post
   ========================================================================== */
.single-article { font-size: 1.05rem; line-height: 1.75; }
.single-article h2 { margin: 2rem 0 1rem; }
.single-article h3 { margin: 1.5rem 0 0.75rem; }
.single-article p { margin-bottom: 1.25rem; }
.single-article img { border-radius: var(--radius-md); margin: 1.5rem 0; }
.single-article blockquote {
	border-left: 4px solid var(--color-warm);
	padding: 0.75rem 0 0.75rem 1.3rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--color-deep);
	font-family: var(--font-heading);
	font-size: 1.15rem;
	background: linear-gradient(90deg, var(--color-sand) 0%, transparent 70%);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.single-article a { text-decoration: underline; text-underline-offset: 3px; }

.article-meta {
	display: flex;
	gap: 1.25rem;
	font-size: 0.85rem;
	color: var(--color-muted);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.article-meta i { color: var(--color-primary); margin-right: 0.35rem; }

.top-cta {
	background: linear-gradient(135deg, var(--color-sand) 0%, #fff 100%);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-warm);
	border-radius: var(--radius-md);
	padding: 1.3rem;
	margin-bottom: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.top-cta__text { flex: 1; min-width: 14rem; }
.top-cta__text strong { display: block; color: var(--color-deep); font-size: 1.1rem; font-family: var(--font-heading); }
.top-cta__text small { color: var(--color-muted); }

/* ==========================================================================
   Sidebar
   ========================================================================== */
#stickIt { top: 140px; }

.sidebar-help {
	background: linear-gradient(135deg, var(--color-sand) 0%, #fff 100%);
	border-radius: var(--radius-md);
	padding: 1.4rem;
	margin-bottom: 1.5rem;
	text-align: center;
	border: 1px solid var(--color-border);
}
.sidebar-help h4 { font-size: 1.05rem; color: var(--color-deep); margin-bottom: 0.5rem; font-family: var(--font-heading); }
.sidebar-help p { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 1rem; }

.sidebar-partners {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.4rem;
	box-shadow: var(--shadow-card);
	margin-bottom: 1.5rem;
}
.sidebar-partners h4 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--color-deep); font-family: var(--font-heading); }
.sidebar-partner-cta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 0.5rem;
	transition: all .2s ease;
	color: var(--color-deep);
	font-weight: 500;
}
.sidebar-partner-cta:hover {
	border-color: var(--color-primary);
	background: var(--color-sand);
	transform: translateY(-1px);
	color: var(--color-deep);
}
.sidebar-partner-cta i { color: var(--color-primary); margin-left: auto; }

.sidebar-trust {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.4rem;
	margin-bottom: 1.5rem;
}
.sidebar-trust h4 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--color-deep); font-family: var(--font-heading); }
.sidebar-trust ul { list-style: none; padding: 0; margin: 0; }
.sidebar-trust li {
	display: flex;
	gap: 0.6rem;
	font-size: 0.9rem;
	margin-bottom: 0.55rem;
	color: var(--color-deep);
	align-items: flex-start;
}
.sidebar-trust i { color: var(--color-accent); margin-top: 0.25rem; flex: none; }

.sidebar-recent {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.4rem;
	box-shadow: var(--shadow-card);
	margin-bottom: 1.5rem;
}
.sidebar-recent h4 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--color-deep); font-family: var(--font-heading); }
.sidebar-recent__item {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--color-border);
}
.sidebar-recent__item:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.sidebar-recent__thumb { flex: 0 0 72px; width: 72px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; }
.sidebar-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-recent__title { font-size: 0.9rem; font-weight: 600; color: var(--color-deep); line-height: 1.3; }
.sidebar-recent__title a { color: inherit; }
.sidebar-recent__title a:hover { color: var(--color-primary); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar {
	background: var(--color-sand);
	padding: 1.4rem 0;
	margin-top: 3rem;
	border-top: 1px solid var(--color-border);
}
.trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	text-align: center;
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--color-deep);
	font-weight: 500;
}
.trust-item i { color: var(--color-primary); font-size: 1.1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-deep);
	color: rgba(255,255,255,0.85);
	padding: 3.2rem 0 2rem;
	position: relative;
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 90% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(8, 145, 178, 0.10) 0%, transparent 50%);
	pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer h5 {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	margin-bottom: 1rem;
	font-weight: 600;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--color-warm); }

.footer-brand-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand__logo { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand__logo img { height: 48px; width: auto; }
.footer-brand__name {
	font-family: var(--font-heading);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
}
.footer-brand__desc {
	flex: 1;
	min-width: 18rem;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.72);
	margin: 0;
}

.site-footer .list-unstyled li, .site-footer .list-group-item {
	background: transparent;
	border: 0;
	padding: 0.35rem 0;
	color: rgba(255,255,255,0.85);
}

.site-footer-bottom {
	background: #4A1C0A;
	color: rgba(255,255,255,0.65);
	padding: 1rem 0;
	font-size: 0.85rem;
}
.site-footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
}
.site-footer-bottom a { color: rgba(255,255,255,0.85); }
.site-footer-bottom a:hover { color: var(--color-warm); }
.site-footer-bottom p { margin: 0; }
.site-footer-bottom ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.site-footer-bottom ul li { margin: 0; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination .page-link {
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	margin: 0 0.18rem;
	border-radius: var(--radius-sm);
}
.pagination .page-link:hover {
	background: var(--color-sand);
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.pagination .active .page-link {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ==========================================================================
   Affiliate disclaimer
   ========================================================================== */
.aff-disclaimer {
	font-size: 0.78rem;
	color: var(--color-muted);
	background: var(--color-bg-soft);
	border-left: 3px solid var(--color-warm);
	padding: 0.6rem 0.85rem;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 1.25rem 0;
}
.aff-disclaimer i { color: var(--color-warm); margin-right: .35rem; }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-accent { color: var(--color-accent) !important; }
.text-primary, .text-gc-primary { color: var(--color-primary) !important; }
.text-deep { color: var(--color-deep) !important; }
.bg-sand { background: var(--color-sand) !important; }
.bg-deep { background: var(--color-deep) !important; color: #fff; }

.page-card {
	background: #fff;
	border-radius: var(--radius-md);
	padding: 2rem;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-border);
}

.empty-state {
	text-align: center;
	padding: 3.5rem 1rem;
	max-width: 40rem;
	margin: 0 auto;
}
.empty-state > i {
	font-size: 2.5rem;
	color: var(--color-primary);
	margin-bottom: 1rem;
	display: inline-block;
}
.empty-state h1, .empty-state h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.empty-state p { color: var(--color-muted); margin-bottom: 1.5rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.hero { padding: 2.2rem 0; }
	.masthead { min-height: 240px; }
	.section { padding: 2rem 0; }
	#stickIt { position: static !important; top: auto; }
}