/*
 * Theme: Recrete
 * Description: Global styles for the Recrete theme based on dark mockup design.
 */

/* ===== CUSTOM PROPERTIES ===== */
:root {
	--recrete-orange: var(--wp--preset--color--amber);
	--recrete-orange-hover: var(--wp--preset--color--amber-hover);
	--recrete-dark: var(--wp--preset--color--black);
	--recrete-dark-card: var(--wp--preset--color--asphalt);
	--recrete-dark-surface: var(--wp--preset--color--dark-surface);
	--recrete-text-primary: var(--wp--preset--color--white);
	--recrete-text-secondary: var(--wp--preset--color--dust);
	--recrete-text-muted: var(--wp--preset--color--steel);
	--recrete-radius: 12px;
	--recrete-border-subtle: 1px solid rgba(255, 255, 255, 0.06);

	/* Amber alpha tokens */
	--recrete-amber-bg: color-mix(in srgb, var(--recrete-orange) 10%, transparent);
	--recrete-amber-border: color-mix(in srgb, var(--recrete-orange) 35%, transparent);
}

/* ===== LIGHT BACKGROUND OVERRIDES ===== */

/* When blocks sit inside a light-background container, flip the
   dark-theme custom properties so text, borders, and cards adapt. */
.has-white-background-color,
.has-limestone-background-color {
	--recrete-dark-card: var(--wp--preset--color--white);
	--recrete-dark-surface: #f0f0f0;
	--recrete-text-primary: var(--wp--preset--color--asphalt);
	--recrete-text-secondary: var(--wp--preset--color--steel);
	--recrete-text-muted: var(--wp--preset--color--dust);
	--recrete-border-subtle: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--asphalt);
}

/* Default heading and paragraph colors on light backgrounds —
   catches reusable blocks and any content without explicit textColor */
.has-white-background-color h1,
.has-white-background-color h2,
.has-white-background-color h3,
.has-white-background-color h4,
.has-limestone-background-color h1,
.has-limestone-background-color h2,
.has-limestone-background-color h3,
.has-limestone-background-color h4 {
	color: var(--wp--preset--color--asphalt);
}

.has-white-background-color p,
.has-white-background-color li,
.has-limestone-background-color p,
.has-limestone-background-color li {
	color: var(--wp--preset--color--steel);
}

/* Preserve explicit WP color classes — don't override amber labels etc. */
.has-white-background-color .has-amber-color,
.has-limestone-background-color .has-amber-color {
	color: var(--wp--preset--color--amber) !important;
}

.has-white-background-color .has-asphalt-color,
.has-limestone-background-color .has-asphalt-color {
	color: var(--wp--preset--color--asphalt) !important;
}

.has-white-background-color .has-steel-color,
.has-limestone-background-color .has-steel-color {
	color: var(--wp--preset--color--steel) !important;
}

/* Service cards on light backgrounds: use a subtle elevated card style */
.has-white-background-color .wp-block-re-crete-service-card,
.has-limestone-background-color .wp-block-re-crete-service-card {
	background: #fff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.has-white-background-color .wp-block-re-crete-service-card:hover,
.has-limestone-background-color .wp-block-re-crete-service-card:hover {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
	border-color: rgba(212, 137, 63, 0.3);
}

/* Portfolio gallery filter buttons on light backgrounds */
.has-white-background-color .recrete-gallery__filter-btn,
.has-limestone-background-color .recrete-gallery__filter-btn {
	border-color: rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--steel);
}

.has-white-background-color .recrete-gallery__tag-pill,
.has-limestone-background-color .recrete-gallery__tag-pill {
	border-color: rgba(0, 0, 0, 0.12);
	color: var(--wp--preset--color--steel);
}

/* Load more button on light backgrounds */
.has-white-background-color .recrete-gallery__load-more,
.has-limestone-background-color .recrete-gallery__load-more {
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--wp--preset--color--steel);
}

/* Remove default block margins between full-width sections to prevent
   body background bleeding through as gray spacers */
.wp-block-group.alignfull.has-white-background-color,
.wp-block-group.alignfull.has-limestone-background-color {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ===== GLOBAL RESET OVERRIDES ===== */
body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.2s;
}

/* Visible keyboard-focus indicator — none existed before (links fell
   through to the bare browser default), applies site-wide (content, nav,
   footer, buttons alike). */
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}

/* Content links on light backgrounds: the global amber link color
   (theme.json styles.elements.link) has good contrast on dark sections but
   reads too close to the steel body-text color here — darken it (same hue)
   for AA contrast against both white and limestone backgrounds. */
.has-white-background-color a:where(:not(.wp-element-button)),
.has-limestone-background-color a:where(:not(.wp-element-button)) {
	color: #8a5420;
}

