/*
Theme Name: Waterside
Theme URI: https://watersidesolutions.com/
Author: Waterside Solutions
Description: Custom block theme for watersidesolutions.com. Design tokens live in theme.json; layout is built with core blocks and GenerateBlocks.
Version: 1.0.8
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: waterside
*/

/* Only what theme.json can't express. Keep this file small. */

/* Serif accent inside headings: <em> in an H1/H2 */
h1 em, h2 em {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--teal);
	letter-spacing: -0.045em;
}
h1, h2, h3 { text-wrap: balance; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--wp--custom--header-height) + 14px); }
body { -webkit-font-smoothing: antialiased; }

/* Dark header (the sticky wrapper rule is in the 1.0.4 block at the end) */
.site-header { border-bottom: 1px solid #36515b; }
.site-header .wp-block-site-logo img { width: 228px; height: auto; }
.site-header .wp-block-navigation-item__content:hover,
.site-header .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--sand); }
.site-header .wp-block-navigation__submenu-container {
	border-top: 2px solid var(--wp--preset--color--brass) !important;
	box-shadow: 0 14px 30px #142f3b26;
	min-width: 230px !important;
}
.site-header .wp-block-button__link { background: var(--wp--preset--color--brass-light); border-color: var(--wp--preset--color--brass-light); color: var(--wp--preset--color--ink); }
.site-header .wp-block-button__link:hover { background: var(--wp--preset--color--sand); border-color: var(--wp--preset--color--sand); }

/* Eyebrow text: apply via the "Eyebrow" paragraph block style */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

/* Outline button style */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: #78938d;
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

/* Arrow text link: "Text link" paragraph block style */
.is-style-text-link a {
	font-weight: 700;
	text-underline-offset: 7px;
	text-decoration-thickness: 1px;
	text-decoration-color: #91a9a1;
}

/* Card accent borders: group block styles */
.is-style-card-teal { border-top: 3px solid var(--wp--preset--color--teal); }
.is-style-card-ink { border-top: 3px solid var(--wp--preset--color--ink); }
.is-style-card-brass { border-top: 3px solid var(--wp--preset--color--brass); }
.is-style-rule-brass { border-left: 3px solid var(--wp--preset--color--brass); }

/* Grayscale client logos */
.is-style-logo-strip img { object-fit: contain; height: 63px; width: 100%; }

