/*
 * Enouvation custom pages: shared styles.
 * Loaded by the enouvation-private-pages plugin only on pages built with the
 * .en-page wrapper. Every rule is scoped under .en-page so nothing else on the
 * site is affected. Page-specific styles live in their own files (en-about.css).
 */

.en-page {
	--en-orange: #F57E20;
	--en-orange-text: #A64A00;   /* orange that passes contrast for text links */
	--en-olive: #3F4A21;
	--en-olive-label: #55622F;
	--en-stone: #EDEBE7;
	--en-sand: #F6F4F0;
	--en-ink: #1F1F1F;
	--en-muted: #4A4A4A;
	--en-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

	color: var(--en-ink);
	font-size: 17px;
	line-height: 1.65;
}

/* Reset theme defaults inside our pages (the theme colors every h2 orange). */
.en-page h2,
.en-page h3,
.en-page h4 {
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 16px;
}
.en-page p { margin: 0 0 18px; }
.en-page p:last-child { margin-bottom: 0; }
.en-page a { color: var(--en-orange-text); }
.en-page a:hover { color: #7A3600; }
.en-page ul,
.en-page ol { margin: 0; padding: 0; }

/* Full-width bands that break out of the theme's content container. */
.en-band {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}
.en-band--stone { background: var(--en-stone); }
.en-band--sand  { background: var(--en-sand); }
.en-band--olive { background: var(--en-olive); color: #FFFFFF; }
.en-band--black { background: #000000; color: #FFFFFF; }

.en-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 80px 24px;
	box-sizing: border-box;
}
.en-wrap--tight { padding-top: 40px; padding-bottom: 40px; }

/* Text styles */
.en-eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--en-olive-label);
}
.en-band--olive .en-eyebrow { color: #E8E1C8; }

.en-page .en-h2 {
	font-family: var(--en-serif);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.2;
}
.en-page .en-display {
	font-family: var(--en-serif);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.12;
	color: var(--en-olive);
}
.en-band--olive .en-display,
.en-band--olive .en-h2 { color: #FFFFFF; }

.en-lead { font-size: 20px; }
.en-serif-line {
	font-family: var(--en-serif);
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.35;
	color: var(--en-olive);
}
.en-strong { font-weight: 600; }
.en-note {
	font-size: 14px;
	font-style: italic;
	color: var(--en-muted);
}

/* Layout helpers */
.en-split {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}
.en-split--top { align-items: flex-start; }
.en-split__main  { flex: 1 1 520px; min-width: 0; }
.en-split__media { flex: 1 1 360px; min-width: 0; }

.en-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

/* Cards and callouts */
.en-card {
	background: #FFFFFF;
	padding: 32px;
	box-sizing: border-box;
}
.en-card h3 { font-size: 20px; font-weight: 600; margin-top: 16px; }
.en-callout {
	background: var(--en-sand);
	border-left: 4px solid var(--en-orange);
	padding: 28px 32px;
	box-sizing: border-box;
}

/* Buttons */
.en-page .en-btn {
	display: inline-block;
	padding: 14px 28px;
	background: var(--en-orange);
	color: #111111;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border: 2px solid var(--en-orange);
}
.en-page .en-btn:hover { background: #FFFFFF; color: #111111; }
.en-page .en-btn--outline {
	background: transparent;
	border-color: var(--en-ink);
	color: var(--en-ink);
}
.en-page .en-btn--outline:hover { background: var(--en-ink); color: #FFFFFF; }
.en-btn--block { display: block; width: 100%; box-sizing: border-box; }

/* Images and photo placeholders */
.en-page img { max-width: 100%; height: auto; display: block; }
.en-photo-placeholder {
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: #E4E1DB;
	color: var(--en-muted);
	font-size: 15px;
	text-align: center;
}

/* Small screens */
@media (max-width: 640px) {
	.en-wrap { padding: 56px 20px; }
	.en-card, .en-callout { padding: 24px; }
	.en-photo-placeholder { min-height: 240px; }
}

/* Spacing utility for a paragraph that follows a grid or callout */
.en-page .en-wrap-gap { margin-top: 32px; }

/* Tables (shared): wrap every table in .en-table-wrap so wide tables scroll on phones */
.en-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #FFFFFF;
	margin-bottom: 16px;
}
.en-page .en-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 16px;
	margin: 0;
}
.en-page .en-table th,
.en-page .en-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid #E5E1D8;
}
.en-page .en-table thead th {
	border-bottom: 3px solid var(--en-orange);
	font-weight: 600;
}
.en-page .en-table tbody tr:last-child th,
.en-page .en-table tbody tr:last-child td { border-bottom: 0; }
.en-page .en-table tbody th { font-weight: 600; }
.en-page .en-table--dark thead th {
	background: var(--en-olive);
	color: #FFFFFF;
	border-bottom: 0;
}
.en-page .en-table--wide { min-width: 860px; }
.en-page .en-table--narrow { min-width: 440px; }

/* Lists with bullets (shared) */
.en-page .en-list {
	list-style: disc;
	padding-left: 22px;
	margin-bottom: 20px;
}
.en-page .en-list li { margin-bottom: 8px; }

/* Screen-reader-only text (shared) */
.en-page .en-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}