/*
 * Untangle theme styles.
 * Colors, fonts and sizes come from theme.json presets; this file handles
 * layout details and the block styles registered in functions.php.
 */

:root {
	--ut-ink: var(--wp--preset--color--ink);
	--ut-body: var(--wp--preset--color--body);
	--ut-muted: var(--wp--preset--color--muted);
	--ut-rule: var(--wp--preset--color--rule);
	--ut-gold: var(--wp--preset--color--gold);
	--ut-bronze: var(--wp--preset--color--bronze);
	--ut-harbor: var(--wp--preset--color--harbor);
	--ut-sand: var(--wp--preset--color--sand);
	--ut-stone: var(--wp--preset--color--stone);
	--ut-serif: var(--wp--preset--font-family--serif);
	--ut-sans: var(--wp--preset--font-family--sans);
	--ut-ease: cubic-bezier(.2, .7, .2, 1);
	--ut-section: var(--wp--preset--spacing--50);
}

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

::selection {
	background: var(--wp--preset--color--linen);
	color: var(--ut-ink);
}

/* Sections sit flush against each other; each one owns its spacing. */
body .wp-site-blocks > * + *,
.ut-main > * + * {
	margin-block-start: 0;
}

.ut-main > section:last-child:not(.has-background) {
	padding-bottom: var(--ut-section);
}

.ut-rule-top {
	border-top: 1px solid var(--ut-rule);
}

.ut-measure { max-width: 35rem; }
.ut-small { font-size: .9375rem; color: var(--ut-muted); }
.ut-mt { margin-top: 2rem !important; }

/* ------------------------------------------------------------ Header */

.ut-header {
	padding-block: 1.875rem;
	background: var(--ut-sand);
}

.ut-header__inner {
	gap: 2rem;
}

.ut-wordmark {
	margin: 0;
	font-size: 1.3125rem;
	line-height: 1;
	letter-spacing: .42em;
	color: var(--ut-ink);
	white-space: nowrap;
}

.ut-wordmark a {
	color: inherit;
	text-decoration: none;
}

.ut-nav .wp-block-navigation__container,
.ut-nav.wp-block-navigation {
	gap: 2.375rem;
}

.ut-nav .wp-block-navigation-item__content,
.ut-header__cta a,
.ut-footer-nav .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.ut-nav .wp-block-navigation-item__content {
	color: #3c3a36;
}

.ut-header__cta {
	margin: 0;
	font-size: .875rem;
	letter-spacing: .04em;
	font-weight: 400;
	white-space: nowrap;
}

.ut-header__cta a {
	color: var(--ut-harbor);
}

/* Underline that draws in on hover (nav, header CTA, footer links). */
.ut-nav .wp-block-navigation-item__content::after,
.ut-header__cta a::after,
.ut-footer-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width .35s ease;
}

.ut-nav .wp-block-navigation-item__content:hover::after,
.ut-nav .wp-block-navigation-item__content:focus-visible::after,
.ut-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ut-header__cta a:hover::after,
.ut-footer-nav .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* Mobile menu overlay */
.ut-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ut-sand);
	color: var(--ut-ink);
	padding: 2rem clamp(1.5rem, 5vw, 4rem);
}

.ut-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
}

/* The overlay lists items from the left, and adds the booking link. */
.ut-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.ut-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.ut-nav .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}

.ut-nav .wp-block-navigation-item.ut-nav__cta {
	display: none;
}

.ut-nav .is-menu-open .wp-block-navigation-item.ut-nav__cta {
	display: flex;
	margin-top: 1rem;
}

.ut-nav .is-menu-open .ut-nav__cta .wp-block-navigation-item__content {
	font-family: var(--ut-sans);
	font-size: 1rem;
	letter-spacing: .04em;
	color: var(--ut-harbor);
}

.ut-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--ut-serif);
	font-size: 2rem;
	letter-spacing: 0;
	color: var(--ut-ink);
}

@media (max-width: 1000px) {
	.ut-nav .wp-block-navigation__container,
	.ut-nav.wp-block-navigation { gap: 1.5rem; }
	.ut-wordmark { letter-spacing: .3em; font-size: 1.125rem; }
}

@media (max-width: 860px) {
	.ut-header__cta { display: none; }
}

/* ------------------------------------------------------------ Type styles */

.is-style-eyebrow {
	font-size: .8125rem;
	line-height: 1.4;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--ut-bronze);
}

.is-style-eyebrow + * {
	margin-block-start: 1.75rem;
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	max-width: 38rem;
}

* + .is-style-lead {
	margin-block-start: 1.875rem;
}

