/*
Theme Name: AMPD Music Community
Theme URI: https://ampdmusic.community
Author: AMPD
Description: Custom theme for the AMPD Music Community — landing page and members area. Pairs with the "AMPD Membership" plugin for gated access, login/signup, and forms.
Version: 1.17.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ampd
*/

/* Mistrully — script accent, used sparingly (e.g. "Get on the Inside!"). Self-hosted. */
@font-face {
	font-family: 'Mistrully';
	src: url('assets/fonts/mistrully.woff2') format('woff2'),
	     url('assets/fonts/mistrully.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.ampd-script { font-family: 'Mistrully', cursive; font-weight: 400; }

html, body { margin: 0; padding: 0; background: #0a0a0a; }
* { box-sizing: border-box; }
body { font-family: 'Inter Tight', sans-serif; color: #fff; }
a { color: #CD1D12; text-decoration: none; }
a:hover { color: #ff3b30; }
input, textarea { font-family: 'Inter Tight', sans-serif; }
input::placeholder, textarea::placeholder { color: #8b8b8b; }
strong, b, h1, h2, h3, h4, h5, h6 { font-weight: 500; }

.nav-link { transition: color .15s ease; }
.nav-link:hover { color: #CD1D12; }
.cta { background: #CD1D12; transition: filter .15s ease; }
.cta:hover { filter: brightness(1.1); }
.btn-red { background: #CD1D12; transition: filter .15s ease; }
.btn-red:hover { filter: brightness(1.1); }

.wrap { max-width: none; margin: 0; }
.chk { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; color: #d7d7d7; }
.chk svg { flex: none; margin-top: 1px; }
.anton { font-family: 'Anton', sans-serif; }

/* Header: transparent over the hero at the top, solid black once scrolled (no divider line) */
.ampd-header { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%); transition: background .25s ease; }
.ampd-header.ampd-scrolled { background: #000; }
/* pull the homepage hero up behind the transparent header so the photo shows through it */
.ampd-hero { margin-top: -104px; }
/* CTA anchor ("Get on the Inside") lands at the exact top of the join section, clearing the sticky header */
#inside { scroll-margin-top: 104px; }
/* Hero copy stays in a centred column on large screens (full-bleed gutter felt too far left) */
.ampd-hero-copy { margin-left: max(44px, calc(50vw - 690px)) !important; }

/* Monthly / yearly billing toggle */
.ampd-bill-m { color: #fff; }
.ampd-bill-y { color: #9a9a9a; }
.ampd-bill-switch { background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.6); }
.ampd-bill-switch:hover { border-color: #fff; }
.ampd-billing.is-yearly .ampd-bill-m { color: #9a9a9a; }
.ampd-billing.is-yearly .ampd-bill-y { color: #fff; }
.ampd-billing.is-yearly .ampd-bill-switch { background: #CD1D12; border-color: #fff; }
.ampd-billing.is-yearly .ampd-bill-switch .knob { transform: translateX(26px); }
.ampd-bill-switch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Press + Media page */
.ampd-press-hero { margin-top: -104px; padding-top: 150px !important; }  /* fill dark behind the transparent header, clear it below */
.ampd-press-btn { transition: border-color .15s ease, background .15s ease; }
.ampd-press-btn:hover, .ampd-press-btn:focus-visible { border-color: #CD1D12 !important; background: rgba(205,29,18,0.08) !important; }
.ampd-press-btn:focus-visible { outline: 2px solid #CD1D12; outline-offset: 2px; }
/* footer Press + Media link hover/active */
.ampd-foot-press:hover, .ampd-foot-press:focus-visible { color: #CD1D12 !important; }

/* Auth / notice helpers */
.ampd-notice { max-width: 460px; margin: 16px auto 0; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; }
.ampd-notice.error { background: rgba(205,29,18,0.12); border: 1px solid #CD1D12; color: #ffb3ad; }
.ampd-notice.success { background: rgba(40,160,80,0.12); border: 1px solid #2e9e57; color: #b7f0cb; }
.ampd-field { background: #1c1c1c; border: 1px solid #3a3a3a; color: #fff; padding: 13px 14px; font-size: 13.5px; width: 100%; margin: 12px 0 0 0; }

/* Post / page content ("prose") */
.ampd-prose { font-size: 16px; line-height: 1.85; color: #d0d0d0; }
.ampd-prose > *:first-child { margin-top: 0; }
.ampd-prose p { margin: 0 0 20px; }
.ampd-prose h1 { font-family: 'Anton', sans-serif; color: #fff; font-size: 34px; margin: 40px 0 16px; letter-spacing: 0.5px; }
.ampd-prose h2 { font-family: 'Anton', sans-serif; color: #fff; font-size: 28px; margin: 36px 0 14px; letter-spacing: 0.5px; }
.ampd-prose h3 { font-family: 'Anton', sans-serif; color: #fff; font-size: 22px; margin: 28px 0 12px; letter-spacing: 0.4px; }
.ampd-prose h4 { color: #fff; font-size: 18px; margin: 24px 0 10px; }
.ampd-prose a { color: #CD1D12; text-decoration: underline; }
.ampd-prose a:hover { color: #ff3b30; }
.ampd-prose strong, .ampd-prose b { color: #fff; }
.ampd-prose img, .ampd-prose iframe, .ampd-prose video { max-width: 100%; height: auto; display: block; border-radius: 10px; margin: 24px 0; }
.ampd-prose figure { margin: 24px 0; }
.ampd-prose figcaption { font-size: 12.5px; color: #9c9c9c; margin-top: 8px; text-align: center; }
.ampd-prose ul, .ampd-prose ol { margin: 0 0 20px; padding-left: 22px; }
.ampd-prose li { margin: 0 0 8px; }
.ampd-prose blockquote { border-left: 3px solid #CD1D12; margin: 24px 0; padding: 6px 0 6px 20px; color: #cfcfcf; font-style: italic; }
.ampd-prose hr { border: none; border-top: 1px solid #2a2a2a; margin: 34px 0; }
.ampd-prose code { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 4px; padding: 2px 6px; font-size: 14px; }
.ampd-prose pre { background: #111; border: 1px solid #2a2a2a; border-radius: 10px; padding: 16px 18px; overflow: auto; }

/* ============================================================
   RESPONSIVE — mobile & tablet only.
   Desktop (>1024px) is intentionally untouched: every rule below
   lives inside a media query and overrides the inline styles with
   !important, so the desktop layout renders exactly as before.
   ============================================================ */

.ampd-burger { display: none; background: none; border: none; padding: 0; -webkit-appearance: none; appearance: none; }  /* button reset; hidden on desktop */
.ampd-burger span { display: block; height: 2px; width: 24px; margin: 0 auto; background: #fff; border-radius: 2px; }
.ampd-burger:focus-visible { outline: 2px solid #CD1D12; outline-offset: 3px; }
img { max-width: 100%; }                  /* never let media force overflow */


/* ---------- Tablet and below (<= 1024px) ---------- */
@media (max-width: 1024px) {
	/* kill the desktop min-width so the page fits the screen */
	.ampd-page { min-width: 0 !important; overflow-x: clip; }  /* clip (not hidden) so it doesn't break position:sticky on the header */

	/* tighter side gutters */
	.ampd-page [style*="calc(50vw - 675px)"] { padding-left: 28px !important; padding-right: 28px !important; }
	.ampd-header { padding: 16px 22px !important; }  /* taller header is desktop-only; keep mobile compact */

	/* collapse every multi-column grid to a single column */
	.ampd-page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
	.ampd-page [style*="grid-column"] { grid-column: auto !important; }
	.ampd-page [style*="grid-row"] { grid-row: auto !important; }

	/* icon feature rows: show 2 per line (not 1) with even spacing */
	.ampd-page .ampd-icons2 { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

	/* membership panel: drop the desktop left border/indent that shoved content off-screen */
	.ampd-page [style*="padding-left: 40px"] { padding-left: 0 !important; border-left: 0 !important; }
	/* let flex/grid children shrink instead of forcing horizontal overflow */
	.ampd-page [style*="flex: 1"] { min-width: 0 !important; }
	/* "Unlock Membership Details": stack the lock icon ABOVE the form (was pushing it right) */
	.ampd-page [style*="align-items: flex-start"][style*="gap: 22px"] { flex-direction: column !important; align-items: center !important; gap: 14px !important; }

	/* flex rows that would overflow -> stack */
	.ampd-steps { flex-direction: column !important; align-items: center !important; }
	.ampd-steps > div { width: auto !important; max-width: 420px; }
	.ampd-avail { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
	.ampd-avail > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100%; }
	.ampd-page [style*="gap: 28px"] { flex-wrap: wrap !important; }
	.ampd-page [style*="gap: 22px"] { flex-wrap: wrap !important; }

	/* WHY column: drop the desktop right divider + its indent once the columns stack */
	.ampd-page [style*="border-right: 1px solid #8a8a8a"] { border-right: 0 !important; padding-right: 0 !important; }

	/* hero: text goes full width, photo becomes a dim full-width backdrop */
	.ampd-hero { margin-top: -88px; }  /* pull behind the shorter mobile header */
	#inside { scroll-margin-top: 88px; }  /* match the shorter mobile header */
	.ampd-press-hero { margin-top: -88px; padding-top: 116px !important; }
	.ampd-page .ampd-hero-copy { margin-left: 0 !important; max-width: 100% !important; padding-right: 0 !important; }
	.ampd-page [style*="width: 64%"] { width: 100% !important; opacity: 0.4; }
	.ampd-page [style*="margin: 130px 0 0 0"] { margin-top: 40px !important; }

	/* ---- mobile navigation (hamburger) ---- */
	.ampd-header { flex-wrap: wrap !important; }
	.ampd-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; cursor: pointer; flex: none; }
	.ampd-burger span { transition: transform .2s ease, opacity .2s ease; }
	.ampd-nav { display: none !important; }
	.ampd-header.is-open .ampd-nav {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
		width: 100%;
		margin-top: 12px;
		background: #0d0d0d;
		border: 1px solid #222;
		border-radius: 10px;
		padding: 8px 6px;
	}
	/* animate burger into an X when open */
	.ampd-header.is-open .ampd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ampd-header.is-open .ampd-burger span:nth-child(2) { opacity: 0; }
	.ampd-header.is-open .ampd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.ampd-nav a { padding: 12px 14px !important; }
	.ampd-nav .cta { text-align: center; margin-top: 6px; }
}

/* ---------- Phones (<= 760px) ---------- */
@media (max-width: 760px) {
	.ampd-page [style*="calc(50vw - 675px)"] { padding-left: 20px !important; padding-right: 20px !important; }
	.ampd-header { padding: 16px 20px !important; }

	/* even out the "Get on the Inside" split section (it kept the desktop 44px on one side) */
	.ampd-page #contact,
	.ampd-page [style*="rgba(0,0,0,0.72)"] { padding-left: 20px !important; padding-right: 20px !important; }

	.ampd-header img[src*="ampd-logo"] { height: 56px !important; }

	/* scale the big display headings down so they don't overflow narrow screens */
	.ampd-page [style*="font-size: 66px"] { font-size: 38px !important; }
	.ampd-page [style*="font-size: 58px"] { font-size: 34px !important; }
	.ampd-page [style*="font-size: 46px"] { font-size: 30px !important; }
	.ampd-page [style*="font-size: 39px"] { font-size: 26px !important; }
	.ampd-page [style*="font-size: 38px"] { font-size: 26px !important; }
	.ampd-page [style*="font-size: 33px"] { font-size: 24px !important; }
	.ampd-page [style*="font-size: 32px"] { font-size: 24px !important; }
	.ampd-page [style*="font-size: 30px"] { font-size: 22px !important; }
	.ampd-prose { font-size: 15px !important; }
}

/* ============================================================
   PHASE 3 — component-specific responsive rules
   ============================================================ */

/* 3.7 Founder "READ FULL BIO" disclosure: collapsed by default on ALL screens (desktop + mobile) */
.ampd-bio { margin-top: 16px; }
.ampd-bio > summary {
	list-style: none; cursor: pointer; display: inline-block;
	font-family: 'Inter Tight', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.8px;
	text-transform: uppercase; color: #CD1D12; border-bottom: 2px solid #CD1D12; padding-bottom: 3px;
}
.ampd-bio > summary::-webkit-details-marker { display: none; }
.ampd-bio[open] > summary { margin-bottom: 12px; }
.ampd-bio > summary:focus-visible { outline: 2px solid #CD1D12; outline-offset: 3px; }

/* B&W founder portraits (concept), reveal colour on hover */
.ampd-founder-card:hover img { filter: grayscale(0%) !important; }

/* 3.4 + 3.9 Ecosystem (Discover/Connect/Support/Grow) -> 2x2 on tablet & phone */
@media (max-width: 1024px) {
	.ampd-page .ampd-eco-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.ampd-page .ampd-eco-head { grid-template-columns: 1fr !important; gap: 20px !important; }

	/* 3.5 How-it-works: stacked steps get down-arrows + equal-width cards */
	.ampd-page .ampd-step-arrow { transform: rotate(90deg); margin: 2px auto !important; }
	.ampd-steps > div { width: 100% !important; max-width: 380px; }

	/* 3.8 Footer -> tidy 2-column block instead of one long stack */
	.ampd-page .ampd-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 26px !important; }
	.ampd-page .ampd-footer-grid > div:last-child { border-left: 0 !important; padding-left: 0 !important; }
}

/* Phones: brand + blurb full-width, then Explore|Company and Follow|copyright pair up 2-per-row */
@media (max-width: 560px) {
	.ampd-page .ampd-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 22px !important; }
	.ampd-page .ampd-footer-grid > div:nth-child(1),
	.ampd-page .ampd-footer-grid > div:nth-child(2) { grid-column: 1 / -1 !important; }
	/* copyright sits on its own full-width row at the very end */
	.ampd-page .ampd-footer-grid > div:last-child { grid-column: 1 / -1 !important; margin-top: 6px; }
}

/* Membership pricing: value-first header + 4 comparable tiers (concept-matched) */
@media (max-width: 1024px) {
	.ampd-page .ampd-memb-head { grid-template-columns: 1fr !important; gap: 22px !important; }
	.ampd-page .ampd-price-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 560px) {
	.ampd-page .ampd-price-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Mobile hero: dedicated portrait photo (darkening already baked into the image) ---------- */
@media (max-width: 760px) {
	/* Fix the photo to its NATURAL aspect ratio so it always renders at true cover dimensions.
	   Decoupling its height from the hero means pushing the copy down never zooms/stretches it. */
	.ampd-hero > div[style*="width: 64%"] {
		width: 100% !important;
		height: auto !important;
		bottom: auto !important;
		aspect-ratio: 941 / 1672 !important;
		opacity: 1 !important;
		background: #0a0a0a url('assets/hero-mobile.webp') center top / cover no-repeat !important;
	}
	/* the mobile image already carries its own gradient — drop the manual black scrims */
	.ampd-hero > div[style*="linear-gradient(90deg"] { display: none !important; }
	.ampd-hero > div[style*="linear-gradient(180deg"] { display: none !important; }
	/* move the copy down (over the darker lower third of the photo) — image is unaffected now */
	.ampd-hero #about > div { padding-top: 300px !important; }
}