/**
 * Lambo's Puppy Palace — Base
 * ---------------------------------------------------------------------------
 * Reset, document defaults, typography, layout primitives, accessibility.
 */

/* ---------------------------------------------------------------------------
 * Self-hosted variable fonts.
 * font-display:swap keeps text visible during load (Core Web Vitals: no FOIT).
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	/* Latin + Latin-1 supplement only — keeps the file small. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dmsans-variable.woff2") format("woff2-variations");
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
	               U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links must not slide under the sticky header. */
	scroll-padding-top: calc(var(--lpp-header-h) + var(--lpp-space-24));
}

body {
	background-color: var(--lpp-bg);
	color: var(--lpp-text);
	font-family: var(--lpp-font-body);
	font-size: var(--lpp-text-md);
	font-weight: 400;
	line-height: var(--lpp-leading-normal);
	letter-spacing: var(--lpp-tracking-snug);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	min-height: 100vh;
}

/* Room for the mobile sticky action bar so it never covers the footer. */
@media (max-width: 900px) {
	body {
		padding-bottom: var(--lpp-mobilebar-h);
	}
}

img,
picture,
video,
svg,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lpp-font-display);
	font-weight: 600;
	line-height: var(--lpp-leading-tight);
	letter-spacing: var(--lpp-tracking-tight);
	color: var(--lpp-text);
	text-wrap: balance;
	/* Fraunces variable axes: slight optical size + softness for warmth. */
	font-variation-settings: "SOFT" 30, "WONK" 0;
}

h1 { font-size: var(--lpp-text-4xl); }
h2 { font-size: var(--lpp-text-3xl); }
h3 { font-size: var(--lpp-text-2xl); }
h4 { font-size: var(--lpp-text-xl); }
h5 { font-size: var(--lpp-text-lg); }
h6 {
	font-family: var(--lpp-font-body);
	font-size: var(--lpp-text-sm);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-caps);
	text-transform: uppercase;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--lpp-accent-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--lpp-dur-fast) var(--lpp-ease);
}

a:hover {
	color: var(--lpp-text);
}

strong, b {
	font-weight: 600;
}

/* Long-form editorial copy (About, policy pages, post content) */
.lpp-prose {
	max-width: var(--lpp-container-text);
	font-size: var(--lpp-text-md);
	line-height: var(--lpp-leading-loose);
	color: var(--lpp-text-muted);
}

.lpp-prose > * + * {
	margin-top: var(--lpp-space-20);
}

.lpp-prose h2 {
	margin-top: var(--lpp-space-48);
	font-size: var(--lpp-text-2xl);
	color: var(--lpp-text);
}

.lpp-prose h3 {
	margin-top: var(--lpp-space-40);
	font-size: var(--lpp-text-xl);
	color: var(--lpp-text);
}

.lpp-prose ul,
.lpp-prose ol {
	padding-left: var(--lpp-space-24);
}

.lpp-prose li + li {
	margin-top: var(--lpp-space-8);
}

.lpp-prose strong {
	color: var(--lpp-text);
}

/* ---------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------ */
.lpp-container {
	width: 100%;
	max-width: var(--lpp-container);
	margin-inline: auto;
	padding-inline: var(--lpp-gutter);
}

.lpp-container--wide {
	max-width: var(--lpp-container-wide);
}

.lpp-container--text {
	max-width: calc(var(--lpp-container-text) + var(--lpp-gutter) * 2);
}

.lpp-section {
	padding-block: var(--lpp-section-y);
}

.lpp-section--tight {
	padding-block: calc(var(--lpp-section-y) * 0.62);
}

.lpp-section--alt  { background-color: var(--lpp-bg-alt); }
.lpp-section--warm { background-color: var(--lpp-bg-warm); }
.lpp-section--white { background-color: var(--lpp-surface); }

/* Dark section — used sparingly, for the closing booking CTA. */
.lpp-section--dark {
	background-color: var(--lpp-brown);
	color: var(--lpp-text-invert);
}

