/*
 * Dubuque Shops: styles theme.json can't express.
 * Tokens only (var(--wp--preset--*) / var(--wp--custom--*)); mobile-first.
 */

/* ------------------------------------------------------------------ *
 * Metric-matched fallbacks: text keeps its size and line breaks while
 * the web fonts load, so the swap doesn't shift the layout (CLS).
 * Measured in Chromium against the shipped WOFF2 files.
 * ------------------------------------------------------------------ */
@font-face {
	font-family: "Instrument Sans Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Roboto");
	size-adjust: 102.12%;
	ascent-override: 94.99%;
	descent-override: 24.48%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Caprasimo Fallback";
	src: local("Georgia Bold"), local("Georgia-Bold"), local("Times New Roman Bold");
	size-adjust: 99.46%;
	ascent-override: 92.3%;
	descent-override: 23.02%;
	line-gap-override: 0%;
}

/* ------------------------------------------------------------------ *
 * Layout variables
 * ------------------------------------------------------------------ */
:root {
	--ds-header-h: var(--wp--custom--header--height);
	--ds-seal: var(--wp--custom--header--seal);
	--ds-seal-top: var(--wp--custom--header--seal-top);
	--ds-overhang: calc(var(--ds-seal) + var(--ds-seal-top) - var(--ds-header-h));
	--ds-focus: var(--wp--preset--color--mississippi-teal);
	--ds-transition: var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

@media (min-width: 782px) {

	:root {
		--ds-header-h: var(--wp--custom--header--height-wide);
		--ds-seal: var(--wp--custom--header--seal-wide);
		--ds-seal-top: var(--wp--custom--header--seal-top-wide);
	}
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ds-focus);
	outline-offset: 2px;
}

/* Teal disappears on navy; switch the ring to Stone Highlight there. */
:where(.is-style-river, .has-river-navy-background-color, .ds-footer) {
	--ds-focus: var(--wp--preset--color--stone-highlight);
}

/* 44px minimum targets: 15px × 1.4 + 2 × 0.65em padding + 2 × 2px border. */
.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	min-block-size: 44px;
	transition:
		background-color var(--ds-transition),
		border-color var(--ds-transition),
		color var(--ds-transition);
}

/*
 * Caprasimo has no italic: emphasis inside headings is colour, not slant
 * (Bluff Forest on light backgrounds, Spring Green on navy).
 */
:where(h1, h2, h3, h4, h5, h6) :where(em, i) {
	color: var(--wp--preset--color--bluff-forest);
	font-style: normal;
}

:where(.is-style-river, .has-river-navy-background-color) :where(h1, h2, h3, h4, h5, h6) :where(em, i) {
	color: var(--wp--preset--color--spring-green);
}

/* Big text needs tighter leading than body copy. */
:where(.has-display-font-size, .has-xx-large-font-size, .has-x-large-font-size) {
	line-height: 1.15;
}

:where(.has-large-font-size) {
	line-height: 1.45;
}

::selection {
	background: var(--wp--preset--color--meadow-mist);
	color: var(--wp--preset--color--ink);
}

/* Utility: visible only from 480px. */
@media (max-width: 479px) {

	.ds-hide-narrow {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Forms
 * ------------------------------------------------------------------ */
input:not(
	[type="checkbox"],
	[type="radio"],
	[type="submit"],
	[type="button"],
	[type="reset"],
	[type="file"],
	[type="hidden"]
),
select,
textarea {
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: 44px;
	padding: 0.625em 0.875em;
	border: 1px solid var(--wp--preset--color--slate);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: max(1rem, 16px); /* no iOS zoom on focus */
}

textarea {
	min-block-size: 8em;
	line-height: 1.5;
}

input[type="checkbox"],
input[type="radio"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block: 0;
	margin-inline-start: 0;
	margin-inline-end: 0.5em;
	accent-color: var(--wp--preset--color--bluff-forest);
	vertical-align: -0.2em;
}

::placeholder {
	color: var(--wp--preset--color--slate);
	opacity: 1;
}

label,
legend {
	font-weight: 600;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Core Search block: one rounded field with the button inside it. */
.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--pill);
	padding-inline: 1.125em;
}

/* ------------------------------------------------------------------ *
 * Page frame: header bar + hanging seal
 * ------------------------------------------------------------------ */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.ds-header {
	position: relative;
	z-index: 20;
	border-block-end: 1px solid var(--wp--preset--color--sandbar);
}

.ds-header__bar {
	position: relative;
	min-block-size: var(--ds-header-h);
}

/* Editor: the HTML block's wrapper must not become the seal's anchor. */
.ds-header__bar > .wp-block-html {
	position: static;
}

.ds-seal-hang {
	position: absolute;
	inset-block-start: var(--ds-seal-top);
	inset-inline-start: 0;
	z-index: 1;
	inline-size: var(--ds-seal);
	border-radius: 50%;
	line-height: 0;
	filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent));
	transition: transform var(--ds-transition);
}

