/*
Theme Name: Pace Ventura
Theme URI: https://example.com/pace-ventura
Author: Trey
Description: A loud, silly, teal theme for a run club where every mile comes with a crush and a debate. The visual design is fixed; every headline, photo, section and episode is editable with Secure Custom Fields.
Version: 2.7
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pace-ventura
*/

/*
 * The custom properties below are the design defaults. They are overridden at
 * runtime by inc/assets.php using the colours and fonts saved in
 * "Run Club Settings > Style", so the values here stay as the fallback.
 */

:root {
	--teal: #0e8a8a;
	--teal-deep: #0a5f63;
	--teal-ink: #073c40;
	--orange: #f15a24;
	--amber: #f7a033;
	--cream: #fff8ec;
	--white: #ffffff;
	--pink: #ff5c8a;
	--radius: 18px;
	--display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--marker: "Permanent Marker", "Comic Sans MS", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--teal);
	color: var(--white);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); }
a:hover { color: var(--white); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0 0 .4em; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(7, 60, 64, .92);
	backdrop-filter: blur(8px);
	border-bottom: 3px solid var(--orange);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.site-logo img { height: 54px; width: auto; }
.site-logo .text-logo { font-family: var(--display); font-size: 2rem; color: var(--white); text-decoration: none; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.main-nav a {
	display: inline-block; padding: 8px 16px; border-radius: 999px;
	font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
	color: var(--white); text-decoration: none; border: 2px solid transparent;
}
.main-nav a:hover, .main-nav .current-menu-item a, .main-nav .current_page_item a { border-color: var(--amber); color: var(--amber); }

/* ---------- Hero collage ---------- */
.hero { position: relative; padding: 48px 0 72px; overflow: hidden; }
.hero::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 80% 10%, rgba(247,160,51,.25), transparent 45%),
	            radial-gradient(circle at 10% 90%, rgba(255,92,138,.18), transparent 40%);
	pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.hero-copy .kicker {
	display: inline-block; background: var(--orange); color: var(--white);
	font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
	padding: 6px 14px; border-radius: 999px; transform: rotate(-2deg);
}
.hero-copy h1 { font-size: clamp(3.4rem, 8vw, 6.6rem); margin-top: 16px; }
.hero-copy h1 span { color: var(--amber); display: block; }
.hero-copy p { font-size: 1.15rem; max-width: 34ch; opacity: .95; }
.btn {
	display: inline-block; margin-top: 12px; margin-right: 10px; padding: 14px 26px; border-radius: 999px;
	background: var(--orange); color: var(--white); font-weight: 700; text-decoration: none;
	text-transform: uppercase; letter-spacing: .08em; font-size: .9rem;
	box-shadow: 0 6px 0 var(--teal-ink); transition: transform .15s, box-shadow .15s;
}
.btn:hover { color: var(--white); transform: translateY(3px); box-shadow: 0 3px 0 var(--teal-ink); }
.btn.ghost { background: transparent; border: 2px solid var(--white); box-shadow: none; }

.collage { position: relative; height: 560px; }
.collage figure {
	position: absolute; margin: 0; background: var(--white); padding: 10px 10px 38px;
	border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.35);
	transition: transform .35s ease, z-index 0s;
}
.collage figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.collage figcaption {
	position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
	font-family: var(--marker); color: var(--teal-ink); font-size: 1rem;
}
.collage .p1 { width: 62%; top: 0; left: 0; transform: rotate(-5deg); z-index: 2; }
.collage .p2 { width: 56%; top: 20px; right: 0; transform: rotate(4deg); z-index: 1; }
.collage .p3 { width: 58%; bottom: 0; left: 6%; transform: rotate(-1.5deg); z-index: 3; }
.collage figure:hover { transform: rotate(0) scale(1.04); z-index: 5; }
.sticker {
	position: absolute; z-index: 6; display: grid; place-items: center; text-align: center;
	width: 118px; height: 118px; border-radius: 50%;
	background: var(--pink); color: var(--white); font-family: var(--display); font-size: 1.35rem; line-height: 1;
	transform: rotate(12deg); box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.sticker.s1 { top: 46%; left: -10px; }
.sticker.s2 { bottom: 40px; right: -6px; background: var(--amber); color: var(--teal-ink); transform: rotate(-10deg); }

/* ---------- Ticker ---------- */
.ticker { background: var(--orange); overflow: hidden; white-space: nowrap; border-block: 3px solid var(--teal-ink); }
.ticker-track { display: inline-block; padding: 12px 0; animation: ticker 28s linear infinite; font-family: var(--display); font-size: 1.6rem; letter-spacing: .05em; }
.ticker-track span { margin: 0 22px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section.block { padding: 84px 0; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.section-head p { max-width: 60ch; margin-inline: auto; opacity: .9; }

/* The three vibes */
.vibes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vibe { background: var(--teal-deep); border-radius: var(--radius); padding: 30px; border: 2px solid rgba(255,255,255,.12); }
.vibe .emoji { font-size: 2.6rem; }
.vibe h3 { font-size: 2rem; color: var(--amber); margin-top: 8px; }

/* Rules of Run Club */
.rules { background: var(--teal-ink); position: relative; }
.rules::before {
	content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
	background-image: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 14px);
}
.rules .section-head h2 { color: var(--white); }
.rules .section-head h2 em { font-style: normal; color: var(--orange); }
.rule-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; counter-reset: rule; position: relative; }
.rule-list li {
	counter-increment: rule; position: relative;
	background: var(--cream); color: var(--teal-ink);
	border-radius: 6px; padding: 26px 26px 26px 92px;
	box-shadow: 6px 6px 0 var(--orange);
}
.rule-list li::before {
	content: counter(rule); position: absolute; left: 22px; top: 18px;
	font-family: var(--display); font-size: 3.6rem; color: var(--orange); line-height: 1;
}
.rule-list li:nth-child(even) { transform: rotate(.6deg); }
.rule-list li:nth-child(odd) { transform: rotate(-.6deg); }
.rule-list strong { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 400; letter-spacing: .03em; line-height: 1.1; margin-bottom: 4px; }
.rules-footnote { text-align: center; margin-top: 40px; font-family: var(--display); font-size: 1.8rem; color: var(--amber); position: relative; }

/* Photo strip */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 4px solid var(--white); }

