/*
Theme Name: Broadway Gardens
Theme URI: https://bgperennials.com/
Author: Broadway Gardens Greenhouses Inc.
Description: Custom block theme for Broadway Gardens Greenhouses — South Portland & Westbrook, Maine.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: broadway-gardens
*/

/* On the lime surface, brand-primary and heading drop below 4.5:1 — use the dark green instead. */
.has-surface-alt-background-color :is(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: var(--wp--preset--color--brand-primary-dark);
}

:where(a, button, input, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-accent);
	outline-offset: 2px;
}

.bg-cta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.bg-cta-bar__store {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.bg-cta-bar__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	font-weight: 600;
	text-decoration: none;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
}

.bg-cta-bar__button--directions {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-primary-dark);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-primary);
}

.bg-store-hours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.bg-store-hours__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.bg-store-hours__address {
	font-style: normal;
}

.bg-store-hours__week dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 var(--wp--preset--spacing--40);
}

.bg-store-hours__week dd {
	margin: 0;
}

.bg-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) 0;
}

.bg-faq summary {
	min-height: 48px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

/* ---------- Header ---------- */

/* The top bar is a fixed one-line height so the sticky header can park it off-screen
   (negative top) instead of changing height on scroll — no layout shift. */
:root {
	--bg-top-bar-h: 2.25rem;
}

.bg-site-header {
	position: sticky;
	top: calc(-1 * var(--bg-top-bar-h));
	z-index: 50;
	background: var(--wp--preset--color--surface);
	transition: box-shadow 0.2s;
}

.bg-site-header.is-scrolled {
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}

.bg-top-bar {
	height: var(--bg-top-bar-h);
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	overflow-x: auto;
	white-space: nowrap;
}

.bg-top-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	height: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
}

.bg-top-bar__store {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
}

.bg-top-bar a {
	color: inherit;
}

.bg-top-bar__promo {
	margin-left: auto;
	font-weight: 700;
}

.bg-header__bar {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.bg-header__logo {
	--bg-logo-width: 280px;
	display: block;
	line-height: 0;
	transform-origin: left center;
	transition: transform 0.2s;
}

/* One file per screen size (picture element in the header pattern); each is ~2× its shown width for sharp screens. */
.bg-header__logo img {
	width: var(--bg-logo-width);
	max-width: 100%;
	height: auto;
}

.bg-site-header.is-scrolled .bg-header__logo {
	transform: scale(0.8);
}

.bg-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	color: var(--wp--preset--color--brand-primary-dark);
}

.bg-nav-primary {
	flex: 1 1 auto;
	font-weight: 600;
}

.bg-nav-primary .wp-block-navigation-item__content {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--brand-primary-dark);
}

.bg-nav-primary .wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface);
	font-weight: 400;
}

.bg-nav-primary .wp-block-navigation-item__description {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--text);
}

/* Mega-menu: the long Plants list flows into columns on desktop. */
@media (min-width: 900px) {
	.bg-nav-primary .wp-block-navigation-item:first-child > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(3, minmax(13rem, 1fr));
		column-gap: var(--wp--preset--spacing--50);
		/* Anchored to the header bar's right edge so the 3-column panel always fits on screen. */
		left: auto !important;
		right: var(--wp--preset--spacing--40) !important;
		top: 100% !important;
		width: max-content;
		max-width: min(46rem, calc(100vw - 2rem));
	}

	.bg-header__bar,
	.bg-header__bar .bg-nav-primary {
		position: relative;
	}

	.bg-nav-primary .wp-block-navigation__container,
	.bg-nav-primary .wp-block-navigation-item:first-child {
		position: static;
	}


	.bg-cta-bar--compact {
		display: none;
	}
}

