/*
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.27.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; }
/* Anchor targets (Get on the Inside / Contact) land at the exact top of their section, clearing the sticky header */
#inside, #contact { 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; }

/* Zoho Web-to-Lead contact form — re-skin to match the AMPD form (stacked, full-width, red submit) */
.ampd-zoho { width: 100%; padding: 0 !important; margin: 16px 0 0 0 !important; background: transparent !important; max-width: none !important; color: #111; }
.ampd-zoho .zcwf_title { display: none !important; }
.ampd-zoho .zcwf_row { margin: 12px 0 !important; }
.ampd-zoho .zcwf_col_lab { width: 100% !important; float: none !important; margin: 0 0 5px 0 !important; padding: 0 !important; font-family: 'Inter Tight', sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; color: #444 !important; }
.ampd-zoho .zcwf_col_fld { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.ampd-zoho .zcwf_col_fld input[type="text"],
.ampd-zoho .zcwf_col_fld textarea {
	width: 100% !important; float: none !important; background: #f5f5f3 !important; border: 1px solid #d5d5d3 !important;
	color: #111 !important; padding: 12px 13px !important; font-size: 13px !important; font-family: 'Inter Tight', sans-serif !important;
	border-radius: 0 !important; box-sizing: border-box !important;
}
.ampd-zoho .zcwf_col_fld textarea { min-height: 96px; resize: vertical; }
.ampd-zoho .zcwf_col_help { display: none !important; }
.ampd-zoho .formsubmit.zcwf_button {
	background: #CD1D12 !important; border: none !important; color: #fff !important; font-family: 'Inter Tight', sans-serif !important;
	font-size: 16px !important; font-weight: 500 !important; letter-spacing: 1.4px !important; padding: 13px 30px !important;
	border-radius: 0 !important; max-width: none !important; cursor: pointer; transition: filter .15s ease;
}
.ampd-zoho .formsubmit.zcwf_button:hover { filter: brightness(1.1); }
.ampd-zoho .ampd-zoho-reset { display: none !important; }  /* kept in DOM for Zoho's reset.click(), hidden from view */

/* Artists page */
.ampd-artists-hero { margin-top: -104px; }  /* pull hero behind the transparent header */
.ampd-art-app-intro { position: sticky; top: 120px; }  /* sticky submission intro on desktop */

/* Zoho form — dark variant (artists submission). Placed after .ampd-zoho so it wins on equal specificity. */
.ampd-zoho-dark { color: #fff; }
.ampd-zoho-dark #wf_splash { display: none !important; }  /* use the branded on-site success panel instead */
.ampd-zoho-dark form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin: 6px 0 0 0; }
.ampd-zoho-dark .zcwf_row { grid-column: 1 / -1; margin: 12px 0 !important; }
.ampd-zoho-dark .zcwf_row.ampd-half { grid-column: span 1; }
.ampd-zoho-dark .zcwf_col_lab { color: #cfcfcf !important; }
.ampd-zoho-dark .zcwf_col_fld input[type="text"],
.ampd-zoho-dark .zcwf_col_fld textarea,
.ampd-zoho-dark .zcwf_col_fld select {
	width: 100% !important; float: none !important; background: #141414 !important; border: 1px solid #333 !important;
	color: #fff !important; padding: 13px 14px !important; font-size: 16px !important; font-family: 'Inter Tight', sans-serif !important;
	border-radius: 0 !important; box-sizing: border-box !important; min-height: 50px;
}
.ampd-zoho-dark .zcwf_col_fld select[multiple] { min-height: 116px; padding: 8px !important; }
.ampd-zoho-dark .zcwf_col_fld input::placeholder, .ampd-zoho-dark .zcwf_col_fld textarea::placeholder { color: #7a7a7a; }
.ampd-zoho-dark .zcwf_col_fld input:focus, .ampd-zoho-dark .zcwf_col_fld select:focus, .ampd-zoho-dark .zcwf_col_fld textarea:focus { border-color: #CD1D12 !important; outline: none; }
.ampd-zoho-dark .formsubmit.zcwf_button {
	background: #CD1D12 !important; border: none !important; color: #fff !important;
	font-family: 'Anton', sans-serif !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0.5px !important;
	text-transform: uppercase; padding: 15px 30px !important; min-height: 52px; border-radius: 0 !important; max-width: none !important; cursor: pointer; transition: filter .15s ease;
}
.ampd-zoho-dark .formsubmit.zcwf_button:hover { filter: brightness(1.08); }

/* 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.
   ============================================================ */

/* ---- Hamburger / sandwich menu on ALL breakpoints (desktop + mobile) ---- */
.ampd-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; cursor: pointer; flex: none; background: none; border: none; padding: 0; -webkit-appearance: none; appearance: none; }
.ampd-burger span { display: block; height: 2px; width: 24px; margin: 0 auto; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.ampd-burger:focus-visible { outline: 2px solid #CD1D12; outline-offset: 3px; }

/* Menu is collapsed by default; opens as a clean dropdown panel under the burger */
.ampd-nav { display: none; position: absolute; top: calc(100% - 4px); right: max(44px, min(calc(50vw - 675px), 6vw)); width: min(320px, calc(100vw - 40px)); flex-direction: column; align-items: stretch; gap: 2px; background: #0d0d0d; border: 1px solid #222; border-radius: 10px; padding: 10px 8px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.ampd-header.is-open .ampd-nav { display: flex; }
.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; border-radius: 6px; }
.ampd-nav a.nav-link:hover { background: rgba(255,255,255,0.05); }
.ampd-nav .cta { text-align: center; margin-top: 6px; }
/* Desktop: the "Get on the Inside" CTA sits in the header bar (left of the burger);
   hide the copy inside the dropdown so it isn't duplicated. */
.ampd-nav .ampd-cta-menu { display: none; }
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 */
	/* keep the logo clear of the phone status bar / notch when landing on the hero */
	.ampd-header { padding-top: max(16px, env(safe-area-inset-top, 0px)) !important; }

	/* 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, #contact { scroll-margin-top: 88px; }  /* match the shorter mobile header */
	.ampd-press-hero { margin-top: -88px; padding-top: 116px !important; }
	.ampd-artists-hero { margin-top: -88px; }  /* match the shorter mobile header */
	#artist-submit { scroll-margin-top: 88px; }
	.ampd-art-app-intro { position: static; }  /* unstick on mobile */
	.ampd-zoho-dark form { grid-template-columns: 1fr; }  /* single-column form on mobile */
	/* 4-up benefit/process grids stack to one column: reset side padding + turn dividers into top borders */
	.ampd-art-4up { border-top: none !important; margin-top: 34px !important; }
	.ampd-art-4up .ampd-art-cell { padding: 24px 0 !important; border-right: 0 !important; border-top: 1px solid rgba(255,255,255,0.18); }
	.ampd-art-4up .ampd-art-cell:first-child { border-top: none; }
	.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: dropdown spans the screen within the gutters ---- */
	.ampd-nav { left: 22px; right: 22px; width: auto; }
	/* mobile: no room for a header-bar CTA — keep it inside the dropdown menu */
	.ampd-cta-desktop { display: none !important; }
	.ampd-nav .ampd-cta-menu { display: block !important; }
	/* mobile: "Founded by..." — icon on top, text centered below */
	.ampd-founded { flex-direction: column !important; gap: 8px !important; }
}

/* ---------- 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; }
/* Homepage founder card CTA — deep-links to the full bio on /about#... */
.ampd-bio-link { display: inline-block; margin-top: 16px; 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-link:hover { color: #ff3b30; border-color: #ff3b30; }
.ampd-bio-link: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; }
}