/* WaterBank theme styles — layout details theme.json cannot express. */

/* ---------- Section title rows (heading + horizontal rule) ---------- */

.wb-title-row {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.wb-title-row .wb-rule {
	flex: 1 1 auto;
	margin: 0;
	border: none;
	border-top: 1px solid currentColor;
	height: 0;
	opacity: 1;
}

.wb-title-row h2 {
	margin: 0;
	white-space: nowrap;
}

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

.wb-header {
	position: relative;
	z-index: 20;
}

.wb-header .wp-block-navigation .wp-block-navigation-item a,
.wb-header .wp-block-navigation a {
	color: #fff !important;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.wb-header .wp-block-navigation a:hover,
.wb-header .wp-block-navigation a[aria-current="page"],
.wb-header .wp-block-navigation a.wb-current,
.wb-header .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.6em;
	text-decoration-thickness: 2px;
	text-decoration-color: #fff;
}

/* Kill root-level block gaps so the hero sits flush under the header. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks main > .entry-content {
	margin-block-start: 0;
}

/* Sections carry their own padding — no default gaps between top-level
   page sections (removes white strips under heroes). */
.entry-content > * {
	margin-block-start: 0;
}

/* Mobile overlay menu — cyan panel, large centered links (per Figma mobile menu) */
.wb-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primary);
}

.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	width: 100%;
}

.wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	justify-content: center;
	margin-bottom: 2.25rem;
}

.wb-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: 1.5rem;
	letter-spacing: 0.25em;
}

.wb-header .wp-block-navigation__responsive-container-open,
.wb-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* ---------- Heroes ---------- */

.wb-hero-home {
	min-height: clamp(430px, 65vw, 860px);
}

.wb-hero-home .wb-hero-logo img {
	width: clamp(280px, 41vw, 622px);
	height: auto;
}

.wb-hero-home .wb-hero-tagline {
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.65;
	/* Constrained layout forces margin auto on children; win with specificity. */
	margin-left: 42% !important;
	max-width: 580px;
}

.wb-hero-page {
	min-height: clamp(320px, 43vw, 650px);
}

.wb-hero-page h1 {
	font-weight: 400;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}

/* ---------- Service cards (cover blocks with bottom-left labels) ---------- */

.wb-services-grid .wb-service-card.wp-block-cover {
	height: 267px;
	min-height: 267px;
}

.wb-service-card .wp-block-cover__inner-container p,
.wb-service-card .wp-block-cover__inner-container a {
	color: #fff;
	font-size: 1.125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.wb-service-card a:hover {
	text-decoration: underline;
}

/* ---------- Homepage services grid (staggered, per Figma) ---------- */

.wb-services-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.wb-services-grid .wb-card-1 {
	grid-column: 1 / 6;
}

.wb-services-grid .wb-card-2 {
	grid-column: 6 / 11;
}

.wb-services-grid .wb-card-3 {
	grid-column: 3 / 8;
}

.wb-services-grid .wb-card-4 {
	grid-column: 8 / 13;
}

@media (max-width: 781px) {
	.wb-services-grid .wb-card-1,
	.wb-services-grid .wb-card-2,
	.wb-services-grid .wb-card-3,
	.wb-services-grid .wb-card-4 {
		grid-column: 1 / -1;
	}

	.wb-services-grid .wb-service-card.wp-block-cover {
		height: 220px;
		min-height: 220px;
	}
}

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

.wb-footer {
	font-size: 1.125rem;
}

.wb-footer a {
	color: #fff;
	text-decoration: underline;
}

.wb-footer .wb-footer-logo img {
	width: clamp(240px, 25vw, 378px);
	height: auto;
}

/* Contact form (Contact Form 7) — translucent fields on dark background */
.wb-footer .wpcf7 form p {
	margin: 0 0 1.25rem;
}

.wb-footer .wpcf7 input[type="text"],
.wb-footer .wpcf7 input[type="email"],
.wb-footer .wpcf7 textarea {
	width: 100%;
	max-width: 462px;
	background: rgba(217, 217, 217, 0.1);
	border: none;
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.04em;
	padding: 0.4rem 1rem;
}

.wb-footer .wpcf7 textarea {
	min-height: 144px;
	resize: vertical;
}

.wb-footer .wpcf7 input::placeholder,
.wb-footer .wpcf7 textarea::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.wb-footer .wpcf7 input[type="submit"] {
	background: rgba(217, 217, 217, 0.25);
	border: none;
	border-radius: 14px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	padding: 0.2rem 1.75rem;
}

.wb-footer .wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--primary);
}

.wb-footer .wpcf7-response-output {
	color: #fff;
	border-color: var(--wp--preset--color--primary);
	margin: 1rem 0 0;
}

/* ---------- Services page sub-nav band ---------- */

.wb-subnav {
	background: var(--wp--preset--color--primary);
}

.wb-subnav a {
	color: #fff;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.wb-subnav a:hover {
	text-decoration: underline;
}

/* ---------- Bio ribbons (About page "Who We Are") ---------- */

/* Ribbon runs from an inset left edge all the way to the viewport's right
   edge, whatever the screen width. Body uses overflow-x: clip so the 100vw
   math can't create a horizontal scrollbar. */
body {
	overflow-x: clip;
}

.entry-content .wp-block-group.wb-ribbon {
	background: var(--wp--preset--color--primary);
	border-radius: 45px 0 0 45px;
	color: #fff;
	padding: 1.5rem 2.5rem 1.5rem 4.5rem;
	/* Parent group is alignfull (viewport-wide). Start the ribbon at the
	   content edge + 61px and let it run to the viewport's right edge.
	   !important out-specifics the constrained layout's centering margins
	   and max-width. */
	max-width: none !important;
	margin-left: 3.8rem !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}

.wb-bio-body {
	padding-left: clamp(0px, 10vw, 163px);
}

.wb-ribbon h3 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.wb-ribbon p {
	color: #fff;
	font-size: 0.9375rem;
	margin: 0.25rem 0 0;
}

/* ---------- Clients page lists ---------- */

.wb-client-list hr.wb-client-rule {
	border: none;
	border-top: 2px solid var(--wp--preset--color--primary);
	margin: 0.75rem 0 1.5rem 0;
	width: 230px;
	max-width: 60%;
	opacity: 1;
}

.wb-client-list ul {
	list-style: none;
	padding-left: 0;
}

.wb-client-list li {
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
	padding-left: 1.25rem;
	position: relative;
}

.wb-client-list li::before {
	content: "•";
	position: absolute;
	left: 0;
}

/* ---------- Smooth scrolling for CONTACT anchor ---------- */

html {
	scroll-behavior: smooth;
}

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

@media (max-width: 781px) {
	.wb-title-row {
		gap: 1.5rem;
	}

	.wb-hero-home .wb-hero-tagline {
		font-size: 1rem;
		margin-left: 0 !important;
	}

	.entry-content .wp-block-group.wb-ribbon {
		border-radius: 30px 0 0 30px;
		margin-left: 0 !important;
		padding-left: 1.5rem;
	}

	.wb-bio-body {
		padding-left: 0;
	}
}