/*
 * Driftwood site-wide CSS: things Elementor has no control for (skip link, concept
 * bar, header overlay behaviour, reduced motion, ordered process lists).
 * Colors/fonts come from the Elementor kit globals (CSS variables).
 */

:root {
	--dwr-ocean: var(--e-global-color-primary, #0B3A4A);
	--dwr-seaglass: var(--e-global-color-secondary, #8FB9AA);
	--dwr-ink: var(--e-global-color-text, #1B1B1B);
	--dwr-terracotta: var(--e-global-color-accent, #C8674A);
	--dwr-sand: var(--e-global-color-dwrsand, #F4EFE8);
	--dwr-cta: var(--e-global-color-dwrcta, #AE5237);
	--dwr-cta-dark: var(--e-global-color-dwrctadark, #96462F);
	--dwr-line: var(--e-global-color-dwrline, #DDD4C7);
	--dwr-muted: var(--e-global-color-dwrmuted, #4F4A45);
	--dwr-radius: 14px;
	--dwr-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Skip link ---------- */
.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 100000;
	top: 8px;
	left: 8px;
	padding: 12px 18px;
	background: #fff;
	color: var(--dwr-ocean);
	font-weight: 700;
	border-radius: 999px;
	outline: 3px solid var(--dwr-terracotta);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}

/* ---------- Visible focus everywhere ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--dwr-terracotta);
	outline-offset: 3px;
}

.dwr-main:focus { outline: none; }

/* ---------- Concept bar (Demo mode) ---------- */
.dwr-concept {
	position: relative;
	z-index: 101;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 36px;
	padding: 6px 48px 6px 16px;
	background: var(--dwr-ink);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.dwr-concept__text { margin: 0; }
.dwr-concept a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.dwr-concept a:hover { color: var(--dwr-seaglass); }
html body .dwr-concept__close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
html body .dwr-concept__close:hover { background: rgba(255, 255, 255, .12); }
.dwr-concept-hidden .dwr-concept { display: none; }

/* ---------- Header overlay: the header container is absolutely positioned over the
   hero (set in the header template). Anchor it below the concept bar. ---------- */
.elementor-location-header { position: relative; z-index: 100; }
.elementor-location-header .elementor-sticky--effects { box-shadow: 0 8px 30px rgba(7, 40, 51, .18); }

/* Logged-in admin bar: keep the sticky header below it. */
.admin-bar .elementor-sticky--active { top: 32px !important; }
@media (max-width: 782px) {
	.admin-bar .elementor-sticky--active { top: 46px !important; }
}

/* ---------- Image hover zoom (add class dwr-zoom to an Image / Image Box widget) ---------- */
.dwr-zoom img,
.dwr-zoom .elementor-image-box-img { overflow: hidden; }
.dwr-zoom img { transition: transform .3s var(--dwr-ease); }
.dwr-zoom:hover img,
.dwr-zoom:focus-within img { transform: scale(1.04); }
.dwr-zoom .elementor-image-box-img { display: block; border-radius: var(--dwr-radius); }

/* ---------- Ordered process lists (Text Editor with <ol class="dwr-steps">) ---------- */
.dwr-steps {
	list-style: none;
	counter-reset: dwr-step;
	margin: 0;
	padding: 0;
}
.dwr-steps li {
	counter-increment: dwr-step;
	position: relative;
	padding: 0 0 22px 64px;
	margin: 0 0 22px;
	border-bottom: 1px solid var(--dwr-line);
}
.dwr-steps li:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.dwr-steps li::before {
	content: counter(dwr-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--e-global-typography-primary-font-family, "DM Serif Display"), Georgia, serif;
	font-size: 17px;
	color: var(--dwr-terracotta);
}
.dwr-steps strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1.1em;
	color: var(--dwr-ocean);
}
.dwr-band-dark .dwr-steps strong { color: #fff; }

/* ---------- Neighborhood tiles (Call to Action widgets with class dwr-hood):
   name always visible, details revealed on hover/focus, always shown on touch. ---------- */
.dwr-hood .elementor-cta { border-radius: var(--dwr-radius); }
.dwr-hood .elementor-cta__title.elementor-animated-item--enter-from-bottom,
.dwr-hood .elementor-cta__title {
	transform: none !important;
	opacity: 1 !important;
}
.dwr-hood .elementor-cta:focus-within .elementor-animated-item--enter-from-bottom {
	transform: translateY(0);
	opacity: 1;
}
@media (hover: none) {
	.dwr-hood .elementor-animated-content .elementor-animated-item--enter-from-bottom {
		transform: none;
		opacity: 1;
	}
	.dwr-hood .elementor-cta__bg-overlay { background-color: rgba(7, 40, 51, .55) !important; }
}

/* ---------- Testimonial carousel: keep quotes readable ---------- */
.elementor-testimonial__text { font-style: normal; }

/* ---------- Motion: subtle and short; none for reduced-motion users ---------- */
.elementor-element.animated { animation-duration: .3s !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.elementor-invisible { visibility: visible !important; }
}

/* Forms: Elementor's honeypot is display:none; keep long select labels from overflowing. */
.elementor-field-group .elementor-select-wrapper select { text-overflow: ellipsis; }
.elementor-field-subgroup .elementor-field-option label { cursor: pointer; }
html body .dwr-concept__close:focus { background: transparent; color: #fff; }

/* Checkbox / radio groups in Elementor forms: comfortable tap targets. */
.elementor-field-subgroup { gap: 8px 18px; }
.elementor-field-subgroup .elementor-field-option { display: inline-flex; align-items: center; margin: 0; }
.elementor-field-subgroup .elementor-field-option input { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--dwr-ocean); }
.elementor-field-subgroup .elementor-field-option label { padding: 4px 0; }

/* The tile image sits in an absolutely positioned sibling; give the box a dark base color too. */
.dwr-hood .elementor-cta { background-color: var(--dwr-ocean); }

/* Links inside running text are underlined (not distinguished by color alone). */
.elementor-widget-text-editor p a { text-decoration: underline; text-underline-offset: 2px; }