/* Footer labels are paragraphs, not headings */
.site-footer .footer-label { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--sand); }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 6px; }
.site-footer .footer-bottom { border-top: 1px solid #36515b; padding-top: 21px; margin-top: var(--wp--preset--spacing--50); color: var(--wp--preset--color--teal-light); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--sand); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Imported-page components ---- */
.ws-section__inner > .wp-block-heading,
.ws-section__inner > p:not(.is-style-eyebrow) { max-width: 820px; }
.ws-section__inner > * + * { margin-block-start: 24px; }
.ws-section__inner > .wp-block-columns,
.ws-section__inner > .wp-block-group { margin-block-start: var(--wp--preset--spacing--50); }
.ws-section__inner > :first-child { margin-block-start: 0; } /* 1.0.4: no extra top gap when a section opens with a group/columns */
.has-ink-background-color .is-style-eyebrow:not(.has-text-color) { color: var(--wp--preset--color--teal-light); }
.has-ink-background-color h1 em, .has-ink-background-color h2 em { color: var(--wp--preset--color--teal-light); }
.has-ink-background-color .is-style-text-link a { text-decoration-color: #79978e; }
.has-ink-background-color .is-style-text-link a:hover { color: var(--wp--preset--color--sand); }

.is-style-package { border: 1px solid #c6d2cc; border-top: 3px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius); }
.is-style-package-brass { border: 1px solid #c6d2cc; border-top: 3px solid var(--wp--preset--color--brass); border-radius: var(--wp--custom--radius); }
.is-style-rule-top { border-top: 1px solid var(--wp--preset--color--line); padding-top: 23px; }
.is-style-rule-top-dark { border-top: 1px solid #47616c; padding-top: 23px; }
.is-style-rule-top-brass { border-top: 2px solid var(--wp--preset--color--brass); padding-top: 25px; }

.is-style-route { border-top: 1px solid var(--wp--preset--color--line); padding-top: 16px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.is-style-route a { color: var(--wp--preset--color--ink); text-decoration: none; font-size: 1rem; }
.is-style-route a:hover { color: var(--wp--preset--color--teal); text-decoration: underline; text-underline-offset: 5px; }

.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 25px; margin-bottom: 13px; }
.is-style-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--wp--preset--color--teal); font-weight: 700; }

.wp-block-image.is-style-logo img { object-fit: contain; max-height: 100px; width: auto; margin-inline: auto; }

/* FAQ (core/details) */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-details:first-child, .wp-block-heading + .wp-block-details, p + .wp-block-details { border-top: 1px solid var(--wp--preset--color--line); }
.wp-block-details + .wp-block-details { border-top: 0; margin-block-start: 0; }
.wp-block-details summary { display: flex; justify-content: space-between; gap: 25px; padding: 23px 0; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--teal); transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { padding-right: 30px; }
.wp-block-details > :last-child { padding-bottom: 24px; }

/* Client logos in case-study cards (image block styles, so photos never inherit them) */
.wp-block-image.is-style-logo-tile img { background: #fff; padding: 12px 17px; width: 220px; height: 90px; object-fit: contain; }
.wp-block-image.is-style-logo-feature img { width: 100%; max-width: 340px; height: auto; }
.site-header .wp-block-button__link { white-space: nowrap; }

/* Gravity Forms: GF's own Orbital CSS stays on (accessibility, conditional logic, hidden fields).
   Brand colors/radius are passed through gform_default_styles in functions.php; only spacing here. */
.gform_confirmation_message { border-left: 3px solid var(--wp--preset--color--teal); padding: 16px 20px; background: var(--wp--preset--color--pale); }

/* ---- 1.0.4: spacing + divider parity with the static site ---- */

/* No blockGap between stacked full-width sections, or between the header/main/footer template parts */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block-start: 0; }

/* Sticky header: stick the template-part wrapper (.site-header has no room to stick inside it) */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) { position: sticky; top: 0; z-index: 20; }
.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 0; } }