.has-white-background-color a:where(:not(.wp-element-button)):hover,
.has-limestone-background-color a:where(:not(.wp-element-button)):hover {
	color: #6f4319;
}

img {
	max-width: 100%;
	display: block;
}

/* Spacer blocks: neutralise blockGap margin so only the
   inline height set in the editor is rendered. */
.wp-block-spacer {
	margin-block-start: 0 !important;
}

/* Remove double spacing between main content and footer (homepage only).
   The homepage footer isn't wrapped in a
   <footer class="wp-block-template-part"> like it is on other pages, so
   this targets the last top-level block regardless of tag. */
.home .wp-site-blocks > *:last-child {
	margin-block-start: 0;
}

/* ===== BUTTONS ===== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.65rem 1.5rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: all 0.25s;
	text-decoration: none;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--recrete-orange);
	color: var(--recrete-dark);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--recrete-orange-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(212, 137, 63, 0.3);
	color: var(--recrete-dark);
}

/* stylelint-disable no-descending-specificity -- .is-style-outline and
   :not(.is-style-outline) are mutually exclusive, so these can never
   apply to the same button; specificity order is a false-positive here. */
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--recrete-text-primary);
	border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.is-style-outline .wp-block-button__link:hover {
	border-color: var(--recrete-orange);
	color: var(--recrete-orange);
	background: transparent;
}
/* stylelint-enable no-descending-specificity */

/* Outline buttons on light backgrounds — intentionally more specific than
   the .is-style-outline rule above so it wins regardless of source order;
   placed after it for readability (general rule, then context override). */
/* stylelint-disable-next-line no-descending-specificity -- mutually
   exclusive with :not(.is-style-outline) above, same as the block before. */
.has-white-background-color .is-style-outline .wp-block-button__link,
/* stylelint-disable-next-line no-descending-specificity -- ditto */
.has-limestone-background-color .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--asphalt);
	border-color: rgba(0, 0, 0, 0.15);
}

/* ===== HEADER =====
   Rendered as <header class="wp-block-template-part">; rules below target
   that tag plus the native WP block classes/attributes present in the
   markup. */

/* IMPORTANT: backdrop-filter (or transform/filter/will-change) must NOT go
   directly on header.wp-block-template-part. The nav's mobile overlay
   dialog is a descendant of <header>, and any of those properties turn
   their element into the containing block for fixed-position descendants —
   collapsing the full-screen dialog down to the header's own ~70px height.
   The blur is applied via ::before instead so <header> itself stays
   filter-free. */

/* position: sticky (not fixed) so the header stays in normal document
   flow — the page reserves its own space for it, and it grows in place
   if the nav ever wraps to a second line, instead of needing hardcoded
   pixel offsets on the content below to avoid being hidden behind it. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1100;
	border-bottom: var(--recrete-border-subtle);
}

header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(17, 17, 17, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* The logo + nav row (the alignwide, space-between flex group nested inside
   the header's constrained wrapper). min-height (not height) so the row can
   grow if the nav wraps to a second line instead of clipping content. */
header.wp-block-template-part .is-content-justification-space-between {
	min-height: 72px;
}

header.wp-block-template-part .wp-block-site-logo {
	flex-shrink: 0;
}

header.wp-block-template-part .wp-block-site-logo img {
	max-height: 48px;
	width: auto;
	display: block;
}

header.wp-block-template-part nav[aria-label="Navigation"] {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
	padding-right: 1rem;
	padding-left: 1rem;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__container {
	gap: 1.5rem;
	justify-content: flex-end;
}

header.wp-block-template-part nav[aria-label="Navigation"] > .wp-block-navigation__container > .wp-block-navigation-item > a {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--recrete-text-secondary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.2s;
}

header.wp-block-template-part nav[aria-label="Navigation"] > .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
header.wp-block-template-part nav[aria-label="Navigation"] > .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > a {
	color: var(--wp--preset--color--amber);
}

/* Sub-menu dropdown — specificity must beat WP core's
   .wp-block-navigation:not(.has-background)
   .wp-block-navigation__submenu-container */
header.wp-block-template-part nav[aria-label="Navigation"] .has-child {
	position: relative;
}

header.wp-block-template-part nav[aria-label="Navigation"].wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--recrete-dark-surface);
	border: var(--recrete-border-subtle);
	border-radius: 0;
	padding: 0.35rem 0;
	list-style: none;
	margin: 0;
	color: var(--recrete-text-secondary);
	min-width: 210px;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__submenu-container .wp-block-navigation-item {
	position: relative;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.5rem 1.2rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--recrete-text-secondary);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-left: 2px solid transparent;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--recrete-text-primary);
	background: var(--recrete-amber-bg);
	border-left-color: var(--recrete-orange);
}

