/**
 * Star Blessings — supplemental styles.
 *
 * theme.json owns colours, type scale, spacing and block defaults.
 * This file only covers what theme.json cannot express: the night-sky
 * decoration, card and link interactions, and the sticky header.
 */

/* ---------------------------------------------------------------------------
 * 1. Extended font subsets
 * theme.json registers the latin subset; latin-ext is added here so accented
 * characters keep the same face instead of falling back.
 * ------------------------------------------------------------------------- */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("../fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/garamond-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/garamond-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * 2. Foundations
 * ------------------------------------------------------------------------- */

:root {
	--sb-ease: 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
	--sb-radius-card: 20px;
	--sb-radius-frame: 26px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}

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

/* Visible focus that works on both the cream and the night backgrounds. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Core injects the block-theme skip link; this restyles it to match. */
.skip-link:focus {
	position: fixed;
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 3. Block styles registered in inc/setup.php
 * ------------------------------------------------------------------------- */

/* Eyebrow — the small tracked label above every section heading. */
.is-style-sb-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-block-end: 0.75rem;
}

/* Arrow link — "Book →" in the session cards. */
.is-style-sb-arrow-link a,
a.is-style-sb-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.32em;
	text-decoration-thickness: 1px;
	transition: gap var(--sb-ease), color var(--sb-ease);
}

.is-style-sb-arrow-link a::after,
a.is-style-sb-arrow-link::after {
	content: "\2192";
	text-decoration: none;
	transition: transform var(--sb-ease);
}

.is-style-sb-arrow-link a:hover::after,
a.is-style-sb-arrow-link:hover::after {
	transform: translateX(3px);
}

/* Outline button — the secondary "Explore services" / "My story" pill. */
.wp-block-button.is-style-sb-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-sb-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-sb-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* On the night-sky hero the outline button is gold on navy. */
.sb-section--night .wp-block-button.is-style-sb-outline > .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}

.sb-section--night .wp-block-button.is-style-sb-outline > .wp-block-button__link:hover,
.sb-section--night .wp-block-button.is-style-sb-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--night);
}

/* ---------------------------------------------------------------------------
 * 4. Header
 * ------------------------------------------------------------------------- */

.sb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	transition: box-shadow var(--sb-ease), background-color var(--sb-ease);
}

.sb-header.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--preset--color--border), 0 8px 24px -18px rgba(20, 36, 60, 0.5);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
}

.sb-header .wp-block-site-logo img,
.sb-header .custom-logo {
	width: 44px;
	height: 44px;
}

.sb-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35em;
	border-block-end: 1px solid transparent;
	transition: color var(--sb-ease), border-color var(--sb-ease);
}

.sb-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast);
}

.sb-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.sb-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	border-block-end-color: var(--wp--preset--color--accent);
}

/* The "Book now" pill sits with the nav but reads as a button. */
.sb-header .sb-header__cta .wp-block-button__link {
	padding: 0.95em 1.9em;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.sb-header .sb-header__cta {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Hero — night sky artwork
 *
 * The sky, stars and horizon arc are the exact artwork from the brand designs
 * (assets/images/hero-sky.png), cropped just above the "Universal love" label.
 * That label stays live text so it scales and remains readable on phones.
 * The image's lower rows fade to a flat navy that matches the section colour
 * below, so the seam is invisible.
 * ------------------------------------------------------------------------- */

.sb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Matches the flat colour the artwork settles into at its bottom edge. */
	background-color: #0C1A2B;
}

.sb-hero__art {
	margin: 0;
}

.sb-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	/* The artwork already carries its own edge fade; nothing to overlay. */
}

/*
 * On narrow screens the 2390px-wide artwork would shrink until the stars are
 * specks, so scale it up and crop the sides instead. The arc apex, the three
 * sparkles and the glow all sit near the centre, so a centre crop keeps the
 * composition intact.
 */
@media (max-width: 900px) {
	.sb-hero__art img {
		height: clamp(15rem, 46vw, 22rem);
		object-fit: cover;
		object-position: center bottom;
	}
}

/* Hero type sits on the night background. */
.sb-section--night,
.sb-section--night :where(h1, h2, h3, h4, h5, p, li, cite, figcaption) {
	color: var(--wp--preset--color--base);
}

.sb-section--night .is-style-sb-eyebrow,
.sb-section--night :where(h6) {
	color: var(--wp--preset--color--accent);
}

.sb-section--night :where(p):not(.is-style-sb-eyebrow) {
	color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}

/* ---------------------------------------------------------------------------
 * 6. Session cards
 * ------------------------------------------------------------------------- */

