/* ==========================================================================
   Paw-Sitive Vibes: site-wide custom CSS
   Loaded after Divi. Keep page-specific styling in the Divi Builder.
   ========================================================================== */

/* Brand colors, available anywhere as var(--pv-yellow) etc. */
:root {
	--pv-yellow: #FFD447;
	--pv-ink: #2B2A33;
	--pv-teal: #1D6E7A;
	--pv-butter: #FFF1C2;
	--pv-cream: #FFFCF3;
	--pv-ink-card: #3A3944;
	--pv-footer: #1E1D24;
	--pv-border: #EFE6CF;
	--pv-muted: #5E5A52;
	--pv-star: #E9A21B;
}

/* Page background behind all sections */
body {
	background-color: var(--pv-cream);
}

/* Smooth scrolling for the #services / #about / #booking / #reviews / #contact links */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Leave room above a section when jumping to it, so a sticky header won't cover its title */
[id="services"],
[id="about"],
[id="booking"],
[id="reviews"],
[id="contact"] {
	scroll-margin-top: 90px;
}

/* Highlighted text */
::selection {
	background: var(--pv-yellow);
	color: var(--pv-ink);
}

/* Clear keyboard focus for links and buttons */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible {
	outline: 3px solid var(--pv-teal);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Gentle hover motion on buttons */
.et_pb_button {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.et_pb_button:hover {
	transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
	.et_pb_button,
	.et_pb_button:hover {
		transition: none;
		transform: none;
	}
}

/* Keep photos from overflowing their containers on small screens */
img {
	max-width: 100%;
	height: auto;
}