.lpp-section--dark h1,
.lpp-section--dark h2,
.lpp-section--dark h3 {
	color: var(--lpp-cream);
}

.lpp-grid {
	display: grid;
	gap: var(--lpp-space-24);
}

/* Auto-fitting card grids. The min value is the card's comfortable minimum;
 * columns reflow with no media queries. */
.lpp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lpp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lpp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.lpp-stack > * + * { margin-top: var(--lpp-space-16); }
.lpp-stack-lg > * + * { margin-top: var(--lpp-space-32); }

/* ---------------------------------------------------------------------------
 * Section headings
 * ------------------------------------------------------------------------ */
.lpp-section-head {
	max-width: 46rem;
	margin-bottom: var(--lpp-space-48);
}

.lpp-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.lpp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lpp-space-8);
	margin-bottom: var(--lpp-space-16);
	font-family: var(--lpp-font-body);
	font-size: var(--lpp-text-xs);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-caps);
	text-transform: uppercase;
	color: var(--lpp-accent-deep);
}

.lpp-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background-color: var(--lpp-gold-soft);
}

.lpp-section-head--center .lpp-eyebrow::after {
	content: "";
	width: 22px;
	height: 1px;
	background-color: var(--lpp-gold-soft);
}

.lpp-section-head p {
	margin-top: var(--lpp-space-16);
	font-size: var(--lpp-text-lg);
	line-height: var(--lpp-leading-snug);
	color: var(--lpp-text-muted);
}

/* ---------------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------------ */

/* Visible, high-contrast focus ring on keyboard navigation only. */
:focus-visible {
	outline: 3px solid var(--lpp-focus);
	outline-offset: 3px;
	border-radius: var(--lpp-radius-sm);
}

/* Screen-reader-only text that becomes visible when focused (skip link). */
.lpp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lpp-skip-link {
	position: absolute;
	top: var(--lpp-space-8);
	left: var(--lpp-space-8);
	z-index: var(--lpp-z-toast);
	padding: var(--lpp-space-12) var(--lpp-space-20);
	background-color: var(--lpp-brown);
	color: var(--lpp-cream);
	font-size: var(--lpp-text-sm);
	font-weight: 600;
	border-radius: var(--lpp-radius-sm);
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform var(--lpp-dur) var(--lpp-ease-out);
}

.lpp-skip-link:focus {
	transform: translateY(0);
	color: var(--lpp-cream);
}

/* Honour the user's OS-level motion preference. Requirement #52. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Reveal animations must not leave content invisible. */
	[data-lpp-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Users who need more contrast get firmer borders and darker muted text. */
@media (prefers-contrast: more) {
	:root {
		--lpp-text-muted:  #4a3f37;
		--lpp-text-faint:  #5d5148;
		--lpp-border:      #b8ab99;
		--lpp-accent-deep: #6f5631;
	}
}

/* ---------------------------------------------------------------------------
 * Entrance animation. Applied by assets/js/app.js via IntersectionObserver;
 * the [hidden-until-revealed] state only ever applies when JS is present, so
 * content is never invisible with JS disabled.
 * ------------------------------------------------------------------------ */
.lpp-js [data-lpp-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--lpp-dur-slower) var(--lpp-ease-out),
		transform var(--lpp-dur-slower) var(--lpp-ease-out);
}

.lpp-js [data-lpp-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Stagger children of a revealed group. */
.lpp-js [data-lpp-reveal-group] > * {
	transition-delay: calc(var(--lpp-reveal-i, 0) * 70ms);
}

/* ---------------------------------------------------------------------------
 * Print — a customer printing the contact page should get something useful.
 * ------------------------------------------------------------------------ */
@media print {
	.lpp-header,
	.lpp-mobile-bar,
	.lpp-announce,
	.lpp-footer__social,
	.lpp-drawer {
		display: none !important;
	}

	body {
		padding-bottom: 0;
		background: #fff;
		color: #000;
	}
}