/*
Theme Name: 420Dank Neon
Theme URI: https://www.jackson420dank.com
Author: AIO Media
Description: Black / white / neon-green single-page shell for 420Dank Jackson, ported from the Webflow site, handing the menu off to the Dutchie Ecom Pro storefront.
Version: 1.0.0
Requires PHP: 8.1
License: Proprietary
Text Domain: dank-neon
*/

/* ---------- Tokens (mirror src/themes/jackson420dank/brand.config.ts) ---------- */
:root {
	--black: #000000;
	--surface: #111111;
	--surface-2: #181818;
	--white: #ffffff;
	--green: #09a661;          /* the Webflow site's --jackson-green */
	--green-bright: #12c975;
	--grey: #838383;           /* the site's footer link grey, 5.6:1 on black */
	--grey-dim: #8a8a8a;       /* copyright, lifted from #6b6b6b to clear AA */
	--hairline: rgba(255, 255, 255, 0.14);
	--open: #2ee07f;
	--closed: #ff5a5a;
	--font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--container: 940px;        /* the Webflow .container */
	--wide: 1240px;
	--marquee-h: 7rem;         /* .client-logo min/max-height */
}

/* ---------- Base ---------- */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--green); color: var(--black); font-weight: 700; }
.skip-link:focus { left: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.container--narrow { max-width: 720px; }
.page-wrapper { display: flex; flex-direction: column; min-height: 100dvh; }
.main { flex: 1 0 auto; }

.eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green);
}
.section-title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.2; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn--green { background: var(--green); border-color: var(--green); color: var(--black); }
.btn--green:hover { background: var(--green-bright); box-shadow: 0 0 18px rgba(9, 166, 97, 0.5); }
.btn--outline { background: rgba(0, 0, 0, 0.35); border-color: var(--white); color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--black); }

/* ---------- Brand marquee (.logos-marquee / .clients-grid.logo-animate) ---------- */
.marquee {
	background: var(--black);
	overflow: hidden;
	padding: 1rem 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	animation: slide 35s linear infinite;
	will-change: transform;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; gap: 3rem; padding: 0 1.5rem; flex: none; }
.marquee__logo {
	height: var(--marquee-h);
	width: auto;
	max-width: 14rem;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 0.4s;
}
.marquee__logo:hover { opacity: 1; }
@keyframes slide {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; scrollbar-width: none; }
	.marquee::-webkit-scrollbar { display: none; }
	.marquee__track { animation: none; }
}

/* ---------- Nav (.nav: black, space-between, 0 1rem, sticky) ---------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	min-height: 80px;
	padding: 0.5rem 1rem;
	background: var(--black);
	border-bottom: 1px solid var(--hairline);
}
.nav__block { display: flex; align-items: center; gap: 1rem; padding: 0.5rem; }
.nav__block--promo { justify-self: start; }
.nav__block--hours { justify-self: end; }
.nav__text { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--white); white-space: nowrap; }
.nav__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav__dot.is-open { background: var(--open); box-shadow: 0 0 8px var(--open); }
.nav__dot.is-closed { background: var(--closed); box-shadow: 0 0 8px var(--closed); }
.nav__brand { justify-self: center; display: inline-flex; min-height: 44px; align-items: center; }
.nav__logo { width: 150px; height: auto; }
.nav__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 4px;
	background: var(--green);
	color: var(--black);
	font-size: 0.875rem;
	font-weight: 700;
	transition: background 0.15s, box-shadow 0.15s;
}
.nav__cta:hover { background: var(--green-bright); box-shadow: 0 0 16px rgba(9, 166, 97, 0.5); }
.nav__strip { display: none; }

/* ---------- Hero (the store's own night photo) ---------- */
.hero {
	position: relative;
	isolation: isolate;
	background-color: var(--black);
	background-size: cover;
	background-position: 62% 50%;
	border-bottom: 1px solid var(--hairline);
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 45%, rgba(0, 0, 0, 0.35) 100%);
}
.hero__inner {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 4rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 320px;
	justify-content: flex-end;
}
.hero__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.1; }
.hero__title span { display: block; font-size: 0.55em; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 600; }
.hero__meta a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.hero__meta a:hover { color: var(--green-bright); }
.sep { color: rgba(255, 255, 255, 0.56); }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status.is-open { color: var(--open); }
.status.is-closed { color: var(--closed); }
.hero__actions { display: flex; gap: 0.625rem; margin-top: 1rem; }

/* ---------- Promo ---------- */
.promo { padding: 2.5rem 0 0; }
.promo__card {
	padding: 1.75rem 2rem;
	border: 1px solid rgba(9, 166, 97, 0.5);
	border-radius: 6px;
	background: var(--surface);
	box-shadow: 0 0 40px rgba(9, 166, 97, 0.12) inset;
	text-align: center;
}
.promo__big { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: var(--green); text-shadow: 0 0 18px rgba(9, 166, 97, 0.45); }
.promo__sub { margin-top: 0.5rem; color: rgba(255, 255, 255, 0.8); }

