/* ==========================================================================
   The Recyclers — shell: base, header, footer
   ========================================================================== */

/* Base -------------------------------------------------------------------- */

:root {
	--rcy-radius: 14px;
	--rcy-radius-lg: 20px;
	--rcy-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 6%);
	--rcy-shadow-lg: 0 20px 50px rgb(15 23 42 / 14%);
	--rcy-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
	--rcy-trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120' fill='%23166534'%3E%3Cpath d='M20 120 30 60 25 62 34 30 29 32 38 2 47 32 42 30 51 62 46 60 56 120Z M70 120 78 78 74 80 81 55 77 57 84 32 91 57 87 55 94 80 90 78 98 120Z M115 120 126 50 120 52 131 18 125 20 136 0 147 20 141 18 152 52 146 50 157 120Z M175 120 182 88 179 89 185 68 182 69 188 50 194 69 191 68 197 89 194 88 201 120Z M220 120 230 64 225 66 234 36 229 38 238 10 247 38 242 36 251 66 246 64 256 120Z M275 120 283 84 279 85 286 62 282 63 289 42 296 63 292 62 299 85 295 84 303 120Z M320 120 331 56 325 58 336 24 330 26 341 4 352 26 346 24 357 58 351 56 362 120Z M380 120 387 90 384 91 390 72 387 73 393 56 399 73 396 72 402 91 399 90 406 120Z M425 120 435 68 430 70 439 40 434 42 443 16 452 42 447 40 456 70 451 68 461 120Z'/%3E%3C/svg%3E");
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Top bar ----------------------------------------------------------------- */

.rcy-topbar {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 0.8125rem;
	font-weight: 500;
}

.rcy-topbar .rcy-topbar__inner {
	align-items: center;
	gap: 0.5rem 1.5rem;
	min-height: 2.25rem;
}

.rcy-topbar .rcy-topbar__group {
	align-items: center;
	gap: 0 1.25rem;
}

.rcy-topbar .rcy-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
}

.rcy-topbar .rcy-topbar__item::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--primary-tint);
	mask: var(--rcy-mask) center / contain no-repeat;
}

.rcy-topbar .rcy-topbar__item--hours::before { --rcy-mask: var(--rcy-icon-recycle); }
.rcy-topbar .rcy-topbar__item--phone::before { --rcy-mask: var(--rcy-icon-phone); width: 0.85em; }

.rcy-topbar .rcy-topbar__item--area {
	padding-inline-start: 1.25rem;
	border-inline-start: 1px solid rgb(255 255 255 / 25%);
	color: var(--wp--preset--color--primary-tint);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rcy-topbar .rcy-topbar__item--area::before {
	display: none;
}

.rcy-topbar a {
	color: inherit;
	text-decoration: none;
}

/* Main bar ---------------------------------------------------------------- */

.site-header {
	border-block-end: 0;
}

.site-header .rcy-header .site-header__inner {
	gap: 1.5rem;
	min-height: 5.25rem;
}

.site-header .site-logo__image {
	height: 62px;
	max-width: 260px;
}

/*
 * The header runs nearly edge to edge rather than in the 1,280px content
 * container: a 2.5rem gutter each side, top bar and main bar alike.
 */
.site-header .fwf-container {
	max-width: none;
	padding-inline: clamp(1rem, 2.6vw, 2.5rem);
}

.site-header nav.site-nav {
	margin-inline: auto;
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: clamp(0.875rem, 1.3vw, 1.75rem);
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.site-header .rcy-header__actions {
	flex: none;
	align-items: center;
	gap: 1.25rem;
}

.site-header .rcy-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	position: relative;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	white-space: nowrap;
}

.site-header .rcy-header__phone::before {
	content: "";
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--mint-strong);
}

.site-header .rcy-header__phone::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.675rem;
	width: 0.9rem;
	height: 0.9rem;
	translate: 0 -50%;
	background: var(--wp--preset--color--primary);
	mask: var(--rcy-icon-phone) center / contain no-repeat;
}

.site-header .rcy-header__phone a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-header .rcy-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	white-space: nowrap;
}

.site-header .rcy-header__cta .wp-block-button__link::after,
.wp-block-button.is-style-rcy-bright .wp-block-button__link::after,
.wp-block-button.is-style-rcy-arrow .wp-block-button__link::after,
.wp-block-button.is-style-rcy-blue .wp-block-button__link::after {
	content: "";
	width: 0.85em;
	height: 0.85em;
	background: currentcolor;
	mask: var(--rcy-icon-arrow-right) center / contain no-repeat;
}

/*
 * Logo, seven menu items and the button need about 1,300px. The header runs
 * nearly full width, so they fit from 1,400px up and the gaps open out on wider
 * screens. The phone number the comp put beside the button is left out; it is
 * in the top bar already. Below 1,400px the menu collapses into the drawer.
 */
.site-header .rcy-header__phone {
	display: none;
}

/*
 * The drawer takes over at 1,400px, not the parent's 900: below that the seven
 * menu items and the button do not fit beside the logo. Same two rules as the
 * parent's header.css, at the same specificity, over a wider range.
 */
