/*
 * Hearts of Gold — theme helper styles.
 * Global styling lives in theme.json; this file covers what block
 * attributes cannot express (form fields, small refinements).
 */

/*
 * Placement inquiry form (patterns/page-start-placement.php).
 * Front-end layout only — connect to a form plugin or custom
 * handler before launch.
 */
.hog-form {
	display: grid;
	gap: 1.375rem;
}

.hog-form__field {
	display: grid;
	gap: 0.4rem;
}

.hog-form label {
	color: #291044;
	font-size: 0.9375rem;
	font-weight: 600;
}

.hog-form input,
.hog-form textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: #291044;
	background: #ffffff;
	border: 1px solid rgba(41, 16, 68, 0.35);
	border-radius: 4px;
}

.hog-form textarea {
	min-height: 6.5rem;
	resize: vertical;
}

.hog-form input:focus,
.hog-form textarea:focus {
	border-color: #3d1766;
	outline: 2px solid #3d1766;
	outline-offset: 1px;
}

.hog-form button[type="submit"] {
	justify-self: start;
	border: none;
	cursor: pointer;
}

@media (max-width: 480px) {
	.hog-form button[type="submit"] {
		justify-self: stretch;
		width: 100%;
	}
}

/*
 * Responsive pass — phone (320/375/430), tablet (768/834/1024).
 * Core blocks handle most stacking (columns stack below 782px, flex
 * groups wrap); these rules cover only what block markup cannot.
 */

/* Nothing may force sideways scrolling on any screen. */
body {
	overflow-x: clip;
}

/* The site title renders as a heading; keep it header-scaled, not page-title-scaled. */
.wp-block-site-title {
	font-size: 1.375rem;
	line-height: 1.2;
}

/* Mobile menu open/close controls need full-size touch targets. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* Keep the opened mobile menu on brand — cream panel, purple text. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #f7f1e6;
	color: #291044;
}

/* Footer links get breathing room so they are easy to tap. */
footer .wp-block-navigation .wp-block-navigation-item__content {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}

/* Phones */
@media (max-width: 480px) {
	/* Smaller logo so logo + menu button fit at 320px. */
	.hog-header-logo img {
		width: 112px !important;
		height: auto !important;
	}

	/* Buttons stack full-width — cleaner layout, larger tap area. */
	.wp-block-buttons .wp-block-button,
	.wp-block-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* Section bands breathe less on small screens (spacers shrink with them). */
	:root,
	body {
		--wp--preset--spacing--60: 2.5rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 4rem;
	}
}

/* Phone + small tablet: the footer's fixed-width brand column goes full width. */
@media (max-width: 600px) {
	footer .alignwide > .wp-block-group {
		flex: 1 1 100%;
	}
}

/*
 * Motion — brand guide chapter 15: move like a calm guide.
 * Medium, modern, smooth: soft fades, gentle settles, quiet lifts.
 * Everything 250–500ms on one easing curve. No bounce, no spin,
 * no zoom, no parallax. Fully disabled for visitors who prefer
 * reduced motion (see the final media query).
 */

:root {
	--hog-ease: cubic-bezier(0.22, 1, 0.36, 1); /* settles, never overshoots */
}

/* Content rises softly and settles into place. */
@keyframes hog-settle {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Calm page arrival: a plain fade on main… */
@keyframes hog-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

main {
	animation: hog-fade 400ms ease-out both;
}

/* …while the hero settles line by line (front page: the hero band
   is the only group that sits first inside main). */
main > .wp-block-group:first-child > * {
	animation: hog-settle 480ms var(--hog-ease) both;
}

main > .wp-block-group:first-child > :nth-child(2) { animation-delay: 90ms; }
main > .wp-block-group:first-child > :nth-child(3) { animation-delay: 180ms; }
main > .wp-block-group:first-child > :nth-child(4) { animation-delay: 260ms; }
main > .wp-block-group:first-child > :nth-child(5) { animation-delay: 340ms; }
main > .wp-block-group:first-child > :nth-child(6) { animation-delay: 420ms; }

/* Clean scroll reveals, driven by main.js (IntersectionObserver adds
   .hog-in as sections enter the viewport). The hidden state exists
   ONLY under html.hog-js, which main.js sets after confirming motion
   is allowed — so with JS off or reduced motion on, nothing is hidden. */
html.hog-js .hog-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 480ms var(--hog-ease), transform 480ms var(--hog-ease);
}