/* ---------- Categories ---------- */
.cats { padding: 3rem 0; }
.cats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.cats__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 1rem;
	border: 1px solid var(--hairline);
	border-radius: 6px;
	background: var(--surface);
	font-weight: 700;
	transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.cats__tile:hover { border-color: var(--green); color: var(--green-bright); box-shadow: 0 0 18px rgba(9, 166, 97, 0.25); }
.cats__all { margin-top: 1.5rem; text-align: center; }

/* ---------- Info ---------- */
.info { padding: 0 0 4rem; }
.info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.info__line { margin-top: 0.75rem; font-weight: 600; }
.info__line a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.info__line a:hover { color: var(--green-bright); }
.info__muted { margin-top: 1rem; color: var(--grey); font-size: 0.9375rem; }
.info__brands { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.info__brands li { padding: 0.5rem 0.875rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

/* ---------- Article / 404 ---------- */
.article { padding: 4rem 0; }
.article__body { margin-top: 1rem; color: rgba(255, 255, 255, 0.85); }
.article__body p { margin: 1rem 0; }
.article__actions { display: flex; gap: 0.625rem; margin-top: 1.5rem; }

/* ---------- Footer (.footer-light one to one) ---------- */
.footer { background: var(--black); padding: 80px 30px 40px; }
.footer__wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.footer__brand { display: inline-flex; min-height: 44px; }
.footer__logo { width: 150px; height: auto; }
.footer__block { display: flex; flex-direction: column; align-items: flex-start; }
.footer__title { font-size: 18px; font-weight: 500; line-height: 32px; color: var(--white); }
.footer__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--grey); transition: color 0.15s; }
.footer__link:hover { color: rgba(255, 255, 255, 0.75); }
.footer__muted { margin-top: 0.5rem; font-size: 0.875rem; color: var(--grey); }
.footer__divider { width: 100%; height: 1px; margin: 40px 0; background: var(--hairline); }
.footer__legal { margin-bottom: 1.5rem; }
.footer__legal p { margin: 0 0 6px; font-size: 0.8125rem; line-height: 1.55; color: var(--white); } /* legally required — never muted */
.footer__bottom { display: flex; justify-content: space-between; align-items: center; }
.footer__copyright { font-size: 14px; line-height: 20px; color: var(--grey-dim); }

/* ---------- Age gate (#age_pop / .age-popup) ---------- */
.agegate {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background-color: rgba(0, 0, 0, 0.7);
	background-size: cover;
	background-position: 50%;
	background-blend-mode: multiply;
}
.agegate__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 4rem;
	background: rgba(0, 0, 0, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--hairline);
	text-align: center;
}
.agegate__logo { width: 300px; height: auto; }
.agegate__title { font-size: 3rem; line-height: 1; color: var(--white); }
.agegate__actions { display: flex; gap: 1rem; align-items: center; }
.agegate__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 2rem;
	border: 0;
	background: var(--white);
	color: var(--black);
	font-size: 2rem;
	line-height: 1;
	transition: background 0.15s;
}
.agegate__btn:hover { background: var(--green); }
html.age-ok .agegate, html.age-ok-now .agegate { display: none; }
html.gate-open, html.gate-open body { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.container { max-width: 728px; }
}
@media (max-width: 767px) {
	.footer { padding-left: 15px; padding-right: 15px; }
	.footer__bottom { flex-direction: column; align-items: flex-start; }
	.agegate__title { font-size: 2rem; }
	.nav { grid-template-columns: auto minmax(0, 1fr); min-height: 64px; gap: 0.625rem; padding: 0.5rem 0.875rem; }
	.nav__block--promo, .nav__block--hours .nav__text { display: none; }
	.nav__brand { justify-self: start; }
	.nav__logo { width: 100px; }
	.nav__strip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.75rem;
		min-height: 32px;
		padding: 0.375rem 0.875rem;
		background: var(--green);
		color: var(--black);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.02em;
	}
	.nav__strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.marquee__logo { height: 6rem; max-width: 11rem; }
	.marquee__row { gap: 2rem; padding: 0 1rem; }
	.hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.88) 100%); }
	.hero__inner { padding: 2.5rem 0.875rem; min-height: 260px; }
	.eyebrow__tail { display: none; }
	.hero__actions .btn { flex: 1 1 0; padding-inline: 14px; font-size: 0.8125rem; letter-spacing: 0.04em; white-space: nowrap; }
	.cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.info__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
	.container { max-width: none; }
	.footer__wrap { flex-direction: column; }
	.footer__block { margin-top: 40px; }
	.agegate__card { width: 90%; padding: 2rem; }
	.agegate__logo { width: 220px; }
	.agegate__title { font-size: 1.5rem; }
	.agegate__btn { font-size: 1rem; }
}