/* Tertiary (3rd-level) sub-menus — fly out to the right.
   This nav is items-justified-right, and WP core has its own higher-
   specificity rule, scoped to the same min-width:782px desktop breakpoint,
   that flips nested flyouts to the left instead
   (.items-justified-right ... .has-child .submenu-container
   .submenu-container{left:auto;right:100%}). The .items-justified-right
   class and the media query are repeated here purely to match (and, via
   the two extra element selectors below, exceed) that specificity — not
   because the selector needs them semantically — and to avoid this rule
   also matching (and leaking a solid background into) the mobile
   .is-menu-open stacked-list state, which isn't width-restricted. */
@media (min-width: 782px) {

	header.wp-block-template-part nav[aria-label="Navigation"].items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: -0.35rem;
		left: 100%;
		right: auto;
		margin-left: 2px;
		background: var(--recrete-dark-card);
	}
}

/* The mobile/overlay menu panel renders with a white background because
   the <nav> element itself has no .has-background class (only the inner
   responsive-container div does) — WP core's own navigation stylesheet has
   a literal `.wp-block-navigation:not(.has-background) ...is-menu-open
   {background-color:#fff}` fallback for exactly this case. It's a literal
   value (not a var()), so it must be overridden directly rather than by
   redefining a color custom property. */
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--recrete-dark-surface) !important;
	color: var(--recrete-text-primary) !important;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 1.5rem 0.85rem 2rem;
	width: 100%;
	box-sizing: border-box;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item > a,
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.95rem 1rem;
	font-size: 0.96rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--recrete-text-primary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item > a {
	text-align: left;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	visibility: visible !important;
	overflow: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-align: left;
	padding: 0.9rem 1rem 0.9rem 2rem;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	white-space: normal;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding-left: 1.5rem;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 2.5rem;
	font-size: 0.9rem;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > .wp-block-navigation-item__content,
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item:last-child > a {
	border-bottom: none;
}

/* stylelint-disable-next-line no-descending-specificity -- shares no
   properties with the earlier (desktop hover) rule it's compared against
   (layout props here vs. color there), so specificity order can't cause
   an override either way. */
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .has-child > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.95rem 1rem;
	text-align: left;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .has-child > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid currentcolor;
	margin-left: 0;
	vertical-align: middle;
	opacity: 0.8;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0.75rem 0;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	padding: 0.75rem 1rem;
}

header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: auto;
	max-width: 260px;
	margin: 0.75rem auto 0;
	text-align: center;
}

/* stylelint-disable no-descending-specificity -- this hover color rule
   shares no properties with either earlier rule it's compared against
   (border-bottom on the last-child rule; padding-left/font-size on the
   nested-submenu rule), so specificity order can't cause an override. */
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover,
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
header.wp-block-template-part nav[aria-label="Navigation"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:hover > a {
	color: var(--wp--preset--color--amber);
}
/* stylelint-enable no-descending-specificity */

/* Phone number: a plain nav menu item (href="tel:...") rather than a
   dedicated shortcode block, styled via the tel: link inside the nav. */
header.wp-block-template-part nav[aria-label="Navigation"] a[href^="tel:"] {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--wp--preset--color--dust);
	white-space: nowrap;
	padding-left: 1rem;
}

header.wp-block-template-part nav[aria-label="Navigation"] a[href^="tel:"]:hover {
	color: var(--wp--preset--color--amber);
}

header.wp-block-template-part nav[aria-label="Navigation"] a[href^="tel:"]::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	margin-right: 0.35rem;
	background-color: var(--wp--preset--color--amber);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.44 2 2 0 0 1 3.59 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.56a16 16 0 0 0 5.53 5.53l.96-.86a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.44 2 2 0 0 1 3.59 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.56a16 16 0 0 0 5.53 5.53l.96-.86a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

/* ===== HOMEPAGE SECTION SPACING ===== */

/* The page-no-title hero is a full cover image and should sit flush
   against the header, not offset by the standard content top margin that
   page-no-title.html applies to <main> as an inline style (hence
   !important */
.page-template-page-no-title main.wp-block-group {
	margin-top: 0 !important;
}

/* Section labels: amber paragraphs at the start of each section */
.home .has-amber-color.has-text-color {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0;
}

/* Tighten gap between section label and heading */
.home .has-amber-color.has-text-color + .wp-block-heading {
	margin-block-start: 0.5rem;
}

/* Tighten gap between heading and description */
.home .wp-block-heading + p:not(.has-amber-color):not(.has-text-align-center) {
	margin-block-start: 0.75rem;
}

