/*
Theme Name:   Suburban Plenty Child
Theme URI:    https://suburbanplenty.com
Description:  GeneratePress child theme for Suburban Plenty. Presentation only; business logic lives in the suburban-plenty-core plugin.
Author:       Suburban Plenty
Author URI:   https://suburbanplenty.com
Template:     generatepress
Version:      0.2.0
Requires at least: 6.6
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:  suburban-plenty-child
*/

/*
 * Site chrome: GeneratePress token mapping, header, navigation, footer and
 * the full-width landing layout. Block/content styles live in
 * assets/css/content.css (shared with the editor).
 *
 * Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
 * Media queries use the approved breakpoints 600 / 900 / 1200px
 * (CSS custom properties can't be used inside media queries).
 */

/* ---------------------------------------------------------------
 * 1. Map GeneratePress global colors to the brand palette so any
 *    GeneratePress-rendered template (posts, archives) stays on brand.
 * ------------------------------------------------------------- */
:root {
	--contrast: var(--wp--preset--color--ink);
	--contrast-2: var(--wp--preset--color--muted);
	--contrast-3: var(--wp--preset--color--line);
	--base: var(--wp--preset--color--surface);
	--base-2: var(--wp--preset--color--paper);
	--base-3: var(--wp--preset--color--paper);
	--accent: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
 * 2. Shared chrome button (header/footer CTA)
 * ------------------------------------------------------------- */
.sp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--40);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.sp-button:hover,
.sp-button:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * 3. Header
 * ------------------------------------------------------------- */
.sp-header {
	position: relative;
	z-index: 20;
	background-color: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sp-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	max-width: var(--wp--style--global--wide-size, 1200px);
	min-height: var(--wp--custom--header-height);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

.sp-wordmark {
	min-width: 0;
	margin: 0 auto 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.15;
}

.sp-wordmark a {
	display: inline-block;
	padding-block: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sp-wordmark a:hover {
	color: var(--wp--preset--color--primary);
}

/*
 * Header CTA = secondary (outline) treatment on every page: the page content
 * owns the single primary accent CTA per view (BRAND.md → Buttons).
 */
/* Below 600px: subtract the 2px outline border so the CTA keeps its pre-outline width. */
.sp-header__cta {
	padding-inline: calc(var(--wp--preset--spacing--30) - 2px);
}

.sp-header .sp-header__cta {
	border-color: var(--wp--preset--color--primary);
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

.sp-header .sp-header__cta:hover,
.sp-header .sp-header__cta:focus {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--primary-dark);
}

.sp-header__cta-long {
	display: none;
}

.sp-icon {
	flex-shrink: 0;
}

/* Navigation: base (mobile first) */
.sp-nav__menu,
.sp-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav .sp-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
	min-height: var(--wp--custom--tap-target);
	padding: 0 var(--wp--preset--spacing--20);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.sp-nav .sp-nav__link:hover,
.sp-nav .sp-nav__link:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.sp-nav .sp-nav__link[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.sp-nav__sub-toggle[aria-expanded="true"] .sp-icon--chevron {
	transform: rotate(180deg);
}

.sp-nav .sp-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tap-target);
	height: var(--wp--custom--tap-target);
	padding: 0;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--button);
	background: none;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.sp-nav .sp-nav__toggle:hover,
.sp-nav .sp-nav__toggle:focus {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--primary-dark);
}

.sp-nav .sp-nav__toggle[hidden] {
	display: none;
}

/* Without JavaScript: the menu sits on its own row, fully expanded. */
.sp-nav:not(.is-enhanced) {
	flex-basis: 100%;
	order: 3;
	padding-bottom: var(--wp--preset--spacing--20);
}

/* With JavaScript, below the desktop breakpoint: a dropdown panel. */
.sp-nav.is-enhanced .sp-nav__menu {
	display: none;
}

.sp-nav.is-enhanced .sp-nav__toggle[aria-expanded="true"] + .sp-nav__menu {
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--paper);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.sp-nav.is-enhanced .sp-nav__sub {
	display: none;
	padding-left: var(--wp--preset--spacing--30);
}

.sp-nav.is-enhanced .sp-nav__item.is-open > .sp-nav__sub {
	display: block;
}

.sp-nav__sub .sp-nav__link {
	font-weight: 400;
}

/* Parent item with its own page: link + separate submenu toggle. */
.sp-nav__split {
	display: flex;
	align-items: center;
}

.sp-nav__split > a.sp-nav__link {
	flex: 1 1 auto;
}

.sp-nav .sp-nav__sub-toggle--icon {
	flex: 0 0 var(--wp--custom--tap-target);
	justify-content: center;
	width: var(--wp--custom--tap-target);
	padding: 0;
}