/* Phones and tablets (< 900px — the full 6-item menu, logo and search need ~800px): logo · search · menu on row one, Call / Directions full-width on row two. */
@media (max-width: 899px) {
	.bg-header__logo {
		--bg-logo-width: 240px;
		order: 1;
		margin-right: auto;
	}

	.bg-header__wish {
		order: 2;
	}

	.bg-header__search {
		order: 2;
	}

	.bg-nav-primary {
		order: 3;
		flex: 0 0 auto;
	}

	.bg-cta-bar--compact {
		order: 4;
		flex: 1 0 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--20);
	}

	.bg-cta-bar--compact .bg-cta-bar__button {
		justify-content: center;
		width: 100%;
	}
}

.bg-cta-menu {
	position: relative;
}

.bg-cta-menu summary {
	list-style: none;
	cursor: pointer;
}

.bg-cta-menu summary::-webkit-details-marker {
	display: none;
}

.bg-cta-menu__list {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--20);
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
}

.bg-cta-menu__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--brand-primary-dark);
	font-weight: 600;
}

/* ---------- Footer ---------- */

.bg-footer a {
	color: inherit;
}

.bg-footer .bg-store-hours__name a,
.bg-footer__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--surface);
}

.bg-nav-footer .wp-block-navigation-item__content {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.bg-footer__legal {
	margin-top: var(--wp--preset--spacing--60);
	opacity: 0.9;
}

/* 48px tap targets already space the links; drop the default block gap. */
.bg-nav-footer.wp-block-navigation {
	gap: 0;
}

/* Core's hamburger and close buttons are 24px; SPEC asks for 48px tap targets. */
.bg-nav-primary .wp-block-navigation__responsive-container-open,
.bg-nav-primary .wp-block-navigation__responsive-container-close {
	min-width: 48px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
}

/* Link label above its one-line intro, desktop and mobile. */
.bg-nav-primary .wp-block-navigation-item__content {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* Mobile overlay: left-aligned list, no dropdown boxes. */
.bg-nav-primary .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item, .wp-block-navigation__submenu-container) {
	align-items: flex-start !important;
	text-align: left;
}

.bg-nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	padding: 0 0 0 var(--wp--preset--spacing--40) !important;
	min-width: 0;
}

.bg-nav-primary .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

/* The rose focus ring is only 1.1–1.6:1 on the green bars; switch to white there (≥ 4.9:1). */
.bg-top-bar :focus-visible,
.bg-footer :focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