html.hog-js .hog-reveal.hog-in {
	opacity: 1;
	transform: none;
}

/* Smooth hover and focus transitions on everything interactive. */
a,
.wp-element-button,
.wp-block-button__link,
.hog-form input,
.hog-form textarea {
	transition:
		color 250ms var(--hog-ease),
		background-color 250ms var(--hog-ease),
		border-color 250ms var(--hog-ease),
		box-shadow 300ms var(--hog-ease),
		transform 300ms var(--hog-ease);
}

/* Buttons lift quietly, with a controlled shadow. */
.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(41, 16, 68, 0.22);
}

.wp-element-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(41, 16, 68, 0.14);
	transition-duration: 150ms;
}

/* The gold-bordered cards lift slightly; the gold warms as they do. */
.wp-block-group.has-border-color {
	transition:
		box-shadow 300ms var(--hog-ease),
		border-color 300ms var(--hog-ease),
		transform 300ms var(--hog-ease);
}

.wp-block-group.has-border-color:hover {
	transform: translateY(-3px);
	border-color: #a67a24 !important; /* inline border color needs the override */
	box-shadow: 0 14px 32px rgba(41, 16, 68, 0.10);
}

/* Form focus: the purple ring breathes in around the field. */
.hog-form input:focus,
.hog-form textarea:focus {
	box-shadow: 0 0 0 4px rgba(61, 23, 102, 0.16);
}

/* Header and footer nav links: no default underline; on hover a clean
   underline draws in from the left. (Also settles the known nav
   underline-inheritance quirk noted at the last checkpoint.) */