/* Rule under a white hero when the next section is also white (wide width) */
.wp-block-post-content > .ws-section:first-child:not(.has-background) + .ws-section:not(.has-background) { position: relative; }
.wp-block-post-content > .ws-section:first-child:not(.has-background) + .ws-section:not(.has-background)::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(var(--wp--style--global--wide-size), calc(100% - var(--wp--style--root--padding-left, 24px) - var(--wp--style--root--padding-right, 24px)));
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Home hero: rule under the eyebrow / location row */
.home .wp-block-post-content > .ws-section:first-child > .ws-section__inner > .is-layout-flex:first-child {
	padding-bottom: 27px; border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Contact band (mist section): top rule; text column fills, button right-aligned */
.wp-block-post-content > .ws-section.has-mist-background-color { border-top: 1px solid #d5e0da; }
@media (min-width: 782px) {
	.ws-section.has-mist-background-color .wp-block-columns > .wp-block-column:first-child { flex: 1 1 0; }
	.ws-section.has-mist-background-color .wp-block-columns > .wp-block-column:last-child { flex: 0 0 280px; }
	.ws-section.has-mist-background-color .wp-block-columns > .wp-block-column:last-child .wp-block-buttons { justify-content: flex-end; }
}

/* Cards and price columns in grids: equal height, last link pinned to the bottom */
.is-layout-grid > [class*="is-style-card-"],
.is-layout-grid > .is-style-rule-top-brass { display: flex; flex-direction: column; }
.is-layout-grid > [class*="is-style-card-"] > :last-child,
.is-layout-grid > .is-style-rule-top-brass > :last-child { margin-top: auto; }
.is-layout-grid > [class*="is-style-card-"] > :nth-last-child(2),
.is-layout-grid > .is-style-rule-top-brass > :nth-last-child(2) { margin-bottom: 28px; }
/* Service cards: rule above the "Explore…" link */
.is-layout-grid > [class*="is-style-card-"] > p:last-child { padding-top: 23px; border-top: 1px solid var(--wp--preset--color--line); }

/* Package cards: rule above the checklist */
:is(.is-style-package, .is-style-package-brass) .is-style-checks { border-top: 1px solid var(--wp--preset--color--line); padding-top: 22px; }

/* Stacked case studies (Work page columns, home project groups): rule between them */
.ws-section__inner > .wp-block-columns + .wp-block-columns,
.ws-section__inner > [id^="project-"] + [id^="project-"] { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--wp--preset--color--line); }

/* Client-logo strip (pale, following another pale section): compact with a top rule */
.wp-block-post-content > .ws-section.has-pale-background-color + .ws-section.has-pale-background-color:has(.is-style-logo) { padding-block: 30px 32px !important; border-top: 1px solid var(--wp--preset--color--line); }

/* Logo grids: fixed-height logo box (fixes the zero-width SVG), centered captions */
.is-layout-grid > .wp-block-group:has(> .is-style-logo) { text-align: center; }
.is-layout-grid > .wp-block-group > .wp-block-image.is-style-logo { display: flex; align-items: center; justify-content: center; height: 80px; margin: 0 0 14px; }
.wp-block-column .is-layout-grid > .wp-block-group > .wp-block-image.is-style-logo { height: 63px; }
.is-layout-grid > .wp-block-group > .wp-block-image.is-style-logo img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.is-layout-grid > .wp-block-group:has(> .is-style-logo) > p { margin-top: 0; font-size: var(--wp--preset--font-size--small); }

/* Button arrows: gap between label and ↗ (span added in functions.php) */
.wp-block-button__link .ws-arrow { margin-left: 18px; font-weight: 400; }

/* 1.0.5: package buttons span the card, label left / arrow right (matches live .package .button) */
:is(.is-style-package, .is-style-package-brass) .wp-block-buttons > .wp-block-button { width: 100%; }
:is(.is-style-package, .is-style-package-brass) .wp-block-button__link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 25px; min-height: 54px; padding: 15px 18px; font-size: 0.875rem; text-align: left; }
:is(.is-style-package, .is-style-package-brass) .wp-block-button__link .ws-arrow { margin-left: 0; font-size: 1.2rem; }

/* 1.0.5: contact card email wraps cleanly instead of overflowing on narrow phones */
.ws-contact-email { overflow-wrap: anywhere; }
.ws-contact-email a { text-underline-offset: 5px; }

/* 1.0.7: header - inline nav at >=1024px, menu button below (overlayMenu "always" in parts/header.html).
   Logo and "Let's talk" stay visible at every width. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-buttons,
.site-header .wp-block-site-logo { flex-shrink: 0; }
@media (min-width: 1024px) {
	.site-header nav .wp-block-navigation__responsive-container-open { display: none; }
	.site-header nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block; width: 100%; position: relative; z-index: auto; background-color: inherit; color: inherit; }
	.site-header nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}
@media (max-width: 1023px) {
	.site-header nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--white); }
	.site-header nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}
@media (max-width: 479px) {
	.site-header .wp-block-site-logo { flex-shrink: 1; min-width: 0; }
	.site-header .wp-block-site-logo img { width: 100%; max-width: 228px; min-width: 132px; }
	.site-header > .wp-block-group, .site-header > .wp-block-group > .wp-block-group:last-child { gap: 14px; }
	.site-header .wp-block-button__link { padding: 8px 12px !important; font-size: 0.8125rem !important; }
	.site-header .wp-block-button__link .ws-arrow { display: none; }
}

/* 1.0.8: page titles. Wider cap than body copy on desktop (the old site used 1080px),
   smaller titles on phones (about 35px at 390px wide), and two-column heroes (home, contact) stack below 1024px. */
.ws-section__inner > h1.wp-block-heading { max-width: 1080px; }
@media (max-width: 1023px) {
	.ws-section__inner > .wp-block-columns:has(> .wp-block-column > h1) { flex-wrap: wrap !important; }
	.ws-section__inner > .wp-block-columns:has(> .wp-block-column > h1) > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 700px) {
	h1.wp-block-heading { font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.15; letter-spacing: -0.04em; }
	h1.wp-block-heading em { display: inline-block; text-wrap: balance; } /* balance the serif line on its own */
}