/*
 * Narrow phones (360-399px): keep wordmark, toggle and CTA on one row.
 * Measured on staging: 1.0625rem wordmark + 4px gap needs 356px at 360px
 * (was 376.5px and wrapping). Tap targets are unchanged.
 */
@media (max-width: 399px) {
	.sp-header__inner {
		gap: var(--wp--preset--spacing--10);
	}

	.sp-wordmark {
		font-size: 1.0625rem;
	}
}

@media (min-width: 600px) {
	.sp-header__inner {
		gap: var(--wp--preset--spacing--30);
	}

	.sp-wordmark {
		font-size: 1.375rem;
	}

	.sp-header__cta {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.sp-header__cta-long {
		display: inline;
	}
}

@media (min-width: 900px) {
	.sp-header__inner {
		flex-wrap: nowrap;
	}

	.sp-wordmark {
		font-size: 1.5rem;
	}

	.sp-nav,
	.sp-nav:not(.is-enhanced) {
		flex-basis: auto;
		order: 0;
		padding-bottom: 0;
	}

	.sp-nav .sp-nav__toggle,
	.sp-nav .sp-nav__toggle:not([hidden]) {
		display: none;
	}

	.sp-nav .sp-nav__menu,
	.sp-nav.is-enhanced .sp-nav__menu,
	.sp-nav.is-enhanced .sp-nav__toggle[aria-expanded="true"] + .sp-nav__menu {
		display: flex;
		position: static;
		align-items: center;
		gap: var(--wp--preset--spacing--10);
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.sp-nav .sp-nav__menu > .sp-nav__item > .sp-nav__link,
	.sp-nav .sp-nav__menu > .sp-nav__item > .sp-nav__split > a.sp-nav__link {
		width: auto;
		padding-inline: var(--wp--preset--spacing--30);
	}

	.sp-nav__item--has-children {
		position: relative;
	}

	.sp-nav .sp-nav__sub,
	.sp-nav.is-enhanced .sp-nav__sub {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 16rem;
		padding: var(--wp--preset--spacing--20);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow: var(--wp--custom--shadow--card-hover);
	}

	/* No-JS fallback: reveal on hover or keyboard focus. */
	.sp-nav:not(.is-enhanced) .sp-nav__item--has-children:hover > .sp-nav__sub,
	.sp-nav:not(.is-enhanced) .sp-nav__item--has-children:focus-within > .sp-nav__sub,
	.sp-nav.is-enhanced .sp-nav__item.is-open > .sp-nav__sub {
		display: block;
	}
}

/* ---------------------------------------------------------------
 * 4. Footer
 * ------------------------------------------------------------- */
.sp-footer {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--medium);
}

.sp-footer__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
}

.sp-footer a {
	color: var(--wp--preset--color--paper);
	text-underline-offset: 0.2em;
}

.sp-footer a:hover {
	color: var(--wp--preset--color--sage);
}

.sp-footer :focus-visible {
	outline-color: var(--wp--preset--color--marigold);
}

.sp-footer p {
	margin: 0;
}

.sp-footer__signup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent);
}

.sp-footer__signup-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: var(--wp--custom--line-height--heading);
}

.sp-footer .sp-button {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.sp-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}

.sp-wordmark--footer {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 1.5rem;
}

.sp-footer .sp-wordmark a {
	padding: 0;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.sp-footer__tagline {
	max-width: 32ch;
	color: var(--wp--preset--color--sage);
}

.sp-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.sp-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	text-decoration: none;
}

.sp-footer__list a:hover,
.sp-footer__list a:focus {
	text-decoration: underline;
}

.sp-footer__bottom {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent);
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 600px) {
	.sp-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.sp-footer__signup {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sp-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ---------------------------------------------------------------
 * 5. Landing layout (front page + "Landing (full width)" template)
 * ------------------------------------------------------------- */
.sp-landing .site.grid-container {
	max-width: none;
	padding: 0;
}

.sp-landing .site-content {
	display: block;
	padding: 0;
}

/* Sections own their spacing; neutralise GeneratePress flow margins. */
.sp-landing__content :where(p, h1, h2, h3, h4, ul, ol, figure) {
	margin-bottom: 0;
}

/* Full-width sections get the page gutter; inner content is constrained by theme.json layout. */
.sp-landing__content > .alignfull {
	padding-inline: var(--wp--custom--gutter);
}

/* Any block placed directly on a landing page (outside a section) stays readable. */
.sp-landing__content > :not(.alignfull) {
	max-width: min(var(--wp--style--global--content-size, 720px), calc(100% - 2 * var(--wp--custom--gutter)));
	margin-inline: auto;
}

.sp-landing__content > .alignwide {
	max-width: min(var(--wp--style--global--wide-size, 1200px), calc(100% - 2 * var(--wp--custom--gutter)));
}

/* Editor-only notice (rendered for logged-in editors, never for visitors). */
.sp-editor-notice {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	border: 2px dashed var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}