/* CTA */
.cta { text-align: center; background: linear-gradient(135deg, var(--orange), var(--amber)); border-radius: 28px; padding: 60px 30px; color: var(--teal-ink); }
.cta h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.cta .btn { background: var(--teal-ink); box-shadow: 0 6px 0 rgba(0,0,0,.25); }

/* ---------- Episodes ---------- */
.page-hero { padding: 70px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(3.6rem, 10vw, 7rem); }
.page-hero p { max-width: 58ch; margin-inline: auto; font-size: 1.1rem; }
.filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.filters button {
	font: 700 .85rem var(--body); text-transform: uppercase; letter-spacing: .08em;
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--white); border: 2px solid var(--white);
}
.filters button.active, .filters button:hover { background: var(--white); color: var(--teal-ink); }
.episodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 90px; }
.episode { background: var(--cream); color: var(--teal-ink); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 30px rgba(0,0,0,.25); transition: transform .2s; }
.episode:hover { transform: translateY(-6px) rotate(-.5deg); }
.episode .thumb { position: relative; }
.episode .thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.episode .ep-num { position: absolute; top: 12px; left: 12px; background: var(--orange); color: var(--white); font-family: var(--display); font-size: 1.3rem; padding: 4px 12px; border-radius: 6px; }
.episode .body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.episode h3 { font-size: 1.9rem; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: var(--teal); color: var(--white); }
.tag.romance { background: var(--pink); }
.tag.debate { background: var(--orange); }
.tag.chaos { background: var(--teal-ink); }

/* "Coming Soon" capsule, shown after the tag pills */
.soon-tag {
	display: inline-block; font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	padding: 3px 11px; border-radius: 999px;
	background: var(--burst, #ffd23f); color: var(--burst-ink, #073c40);
	text-decoration: none;
}
.soon-tag.is-link { transition: transform .15s, filter .15s; }
.soon-tag.is-link:hover { transform: translateY(-1px); filter: brightness(1.08); }
.meta { font-size: .85rem; opacity: .75; padding-top: 10px; border-top: 1px dashed rgba(7,60,64,.3); display: flex; justify-content: space-between; }

/* Video channel buttons. The auto top margin pins the row to the bottom of the
   card, so the buttons line up across every card in a grid row. */
.channels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: auto 0 20px; }
.channels .btn { margin: 0; padding: 9px 16px; font-size: .78rem; box-shadow: 0 4px 0 var(--teal-ink); }
.channels .btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--teal-ink); }