.sb-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 60%, transparent);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform var(--sb-ease), box-shadow var(--sb-ease), border-color var(--sb-ease);
}

.sb-card:hover,
.sb-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}

.sb-card__icon {
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--accent);
}

.sb-card__icon svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Push the price / book row to the bottom so uneven copy still lines up. */
.sb-card__meta {
	margin-block-start: auto;
	padding-block-start: 2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

.sb-card p {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * 7. About — portrait frame
 * ------------------------------------------------------------------------- */

.sb-photo-frame img,
.sb-photo-frame .wp-block-image img {
	border-radius: var(--sb-radius-frame);
	width: 100%;
	height: auto;
	object-fit: cover;
	/* Upright 7:8 crop, matching the portrait proportion in the design. */
	aspect-ratio: 7 / 8;
}

.sb-photo-frame.is-empty {
	display: grid;
	place-items: center;
	aspect-ratio: 7 / 8;
	border-radius: var(--sb-radius-frame);
	background-color: color-mix(in srgb, var(--wp--preset--color--border) 65%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	padding: 2rem;
}

/* ---------------------------------------------------------------------------
 * 8. Testimonial
 * ------------------------------------------------------------------------- */

.sb-quote .wp-block-quote,
.sb-quote blockquote {
	border: 0;
	padding: 0;
	/* Only the block margin is reset — the inline auto margins are what the
	   constrained layout uses to centre the quote, so they must survive. */
	margin-block: 0;
	margin-inline: auto;
}

.sb-quote cite,
.sb-quote .wp-block-quote cite {
	display: block;
	margin-block-start: 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sb-quote__mark {
	width: 26px;
	margin-inline: auto;
	color: var(--wp--preset--color--starlight);
}

.sb-quote__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 9. Footer
 * ------------------------------------------------------------------------- */

.sb-footer {
	background-color: var(--wp--preset--color--contrast);
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.sb-footer :where(p, li, a) {
	font-size: var(--wp--preset--font-size--small);
}

.sb-footer .wp-block-site-title a,
.sb-footer .wp-block-site-title {
	color: var(--wp--preset--color--base);
}

.sb-footer .wp-block-site-title a {
	padding-block: 0.15rem;
}

.sb-footer a {
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	text-decoration: none;
	/* Inline links only get a ~22px hit area from their font box; the padding
	   lifts every footer target past the 24px WCAG 2.2 minimum on touch. */
	display: inline-block;
	padding-block: 0.2rem;
}

.sb-footer a:hover,
.sb-footer a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ---------------------------------------------------------------------------
 * 10. Editorial defaults for posts and pages
 * ------------------------------------------------------------------------- */

.sb-prose :where(p, ul, ol) {
	color: var(--wp--preset--color--muted);
}

.sb-prose :where(h2, h3, h4) {
	margin-block-start: 2.5em;
}

.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * 11. Motion preferences
 * ------------------------------------------------------------------------- */

@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;
	}

	.sb-card:hover,
	.sb-card:focus-within {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 12. Hero lead
 * The intro paragraph holds a narrower measure than the headline so it breaks
 * across two balanced lines, as in the source design.
 * ------------------------------------------------------------------------- */

.sb-hero .sb-hero__lead {
	/* Scoped to .sb-hero so it outranks the constrained-layout rule that
	   WordPress emits on the section's direct children. */
	max-width: 760px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * 13. Contact form
 *
 * Scoped to the contact section so whichever form plugin is dropped in picks
 * up the brand without the theme restyling forms everywhere on the site.
 * ------------------------------------------------------------------------- */

.sb-contact .sb-form-slot {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	border-radius: var(--sb-radius-card);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sb-contact :where(label) {
	display: block;
	margin-block-end: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.sb-contact :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	input[type="number"],
	select,
	textarea
) {
	width: 100%;
	padding: 0.85em 1.1em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: border-color var(--sb-ease), box-shadow var(--sb-ease);
}

.sb-contact :where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}

.sb-contact :where(textarea) {
	min-height: 10rem;
	resize: vertical;
}

.sb-contact :where(input[type="submit"], button[type="submit"]) {
	width: auto;
	padding: 1.15em 2.1em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--sb-ease), color var(--sb-ease);
}

.sb-contact :where(input[type="submit"], button[type="submit"]):hover,
.sb-contact :where(input[type="submit"], button[type="submit"]):focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sb-contact .sb-contact__details :where(h3) {
	color: var(--wp--preset--color--contrast);
}

.sb-contact .sb-contact__lead {
	max-width: 760px;
	margin-inline: auto;
}