/*
Theme Name: Elixer Media - Travel
Theme URI: https://elixermedia.nl
Description: Tenerifevakantie.nl — affiliate theme voor Tenerife vakantie content. Gebaseerd op Bootstrap 5.
Author: Elixer Media
Author URI: https://elixermedia.nl
Version: 3.0
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* Kleuren (overschreven door customizer) */
	--color-primary: #0A6E8A;       /* oceaanblauw */
	--color-primary-text: #ffffff;
	--color-accent: #FF7A45;        /* koraal */
	--color-accent-text: #ffffff;
	--color-deep: #0B3B4E;          /* diepblauw */
	--color-deep-text: #ffffff;
	--color-warm: #FFC857;          /* zonnig geel */
	--color-sand: #F5EBDD;          /* zandbeige */

	--color-text: #1f2937;
	--color-muted: #6b7280;
	--color-border: #e5e7eb;
	--color-bg: #ffffff;
	--color-bg-soft: #fafaf7;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-card: 0 4px 14px rgba(11, 59, 78, 0.08);
	--shadow-hover: 0 10px 28px rgba(11, 59, 78, 0.16);

	/* Typografie */
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Raleway', -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; /* topbar (32) + navbar (~72) */
}
@media (max-width: 767px) {
	body { padding-top: 64px; } /* alleen navbar op mobiel */
}

/* Full-bleed helper — laat een element de container doorbreken */
.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: 700;
	color: var(--color-deep);
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
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.5rem 1.1rem;
	transition: all .2s ease;
	border: 2px solid transparent;
	line-height: 1.3;
}
.btn-sm {
	font-size: 0.85rem;
	padding: 0.35rem 0.85rem;
}
.btn-lg {
	font-size: 1.05rem;
	padding: 0.7rem 1.5rem;
}

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

.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: #e96536;
	border-color: #e96536;
	color: #fff;
	transform: translateY(-1px);
}

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

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

/* ==========================================================================
   Topbar USP
   ========================================================================== */
/* Gehele header (topbar + navbar) als één 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.35rem 0;
}
.usp-topbar__inner {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.usp-topbar__item i { color: var(--color-warm); margin-right: 0.35rem; }
@media (max-width: 767px) {
	.usp-topbar { display: none; }
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-navbar {
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(11, 59, 78, 0.07);
	padding: 0.6rem 0;
}

.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.1rem;
	line-height: 1;
	color: var(--color-deep);
}

.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-accent) !important;
	background: rgba(255, 122, 69, 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,
.site-navbar .dropdown-item.active {
	background: rgba(255, 122, 69, 0.1);
	color: var(--color-accent);
}

.btn-header-cta {
	background: var(--color-accent);
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 0.45rem 1.1rem;
	font-weight: 600;
	border: 0;
	transition: all .2s ease;
}
.btn-header-cta:hover {
	background: #e96536;
	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-primary);
	color: #fff;
	border: 0;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	padding: 0 0.9rem;
}
.site-search .btn-search:hover { background: var(--color-deep); }

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

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	padding: 3rem 0;
	background: 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: -1rem; /* sluit strak aan onder navbar */
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero--bleed > .container { padding-top: 0; padding-bottom: 0; }
.hero__title {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	margin-bottom: 1rem;
}
.hero__title em { color: var(--color-accent); font-style: normal; }
.hero__sub {
	font-size: 1.05rem;
	color: var(--color-muted);
	margin-bottom: 1.5rem;
	max-width: 36rem;
}
.hero__img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
}

.masthead {
	background-size: cover;
	background-position: center;
	min-height: 320px;
	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: 2rem 0; }
.masthead > .container { width: 100%; }

/* ==========================================================================
   USP row (horizontal scroll, auto rotate op mobiel)
   ========================================================================== */
.usp-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 1.5rem;
	background: var(--color-sand);
	border-radius: var(--radius-lg);
	margin-bottom: 2.5rem;
}
.usp-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
	color: var(--color-deep);
	font-size: 0.95rem;
}
.usp-item i {
	font-size: 1.4rem;
	color: var(--color-accent);
	width: 2rem;
	text-align: center;
}
.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 18s 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%); }
}

/* ==========================================================================
   Category / Region cards
   ========================================================================== */
