/* ==========================================================================
   EXPONENT PETRO - WordPress theme layer
   Loaded after the original design CSS. Contains:
   1. Home hero (full background image, content on top)
   2. Section spacing (the original design was too tight between sections)
   3. WordPress glue (admin bar, generic pages)
   ========================================================================== */

:root {
	--ep-copper: #E08545;
	--ep-bg: #0A131E;
	--ep-line: #1E3B57;
	--ep-text: #F0F4F8;
	--ep-muted: #D2DCE6;
	/* Vertical rhythm between page sections. Change these two values to tighten/loosen the whole site. */
	--ep-section-space: clamp(64px, 8vw, 112px);
	--ep-head-space: clamp(32px, 4vw, 52px);
}

/* --------------------------------------------------------------------------
   1. HOME HERO
   -------------------------------------------------------------------------- */
.ep-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 88vh, 840px);
	overflow: hidden;
	background: var(--ep-bg);
	border-bottom: 1px solid var(--ep-line);
}

.ep-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Left-to-right darkening keeps the text readable; a bottom fade blends into the next section. */
.ep-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--ep-bg) 0%, rgba(10, 19, 30, 0) 26%),
		linear-gradient(90deg, rgba(10, 19, 30, .92) 0%, rgba(10, 19, 30, .78) 42%, rgba(10, 19, 30, .38) 100%);
}

.ep-hero__inner {
	position: relative;
	padding: clamp(56px, 8vw, 120px) 0;
	max-width: none;
}

.ep-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding-bottom: 14px;
	margin-bottom: clamp(28px, 4vw, 48px);
	border-bottom: 1px solid rgba(139, 158, 168, .38);
	font: 600 12px/16px Inter, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8B9EA8;
}

.ep-hero__square {
	width: 16px;
	height: 16px;
	flex: none;
	background: var(--ep-copper);
}

.ep-hero__meta-main {
	color: var(--ep-copper);
}

.ep-hero__meta i {
	font-style: normal;
	color: #54748E;
}

.ep-hero__meta-muted {
	color: #A9B7C2;
}

.ep-hero__copy {
	padding-right: 0;
	max-width: 960px;
}

.ep-hero__copy h1 {
	margin: 0 0 20px;
	text-shadow: 0 2px 24px rgba(5, 14, 23, .55);
}

.ep-hero__copy .flagship-lead {
	color: #E3EAF1;
	text-shadow: 0 1px 14px rgba(5, 14, 23, .6);
}

.ep-hero .flagship-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
}

.ep-hero .flagship-button,
.ep-hero .flagship-button-secondary {
	min-height: 52px;
	padding: 14px 26px;
	font-size: 13px;
}

.ep-hero .flagship-button-secondary {
	background: rgba(15, 37, 58, .82);
	backdrop-filter: blur(4px);
}

@media (max-width: 1000px) {
	.ep-hero { min-height: 0; }
	.ep-hero__bg { object-position: 62% 50%; }
	/* Lighter, even overlay so the photo stays visible behind the text on tablets and phones. */
	.ep-hero__shade {
		background:
			linear-gradient(to top, var(--ep-bg) 0%, rgba(10, 19, 30, 0) 14%),
			linear-gradient(180deg, rgba(10, 19, 30, .38) 0%, rgba(10, 19, 30, .58) 100%);
	}
	.ep-hero__copy h1,
	.ep-hero__copy .flagship-lead { text-shadow: 0 2px 18px rgba(5, 14, 23, .85); }
}

@media (max-width: 760px) {
	.ep-hero__inner { padding: 48px 0 56px; }
	.ep-hero__meta { font-size: 11px; letter-spacing: .08em; }
	.ep-hero__meta i,
	.ep-hero__meta-muted { display: none; }
	.ep-hero .flagship-actions { flex-direction: column; align-items: stretch; }
	.ep-hero .flagship-button,
	.ep-hero .flagship-button-secondary { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   2. SECTION SPACING
   The supplied design stacked sections at 40-56px; this gives each one room to breathe.
   -------------------------------------------------------------------------- */

/* Home page sections */
.family-home .flagship-section {
	padding: var(--ep-section-space) 0;
}

.family-home .flagship-section-head {
	margin-bottom: var(--ep-head-space);
	padding-bottom: 18px;
}

.family-home .flagship-section-head + * {
	margin-top: 0;
}

/* Blocks that follow a grid inside a home section */
.family-home .flagship-after-grid {
	margin-top: clamp(28px, 3.5vw, 44px);
}

.family-home .flagship-image-caption {
	margin-top: 16px;
}

.family-home .flagship-finder {
	margin-top: clamp(48px, 6vw, 80px);
}

.family-home .flagship-sng-ribbon {
	margin-bottom: clamp(24px, 3vw, 36px);
}

/* Interior pages */
.petro-section {
	padding-block: clamp(56px, 7vw, 104px);
}

.petro-section + .petro-section {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   3. WORDPRESS GLUE
   -------------------------------------------------------------------------- */
.admin-bar .site-header { top: 32px; }

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

@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

/* Generic (non-design) pages, posts and search */
.ep-generic {
	padding: clamp(56px, 7vw, 104px) 0;
}

.ep-generic__inner {
	max-width: 860px;
	margin: 0 auto;
}

.ep-generic h1 {
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.15;
	margin-bottom: 32px;
}

.ep-generic__entry + .ep-generic__entry {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--ep-line);
}

.ep-prose > * + * { margin-top: 1.1em; }
.ep-prose a { color: var(--ep-copper); text-decoration: underline; text-underline-offset: 3px; }
.ep-prose ul, .ep-prose ol { padding-left: 1.4em; }
.ep-prose img { max-width: 100%; height: auto; }

.navigation.pagination { margin-top: 40px; }
.navigation.pagination .nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.navigation.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--ep-line); }
.navigation.pagination .current { background: var(--ep-copper); color: var(--ep-bg); border-color: var(--ep-copper); }

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