.is-style-pullquote {
	font-family: var(--ut-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.38;
	color: var(--ut-ink);
}

.is-style-pullquote + * {
	margin-block-start: 1.625rem;
}

.is-style-signature {
	font-size: .84375rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--ut-bronze);
}

.is-style-step {
	margin: 0;
	font-family: var(--ut-serif);
	font-style: italic;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ut-gold);
}

.ut-label {
	margin: 0;
	font-size: .9375rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.5;
	color: #5a5550;
}

.ut-label em {
	display: inline-block;
	margin-left: .5rem;
	font-family: var(--ut-serif);
	font-size: .875rem;
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 400;
	color: var(--ut-muted);
}

.ut-big {
	font-family: var(--ut-serif);
	font-size: clamp(1.375rem, 2.2vw, 1.625rem);
	line-height: 1.45;
	font-weight: 400;
	color: var(--ut-ink);
}

/* ------------------------------------------------------------ Buttons */

.wp-block-button .wp-block-button__link {
	transition: transform .35s var(--ut-ease), background-color .3s ease, color .3s ease;
}

.wp-block-button:not(.is-style-text-link) .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.is-style-text-link .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ut-ink);
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: transparent;
	color: var(--ut-ink);
}

.wp-block-button.is-style-text-link .wp-block-button__link::after {
	content: "→";
	transition: transform .35s ease;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

.wp-block-button.is-style-text-link .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width .35s ease;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover::before {
	width: 100%;
}

.ut-hero__actions {
	gap: 1.75rem;
	margin-block-start: 2.5rem !important;
	align-items: center;
}

/* ------------------------------------------------------------ Hero */

.ut-hero {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}

.wp-block-columns.ut-hero__cols {
	gap: 2.5rem;
}

.ut-hero .is-style-lead {
	max-width: 27rem;
}

.ut-hero__art {
	display: flex;
	justify-content: center;
	margin: 0;
}

.ut-hero__art img {
	width: min(430px, 100%);
	height: auto;
	animation: ut-floaty 7s ease-in-out infinite;
}

@keyframes ut-floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@media (max-width: 781px) {
	.ut-hero__art img { width: min(300px, 80%); }
}

/* ------------------------------------------------------------ Sections */

.ut-approach,
.ut-how,
.ut-founder,
.ut-services,
.ut-products,
.ut-cta,
.ut-booking,
.ut-faq,
.ut-principles,
.ut-note,
.ut-contact,
.ut-page-hero ~ .ut-rule-top {
	padding-block: var(--ut-section);
}

/* The approach section's top rule is inset to the content edge. */
.ut-approach {
	position: relative;
}

.ut-approach::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--wp--style--root--padding-left);
	right: var(--wp--style--root--padding-right);
	height: 1px;
	background: var(--ut-rule);
}

.ut-approach .is-style-eyebrow + .wp-block-columns,
.ut-principles .is-style-eyebrow + .wp-block-columns {
	margin-block-start: 3rem;
}

.wp-block-columns.ut-steps {
	gap: 3rem;
}

.ut-steps .is-style-step + * {
	margin-block-start: 1rem;
}

.ut-steps h3 + p {
	margin-block-start: .875rem;
}

.ut-steps p:not(.is-style-step) {
	font-size: .96875rem;
}

.wp-block-columns.ut-split {
	gap: clamp(2rem, 5vw, 3.5rem);
}

.ut-how__intro {
	max-width: 30rem;
	line-height: 1.75;
}

.ut-how__outro {
	font-size: .96875rem;
}

/* Lined list: serif rows separated by rope-colored rules. */
.wp-block-list.is-style-lined {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ut-rule);
}

.wp-block-list.is-style-lined li {
	margin: 0;
	padding: 1.125rem 0;
	border-top: 1px solid var(--ut-rule);
	font-family: var(--ut-serif);
	font-size: 1.375rem;
	line-height: 1.35;
	font-weight: 400;
	color: var(--ut-ink);
}

.wp-block-list.is-style-lined + * {
	margin-block-start: 1.625rem;
}

/* ------------------------------------------------------------ Products */

.ut-products .is-style-eyebrow + h2 {
	margin-block-start: .875rem;
}

.ut-products h2 {
	font-size: clamp(1.875rem, 3.4vw, 2.625rem);
}

.wp-block-columns.ut-product-grid {
	gap: 1.75rem;
	margin-block-start: 3.375rem;
}

.ut-products--page .wp-block-columns.ut-product-grid {
	margin-block-start: 0;
}

.ut-product {
	position: relative;
	transition: transform .5s var(--ut-ease);
}