.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 .4s ease;
}
.region-card:hover img, .cat-card:hover img { transform: scale(1.05); }
.region-card__overlay, .cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11,59,78,0.85) 0%, rgba(11,59,78,0.2) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.25rem;
}
.region-card__title, .cat-card__title {
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 700;
}
.region-card__sub, .cat-card__count {
	font-size: 0.85rem;
	opacity: 0.9;
}

/* ==========================================================================
   Post card (archive, home grid)
   ========================================================================== */
.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;
}
.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.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.post-card__title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--color-deep);
	line-height: 1.3;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--color-accent); }
.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-primary); margin-right: 0.25rem; }

/* ==========================================================================
   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: 2rem;
}
.section__title small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
	font-weight: 600;
}

/* ==========================================================================
   Hotel / activity showcase card
   ========================================================================== */
.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;
}
.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.75rem;
	left: 0.75rem;
	background: var(--color-warm);
	color: var(--color-deep);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.showcase-card__body {
	padding: 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.showcase-card__title {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	color: var(--color-deep);
}
.showcase-card__region {
	font-size: 0.8rem;
	color: var(--color-muted);
	margin-bottom: 0.75rem;
}
.showcase-card__region i { color: var(--color-accent); margin-right: 0.3rem; }
.showcase-card__cta {
	margin-top: auto;
}

/* ==========================================================================
   CTA / Newsletter section
   ========================================================================== */
.cta-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-deep) 100%);
	color: #fff;
	padding: 3rem 2rem;
	border-radius: var(--radius-lg);
	text-align: center;
	margin: 3rem 0;
}
.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;
}

/* ==========================================================================
   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-accent);
	padding: 0.5rem 0 0.5rem 1.25rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--color-deep);
}
.single-article a { text-decoration: underline; }

.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;
}
.article-meta i { color: var(--color-primary); margin-right: 0.3rem; }

.top-cta {
	background: linear-gradient(135deg, var(--color-sand) 0%, #fff 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	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); }
.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.25rem;
	margin-bottom: 1.5rem;
	text-align: center;
	border: 1px solid var(--color-border);
}
.sidebar-help h4 {
	font-size: 1rem;
	color: var(--color-deep);
	margin-bottom: 0.5rem;
}
.sidebar-help p {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin-bottom: 1rem;
}

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

.sidebar-trust {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}
.sidebar-trust h4 {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: var(--color-deep);
}
.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.5rem;
	color: var(--color-deep);
}
.sidebar-trust i { color: var(--color-accent); margin-top: 0.2rem; }

.sidebar-recent {
	background: #fff;
	border-radius: var(--radius-md);
	padding: 1.25rem;
	box-shadow: var(--shadow-card);
	margin-bottom: 1.5rem;
}
.sidebar-recent h4 {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: var(--color-deep);
}
.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 70px;
	width: 70px;
	height: 55px;
	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-accent); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar {
	background: var(--color-sand);
	padding: 1.25rem 0;
	margin-top: 3rem;
}
.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-accent); font-size: 1.1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-deep);
	color: rgba(255,255,255,0.85);
	padding: 3rem 0 2rem;
}
.site-footer h5 {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
.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.1);
}
.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.25rem;
	font-weight: 700;
	line-height: 1;
}
.footer-brand__desc {
	flex: 1;
	min-width: 18rem;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.7);
	margin: 0;
}

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

.site-footer-bottom {
	background: #07303f;
	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; }

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

/* ==========================================================================
   Disclaimer / affiliate notice
   ========================================================================== */
.aff-disclaimer {
	font-size: 0.75rem;
	color: var(--color-muted);
	background: var(--color-bg-soft);
	border-left: 3px solid var(--color-accent);
	padding: 0.5rem 0.75rem;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 1rem 0;
}

/* ==========================================================================
   Utility / misc
   ========================================================================== */
.text-accent { color: var(--color-accent) !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);
}

/* 404 / search */
.empty-state {
	text-align: center;
	padding: 3rem 1rem;
	max-width: 40rem;
	margin: 0 auto;
}
.empty-state > i {
	font-size: 2.25rem;
	color: var(--color-accent);
	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 helpers
   ========================================================================== */
@media (max-width: 767px) {
	.hero { padding: 2rem 0; }
	.masthead { min-height: 220px; }
	.section { padding: 2rem 0; }
	#stickIt { position: static !important; top: auto; }
}