@media (min-width: 600px) and (max-width: 1400px) {
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (max-width: 1400px) {
	.site-header .site-logo__image {
		height: 54px;
	}

	/* Button and menu toggle together at the right; the button would center
	   if both took an auto margin. */
	.site-header nav.site-nav {
		margin-inline: 0;
		order: 3;
	}

	.site-header .rcy-header__actions {
		margin-inline-start: auto;
	}
}

@media (max-width: 1100px) {
	.rcy-topbar .rcy-topbar__item--hours {
		display: none;
	}

	.rcy-topbar .rcy-topbar__inner {
		justify-content: center;
	}
}

/*
 * Phones: no top bar. Its phone number moves into the main bar, beside the
 * menu button — icon and number together are one tap-to-call target.
 */
@media (max-width: 767px) {
	.rcy-topbar {
		display: none;
	}

	.site-header .rcy-header__phone {
		display: inline-flex;
		font-size: 0.9375rem;
	}

	.site-header .rcy-header__phone a::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}

@media (max-width: 560px) {
	.site-header .rcy-header__cta {
		display: none;
	}

	.rcy-topbar .rcy-topbar__item--area {
		display: none;
	}
}

/* An underline draws in under the hovered and current item. */
.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	transition: color 0.25s ease;
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset: auto 0 1.1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	scale: 0 1;
	transform-origin: left;
	transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after {
	scale: 1 1;
}

/*
 * Dropdowns: wide enough that a page title stays on one line, each link with
 * its own padded hover background. The selectors repeat the parent's
 * (header.css) so these win on order; a shorter one loses to its zero padding.
 */
.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	gap: 0.15rem;
	min-width: 16rem;
	padding: 0.6rem;
	border-radius: 14px;
	box-shadow: var(--rcy-shadow-lg);
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 1.1rem;
	border-radius: 9px;
	font-size: 0.9375rem;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--primary);
}

/* Mobile menu -------------------------------------------------------------- */

.fwf-nav-overlay .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

/*
 * The drawer lists every page: each section's name is a link to its section
 * page, set as a heading, with that section's pages grouped beneath it — two
 * columns where there is room. Selectors repeat the parent's (header.css) so
 * these win on order.
 */
.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation__container > .wp-block-navigation-item {
	padding-block: 0.35rem 0.85rem;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation-item__content {
	padding-block: 0.6rem 0.4rem;
	border-block-end: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation__submenu-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-block-start: 0.15rem;
	padding: 0 0 0 0.9rem;
	border-inline-start: 2px solid var(--wp--preset--color--mint-strong);
}

.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.fwf-nav-overlay .fwf-nav-overlay__menu .current-menu-item > .wp-block-navigation-item__content,
.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

@media (min-width: 480px) {
	.fwf-nav-overlay .fwf-nav-overlay__menu .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
	}
}

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

.site-footer {
	position: relative;
	padding-block-start: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--contrast);
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 120px;
	background: var(--rcy-trees) repeat-x left bottom / auto 100%;
	opacity: 0.06;
	pointer-events: none;
}

.site-footer a {
	color: var(--wp--preset--color--contrast);
}

.site-footer .rcy-footer__top {
	position: relative;
	grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(170px, 1fr));
	padding-block-end: var(--wp--preset--spacing--50);
}

.site-footer .site-logo__image {
	max-width: 160px;
}

.site-footer .widget__title {
	margin-block-end: 0.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
}

.site-footer .site-footer__menu .wp-block-navigation__container {
	gap: 0.35rem;
}

.site-footer .site-footer__menu .wp-block-navigation-item__content {
	/* Tight lines; the parent's 24px minimum keeps each link tappable. */
	padding-block: 0.1rem;
	line-height: 1.4;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.site-footer .rcy-social {
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--30);
}

.site-footer .rcy-social .wp-social-link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.site-footer .rcy-contact-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.55rem;
	font-size: 0.9375rem;
}

.site-footer .rcy-contact-line::before {
	content: "";
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	background: currentcolor;
	mask: var(--rcy-mask) center / contain no-repeat;
}

.site-footer .rcy-contact-line--phone::before { --rcy-mask: var(--rcy-icon-phone); }
.site-footer .rcy-contact-line--email::before { --rcy-mask: var(--rcy-icon-envelope); }
.site-footer .rcy-contact-line--hours::before { --rcy-mask: var(--rcy-icon-clock); }
.site-footer .rcy-contact-line--region::before { --rcy-mask: var(--rcy-icon-location-dot); }

.site-footer .rcy-footer__bottom {
	position: relative;
}

.site-footer .rcy-footer__bottom .site-footer__bottom {
	padding-block: 1.5rem 2rem;
	border: 0;
	color: var(--wp--preset--color--contrast);
}

.site-footer .site-footer__legal .wp-block-navigation-item__content,
.site-footer .site-footer__menu .wp-block-navigation-item__content,
.site-footer .rcy-contact-line a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.25s ease;
}

.site-footer .site-footer__legal .wp-block-navigation-item__content:hover,
.site-footer .site-footer__menu .wp-block-navigation-item__content:hover,
.site-footer .rcy-contact-line a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

@media (max-width: 1100px) {
	.site-footer .rcy-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* A long address wraps rather than pushing the page sideways. */
.site-footer .rcy-contact-line a {
	overflow-wrap: anywhere;
}

@media (max-width: 560px) {
	.site-footer .rcy-footer__top {
		grid-template-columns: 1fr;
	}
}

/* The phone menu's button matches the header's: fully rounded. */
.fwf-nav-overlay .fwf-nav-overlay__cta .wp-block-button__link {
	border-radius: 999px;
}