/*
Theme Name: Project Lift
Theme URI: https://www.project-lift.org/
Author: Project Lift
Author URI: https://www.project-lift.org/
Description: Custom theme for Project Lift Olympic Weightlifting Coaching, Columbus/Hilliard Ohio.
Version: 1.0.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: project-lift
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--pl-red: #dd3333;
	--pl-red-dark: #c22a2a;
	--pl-navy: #262a39;
	--pl-navy-2: #252b42;
	--pl-indigo: #272c62;
	--pl-text: #333333;
	--pl-text-light: #ffffff;
	--pl-gray-bg: #f5f6f8;
	--pl-gray-border: #e4e6eb;
	--pl-blue-soft: #eaf2fb;

	--font-heading: 'Asap', sans-serif;
	--font-body: 'Roboto', sans-serif;
	--font-accent: 'Lato', sans-serif;
	--font-kicker: 'Montserrat', sans-serif;

	--container-width: 1140px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--pl-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--pl-red); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--pl-red-dark); }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 20px;
	color: inherit;
}

h1 { font-size: 52px; }
h2 { font-size: 44px; }
h3 { font-size: 30px; }
h4 { font-size: 22px; font-weight: 600; }

p { margin: 0 0 18px; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

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

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-accent);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	background: var(--pl-red);
	border: none;
	border-radius: 4px;
	padding: 14px 28px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--pl-red-dark); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 18px 36px; font-size: 17px; border-radius: 6px; }
.btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--pl-navy); }
.btn-center-wrap { text-align: center; }

/* ==========================================================================
   Kicker / eyebrow text
   ========================================================================== */
.kicker {
	display: block;
	font-family: var(--font-kicker);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 1px;
	color: var(--pl-red);
	margin-bottom: 10px;
}

.section-heading { text-align: center; max-width: 760px; margin: 0 auto 50px; }
.section-heading h2 { margin-bottom: 12px; }
.section-heading p { font-size: 18px; color: #666; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}

.site-branding img { width: 150px; }

.main-navigation { display: flex; align-items: center; gap: 32px; }

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 30px;
}

.main-navigation li { position: relative; }

.main-navigation a {
	color: var(--pl-text);
	font-family: var(--font-kicker);
	font-weight: 600;
	font-size: 15px;
}
.main-navigation a:hover { color: var(--pl-red); }

.main-navigation .menu-item-has-children > a::after {
	content: '\25BE';
	margin-left: 6px;
	font-size: 11px;
}

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #333;
	min-width: 220px;
	padding: 10px 0;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .15s ease;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children.is-hover-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu {
	display: block;
	flex-direction: initial;
	align-items: initial;
	gap: initial;
}

.main-navigation .sub-menu li { width: 100%; }

.main-navigation .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}
.main-navigation .sub-menu a:hover { color: var(--pl-red); }

.header-cta .btn { padding: 12px 22px; border-radius: 3px; }

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 26px;
	cursor: pointer;
	color: var(--pl-navy);
}

