/* ==========================================================================
   BYE BYE PLASTIC HUB — Landing page styles
   Mirrors abracadabra-hub visual language
   ========================================================================== */

/* ─── Override cream background to black ──────────────────────────────────── */

.bbp-hub.has-cream-background-color {
	background-color: var(--wp--preset--color--black, #000) !important;
	color: var(--wp--preset--color--white, #fff);
}

/* ─── Eyebrow ─────────────────────────────────────────────────────────────── */

.bbp-hub .eyebrow {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45) !important;
}

/* ─── Section headings ────────────────────────────────────────────────────── */

.bbp-hub h1.wp-block-heading {
	font-size: clamp(3rem, 10vw, 7rem) !important;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
	color: var(--wp--preset--color--white, #fff) !important;
}

.bbp-hub h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white, #fff) !important;
	margin-top: var(--wp--preset--spacing--2xl, 6rem) !important;
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
	padding-top: var(--wp--preset--spacing--lg, 2.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bbp-hub h2.wp-block-heading:first-of-type {
	border-top: none;
	padding-top: 0;
}

.bbp-hub h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--xl, 2rem) !important;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white, #fff) !important;
	margin-top: var(--wp--preset--spacing--lg, 2.5rem) !important;
	margin-bottom: var(--wp--preset--spacing--sm, 1rem);
}

/* ─── Body text ───────────────────────────────────────────────────────────── */

.bbp-hub p.has-lg-font-size {
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85) !important;
}

.bbp-hub p.has-base-font-size {
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7) !important;
}

.bbp-hub p.has-sm-font-size {
	color: rgba(255, 255, 255, 0.35) !important;
}

/* ─── Links ───────────────────────────────────────────────────────────────── */

.bbp-hub a {
	color: var(--wp--preset--color--white, #fff);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bbp-hub a:hover {
	color: var(--wp--preset--color--brand-accent, #E8C547);
}

.bbp-hub p.has-sm-font-size a {
	color: rgba(255, 255, 255, 0.55);
}

.bbp-hub p.has-sm-font-size a:hover {
	color: var(--wp--preset--color--brand-accent, #E8C547);
}

/* ─── Lists ───────────────────────────────────────────────────────────────── */

.bbp-hub ul.has-base-font-size {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bbp-hub ul.has-base-font-size li {
	padding: var(--wp--preset--spacing--sm, 1rem) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.bbp-hub ul.has-base-font-size li strong {
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	letter-spacing: 0.02em;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.bbp-hub .wp-block-button__link {
	background: var(--wp--preset--color--white, #fff) !important;
	color: var(--wp--preset--color--black, #000) !important;
	border-color: var(--wp--preset--color--white, #fff) !important;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: background 0.2s, color 0.2s;
}

.bbp-hub .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-accent, #E8C547) !important;
	color: var(--wp--preset--color--black, #000) !important;
	border-color: var(--wp--preset--color--brand-accent, #E8C547) !important;
}

/* ─── Separator ───────────────────────────────────────────────────────────── */

.bbp-hub .wp-block-separator {
	border-color: rgba(255, 255, 255, 0.08) !important;
	opacity: 1;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */

.bbp-hub__faq {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bbp-hub__faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bbp-hub__faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--sm, 1rem) 0;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--white, #fff);
}

.bbp-hub__faq-item summary::-webkit-details-marker {
	display: none;
}

.bbp-hub__faq-item summary::after {
	content: '+';
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.4);
	transition: transform 0.2s;
}

.bbp-hub__faq-item[open] summary::after {
	content: '−';
}

.bbp-hub__faq-item p {
	padding: 0 0 var(--wp--preset--spacing--sm, 1rem);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}