/**
 * RJ Northwest theme styles: base polish, header (pill navigation + mobile menu) and footer.
 * Design tokens live in theme.json; block styles live in the RJ Northwest Core plugin.
 */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wp-element-button,
.wp-block-button__link {
	transition: filter 0.15s ease, transform 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.92);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

@media (max-width: 599px) {
	.wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

.rj-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	min-height: clamp(64px, 6.5vw, 93px);
	padding: 0.5rem clamp(16px, 2vw, 28px);
	position: relative;
	z-index: 20;
}

.rj-header > * {
	margin-block: 0 !important;
}

.rj-header .wp-block-rjnw-logo {
	justify-self: start;
}

.rj-header__nav {
	justify-self: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(0.8125rem, 1.1vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rj-header__cta {
	justify-self: end;
	flex-wrap: nowrap;
}

.rj-header__cta .wp-block-button__link {
	padding: 0.7rem 1rem;
	font-size: clamp(0.8125rem, 1.1vw, 1rem);
	white-space: nowrap;
}

.rj-header__nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.rj-header__nav .wp-block-navigation-item__content:hover,
.rj-header__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* Desktop: menu inside an outlined pill, sub-pages in a dropdown card. */
@media (min-width: 1024px) {
	.rj-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		border: 1.5px solid var(--wp--preset--color--rule);
		border-radius: 999px;
		padding: 0.45rem clamp(1.5rem, 2.8vw, 2.6rem);
		gap: clamp(1.1rem, 3vw, 3.1rem);
	}

	.rj-header__nav .has-child .wp-block-navigation__submenu-container {
		top: calc(100% + 0.9rem);
		left: -1rem;
		min-width: 15rem !important;
		padding: 0.5rem !important;
		background: var(--wp--preset--color--cream) !important;
		color: var(--wp--preset--color--ink) !important;
		border: 1px solid var(--wp--preset--color--rule) !important;
		border-radius: 14px;
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	/* Invisible bridge so the dropdown stays open while the pointer travels to it. */
	.rj-header__nav .has-child .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		inset: -1rem 0 auto;
		height: 1rem;
	}

	.rj-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.6rem 0.85rem !important;
		border-radius: 8px;
	}

	.rj-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.rj-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: rgba(0, 0, 0, 0.06);
		text-decoration: none;
	}
}

/* Below 1024px: logo · Register · menu button. WordPress's own breakpoint is 600px, so extend it. */
@media (min-width: 600px) and (max-width: 1023px) {
	.rj-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

@media (max-width: 1023px) {
	.rj-header {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 0.5rem;
	}

	.rj-header__cta {
		order: 2;
	}

	.rj-header__nav {
		order: 3;
	}

	.rj-header__cta .wp-block-button__link {
		padding: 0.6rem 0.85rem;
		font-size: 0.75rem;
		min-height: 40px;
	}
}

@media (max-width: 479px) {
	.rj-header {
		gap: 0.375rem;
		padding-inline: 14px;
	}

	.rj-header .rj-logo__link {
		gap: 0.4rem;
	}

	.rj-header .rj-logo__mark {
		--rj-icon-size: 26px;
	}

	.rj-header .rj-logo__text {
		font-size: 0.9375rem;
	}

	.rj-header__cta .wp-block-button__link {
		padding: 0.55rem 0.7rem;
		font-size: 0.6875rem;
	}

	.rj-header__nav .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 359px) {
	.rj-header .rj-logo__text {
		display: none;
	}
}

/* Menu button */
.rj-header__nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 999px;
}

.rj-header__nav .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}

/* Full-screen menu (phones and tablets) */
.rj-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px var(--wp--custom--gutter) 48px;
	background: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}

.rj-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 16px;
	right: var(--wp--custom--gutter);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 999px;
}

.rj-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px !important;
	max-width: 36rem;
	margin-inline: auto;
	width: 100%;
	align-items: stretch !important;
}

.rj-header__nav .is-menu-open .wp-block-navigation__container {
	text-transform: none;
	gap: 0 !important;
	width: 100%;
	align-items: stretch !important;
}

.rj-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
	align-items: flex-start !important;
}

.rj-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.625rem, 6vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
}

.rj-header__nav .is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	padding: 0.4rem 0 0.2rem !important;
	gap: 0 !important;
}

.rj-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.45rem 0 !important;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

.rj-footer {
	padding: clamp(40px, 5vw, 64px) var(--wp--custom--gutter) clamp(16px, 2.4vw, 32px);
}

.rj-footer > * {
	margin-block: 0;
}

.rj-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 344px);
	gap: 40px clamp(32px, 6vw, 96px);
	align-items: start;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.rj-footer__top > * {
	margin-block: 0 !important;
}

.rj-footer__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	color: inherit;
}

.rj-footer .wp-block-rjnw-wordmark {
	margin-top: clamp(40px, 6vw, 72px);
}

.rj-footer__social {
	gap: 0.45rem !important;
	margin: 0;
}

.rj-footer__social .wp-social-link {
	color: var(--wp--preset--color--sage);
}

.rj-footer__social .wp-social-link a {
	padding: 0;
}

.rj-footer__social .wp-social-link svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 800px) and (max-width: 1199px) {
	.rj-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
		column-gap: 40px;
	}

	.rj-footer .rj-sitemap__cols {
		gap: 1.25rem 1.5rem;
	}
}

@media (max-width: 799px) {
	.rj-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.rj-footer__newsletter {
		order: -1;
		padding-bottom: 32px;
		border-bottom: 1px solid rgba(237, 229, 222, 0.25);
	}

	.rj-footer__social .wp-social-link a {
		padding: 6px;
		margin: -6px;
	}
}