.ut-product:hover {
	transform: translateY(-8px);
}

.ut-product__media.wp-block-group {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 280px;
	padding: 1.5rem;
	border-radius: 18px;
	overflow: hidden;
}

.ut-product__media .wp-block-image {
	margin: 0;
}

.ut-product__media img {
	width: 170px;
	height: auto;
	transition: transform .8s var(--ut-ease);
}

.ut-product:hover .ut-product__media img {
	transform: scale(1.04);
}

.ut-product h3 {
	margin-block-start: 1.375rem;
	font-weight: 600;
	font-size: 1.5625rem;
}

.ut-product h3 a {
	color: var(--ut-ink);
	text-decoration: none;
}

.ut-product h3 + p {
	margin-block-start: .375rem;
	font-size: .9375rem;
	color: var(--ut-muted);
}

.ut-product .wp-block-buttons {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------ Services list */

.ut-services h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.ut-services__head .is-style-text-link .wp-block-button__link {
	font-size: .875rem;
	color: var(--ut-harbor);
}

.ut-svc-list {
	margin-block-start: 1.5rem !important;
	border-bottom: 1px solid var(--ut-rule);
}

.ut-svc-list > * + * {
	margin-block-start: 0;
}

.ut-svc-row {
	position: relative;
	padding: 1.625rem 0;
	border-top: 1px solid var(--ut-rule);
	transition: padding-left .4s var(--ut-ease);
}

.ut-svc-row p {
	margin: 0;
}

.ut-svc-row__title {
	font-family: var(--ut-serif);
	font-size: 1.625rem;
	line-height: 1.25;
	font-weight: 400;
}

.ut-svc-row__title a {
	color: var(--ut-ink);
	text-decoration: none;
	transition: color .3s ease;
}

.ut-svc-row__desc {
	font-size: .9375rem;
	color: var(--ut-muted);
}

.ut-svc-row__desc::after {
	content: " →";
	color: var(--ut-harbor);
	opacity: 0;
	transition: opacity .3s ease;
}

.ut-svc-row:hover,
.ut-svc-row:focus-within {
	padding-left: 18px;
}

.ut-svc-row:hover .ut-svc-row__title a,
.ut-svc-row:focus-within .ut-svc-row__title a {
	color: var(--ut-harbor);
}

.ut-svc-row:hover .ut-svc-row__desc::after,
.ut-svc-row:focus-within .ut-svc-row__desc::after {
	opacity: 1;
}

/* Whole row / card is clickable on the front end (not in the editor). */
body:not(.editor-styles-wrapper) .ut-svc-row__title a::after,
body:not(.editor-styles-wrapper) .ut-product h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Booking: text column stays in view while the form scrolls on desktop. */
@media (min-width: 782px) {
	.ut-booking__cols > .wp-block-column:first-child {
		position: sticky;
		top: 2rem;
		align-self: flex-start;
	}
}

/* ------------------------------------------------------------ CTA, cards, FAQ */

.ut-cta .is-style-lead {
	margin-inline: auto;
	max-width: 34rem;
}

.ut-cta .wp-block-buttons {
	margin-block-start: 2rem;
}

.wp-block-group.is-style-card {
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.wp-block-group.is-style-card h3 {
	margin: 0;
}

.wp-block-group.is-style-card .wp-block-buttons {
	margin-block-start: 1.5rem;
}

.ut-contact-grid.wp-block-columns {
	gap: 1.75rem;
}

.ut-contact-grid .is-style-card {
	height: 100%;
}

.ut-faq .wp-block-details {
	margin: 0;
	padding: 1.25rem 0;
	border-top: 1px solid var(--ut-rule);
}

.ut-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--ut-rule);
}

.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--ut-serif);
	font-size: 1.375rem;
	line-height: 1.35;
	font-weight: 400;
	color: var(--ut-ink);
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: none;
	color: var(--ut-harbor);
	transition: transform .3s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details summary + * {
	margin-block-start: .75rem;
}

/* ------------------------------------------------------------ Inner pages */

.ut-page-hero {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}

.ut-page-hero h1 {
	font-size: clamp(2.5rem, 5.5vw, 4rem);
	line-height: 1.05;
	max-width: 18ch;
}

/* Constrained layouts center any child with a max-width; keep page intros
   left-aligned to the content edge instead. */