.ds-seal-hang:hover {
	transform: rotate(-4deg);
}

.ds-seal-hang:focus-visible {
	outline-offset: 4px;
}

.ds-seal-hang img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.ds-header__actions {
	gap: var(--wp--preset--spacing--20);
}

.ds-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	color: var(--wp--preset--color--river-navy);
}

.ds-header__search:hover {
	background-color: var(--wp--preset--color--limestone);
	color: var(--wp--preset--color--bluff-forest);
}

.ds-header__search svg {
	inline-size: 22px;
	block-size: 22px;
}

.ds-header .wp-block-button__link {
	white-space: nowrap;
}

/* Hamburger last on small screens: [search] [Get listed] [☰]. */
.ds-header__actions > .wp-block-navigation {
	order: 3;
}

.ds-nav .wp-block-navigation__responsive-container-open,
.ds-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	color: var(--wp--preset--color--river-navy);
}

.ds-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

.ds-nav .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
	align-items: flex-start;
}

.ds-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--caprasimo);
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * Core switches the Navigation block to its full menu at 600px, but the
 * header only has room for it from 960px. Keep the overlay toggle until then.
 */
@media (min-width: 600px) and (max-width: 959px) {

	.ds-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

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

@media (min-width: 960px) {

	.ds-header__actions {
		gap: var(--wp--preset--spacing--40);
	}

	.ds-header__actions > .wp-block-navigation {
		order: 0;
		margin-inline-end: var(--wp--preset--spacing--30);
	}
}

/*
 * Room for the seal's overhang. A first full-width section absorbs it inside
 * its own background; otherwise <main> takes it as top padding.
 */
.wp-site-blocks > main {
	padding-block-start: calc(var(--ds-overhang) + var(--wp--preset--spacing--50));
}

.wp-site-blocks > main:has(> .alignfull:first-child) {
	padding-block-start: 0;
}

.wp-site-blocks > main > .alignfull:first-child::before,
main > .wp-block-post-content > .ds-page-banner:first-child::before {
	content: "";
	display: block;
	block-size: var(--ds-overhang);
}

/* A page opening with a banner (patterns/page-*.php): the banner takes it. */
main > .wp-block-post-content:has(> .ds-page-banner:first-child)::before {
	display: none;
}

/* ------------------------------------------------------------------ *
 * River & bluff motifs
 * ------------------------------------------------------------------ */

/* Wave edges: the section's own colour, shaped by an SVG mask. */
.has-wave-top,
.has-wave-bottom {
	position: relative;
}

.has-wave-top::before,
.has-wave-bottom::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: var(--wp--custom--wave--height);
	background-color: inherit;
	pointer-events: none;
}

.has-wave-top::before {
	inset-block-end: calc(100% - 1px);
	mask: url(../svg/wave-top.svg) center bottom / 100% 100% no-repeat;
}

.has-wave-bottom::after {
	inset-block-start: calc(100% - 1px);
	mask: url(../svg/wave-bottom.svg) center top / 100% 100% no-repeat;
}

/* Topographic contour texture. */
.has-contours-light {
	background-image: url(../svg/contours-light.svg);
	background-position: center;
	background-size: cover;
}

