/* House of Seydamour — component styles.
   Tokens live in theme.json and arrive as --wp--preset--* custom properties.
   Brand: matte black, rose pink, ivory. Taken from the client's packaging and shoot. */

:root {
	--hos-hair: rgba(183, 155, 110, .30);
	--hos-hair-dark: rgba(20, 16, 14, .14);
}

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ---------- shared ---------- */
.hos-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	font-weight: 400;
}
.hos-lede { line-height: 1.85; color: var(--wp--preset--color--smoke); }
.hos-script {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--gold);
}

/* Outline button variant */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--hos-hair-dark);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--noir);
}

/* ---------- topbar + header ---------- */
.hos-topbar p {
	letter-spacing: .26em;
	text-transform: uppercase;
	margin: 0;
	padding-block: .9em;
	font-size: var(--wp--preset--font-size--eyebrow);
}
.hos-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(251, 249, 247, .84);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--hos-hair);
}
.hos-nav { min-height: clamp(84px, 8.5vw, 116px); }
.hos-brand,
.hos-brand a {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.1;
	font-weight: 400;
}
.hos-menu a {
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
	position: relative;
	padding-block: .4em;
	transition: color .35s ease;
}
.hos-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--rose);
	transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.hos-menu a:hover { color: var(--wp--preset--color--noir); }
.hos-menu a:hover::after { width: 100%; }

/* The header booking button is sized here rather than with inline block styles. Custom
   font sizes written into the block markup by hand fail Gutenberg's validator, which
   greets the client with a "block contains unexpected content" warning in the editor. */
.hos-header-cta { flex: 0 0 auto; }
.hos-header-cta .wp-block-button { margin: 0; }
.hos-header-cta .wp-block-button__link {
	font-size: .66rem;
	padding: 1em 1.9em;
	/* Without this the flex parent can squeeze the button until the label wraps to one
	   letter per line, which is exactly what happened on the first live build. */
	white-space: nowrap;
}

/* The nav and the booking button share a row. Let the nav shrink and wrap internally,
   never the button, and never the row. */
.hos-nav > .wp-block-group {
	flex-wrap: nowrap;
	min-width: 0;
}
.hos-menu { min-width: 0; }
.hos-menu .wp-block-navigation__container { flex-wrap: wrap; justify-content: flex-end; }

/* A long site name must not push the nav off the row. */
.hos-brand,
.hos-logo {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 46%;
}
.hos-logo .custom-logo-link { display: block; }
/* The mark is three stacked lines in a fine script, so it is sized by width rather than
   height. Capping the height instead makes the script too small to read. */
.hos-logo img {
	display: block;
	width: clamp(128px, 13vw, 186px);
	height: auto;
	max-width: 100%;
	object-fit: contain;
	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.hos-header.is-stuck .hos-logo img { width: clamp(104px, 10vw, 142px); }
.hos-footer .hos-logo img { width: clamp(150px, 16vw, 210px); }

@media (max-width: 1180px) {
	.hos-brand { font-size: 1rem; letter-spacing: .16em; }
	.hos-logo img { max-height: 48px; }
	.hos-menu a { font-size: .64rem; letter-spacing: .14em; }
	.hos-header-cta .wp-block-button__link { padding: .9em 1.4em; font-size: .6rem; }
}
@media (max-width: 999px) {
	.hos-brand, .hos-logo { max-width: 60%; }
	.hos-logo img { max-height: 42px; }
}

/* ---------- hero ---------- */
.hos-hero { position: relative; overflow: hidden; }
.hos-hero__figure img {
	width: 100%;
	/* The supplied portraits are 2:3, which is taller than the text column beside them.
	   Cropping to 4:5 keeps the two halves of the hero in balance at every width. */
	aspect-ratio: 4 / 5;
	max-height: 78svh;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 999px 999px 6px 6px;
}
.hos-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .8em;
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--hos-hair);
	border-radius: 999px;
	padding: 1em 1.7em;
	box-shadow: 0 18px 44px rgba(17, 17, 17, .08);
	font-size: .63rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--smoke);
}
.hos-stat strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 2.9vw, 2.7rem);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--noir);
}
.hos-stat span {
	font-size: .63rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
}

/* ---------- marquee ---------- */
.hos-marquee {
	background: var(--wp--preset--color--blush);
	overflow: hidden;
	padding: 1.1em 0;
	border-block: 1px solid rgba(183, 155, 110, .22);
	/* Break out of a constrained column. The pattern now ships inside an alignfull
	   wrapper, but pages published before that fix still carry the old markup, and
	   content already saved in the database does not update when a pattern changes.
	   This makes the strip full width either way. Safe because body clips overflow-x. */
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.alignfull > .hos-marquee {
	margin-inline: 0;
	width: auto;
	max-width: none;
}
.hos-marquee__track { display: flex; width: max-content; animation: hos-slide 46s linear infinite; }
.hos-marquee__track span {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(.95rem, 1.5vw, 1.25rem);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(44, 39, 36, .55);
	padding-inline: 1.8rem;
	white-space: nowrap;
}
.hos-marquee__track span::after {
	content: "·";
	margin-left: 3.6rem;
	color: var(--wp--preset--color--gold);
}
@keyframes hos-slide { to { transform: translateX(-50%); } }

/* ---------- cards ---------- */
.hos-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair);
	overflow: hidden;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
	height: 100%;
}
.hos-card:hover { transform: translateY(-7px); box-shadow: 0 26px 54px rgba(17, 17, 17, .1); }
.hos-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Text-led card. Carries the section on typography alone, so it never looks like a
   photograph is missing. Dropping an image block in at the top still works. */