.ut-page-hero:not(.ut-article-head).is-layout-constrained > * {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

.ut-page-hero + .ut-products--page,
.ut-page-hero + .ut-contact {
	padding-top: 0;
}

.ut-page-hero .wp-block-post-content > :first-child {
	margin-block-start: 1.875rem;
}

.ut-prose-wrap {
	padding-bottom: var(--ut-section);
}

.ut-prose {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.ut-prose > h2 { margin-block-start: 2.5em; font-size: 2rem; }
.ut-prose > h3 { margin-block-start: 2em; }
.ut-prose img,
.ut-featured img { border-radius: 18px; }

.ut-prose a {
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

/* Journal list */
.ut-list-wrap {
	padding-bottom: var(--ut-section);
}

.ut-postlist .wp-block-post-template {
	border-bottom: 1px solid var(--ut-rule);
}

.ut-postrow {
	display: grid;
	grid-template-columns: 11rem 1fr;
	column-gap: 3rem;
	padding-block: 2rem;
	border-top: 1px solid var(--ut-rule);
}

.ut-postrow > * { margin: 0 !important; }
.ut-postrow .wp-block-post-date { grid-row: span 2; padding-top: .6rem; }

.ut-postrow .wp-block-post-title {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}

.ut-postrow .wp-block-post-title a {
	color: var(--ut-ink);
	text-decoration: none;
	transition: color .3s ease;
}

.ut-postrow .wp-block-post-title a:hover {
	color: var(--ut-harbor);
}

.ut-postrow .wp-block-post-excerpt {
	margin-top: .625rem !important;
	color: var(--ut-muted);
}

.ut-postrow .wp-block-post-excerpt__excerpt { margin: 0; }

@media (max-width: 700px) {
	.ut-postrow { grid-template-columns: 1fr; }
	.ut-postrow .wp-block-post-date { grid-row: auto; padding: 0 0 .5rem; }
}

.ut-pagination {
	margin-block-start: 2.5rem;
	font-size: .9375rem;
}

.ut-pagination a { color: var(--ut-ink); text-decoration: none; }
.ut-pagination .current { color: var(--ut-harbor); }

/* Single article */
.ut-article-meta {
	gap: 1rem;
	align-items: baseline;
}

.ut-article-cats a {
	font-size: .8125rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ut-muted);
	text-decoration: none;
}

.ut-article-head h1.ut-article-title {
	max-width: 720px;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.ut-article-meta + .ut-article-title {
	margin-block-start: 1.25rem;
}

.ut-article-media:has(.wp-block-post-featured-image) {
	padding-bottom: 3rem;
}

.ut-post-nav {
	padding-block: 2rem var(--ut-section);
}

.ut-post-nav > .wp-block-group {
	padding-top: 2rem;
	border-top: 1px solid var(--ut-rule);
}

.ut-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
}

.ut-post-nav a {
	font-family: var(--ut-serif);
	font-size: 1.25rem;
	color: var(--ut-ink);
	text-decoration: none;
}

/* Search */
.ut-search .wp-block-search__inside-wrapper {
	gap: .5rem;
	max-width: 32rem;
}

.ut-search .wp-block-search__input {
	padding: .85rem 1.25rem;
	border: 1px solid var(--ut-rule);
	border-radius: 40px;
	background: var(--wp--preset--color--paper);
	font: inherit;
	color: var(--ut-ink);
}

.ut-search .wp-block-search__button {
	margin: 0;
	padding: .85rem 1.75rem;
	border-radius: 40px;
}

* + .ut-search { margin-block-start: 2rem; }

/* ------------------------------------------------------------ Footer */

.ut-footer.wp-block-group {
	padding-block: 3.5rem 2rem;
	color: var(--ut-stone);
}

.ut-footer__top {
	gap: 2rem;
}

.ut-footer .ut-wordmark {
	font-size: 1.125rem;
	color: var(--ut-sand);
}

.ut-footer__tagline {
	margin-block-start: .625rem !important;
	font-family: var(--ut-serif);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--ut-gold);
}

.ut-footer-nav.wp-block-navigation,
.ut-footer-nav .wp-block-navigation__container {
	gap: 1.875rem;
	font-size: .84375rem;
}

.ut-footer-nav .wp-block-navigation-item__content {
	color: var(--ut-stone);
}

.ut-footer__bottom {
	gap: 1rem 2rem;
	margin-block-start: 2.5rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(245, 239, 228, .12);
	font-size: .78125rem;
	line-height: 1.6;
}

.ut-footer__bottom p {
	margin: 0;
	max-width: 36rem;
}

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

.ut-svc-row__title a:focus-visible,
.ut-product h3 a:focus-visible,
.ut-wordmark a:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.ut-header__cta a:focus-visible {
	outline: 2px solid var(--ut-harbor);
	outline-offset: 4px;
}

.ut-footer a:focus-visible {
	outline-color: var(--ut-sand);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}