.has-contours-dark {
	background-image: url(../svg/contours-dark.svg);
	background-position: center;
	background-size: cover;
}

/* Outline buttons on navy: white text and border. */
.is-style-river .is-style-outline > .wp-block-button__link,
.has-river-navy-background-color .is-style-outline > .wp-block-button__link {
	border-color: currentcolor;
	color: var(--wp--preset--color--white);
}

.is-style-river .is-style-outline > .wp-block-button__link:hover,
.has-river-navy-background-color .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--river-navy);
}

/* Small-caps eyebrow over headings. */
.is-style-river .is-style-eyebrow,
.has-river-navy-background-color .is-style-eyebrow {
	color: var(--wp--preset--color--stone-highlight);
}

/* ------------------------------------------------------------------ *
 * Cards
 * ------------------------------------------------------------------ */
.is-style-card {
	overflow: hidden;
	transition:
		box-shadow var(--ds-transition),
		transform var(--ds-transition);
}

.is-style-card :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.is-style-card :where(h2, h3, h4) a:hover {
	text-decoration: underline;
}

.is-style-card:has(a:hover) {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * Directory (netsmart-local-directory blocks): design tokens.
 * The no-photo hero panel is a shade deeper than the page so its wave
 * edge shows. --nsld-placeholder-image and --nsld-hero-mask hold url()s,
 * so functions.php prints them with absolute URLs.
 * ------------------------------------------------------------------ */
:root {
	--nsld-surface: var(--wp--preset--color--white);
	--nsld-surface-muted: var(--wp--preset--color--limestone);
	--nsld-border: var(--wp--preset--color--sandbar);
	--nsld-muted: var(--wp--preset--color--slate);
	--nsld-accent: var(--wp--preset--color--bluff-forest);
	--nsld-icon: var(--wp--preset--color--bluff-forest);
	--nsld-highlight: var(--wp--preset--color--meadow-mist);
	--nsld-eyebrow: var(--wp--preset--color--bluff-umber);
	--nsld-focus: var(--ds-focus);
	--nsld-radius: var(--wp--custom--radius--md);
	--nsld-radius-lg: var(--wp--custom--radius--lg);
	--nsld-shadow: var(--wp--preset--shadow--soft);
	--nsld-shadow-hover: var(--wp--preset--shadow--lifted);
	--nsld-transition: var(--ds-transition);
	--nsld-subheading-size: var(--wp--preset--font-size--large);
	--nsld-card-title-size: var(--wp--preset--font-size--large);
	--nsld-explore-card-title-size: var(--wp--preset--font-size--medium);
	--nsld-hero-placeholder-bg: color-mix(in srgb, var(--wp--preset--color--sandbar) 55%, var(--wp--preset--color--limestone));
	--nsld-page: var(--wp--preset--color--limestone);
	--nsld-explore-gutter: var(--wp--style--root--padding-left);

	/* Forms: Main Street Brick for errors (6.6:1 on white), Bluff Forest
	   for the "sent" panel's border. */
	--nsld-error: var(--wp--preset--color--main-street-brick);
	--nsld-success: var(--wp--preset--color--bluff-forest);
	--nsld-form-heading-size: var(--wp--preset--font-size--x-large);

	/* Map pins: Bluff Forest with a white centre; Spring Green outlined in
	   River Navy when hovered, focused or chosen. */
	--nsld-pin: var(--wp--preset--color--bluff-forest);
	--nsld-pin-center: var(--wp--preset--color--white);
	--nsld-pin-active: var(--wp--preset--color--spring-green);
	--nsld-pin-active-outline: var(--wp--preset--color--river-navy);
}

/* Caprasimo for the directory's h2/h3-level headings. */
:where(.nsld-card__title, .nsld-details__heading, .nsld-gallery__heading, .nsld-badges__heading, .nsld-owner__heading, .nsld-related__heading, .nsld-explore__sheet-title, .nsld-popup__title, .nsld-form__heading, .nsld-form__panel-title, .nsld-form__summary-title) {
	font-family: var(--wp--preset--font-family--caprasimo);
	font-weight: 400;
}

.nsld-related__heading {
	font-size: var(--wp--preset--font-size--x-large);
}

/* The map stylesheet loads after this one (with the map). */
.nsld-popup .nsld-popup__title {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
}

.nsld-term-intro__heading {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Primary button colours for the "Get directions" link. */
.nsld-button.wp-element-button:hover {
	border-color: var(--wp--preset--color--river-navy);
	background-color: var(--wp--preset--color--river-navy);
	color: var(--wp--preset--color--white);
}

/* The listing photo runs under the hanging seal (no overhang spacer). */
.wp-site-blocks > main > .wp-block-nsld-listing-hero:first-child::before {
	display: none;
}

/* Chips: category and neighborhood links under a listing's name. */
.wp-block-post-terms.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-post-terms.is-style-chips a {
	display: inline-flex;
	align-items: center;
	min-block-size: 32px;
	padding: 0.2em 0.9em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--meadow-mist);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wp-block-post-terms.is-style-chips.ds-chips-area a {
	background: var(--wp--preset--color--shallows);
}

.wp-block-post-terms.is-style-chips a:hover {
	text-decoration: underline;
}

.wp-block-post-terms.is-style-chips .wp-block-post-terms__separator {
	display: none;
}

/*
 * Listing page title area: the logo (when there is one) sits above the
 * title on small screens and to the right of the title and excerpt from
 * tablet width up.
 */
.ds-listing__header {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.ds-listing__header > * {
	margin-block: 0;
}

.ds-listing__header > .nsld-logo {
	justify-self: start;
}

@media (min-width: 782px) {

	.ds-listing__header:has(> .nsld-logo) {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--60);
		align-items: center;
	}

	.ds-listing__header > .nsld-logo {
		grid-row: 1;
		grid-column: 2;
	}

	.ds-listing__header > .ds-listing__intro {
		grid-row: 1;
		grid-column: 1;
	}
}

/*
 * Listing page: when a listing has no description, gallery or owner story
 * the main column renders empty. Drop it and lay the details card and map
 * out side by side instead.
 */
.ds-listing__main:not(:has(> *)) {
	display: none;
}

.ds-listing__main:not(:has(> *)) + .ds-listing__aside {
	display: grid;
	flex-basis: 100% !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.ds-listing__main:not(:has(> *)) + .ds-listing__aside > * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.ds-footer {
	margin-block-start: calc(var(--wp--custom--wave--height) + var(--wp--preset--spacing--60));
}

.ds-footer .ds-netsmart-logo img {
	inline-size: clamp(190px, 22vw, 240px);
	block-size: auto;
}

.ds-footer__lower {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
}

.ds-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-footer__links a {
	display: inline-block;
	padding-block: 0.6em;
}

.ds-footer__seal img {
	inline-size: 96px;
	block-size: auto;
}

/* Mobile: copyright and "made in" on their own centred lines. */
.ds-footer__copyright {
	align-self: stretch;
	text-align: center;
}

.ds-footer__copyright > span:not(.ds-footer__sep) {
	display: block;
}

.ds-footer__sep {
	display: none;
}

@media (min-width: 782px) {

	.ds-footer__copyright {
		align-self: auto;
		text-align: start;
	}

	.ds-footer__copyright > span:not(.ds-footer__sep) {
		display: inline;
	}

	.ds-footer__sep {
		display: inline;
	}
}

/* ------------------------------------------------------------------ *
 * Design QA swatches (private page)
 * ------------------------------------------------------------------ */
.ds-swatch {
	min-block-size: 96px;
	border: 1px solid var(--wp--preset--color--sandbar);
	border-radius: var(--wp--custom--radius--md);
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.ds-seal-hang:hover,
	.is-style-card:has(a:hover) {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Inner pages (patterns/page-*.php)
 * ------------------------------------------------------------------ */
.ds-about-seal {
	margin: 0;
	text-align: center;
}

.ds-about-seal img {
	inline-size: min(100%, 11rem);
	block-size: auto;
}

@media (min-width: 782px) {

	.ds-about-seal img {
		inline-size: min(100%, 16rem);
	}
}