@media (max-width: 900px) {
	.menu-toggle { display: block; }
	.main-navigation {
		position: fixed;
		inset: 0 0 0 auto;
		width: 280px;
		height: 100vh;
		background: var(--pl-navy);
		flex-direction: column;
		align-items: flex-start;
		padding: 90px 30px 30px;
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
	.main-navigation.is-open { transform: translateX(0); }
	.main-navigation ul { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
	.main-navigation a { color: #fff; }
	.main-navigation .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: rgba(255,255,255,.06);
		display: none;
		box-shadow: none;
		margin-top: 10px;
	}
	.main-navigation .menu-item-has-children.is-open .sub-menu { display: block; }
	.header-cta { margin-top: 20px; }

	.nav-backdrop {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(10,11,15,.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease;
		z-index: 499;
	}
	.nav-backdrop.is-open { opacity: 1; visibility: visible; }
	body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 140px 0;
	color: #fff;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,.6);
}
.hero .container { position: relative; z-index: 2; max-width: 780px; }
.hero h1 { font-weight: 700; font-size: 50px; }
.hero .subhead { font-family: var(--font-accent); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.hero .location { color: #ccc; margin-bottom: 30px; display: block; }

.page-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 90px 0;
	color: #fff;
	text-align: center;
}
.page-hero::before { content: ''; position: absolute; inset: 0; background: rgba(20,22,30,.72); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .kicker { color: var(--pl-red); }
.page-hero h1 { margin: 0; }

/* ==========================================================================
   Generic sections
   ========================================================================== */
.section { padding: 80px 0; }
.section-sm { padding: 50px 0; }
.bg-white { background: #fff; }
.bg-gray { background: var(--pl-gray-bg); }
.bg-navy { background: var(--pl-navy); color: #fff; }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy-2 { background: var(--pl-navy-2); color: #fff; }
.bg-indigo { background: var(--pl-indigo); color: #fff; }
.bg-black { background: #111; color: #fff; }

.section-media-bg {
	position: relative;
	background-size: cover;
	background-position: center;
}
.section-media-bg::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(20,22,30,.78);
}
.section-media-bg > .container { position: relative; z-index: 2; }

/* Two column split */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 800px) {
	.split { grid-template-columns: 1fr; gap: 30px; }
}

/* Full-bleed edge-to-edge split (photo half / panel half) */
.split-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.split-media__image {
	background-size: cover;
	background-position: center;
	min-height: 520px;
}
.split-media__panel {
	display: flex;
	align-items: center;
}
.split-media__content {
	padding: 60px;
	max-width: 540px;
	margin: 0 auto;
}
.split-media__content p:last-of-type { margin-bottom: 24px; }

.split-media__image--overlay {
	position: relative;
	display: flex;
	align-items: center;
}
.split-media__image--overlay::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(10,11,15,.6);
}
.split-media__overlay-content {
	position: relative;
	z-index: 2;
	padding: 60px;
	color: #fff;
}
.split-media__overlay-content p { color: #e4e5ea; }

.quote-mark {
	font-size: 60px;
	line-height: 1;
	color: var(--pl-red);
	font-family: Georgia, serif;
	display: block;
	margin-bottom: 10px;
}
.quote-text { font-size: 19px; color: #444; font-style: italic; }

@media (max-width: 800px) {
	.split-media { grid-template-columns: 1fr; }
	.split-media__image { min-height: 320px; }
	.split-media__content, .split-media__overlay-content { padding: 40px 24px; max-width: none; }
}

/* Question list (Are You Unsure section) */
.question-list { max-width: 900px; margin: 0 auto 30px; font-size: 18px; column-count: 2; column-gap: 60px; }
.question-list li { padding: 10px 0 10px 34px; position: relative; break-inside: avoid; }
@media (max-width: 700px) { .question-list { column-count: 1; } }
.question-list li::before {
	content: '\2713';
	position: absolute; left: 0; top: 10px;
	color: var(--pl-red);
	font-weight: 700;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 20px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: center; }
.step img { border-radius: 6px; margin-bottom: 20px; }
.step .step-num { color: var(--pl-red); font-family: var(--font-accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; display: block; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 800px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial { text-align: center; }
.testimonial img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; }
.testimonial p { font-style: italic; color: #555; }
.testimonial .name { font-weight: 700; color: var(--pl-navy); font-family: var(--font-accent); }

/* Feature / benefit cards */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card { text-align: center; padding: 20px; }
.feature-card img { width: 64px; height: 64px; margin: 0 auto 18px; object-fit: contain; }
.feature-card h4 { margin-bottom: 10px; }
.feature-card p { color: #666; font-size: 15px; margin-bottom: 0; }

/* Service cards (In-person training) */
.service-block { padding: 70px 0; }
.service-block:nth-child(even) { background: var(--pl-gray-bg); }

/* Cards - generic */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
.info-card {
	background: #fff;
	border: 1px solid var(--pl-gray-border);
	border-radius: 8px;
	padding: 34px 26px;
	text-align: center;
}
.info-card .icon-circle {
	width: 70px; height: 70px;
	border-radius: 50%;
	background: var(--pl-blue-soft);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 20px;
	font-size: 26px;
	color: var(--pl-red);
}
.info-card a { color: #2b6cb0; font-weight: 600; }

/* Contact page */
.contact-hero-title { text-align: center; padding: 60px 0 20px; }
.contact-hero-title h1 { color: var(--pl-navy); font-weight: 700; }
.contact-hero-title p { color: #666; font-size: 18px; }

/* Schedule table */
.schedule-table-wrap { overflow-x: auto; margin-bottom: 40px; }
table.schedule-table { width: 100%; border-collapse: collapse; min-width: 720px; }
table.schedule-table th {
	background: var(--pl-red);
	color: #fff;
	padding: 12px 10px;
	font-family: var(--font-kicker);
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
}
table.schedule-table td {
	border-bottom: 1px solid var(--pl-gray-border);
	padding: 14px 10px;
	font-size: 13px;
	text-align: center;
	vertical-align: middle;
}
table.schedule-table td.time-col { font-weight: 700; text-align: left; background: var(--pl-gray-bg); }
table.schedule-table td.has-session { background: #d9dbe0; font-weight: 600; font-size: 12.5px; }

.notice-box {
	border: 1px solid var(--pl-red);
	border-radius: 6px;
	padding: 30px;
	text-align: center;
}
.notice-box h3 { color: var(--pl-red); font-size: 20px; margin-bottom: 16px; }
.notice-box p { margin-bottom: 6px; }

/* Event card (Competitions / Clinics) */
.event-card {
	display: flex;
	align-items: center;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--pl-gray-border);
	border-radius: 8px;
	padding: 24px 30px;
	max-width: 620px;
	margin: 0 auto;
}
.event-date {
	background: var(--pl-navy);
	color: #fff;
	border-radius: 6px;
	text-align: center;
	padding: 10px 18px;
	flex-shrink: 0;
}
.event-date .day { font-size: 28px; font-weight: 700; line-height: 1; }
.event-date .month { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.event-date .year { font-size: 12px; color: #ccc; }
.event-info { flex-grow: 1; }
.event-info h4 { margin-bottom: 6px; }
.event-info p { margin-bottom: 14px; color: #666; }

/* Coach cards */
.coach-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.coach-grid .coach-card { flex: 0 1 260px; }
@media (max-width: 600px) { .coach-grid .coach-card { flex: 1 1 100%; max-width: 400px; } }
.coach-card { background: #fff; border: 1px solid var(--pl-gray-border); border-radius: 8px; padding: 28px; }
.coach-card h4 { color: var(--pl-navy); margin-bottom: 10px; }
.coach-card p { color: #666; font-size: 15px; margin-bottom: 0; }

/* Facility gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid img { border-radius: 6px; aspect-ratio: 3/2; object-fit: cover; width: 100%; }

/* CTA banner */
.cta-banner {
	text-align: center;
	padding: 90px 0;
}
.cta-banner h2 { color: #fff; font-weight: 700; font-size: 34px; letter-spacing: .5px; }

/* Footer */
.site-footer { background: var(--pl-navy-2); color: #c7c9d6; padding: 70px 0 30px; }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h5 {
	color: #fff;
	font-family: var(--font-kicker);
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: #c7c9d6; }
.footer-col a:hover { color: #fff; }
.footer-brand p { color: #9799ab; font-size: 14px; }
.footer-social { display: flex; gap: 14px; margin-top: 10px; }
.footer-social a {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
}
.footer-social a:hover { background: var(--pl-red); }
.footer-bottom {
	padding-top: 24px;
	text-align: center;
	font-size: 13px;
	color: #8b8da0;
}

/* ==========================================================================
   Blog / posts (kept minimal to match the site's marketing-first design)
   ========================================================================== */
.post-list { max-width: 800px; margin: 0 auto; }
.post-list article { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--pl-gray-border); }
.post-list h2 { font-size: 28px; }
.post-meta { color: #888; font-size: 14px; margin-bottom: 14px; }
.single-content { max-width: 780px; margin: 0 auto; }
.single-content ul { list-style: disc; padding-left: 1.5em; margin: 0 0 1.2em; }
.single-content ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 1.2em; }
.single-content li { margin-bottom: 6px; }
.single-content .wp-block-buttons { list-style: none; }
.pagination { text-align: center; margin-top: 40px; }
.pagination a, .pagination span { display: inline-block; padding: 8px 14px; margin: 0 4px; border: 1px solid var(--pl-gray-border); border-radius: 4px; }

/* WordPress core alignment helpers */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }

@media (max-width: 700px) {
	h1 { font-size: 36px; }
	h2 { font-size: 30px; }
	.hero { padding: 90px 0; }
	.hero h1 { font-size: 34px; }
	.section { padding: 50px 0; }
}

/* ==========================================================================
   Landing pages (lead magnets / offer & sales pages)
   ========================================================================== */
.lp-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 90px 0 150px;
	color: #fff;
	text-align: center;
}
.lp-hero::before { content: ''; position: absolute; inset: 0; background: rgba(15,20,35,.72); }
.lp-hero .container { position: relative; z-index: 2; max-width: 760px; }
.lp-hero h1 { font-weight: 700; }
.lp-hero .subhead { font-size: 19px; color: #e7e8ee; margin-bottom: 0; }

.optin-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 25px 50px rgba(0,0,0,.18);
	padding: 40px;
	max-width: 480px;
	margin: -90px auto 0;
	position: relative;
	z-index: 3;
	text-align: center;
}
.optin-card h3 { color: var(--pl-red); font-size: 24px; margin-bottom: 10px; }
.optin-card .optin-sub { color: #666; margin-bottom: 24px; }
.optin-card .form-field {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--pl-gray-border);
	border-radius: 4px;
	margin-bottom: 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: #97999f;
	background: #fafafa;
}
.optin-card .btn { width: 100%; justify-content: center; }
.optin-card .form-consent { font-size: 12px; color: #999; margin: 14px 0; text-align: left; }

.placeholder-note {
	font-size: 12px;
	color: #b9532f;
	background: #fdf1ea;
	border: 1px dashed #e8b596;
	border-radius: 4px;
	padding: 8px 12px;
	text-align: center;
	margin-top: 10px;
}

.benefit-list { max-width: 700px; margin: 0 auto; }
.benefit-list-item { display: flex; gap: 18px; margin-bottom: 28px; align-items: flex-start; }
.benefit-list-item .num {
	flex-shrink: 0;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--pl-red);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-family: var(--font-accent);
}
.benefit-list-item h4 { margin-bottom: 6px; }
.benefit-list-item p { margin-bottom: 0; color: #666; }

.urgency-box { text-align: center; margin: 10px auto 30px; }
.urgency-box .label {
	font-family: var(--font-kicker);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #888;
	font-size: 13px;
	margin-bottom: 6px;
	display: block;
}
.urgency-box .date { font-size: 24px; font-weight: 700; color: var(--pl-navy); font-family: var(--font-heading); }

.lp-testimonial-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 20px;
	align-items: center;
	max-width: 700px;
	margin: 0 auto;
}
.lp-testimonial-row img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }
.lp-testimonial-row p { font-style: italic; color: #555; margin-bottom: 8px; }
.lp-testimonial-row .name { font-weight: 700; color: var(--pl-navy); font-family: var(--font-accent); }
@media (max-width: 600px) {
	.lp-testimonial-row { grid-template-columns: 1fr; text-align: center; }
	.lp-testimonial-row img { margin: 0 auto; }
}

.lp-simple-cta { text-align: center; padding: 70px 0; }
.lp-simple-cta h2 { margin-bottom: 20px; }