/* Source Direct — interactive enhancements (dropdowns, mobile menu, forms).
   Uses the brand CSS variables from styles.css. Kept separate so it never
   depends on Tailwind utility classes that may have been purged from the build. */

:root {
	--sd-panel-bg: #ffffff;
	--sd-panel-border: rgba(43, 37, 33, 0.12);
	--sd-panel-shadow: 0 18px 40px -12px rgba(25, 21, 18, 0.28);
}

/* ---------- Desktop dropdown menus ---------- */
.sd-nav-item { position: relative; }

.sd-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 248px;
	padding: 8px;
	background: var(--sd-panel-bg);
	border: 1px solid var(--sd-panel-border);
	border-radius: 14px;
	box-shadow: var(--sd-panel-shadow);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}
/* small hover bridge so the panel doesn't close in the gap */
.sd-dropdown::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}
.sd-nav-item:hover > .sd-dropdown,
.sd-nav-item:focus-within > .sd-dropdown,
.sd-nav-item.sd-open > .sd-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(4px);
}

.sd-dropdown a {
	display: block;
	padding: 9px 14px;
	border-radius: 9px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--brand-charcoal);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.sd-dropdown a:hover,
.sd-dropdown a:focus-visible {
	background: var(--brand-sand);
	color: var(--brand-brass);
}
.sd-dropdown a.sd-dd-lead {
	color: var(--brand-brass);
	font-weight: 600;
}
.sd-dropdown .sd-dd-divider {
	height: 1px;
	margin: 6px 8px;
	background: var(--sd-panel-border);
}

/* caret flips when open */
.sd-caret { display: inline-block; transition: transform 0.2s ease; }
.sd-nav-item:hover .sd-caret,
.sd-nav-item.sd-open .sd-caret { transform: rotate(180deg); }

/* ---------- Mobile menu ---------- */
.sd-mobile-menu {
	display: none;
	/* Fixed overlay so a long menu never balloons the sticky header past the
	   viewport; it fills the space under the header bar and scrolls internally. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: var(--sd-header-h, 112px);
	z-index: 40;
	border-top: 1px solid var(--sd-panel-border);
	background: var(--brand-cream);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: 24px;
}
.sd-mobile-menu.sd-open { display: block; }
/* Never let the mobile overlay show on desktop (e.g. after a resize while open). */
@media (min-width: 1024px) {
	.sd-mobile-menu.sd-open { display: none; }
}

.sd-mobile-menu .sd-m-section { border-bottom: 1px solid var(--sd-panel-border); }
.sd-mobile-menu a,
.sd-mobile-menu .sd-m-label {
	display: block;
	padding: 14px 24px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--brand-charcoal);
}
.sd-mobile-menu .sd-m-label {
	color: var(--brand-brass);
	font-weight: 600;
	padding-bottom: 4px;
}
.sd-mobile-menu .sd-m-sub a {
	padding: 8px 24px 8px 38px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: rgba(43, 37, 33, 0.75);
}
.sd-mobile-menu a:hover { color: var(--brand-brass); }
.sd-mobile-menu .sd-m-cta { padding: 18px 24px; }

/* hamburger -> X animation */
button[data-sd-toggle="mobile"].sd-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
button[data-sd-toggle="mobile"].sd-open span:nth-child(2) { opacity: 0; }
button[data-sd-toggle="mobile"].sd-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Logo sizing (scaled down a touch from the design defaults) ---------- */
.sd-logo-link img { height: 48px !important; width: auto !important; max-width: none; }  /* desktop/tablet (was ~56px) */
@media (max-width: 767px) {
	.sd-logo-link img { height: 34px !important; }  /* phones (was 40px) */
}

/* ---------- Hero legibility mask ---------- */
/* Uniform, mostly-transparent charcoal wash over the homepage hero image so the
   headline + body copy stay legible over the bright bathroom photo. Sits above the
   image/gradient, below the z-10 text. */
.sd-hero-mask { background-color: rgba(25, 21, 18, 0.35); }

/* ---------- Mobile header polish (phones) ---------- */
@media (max-width: 767px) {
	/* The standalone brass CTA is redundant on phones (it lives in the menu) and its
	   .btn-brass display:inline-flex was overriding Tailwind's `hidden` — force it off. */
	.sd-header-cta { display: none !important; }
	/* Drop the cramped search from the top utility bar on phones. */
	.sd-top-search { display: none !important; }
	/* Keep the logo crisp, correctly proportioned, and never squished by the flex row. */
	.sd-logo-link { flex: 0 0 auto; }
	/* Tighten the top bar so the remaining phone/contact/sign-in sit cleanly. */
	header .container-wide.py-2 { padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

/* ---------- Form feedback ---------- */
.sd-form-alert {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.sd-form-alert.sd-ok {
	background: rgba(190, 153, 70, 0.12);
	border: 1px solid var(--brand-brass);
	color: var(--brand-charcoal);
}
.sd-form-alert.sd-err {
	background: rgba(180, 40, 40, 0.08);
	border: 1px solid rgba(180, 40, 40, 0.4);
	color: #7a1f1f;
}

/* search results page */
.sd-search-result + .sd-search-result { margin-top: 8px; }

/* ---------- Legal pages (real policy text) ---------- */
.sd-legal ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.sd-legal ul li { margin-bottom: 0.35rem; }
.sd-legal strong { color: var(--brand-charcoal); font-weight: 600; }
.sd-legal h3 {
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 600;
	color: var(--brand-charcoal);
	margin-top: 1.5rem;
	margin-bottom: 0.25rem;
	font-size: 1.05rem;
}

/* ---------- Accordion (FAQ) ---------- */
.sd-accordion-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
.sd-accordion.sd-open .sd-accordion-panel { max-height: 720px; }
.sd-accordion .sd-accordion-icon { transition: transform 0.25s ease; }
.sd-accordion.sd-open .sd-accordion-icon { transform: rotate(45deg); }