/**
 * UTF International – front-end styles.
 *
 * Everything that cannot be expressed in theme.json lives here:
 * the coming-soon stage, the watermark layer and the accessibility helpers.
 * Colours are always read from theme.json presets so the site editor stays
 * the single source of truth.
 */

:root {
	/* Overridden inline by utf_watermark_inline_css() with the real site logo. */
	--utf-watermark: none;
	--utf-focus: var(--wp--preset--color--gold-soft, #e5b98a);
}

/* -------------------------------------------------------------------------
 * 1. Focus visibility – WCAG 2.2 AA (2.4.11 / 2.4.13)
 * ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--utf-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.utf-light :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--blue-600, #3c4662);
}

/* -------------------------------------------------------------------------
 * 2. Page shell – header / main / footer as one full-height column
 * ---------------------------------------------------------------------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	/* Centre header + main + footer as one group, so the footer sits directly
	   under the content instead of being pinned to the bottom edge. */
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex: 0 1 auto;
}

/* Ordinary pages can outgrow the viewport — no centring there. */
.wp-site-blocks:has(> main:not(.utf-stage)) {
	justify-content: flex-start;
}

.wp-site-blocks:has(> main:not(.utf-stage)) > main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------------
 * 3. Coming-soon stage and its background layers
 * ---------------------------------------------------------------------- */
.utf-stage {
	position: relative;
	isolation: isolate;
}

/* Light pooling from the top so the blue does not read as flat.
   Fixed, so it covers header and footer as one continuous field. */
body:has(.utf-stage)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(120% 80% at 50% -10%, rgba(60, 70, 98, 0.85) 0%, rgba(37, 46, 64, 0) 62%),
		radial-gradient(90% 60% at 50% 110%, rgba(207, 148, 85, 0.13) 0%, rgba(37, 46, 64, 0) 65%);
	pointer-events: none;
}

/* The client icon, blown up as a watermark. */
body:has(.utf-stage)::after {
	content: "";
	position: fixed;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: min(120vmin, 1100px);
	aspect-ratio: 1;
	translate: -50% -50%;
	background-image: var(--utf-watermark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.032;
	filter: grayscale(1) brightness(2.4);
	pointer-events: none;
}

/* Keep the actual content above both decorative layers. */
body:has(.utf-stage) .wp-site-blocks {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-transparency: reduce) {
	body:has(.utf-stage)::after { opacity: 0.025; }
}

/* -------------------------------------------------------------------------
 * 4. Typographic details
 * ---------------------------------------------------------------------- */
.utf-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 500;
	color: var(--wp--preset--color--gold, #cf9455);
	/* Optical correction: tracking pushes centred text off-axis. */
	text-indent: 0.28em;
}

.utf-header .utf-eyebrow {
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	opacity: 0.75;
}

.utf-wordmark {
	overflow-wrap: break-word;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 300;
	text-indent: 0.22em;
	line-height: 1.1;
}

@media (max-width: 30rem) {
	.utf-eyebrow {
		letter-spacing: 0.14em;
		text-indent: 0.14em;
	}
}

.utf-lede {
	max-width: 54ch;
	margin-inline: auto;
	text-wrap: pretty;
}

.utf-footer-links a {
	text-decoration: none;
}

.utf-footer-links a:hover,
.utf-footer-links a:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 5. Contact block — no frame, no fill: it sits straight on the background
 * ---------------------------------------------------------------------- */
.utf-contact address {
	font-style: normal;
}

/* Contact rows: the icon column stays aligned however long the value is. */
.utf-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	justify-content: center;
	/* Keep the max-content column from pushing the page wider than the screen. */
	grid-template-columns: minmax(0, max-content);
	max-width: 100%;
}

.utf-contact-list li {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
	text-align: left;
	line-height: 1.6;
	min-width: 0;
}

.utf-contact-list li > span {
	min-width: 0;
}

.utf-contact-list svg {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.25rem;
	color: var(--wp--preset--color--gold, #cf9455);
}

.utf-contact-list a {
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * 6. Site logo
 * ---------------------------------------------------------------------- */
.utf-logo {
	display: flex;
	justify-content: center;
}

.utf-logo img,
.utf-logo svg,
.utf-mark {
	width: clamp(70px, 10vw, 100px);
	height: auto;
	display: block;
}

/* The inline mark is drawn in currentColor, so it inherits the section tone. */
.utf-mark {
	color: var(--wp--preset--color--white, #ffffff);
}

.utf-light .utf-mark {
	color: var(--wp--preset--color--blue-700, #30394f);
}

/* -------------------------------------------------------------------------
 * 7. Light sections (legal pages)
 * ---------------------------------------------------------------------- */
.utf-light :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--blue-800, #252e40);
}

.utf-light :where(a) {
	color: var(--wp--preset--color--blue-600, #3c4662);
}

.utf-light :where(a):hover {
	color: var(--wp--preset--color--blue-800, #252e40);
}

/* -------------------------------------------------------------------------
 * 8. Entrance animation (respects reduced motion)
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.utf-stage .utf-reveal {
		animation: utf-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}

	.utf-stage .utf-reveal:nth-child(1) { animation-delay: 60ms; }
	.utf-stage .utf-reveal:nth-child(2) { animation-delay: 140ms; }
	.utf-stage .utf-reveal:nth-child(3) { animation-delay: 220ms; }
	.utf-stage .utf-reveal:nth-child(4) { animation-delay: 300ms; }
	.utf-stage .utf-reveal:nth-child(5) { animation-delay: 380ms; }
	.utf-stage .utf-reveal:nth-child(6) { animation-delay: 460ms; }
	.utf-stage .utf-reveal:nth-child(7) { animation-delay: 540ms; }

	@keyframes utf-rise {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}
}

/* -------------------------------------------------------------------------
 * 9. Print – the address should survive a printout
 * ---------------------------------------------------------------------- */
@media print {
	.wp-site-blocks { min-height: 0; }
	body:has(.utf-stage)::before,
	body:has(.utf-stage)::after { display: none; }
	body { background: #fff !important; color: #000 !important; }
	.utf-contact-list svg { color: #000; }
}