/* "Coming Soon" burst, shown beside the first channel button. The box is
   slightly larger than the artwork so the rotated starburst still fits inside
   it and cannot overhang the buttons on the next line. */
.burst {
	flex: 0 0 auto; position: relative;
	width: 112px; height: 112px; display: grid; place-items: center;
	transform: rotate(-13deg); pointer-events: none; text-decoration: none;
}
.burst.is-link { pointer-events: auto; transition: transform .2s; }
.burst.is-link:hover { transform: rotate(-6deg) scale(1.06); }
.burst svg { position: absolute; inset: 9%; width: 82%; height: 82%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.burst polygon { fill: var(--burst, #ffd23f); stroke: var(--teal-ink); stroke-width: 2.5; stroke-linejoin: round; }
.burst .burst-label {
	position: relative; width: 52%; text-align: center;
	font-family: var(--display); font-size: .92rem; line-height: .95;
	letter-spacing: .02em; text-transform: uppercase; color: var(--burst-ink, #073c40);
}

.episode.is-hidden { display: none; }

/* Generic content */
.entry { background: var(--cream); color: var(--teal-ink); border-radius: var(--radius); padding: 40px; margin: 50px auto; max-width: 820px; }
.entry a { color: var(--orange); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--teal-ink); color: var(--white);
	border-top: 3px solid var(--orange);
}

.footer-grid { display: grid; grid-template-columns: 1fr; column-gap: 44px; }
.footer-grid.cols-1 { grid-template-columns: 2fr 1fr; }
.footer-grid.cols-2 { grid-template-columns: 2fr 1fr 1fr; }
.footer-grid.cols-3 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-grid.cols-4 { grid-template-columns: 2fr repeat(4, 1fr); }

.footer-col { padding: 46px 0; }

.footer-logo { height: 54px; width: auto; margin: 0 0 20px; }
.footer-desc { margin: 0 0 22px; font-size: .92rem; line-height: 1.6; opacity: .78; max-width: 32ch; }

.footer-heading {
	font-family: var(--body); font-size: .76rem; font-weight: 700; line-height: 1;
	text-transform: uppercase; letter-spacing: .14em; color: var(--amber); margin: 0 0 16px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 11px; }
.footer-links a { color: var(--white); opacity: .8; text-decoration: none; font-size: .93rem; transition: opacity .15s, color .15s; }
.footer-links a:hover { opacity: 1; color: var(--amber); }

/* Footer social links */
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
	transition: background .2s, border-color .2s, transform .15s;
}
.socials a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; fill: var(--amber); transition: fill .2s; }
.socials a:hover svg { fill: var(--white); }

.footer-bottom {
	display: flex; flex-wrap: wrap; gap: 8px 26px;
	justify-content: space-between; align-items: center;
	padding: 0 0 38px;
}
.footer-bottom p { margin: 0; font-size: .82rem; opacity: .6; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; }
	.collage { height: 460px; }
	.vibes, .episodes { grid-template-columns: repeat(2, 1fr); }
	.rule-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.site-logo img { height: 40px; }
	.main-nav a { padding: 6px 10px; font-size: .75rem; }
	.collage { height: 330px; }
	.sticker { width: 84px; height: 84px; font-size: 1rem; }
	.vibes, .episodes, .strip { grid-template-columns: 1fr; }
	.rule-list li { padding: 22px 20px 22px 74px; }
	.rule-list li::before { font-size: 2.8rem; left: 16px; }
	section.block { padding: 60px 0; }
	.burst { width: 96px; height: 96px; }
	.burst .burst-label { font-size: .82rem; }
}
@media (max-width: 820px) {
	.footer-grid,
	.footer-grid.cols-1,
	.footer-grid.cols-2,
	.footer-grid.cols-3,
	.footer-grid.cols-4 { grid-template-columns: 1fr; }
	.footer-col { padding: 30px 0; }
	.footer-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }