/* Ported from the React site's src/index.css. Entrance/scroll animations
   use Elementor's own native Entrance Animation controls (set per-widget in
   setup/ds-setup.php) instead of custom JS/CSS — see README for why. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Playfair Display", ui-serif, Georgia, serif;
}

html {
	scroll-behavior: smooth;
}

/* Safety net: nothing on this page should ever need to scroll sideways.
   If a future edit (an absolutely-positioned element, a wide pasted image)
   pushes something past the edge, this contains it instead of letting the
   whole page gain a horizontal scrollbar. */
html, body {
	overflow-x: hidden;
}

/* Visible, on-brand keyboard focus — default browser outlines get lost
   against the cream/dark backgrounds here, and removing them entirely
   (as many pasted Elementor button styles do) breaks keyboard navigation. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid #d4af37;
	outline-offset: 2px;
}

/* Press feedback on every button-like element, matching the hover scale
   already on the hero/about/footer CTAs. */
.elementor-button:active,
#ds-mobile-toggle:active {
	transform: scale(0.97);
}

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #fdfbf7;
}
::-webkit-scrollbar-thumb {
	background: #d4af37;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #b8962e;
}

/* ---------- Hero: scroll parallax (replaces useScroll/useTransform) ----------
   The photo + cream wash are Elementor's own native section Background +
   Overlay settings (see setup/ds-setup.php) — full-bleed with no containment
   quirks, and editable from the normal Elementor Style panel. ds-app.js
   shifts #ds-hero's background-position-y on scroll for the parallax feel
   (Elementor Free has no native scroll-parallax effect, so this one piece
   is custom JS, per the "native first, custom only where Free can't" rule).
   `#ds-hero-copy` keeps the text column at the original's centered max-width. */
#ds-hero {
	overflow: hidden;
}
#ds-hero-copy {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---------- CTA button rows ----------
   A native inner-section's columns stack to 100% width below 768px by
   default. Keeping both buttons side-by-side at every width (matching the
   reference's flex-row-always layout) needs this override — Elementor Free
   has no "always inline" layout control for standard columns, so this is
   native elements + CSS, not a replacement for them. */
#ds-hero-cta > .elementor-container,
#ds-about-cta > .elementor-container {
	flex-wrap: wrap;
	justify-content: center;
}
#ds-hero-cta .elementor-column,
#ds-about-cta .elementor-column {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Service cards — hover lift + icon-circle color swap. (`_element_id` per
   card since Elementor's `_css_classes` control is widget-only, not
   available on columns — see setup/ds-setup.php.) */
[id^="ds-service-card-"] {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[id^="ds-service-card-"]:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
[id^="ds-service-card-"]:hover .ds-service-icon-wrap {
	transform: scale(1.1);
	background-color: #d4af37;
	color: #fff;
}
/* The reference uses a 3-tier grid (1 col mobile / 2 col tablet / 4 col
   desktop). Elementor's legacy column system only has one built-in
   breakpoint (stack to 100% below it, else the column's own set width —
   confirmed via its generated CSS), so there's no native way to get a
   distinct 2-up tablet tier out of a column sized 25%; this media query
   adds it. */
@media (min-width: 768px) and (max-width: 1024px) {
	[id^="ds-service-card-"] {
		width: 50% !important;
	}
}

/* ---------- About: floating "10+ Years" badge overlapping the image ----------
   `#ds-about-badge` is a native Inner Section (gold bg/padding/radius are
   its own Style-tab settings); Elementor Free has no "overlap the element
   above" positioning control, so the floating offset itself is custom CSS.
   No position:relative needed on the image column — Elementor's own
   .elementor-widget-wrap already is one. */
#ds-about-badge {
	/* width: Elementor's `.elementor-widget-wrap > .elementor-element
	   {width:100%}` still wins against this section's absolute positioning
	   (the containing-block width calc doesn't skip position:absolute just
	   because left/right aren't both set) and stretches it to the full
	   column width instead of hugging the "10+" content — same category of
	   fix as the service-icon circle above. */
	position: absolute !important;
	width: max-content !important;
	display: inline-flex !important;
	bottom: -1rem;
	right: -1rem;
	z-index: 20;
}
/* width:auto alone still let the inner 100%-wide column stretch the badge
   to ~280px on phones/tablets; max-content on every layer makes it hug
   "10+ / Years of Experience". */
#ds-about-badge > .elementor-container,
#ds-about-badge .elementor-column {
	width: max-content !important;
}
/* The badge is positioned against this wrapper, which by default stretches
   to the full column height — on tablet, where the text column is much
   taller than the photo, that dropped the badge far below the image.
   Shrinking the wrapper to the photo's own height anchors it to the photo. */
#ds-about-media > .elementor-widget-wrap {
	height: auto;
	align-self: center;
}
#ds-about-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
@media (min-width: 1025px) {
	#ds-about-badge { bottom: -2rem; right: -2rem; }
}

/* Phone + tablet: a compact badge that sits on the photo's bottom-right
   corner and only overhangs downward. The desktop badge (large type,
   overhanging right into the gutter) was ~285px wide here, wider than
   the photo column itself, and spilled onto the text next to/below it. */
@media (max-width: 1024px) {
	#ds-about-badge {
		bottom: -1.5rem;
		right: 1rem;
		padding: 0.9rem 1.2rem !important;
		border-radius: 0.85rem;
	}
	#ds-about-badge .elementor-widget-wrap {
		padding: 0 !important;
	}
	/* !important: Elementor's per-widget CSS (post-N.css) sets these sizes
	   with a more specific selector. */
	#ds-about-badge .elementor-widget-wrap > .elementor-element:first-child .elementor-heading-title {
		font-size: 1.85rem !important;
		line-height: 1.1;
	}
	#ds-about-badge .elementor-widget-wrap > .elementor-element:last-child .elementor-heading-title {
		font-size: 0.68rem !important;
		letter-spacing: 0.06em;
	}
}

/* Tablet: same side-by-side layout as desktop, rebalanced. The photo gets
   a bigger share of the width and the heading steps down a size, so the
   photo and text columns end up a similar height instead of a small photo
   floating beside a very tall block of text. */
@media (min-width: 768px) and (max-width: 1024px) {
	#about > .elementor-container > #ds-about-media {
		width: 45%;
		padding-right: 1.25rem;
	}
	#about > .elementor-container > .elementor-column:not(#ds-about-media) {
		width: 55%;
		padding-left: 1.25rem;
	}
	#about h3.elementor-heading-title {
		font-size: 2.25rem !important;
		line-height: 1.15;
	}
	#about .text-lg,
	#about .text-lg p {
		font-size: 1rem;
		line-height: 1.65;
	}
	/* Taller crop so the photo column matches the text column's height. */
	#ds-about-media img {
		aspect-ratio: 2 / 3;
	}
	/* Full-size buttons didn't fit side by side in the narrower text column
	   and wrapped into a centred stack under left-aligned text. */
	#ds-about-cta > .elementor-container {
		justify-content: flex-start;
	}
	#ds-about-cta .elementor-button {
		padding: 13px 22px !important;
		font-size: 16px !important;
	}
}

@media (max-width: 767px) {
	/* Columns stack: leave room under the photo for the badge's overhang
	   so it can't land on the "About D&S" eyebrow below. */
	#ds-about-media {
		margin-bottom: 2.5rem;
	}
	#ds-about-media img {
		aspect-ratio: 4 / 3.6;
	}
}