.wp-block-navigation-item__content {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 300ms var(--hog-ease), color 250ms var(--hog-ease);
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible {
	background-size: 100% 1px;
}

/* Site title link fades softly instead of snapping. */
.wp-block-site-title a {
	transition: opacity 250ms var(--hog-ease);
}

.wp-block-site-title a:hover {
	opacity: 0.75;
}

/*
 * Design correction pass (July 6) — live-site feedback.
 * These are overrides on purpose: pages already created on WordPress
 * have pattern markup baked into their content, so color and layout
 * corrections must win from CSS, not from editing pattern files.
 */

/* 1. Reassurance lines: calm muted purple, never loud green.
   (Green stays in the palette as a rare future accent only.) */
p.has-rolex-green-color {
	color: var(--wp--preset--color--royal-purple) !important;
	opacity: 0.92;
}

/* 2. Gold system correction: every muted-gold accent site-wide
   (separators, hairlines, borders, eyebrows, the gold button) shifts
   from the original brand gold to a deeper bronze that cannot read
   as orange. #A9832D keeps AA contrast in every existing pairing. */
body {
	--wp--preset--color--muted-gold: #a9832d !important;
}

/* Process numerals 01/02/03: the deepest muted gold, seated with a
   whisper of shadow — metallic, never orange. */
p.has-muted-gold-color.has-heading-font-family.has-x-large-font-size {
	color: #9a6f22 !important;
	opacity: 0.9;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 1px rgba(41, 16, 68, 0.18);
}

/* Small gold eyebrow labels on the purple bands lift to a soft
   champagne so they stay clearly readable on deep purple. */
.has-deep-purple-background-color p.has-muted-gold-color.has-small-font-size,
.has-royal-purple-background-color p.has-muted-gold-color.has-small-font-size {
	color: #c9a24b !important;
}

/* 3. Buttons: equal height, intentional spacing; primary carries
   quiet depth, secondary reads refined. */
.wp-block-buttons {
	gap: 0.875rem 1rem;
}

.wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background-image: linear-gradient(150deg, #3d1766 0%, #291044 70%);
	box-shadow: 0 4px 14px rgba(41, 16, 68, 0.16);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
	background-image: linear-gradient(150deg, #4a1f7e 0%, #3d1766 70%);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1.5px;
	border-color: rgba(41, 16, 68, 0.4);
	background-color: rgba(255, 255, 255, 0.45);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #291044;
	background-color: rgba(41, 16, 68, 0.06);
	color: #291044;
}

/* 4–5. Floating header: sticky, translucent cream, soft blur,
   shadow only after scrolling (body.hog-scrolled set by main.js). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 90;
}

body.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

header.wp-block-template-part > .wp-block-group {
	background-color: rgba(247, 241, 230, 0.85) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	backdrop-filter: blur(12px) saturate(1.1);
	border-bottom: 1px solid rgba(169, 131, 45, 0.18);
	transition: box-shadow 350ms var(--hog-ease), background-color 350ms var(--hog-ease);
}

body.hog-scrolled header.wp-block-template-part > .wp-block-group {
	background-color: rgba(247, 241, 230, 0.93) !important;
	box-shadow: 0 10px 30px rgba(41, 16, 68, 0.08);
}

/* Header logo: wordmark carries the name — sized, never huge. */
.hog-header-logo {
	display: inline-flex;
	align-items: center;
}

.hog-header-logo img {
	width: 150px;
	height: auto;
	display: block;
}

/* 6. Navigation as smooth page controls: roomy, steady, with the
   drawn underline gliding in; the current page keeps its underline. */
.wp-block-navigation-item__content {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}

.wp-block-navigation-item__content[aria-current="page"],
.current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 1px;
}

/* 7. Seamless page transitions (paired with assets/js/main.js).
   Only main fades — the sticky header holds still, so moving
   between pages feels like one continuous site. */
main {
	transition: opacity 320ms var(--hog-ease), transform 320ms var(--hog-ease);
}

html.hog-page-exit main {
	opacity: 0;
	transform: translateY(12px);
}

/* 8–9. Premium backdrop: warm cream with the softest purple and
   gold washes, drifting almost imperceptibly. Purple bands sit on
   top of it; reduced-motion stops the drift via the global switch. */
body {
	isolation: isolate;
	background-color: #f7f1e6;
	background-image: linear-gradient(180deg, #fdf9f1 0%, #f7f1e6 30%, #f1e8d6 100%);
}

body::before {
	content: "";
	position: fixed;
	inset: -12%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 45% at 82% 4%, rgba(61, 23, 102, 0.10), transparent 70%),
		radial-gradient(50% 42% at 6% 38%, rgba(169, 131, 45, 0.12), transparent 70%),
		radial-gradient(60% 50% at 55% 108%, rgba(41, 16, 68, 0.08), transparent 72%);
	animation: hog-ambient 26s ease-in-out infinite alternate;
}

/* Photo warmth system: premium image-ready areas. In WordPress these
   are plain Group blocks — replace each with an Image block when the
   real warm family photos are ready. */
.hog-photo-placeholder {
	aspect-ratio: 3 / 2;
	display: grid;
	place-items: center;
	border-radius: 12px;
	border: 1px solid rgba(154, 111, 34, 0.28);
	background:
		radial-gradient(80% 100% at 18% 0%, rgba(61, 23, 102, 0.07), transparent 60%),
		radial-gradient(90% 90% at 85% 100%, rgba(169, 131, 45, 0.14), transparent 65%),
		linear-gradient(160deg, #fbf6ec, #f0e7d5);
	overflow: hidden;
}

.hog-photo-placeholder p {
	color: rgba(41, 16, 68, 0.55);
	margin: 0;
	padding: 1rem;
}

.hog-photo-placeholder--wide {
	aspect-ratio: 5 / 2;
}

.hog-photo-placeholder--portrait {
	aspect-ratio: 4 / 5;
}

@media (max-width: 600px) {
	.hog-photo-placeholder--wide {
		aspect-ratio: 3 / 2;
	}
}

@keyframes hog-ambient {
	from {
		transform: translate3d(-1.5%, -1%, 0) scale(1);
	}
	to {
		transform: translate3d(1.5%, 1.5%, 0) scale(1.04);
	}
}

/* 11. Care-process columns must sit fully inside the viewport —
   never clipped, never causing sideways scroll. */
main .wp-block-columns {
	min-width: 0;
}

.alignfull .wp-block-columns.alignwide {
	max-width: min(1200px, calc(100% - 2.5rem));
	margin-left: auto;
	margin-right: auto;
}

/* Respect reduced-motion: all movement off, content fully visible. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}

	.wp-element-button:hover,
	.wp-element-button:focus-visible,
	.wp-block-group.has-border-color:hover {
		transform: none;
	}

	body::before {
		animation: none;
	}

	html.hog-page-exit main {
		opacity: 1;
		transform: none;
	}
}