/* Core only collapses the menu below 600px; keep the hamburger up to 899px so portrait tablets don't wrap the header. */
@media (min-width: 600px) and (max-width: 899px) {
	.bg-nav-primary .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.bg-nav-primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Home page (Phase 5). */
.bg-home > * + * { margin-block-start: var(--wp--preset--spacing--60); }
.bg-home-hero { display: grid; gap: var(--wp--preset--spacing--50); align-items: center; }
@media (min-width: 960px) { .bg-home-hero { grid-template-columns: 1fr 1fr; } }
/* The H1 stays the Home page title (SEO) but sits small above the seasonal headline. */
.bg-home-hero h1.bg-home-hero__seo { margin: 0 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--heading); }
.bg-home-hero__headline { margin: 0 0 var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; line-height: 1.1; color: var(--wp--preset--color--heading); }
.bg-home-hero__intro { font-size: var(--wp--preset--font-size--large, 1.25rem); }
.bg-home-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); }
.bg-home-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--custom--radius); }
.bg-home-search label { display: block; font-weight: 700; margin-bottom: .35rem; }
.bg-home-search__row { display: flex; gap: var(--wp--preset--spacing--20); }
.bg-home-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 .9rem; font: inherit; border: 2px solid var(--wp--preset--color--brand-primary); border-radius: var(--wp--custom--radius); }
.bg-home-tiles, .bg-home-chips { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--30); }
.bg-home-tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 782px) { .bg-home-tiles { grid-template-columns: repeat(4, 1fr); } }
.bg-home-categories > p a, .bg-home-needs > p a { display: inline-flex; align-items: center; min-height: 48px; }
.bg-home-tiles a { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--brand-primary-dark); font-weight: 700; text-align: center; text-decoration: none; }
.bg-home-chips { display: flex; flex-wrap: wrap; }
.bg-home-chips a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; border: 2px solid var(--wp--preset--color--brand-primary-dark); border-radius: 999px; color: var(--wp--preset--color--brand-primary-dark); text-decoration: none; font-weight: 600; }
.bg-home-promo { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--brand-accent); color: var(--wp--preset--color--surface); font-weight: 700; }
.bg-home-promo a { color: inherit; }
.bg-home-month, .bg-home-giftcards { padding: var(--wp--preset--spacing--50); border-radius: var(--wp--custom--radius); background: #eef2dd; }
/* 48 px tap targets for the store card's name and phone links (home, footer, location pages) and the teaser title. */
.bg-store-hours__name a, .bg-store-hours__phone a, .bg-home-month h3 a { display: inline-flex; align-items: center; min-height: 48px; }
/* SPEC 48 px tap targets for links that stand alone: breadcrumbs and one-link list items (Related lists, hub pages). */
.wp-block-breadcrumbs a, .wp-block-post-content li > a:only-child { display: inline-flex; align-items: center; min-height: 48px; }
/* Brand green is 4.27:1 on the pale green panels; links there use the dark green (WCAG AA). */
.bg-home-month a:not(.wp-element-button), .bg-home-giftcards a:not(.wp-element-button), .bg-takeaways a, .bg-season-banner a, .bg-form__message a { color: var(--wp--preset--color--brand-primary-dark); }

/* Phones: the smallest logo file leaves room for search, wishlist and the menu button. */
@media (max-width: 599px) {
	.bg-header__logo {
		--bg-logo-width: clamp(140px, calc(100vw - 216px), 180px);
	}
}

/* Narrow desktops (900–1199px): the wide logo shrinks with the screen and the menu tightens so everything stays on one row. */
@media (min-width: 900px) and (max-width: 1199px) {
	.bg-header__logo {
		--bg-logo-width: clamp(160px, calc(100vw - 740px), 280px);
	}

	.bg-nav-primary .wp-block-navigation__container {
		column-gap: 8px;
		font-size: 17px;
	}
}

/* Christmas season (staff switch adds a 7th menu item, owner 2026-10-21). Seven items need ~100px more than a
   900–1023px screen has, so there the header uses the tablet layout (logo · icons · menu button); from 1024px the
   full row stays, with a smaller logo and tighter menu. */
@media (min-width: 900px) and (max-width: 1023px) {
	.bg-header__bar:has(.bg-nav-primary--seasonal) .bg-header__logo { --bg-logo-width: 240px; order: 1; margin-right: auto; }
	.bg-header__bar:has(.bg-nav-primary--seasonal) :is(.bg-header__wish, .bg-header__search) { order: 2; }
	.bg-header__bar:has(.bg-nav-primary--seasonal) .bg-nav-primary { order: 3; flex: 0 0 auto; }
	.bg-header__bar:has(.bg-nav-primary--seasonal) .bg-cta-bar--compact { order: 4; flex: 1 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--20); }
	.bg-header__bar:has(.bg-nav-primary--seasonal) .bg-cta-bar--compact .bg-cta-bar__button { justify-content: center; width: 100%; }
	.bg-nav-primary--seasonal .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bg-nav-primary--seasonal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.bg-nav-primary--seasonal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child > .wp-block-navigation__submenu-container { display: block; position: static !important; width: auto; max-width: none; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.bg-header__bar:has(.bg-nav-primary--seasonal) .bg-header__logo { --bg-logo-width: clamp(150px, calc(100vw - 840px), 280px); }
	.bg-nav-primary--seasonal .wp-block-navigation__container { column-gap: 6px; font-size: 16px; }
}

/* Eight menu items (Houseplants all year + Christmas in season): even the widest header (1208px) needs a tighter
   menu from 1200px up. */
@media (min-width: 1200px) {
	.bg-nav-primary--eight .wp-block-navigation__container { column-gap: 10px; font-size: 17px; }
}