.hos-card--text {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: clamp(2rem, 3.2vw, 2.8rem) clamp(1.6rem, 2.4vw, 2.2rem);
	position: relative;
	background: var(--wp--preset--color--ivory);
}
.hos-card--text::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.hos-card--text:hover::before { transform: scaleY(1); }
.hos-card__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 .3rem;
}
.hos-card--text h3 { margin: 0; }
.hos-card--text p { margin: 0; }
.hos-card--text .hos-card__from { margin-top: auto; }
.hos-card__from {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	color: var(--wp--preset--color--gold);
	padding-top: 1rem;
	border-top: 1px solid var(--hos-hair);
}

/* ---------- price list ---------- */
.hos-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hos-tab {
	font-family: var(--wp--preset--font-family--body);
	font-size: .65rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: .85em 1.7em;
	border-radius: 999px;
	border: 1px solid var(--hos-hair-dark);
	background: transparent;
	color: var(--wp--preset--color--smoke);
	cursor: pointer;
	transition: all .4s ease;
}
.hos-tab:hover { border-color: var(--wp--preset--color--rose); color: var(--wp--preset--color--noir); }
.hos-tab[aria-selected="true"] {
	background: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--ivory);
}
.hos-panel { display: none; max-width: 820px; margin-inline: auto; }
.hos-panel.is-active { display: block; animation: hos-fade .5s ease; }
@keyframes hos-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hos-price {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 1.05em 0;
	border-bottom: 1px solid var(--hos-hair);
}
.hos-price__name { font-size: .96rem; color: var(--wp--preset--color--charcoal); }
.hos-price__name small {
	display: block;
	font-size: .74rem;
	color: var(--wp--preset--color--mist);
	margin-top: .2em;
}
.hos-price__dots { flex: 1; border-bottom: 1px dotted var(--hos-hair); transform: translateY(-4px); }
.hos-price__amt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	color: var(--wp--preset--color--gold);
	white-space: nowrap;
}
.hos-panel__note {
	font-size: .78rem;
	color: var(--wp--preset--color--mist);
	margin-top: 1.8rem;
	line-height: 1.9;
	padding-left: 1rem;
	border-left: 1px solid var(--hos-hair);
}

/* Editable price rows. Each row is a normal paragraph, so the client can retype a
   price in the editor without touching markup. */
.hos-price-list p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1em 0;
	border-bottom: 1px solid var(--hos-hair);
}
.hos-price-list p:last-child { border-bottom: 0; }

/* ---------- accordions ---------- */
.hos-accordions .wp-block-details {
	border-bottom: 1px solid var(--hos-hair);
	padding: .5rem 0;
}
.hos-accordions .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	letter-spacing: .04em;
	padding: .9em 0;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
}
.hos-accordions .wp-block-details summary::-webkit-details-marker { display: none; }
.hos-accordions .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: .4rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	color: var(--wp--preset--color--gold);
	transition: transform .35s ease;
}
.hos-accordions .wp-block-details[open] summary::after { content: "−"; }

/* ---------- packages ---------- */
.hos-pkg {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hos-hair);
	text-align: center;
	padding: clamp(1.8rem, 3vw, 2.4rem);
	transition: transform .5s ease, border-color .5s ease;
	height: 100%;
}
.hos-pkg:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--rose); }
.hos-pkg__ml {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.7rem;
	line-height: 1;
	display: block;
	color: var(--wp--preset--color--noir);
}
.hos-pkg__cost {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.95rem;
	color: var(--wp--preset--color--gold);
	padding-top: 1.2rem;
	border-top: 1px solid var(--hos-hair);
}
.hos-pkg.is-feature { background: var(--wp--preset--color--noir); border-color: var(--wp--preset--color--noir); }
.hos-pkg.is-feature .hos-pkg__ml { color: var(--wp--preset--color--blush); }
.hos-pkg.is-feature p { color: var(--wp--preset--color--blush); }
.hos-pkg.is-feature .hos-pkg__cost { color: var(--wp--preset--color--rose); border-top-color: rgba(223, 160, 179, .3); }

/* ---------- academy / courses ---------- */
.hos-course {
	border: 1px solid var(--hos-hair);
	background: var(--wp--preset--color--white);
	padding: clamp(1.8rem, 3vw, 2.6rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.hos-course__was {
	text-decoration: line-through;
	color: var(--wp--preset--color--mist);
	font-size: .86rem;
	margin-right: .6em;
}
.hos-course__now {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	color: var(--wp--preset--color--gold);
}

/* Scroll reveal lives in animations.css, scoped behind the .hos-motion flag so that
   content is never hidden unless JavaScript is present to reveal it again. */

/* ---------- sticky mobile cta ---------- */
.hos-sticky {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 70;
	display: flex;
	gap: 8px;
	transform: translateY(150%);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.hos-sticky.is-visible { transform: none; }
.hos-sticky .wp-block-button__link { width: 100%; padding-inline: 1em; font-size: .66rem; box-shadow: 0 12px 30px rgba(17, 17, 17, .2); }
.hos-sticky .wp-block-button { flex: 1; }
@media (min-width: 1000px) { .hos-sticky { display: none; } }

/* ---------- footer ---------- */
.hos-foot-head {
	letter-spacing: .26em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
}
.hos-foot-bottom { border-top: 1px solid var(--hos-hair); }

@media (prefers-reduced-motion: reduce) {
	.hos-marquee__track { animation: none; }
	.hos-rv { opacity: 1; transform: none; }
	.hos-card:hover, .hos-pkg:hover { transform: none; }
}