/* Homepage sections: breathing room between content groups */
.home .wp-block-post-content > .wp-block-group:not(:first-child) {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* When two groups sit back-to-back (e.g. section heading + grid),
   collapse the inner padding so they read as one section. */
.home .wp-block-post-content > .wp-block-group:has(+ .wp-block-group) {
	padding-bottom: 0;
}

.home .wp-block-post-content > .wp-block-group + .wp-block-group {
	padding-top: 0;
}

/* CTA section: center text and add padding */
.home .wp-block-post-content > .wp-block-group:has(.is-content-justification-center) {
	text-align: center;
}

.home .wp-block-post-content > .wp-block-group:has(.is-content-justification-center) > p {
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
}


/* ===== FAQ ACCORDION ===== */

/* Plugin hardcodes the +/- icon color to #000 — invisible on dark bg. */
#rank-math-faq .rank-math-question::after {
	color: var(--recrete-orange, var(--wp--preset--color--amber));
}

/* ===== FOOTER =====
   On inner pages the footer is rendered as
   <footer class="wp-block-template-part">, so that's the anchor selector
   for the rules below. On the homepage specifically, the footer is a
   plain, unwrapped <div class="wp-block-group ..."> (last child of
   .wp-site-blocks, no <footer> tag, no wp-block-template-part class, and
   an extra "Rochester, NY and surrounding areas" line not present in the
   shared footer template part) — it's a content/editor divergence, not
   something CSS selectors can reliably target, so the rules below cover
   every page except the homepage. */
/* stylelint-disable no-descending-specificity -- every flagged pair below
   is this footer's selector vs. an earlier header.wp-block-template-part
   selector; an element can't be both a <header> and a <footer>, so they
   can never match the same element regardless of specificity order. */
footer.wp-block-template-part {
	background: var(--wp--preset--color--deep-black);
	border-top: var(--recrete-border-subtle);
}

footer.wp-block-template-part .wp-block-site-logo img {
	height: 40px;
	margin-bottom: 1.5rem;
}

footer.wp-block-template-part .wp-block-site-tagline {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--dust);
	opacity: 0.75;
}

footer.wp-block-template-part h4 {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--recrete-text-primary);
	margin-bottom: 1.25rem;
}

/* Footer nav columns: identified by their aria-label (set from the block's
   "Footer Column N Navigation" label) rather than a custom class. Each
   column is already vertical (native is-vertical class); right-align the
   link text to match the original design. */
footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation__container {
	align-items: flex-end;
}

footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dust);
	font-size: 0.88rem;
	text-align: right;
	text-decoration: none;
	transition: color 0.2s;
}

footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--amber);
}

/* Each footer column is its own Navigation block, so it can also collapse
   to its own overlay panel at narrow widths — same white-fallback issue as
   the header overlay above (core defaults to white when the <nav> itself
   has no .has-background class). */
footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--recrete-dark-surface) !important;
	color: var(--recrete-text-primary) !important;
}

/* Nested footer items (real multi-level menus, e.g. Residential Services'
   children): show as a plain static list instead of the header's
   hover-triggered flyout dropdown — footer columns aren't interactive.
   Specificity must beat WP core's default submenu-container rule, same
   as the header dropdown override above. */
footer.wp-block-template-part nav[aria-label^="Footer Column"].wp-block-navigation .wp-block-navigation__submenu-container {
	position: static;
	visibility: visible;
	opacity: 1;
	height: auto;
	display: block;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Core's .wp-block-navigation-item defaults to display:flex (a horizontal
   row), so a has-child item lays its <a> and its nested submenu <ul> out
   side by side instead of stacked — squeezing the submenu into whatever
   sliver of width is left next to the link text. Force block stacking for
   every item in a footer nav, top-level and nested. */
footer.wp-block-template-part nav[aria-label^="Footer Column"].wp-block-navigation .wp-block-navigation-item {
	display: block;
}

/* Core's own .has-child .submenu-container > .item > .item__content rule
   sets display:flex too (specificity 0,5,0) — match its selector structure
   to win. */
footer.wp-block-template-part nav[aria-label^="Footer Column"].wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding-right: 0.75rem;
	font-size: 0.8rem;
	opacity: 0.75;
}

/* Bottom copyright bar: the last space-between row inside the footer */
footer.wp-block-template-part .is-content-justification-space-between:last-child {
	padding-top: 2rem;
	border-top: var(--recrete-border-subtle);
	font-size: 0.8rem;
	color: var(--recrete-text-muted);
}
/* stylelint-enable no-descending-specificity */

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {

	/* Footer top row: logo/tagline block + the 3-column nav wrapper — stack
	   both the row itself and the nav-columns wrapper vertically. */
	footer.wp-block-template-part .is-content-justification-space-between:not(:last-child) {
		flex-direction: column;
		gap: 2rem;
	}

	footer.wp-block-template-part .is-content-justification-space-between:not(:last-child) > .is-nowrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation__container {
		align-items: flex-start;
	}

	footer.wp-block-template-part nav[aria-label^="Footer Column"] .wp-block-navigation-item__content {
		text-align: left;
	}
}