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

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

body {
	margin: 0;
	background: var(--ci-gradient-bg);
	color: var(--ci-text-primary);
	font-family: var(--ci-font-body);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ci-font-heading);
	font-weight: 700;
	color: var(--ci-text-primary);
	margin: 0 0 16px;
	line-height: 1.2;
	letter-spacing: var(--ci-letter-tight);
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

p { margin: 0 0 16px; color: var(--ci-text-secondary); }

a { color: var(--ci-accent-gold); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--ci-accent-gold-light); text-decoration: none; }

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

ul { margin: 0; padding: 0; }

button { font-family: inherit; }

.ci-container {
	max-width: var(--ci-container-width);
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 768px) {
	.ci-container { padding: 0 24px; }
}

/*
 * Front-page content auto-container: the front page renders the_content()
 * with no outer .ci-container so full-width sections (hero, trust) can
 * stretch edge-to-edge; every other direct child gets centered/constrained
 * as if it were inside a container.
 */
.ci-page-content--front > *:not(.ci-hero):not(.ci-trust):not(.alignfull) {
	max-width: var(--ci-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.ci-page-content--front > *:not(.ci-hero):not(.ci-trust):not(.alignfull) {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.ci-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ci-accent-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--ci-letter-wide);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.ci-section-eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--ci-accent-red);
	border-radius: 2px;
}

.ci-section-subtitle {
	color: var(--ci-text-secondary);
	font-size: 16px;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--ci-accent-green);
	color: #fdfbf6;
}

.ci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--ci-radius-sm);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
}

.ci-btn:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.ci-btn:active { transform: translateY(0); }

.ci-btn--primary {
	background: var(--ci-gradient-cta);
	color: #fff;
}
.ci-btn--primary:hover { box-shadow: var(--ci-neon-border-green); color: #fff; }

.ci-btn--gold {
	background: var(--ci-gradient-cta-gold);
	color: #fdfbf6;
}
.ci-btn--gold:hover { box-shadow: var(--ci-neon-border-gold); color: #fdfbf6; }

.ci-btn--outline {
	background: var(--ci-glass-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--ci-glass-border);
	color: var(--ci-text-primary);
}
.ci-btn--outline:hover { border-color: var(--ci-accent-gold); color: var(--ci-accent-gold); }

.ci-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--ci-glass-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--ci-glass-border);
	color: var(--ci-text-secondary);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.ci-breadcrumbs {
	display: block;
	padding: 18px 0;
	font-size: 13px;
	color: var(--ci-text-muted);
	letter-spacing: 0.01em;
}
.ci-breadcrumbs a { color: var(--ci-text-secondary); }
.ci-breadcrumbs a:hover { color: var(--ci-accent-gold); }
.ci-breadcrumbs span { color: var(--ci-text-primary); }

.ci-muted { color: var(--ci-text-muted); }

.ci-main { display: block; }

.ci-page-content { padding: 24px 0 48px; }

/*
 * Tables — the editor's core Table block (figure.wp-block-table) and any
 * plain <table> in post content. Light editorial: white card, cream header,
 * soft borders, zebra rows, horizontal scroll on small screens.
 */
.wp-block-table {
	margin: 28px 0;
	overflow-x: auto;
}

.ci-page-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ci-bg-card, #ffffff);
	border: 1px solid #e9e2d4;
	border-radius: 12px;
	overflow: hidden;
	font-size: 15px;
}

.ci-page-content table th,
.wp-block-table table th {
	/* `border: none` first: core's Table block draws near-black borders on
	   every cell (border: 1px solid currentColor) — kill them, then add back
	   only a soft bottom rule. */
	border: none;
	background: var(--ci-bg-darker, #f3ede1);
	color: var(--ci-text-primary, #22201c);
	font-family: var(--ci-font-heading, 'Poppins', sans-serif);
	font-weight: 700;
	text-align: left;
	padding: 13px 16px;
	border-bottom: 2px solid rgba(47, 107, 79, 0.35);
}

.ci-page-content table td,
.wp-block-table table td {
	border: none;
	padding: 12px 16px;
	color: var(--ci-text-secondary, #57524a);
	border-bottom: 1px solid #f1ebdf;
}

.ci-page-content table tbody tr:nth-child(even) td,
.wp-block-table table tbody tr:nth-child(even) td {
	background: #fdfbf6;
}

.ci-page-content table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td {
	border-bottom: none;
}

.ci-page-content table tbody tr:hover td,
.wp-block-table table tbody tr:hover td {
	background: var(--ci-bg-card-hover, #faf5ea);
}

.wp-block-table figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--ci-text-muted, #8a8377);
	text-align: center;
}