/*
Theme Name: Solterra Holding
Theme URI: https://solterraholding.com
Author: Odyssee
Author URI: https://odyssee.one
Description: Temporary one-pager for Solterra Holding, built on brand identity V3. The viewport itself is the plate: a gold hairline frame with the chamfered corners taken from the monogram. Header, asymmetric statement and register, footer. No navigation.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary - property of Solterra Holding
Text Domain: solterra
*/

/* ---------------------------------------------------------------
   1. Fonts (self-hosted, latin subset)
   --------------------------------------------------------------- */

@font-face {
	font-family: "Spectral";
	src: url("assets/fonts/spectral-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Spectral";
	src: url("assets/fonts/spectral-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("assets/fonts/jost-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("assets/fonts/jost-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------- */

:root {
	/* Brand identity V3 */
	--sh-gold: #d3a144;          /* brand gold, exact from the logo files   */
	--sh-gold-ink: #8a6520;      /* deepened gold, 4.9:1 on cream           */
	--sh-paper: #fbf6e9;         /* cream, background                       */
	--sh-ink: #1c1611;           /* espresso, primary text                  */
	--sh-ink-soft: #4a3d30;      /* running text                            */
	--sh-terra: #a24a2b;         /* terracotta, used in exactly one place   */
	--sh-sand: #e7dcc2;          /* hairlines                               */

	/* The 45 degree cut from the monogram, applied to the whole screen. */
	--sh-chamfer: clamp(22px, 3.4vw, 40px);

	--sh-serif: "Spectral", "Iowan Old Style", Georgia, serif;
	--sh-sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   3. Base
   --------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.solterra {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	padding: clamp(10px, 1.5vw, 22px);
	background-color: var(--sh-paper);
	color: var(--sh-ink);
	font-family: var(--sh-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.solterra img {
	max-width: 100%;
	height: auto;
	display: block;
}

.solterra a {
	color: var(--sh-gold-ink);
	text-decoration: none;
	transition: color 160ms ease;
}

.solterra a:hover {
	color: var(--sh-terra);
}

.solterra a:focus-visible {
	outline: 2px solid var(--sh-gold-ink);
	outline-offset: 4px;
	border-radius: 1px;
}

.sh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sh-ink);
	color: var(--sh-paper);
	padding: 12px 20px;
	z-index: 10;
	font-size: 0.85rem;
}

.sh-skip:focus {
	left: 20px;
	top: 20px;
}

/* ---------------------------------------------------------------
   4. The frame: the screen is the plate
   The outer layer carries the gold, the inner layer covers it bar one
   pixel. That leaves a hairline with the same cut as the monogram.
   --------------------------------------------------------------- */

.sh-frame {
	flex: 1;
	padding: 1px;
	background: var(--sh-gold);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sh-chamfer)) 0,
		100% var(--sh-chamfer),
		100% 100%,
		var(--sh-chamfer) 100%,
		0 calc(100% - var(--sh-chamfer))
	);
}

.sh-frame__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 3.4vw, 52px) clamp(22px, 4vw, 64px);
	background-color: var(--sh-paper);
	/* Sol: barely there, above the horizon */
	background-image: radial-gradient(105% 70% at 50% -14%, rgba(211, 161, 68, 0.16), rgba(211, 161, 68, 0) 62%);
	clip-path: polygon(
		0 0,
		calc(100% - var(--sh-chamfer) + 1px) 0,
		100% calc(var(--sh-chamfer) - 1px),
		100% 100%,
		calc(var(--sh-chamfer) - 1px) 100%,
		0 calc(100% - var(--sh-chamfer) + 1px)
	);
}

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */

.sh-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	flex-wrap: wrap;
}

.sh-header__title {
	margin: 0;
	line-height: 0;
}

.sh-header__title img {
	width: auto;
	height: clamp(30px, 3.4vw, 40px);
}

.sh-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sh-ink-soft);
}

.sh-status__dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	background: var(--sh-terra);
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------
   6. Body: statement on the left, register on the right
   --------------------------------------------------------------- */

.sh-main {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
	gap: clamp(30px, 5vw, 80px);
	align-items: stretch;
	padding: clamp(28px, 4vw, 56px) 0;
}

/* Both columns run the full height so the gold rule between them reads as a
   spine rather than a divider next to a list. The text sits optically centred
   inside each column. */
.sh-lead,
.sh-register {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

.sh-statement {
	margin: 0;
	max-width: 15ch;
	font-family: var(--sh-serif);
	font-weight: 300;
	font-size: clamp(2rem, 1.05rem + 3.5vw, 4.2rem);
	line-height: 1.05;
	letter-spacing: -0.021em;
	color: var(--sh-ink);
}

.sh-intro {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	max-width: 46ch;
	font-size: clamp(0.98rem, 0.93rem + 0.2vw, 1.09rem);
	line-height: 1.7;
	color: var(--sh-ink-soft);
	text-wrap: pretty;
}

/* The register reads as an index, not as a row of badges. */
.sh-register {
	position: relative;
	padding-left: clamp(24px, 3.4vw, 46px);
}

/* The one moving element: the rule draws downward on load. */
.sh-register::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--sh-gold);
	transform: scaleY(0);
	transform-origin: top;
}

.sh-register__label {
	margin: 0;
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sh-gold-ink);
}

.sh-register__list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.sh-register__list li {
	padding: 9px 0;
	border-bottom: 1px solid var(--sh-sand);
	font-size: 0.86rem;
	letter-spacing: 0.01em;
	color: var(--sh-ink);
}

.sh-register__list li:last-child {
	border-bottom: 0;
}

.sh-register__contact {
	margin-top: clamp(24px, 3vw, 36px);
}

.sh-register__contact .sh-register__label {
	margin-bottom: 10px;
}

.sh-register__mail {
	font-size: 0.94rem;
	letter-spacing: 0.01em;
	border-bottom: 1px solid var(--sh-gold);
	padding-bottom: 3px;
}

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */

.sh-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 32px;
	flex-wrap: wrap;
	padding-top: clamp(18px, 2.2vw, 26px);
	border-top: 1px solid var(--sh-sand);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--sh-ink-soft);
}

.sh-footer p {
	margin: 0;
}

.sh-footer__credit a {
	color: inherit;
	border-bottom: 1px solid var(--sh-sand);
	padding-bottom: 2px;
}

.sh-footer__credit a:hover {
	color: var(--sh-terra);
	border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------
   8. Arrival
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.sh-header,
	.sh-statement,
	.sh-intro,
	.sh-register__head,
	.sh-register__list,
	.sh-register__contact,
	.sh-footer {
		opacity: 0;
		animation: sh-rise 720ms cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
	}

	.sh-frame {
		opacity: 0;
		animation: sh-fade 800ms ease forwards;
	}

	.sh-frame     { animation-delay: 60ms; }
	.sh-header    { animation-delay: 200ms; }
	.sh-statement { animation-delay: 340ms; }
	.sh-intro     { animation-delay: 480ms; }
	.sh-register__head    { animation-delay: 820ms; }
	.sh-register__list    { animation-delay: 920ms; }
	.sh-register__contact { animation-delay: 1020ms; }
	.sh-footer    { animation-delay: 1120ms; }

	.sh-register::before {
		animation: sh-draw 900ms cubic-bezier(0.2, 0.68, 0.2, 1) 620ms forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh-register::before {
		transform: scaleY(1);
	}
}

@keyframes sh-rise {
	from {
		opacity: 0;
		transform: translateY(9px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sh-fade {
	to {
		opacity: 1;
	}
}

@keyframes sh-draw {
	to {
		transform: scaleY(1);
	}
}

/* ---------------------------------------------------------------
   9. Narrow screens: the columns stack, the rule turns horizontal
   --------------------------------------------------------------- */

@media (max-width: 820px) {
	.sh-main {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(26px, 5vw, 40px);
		padding: clamp(24px, 4vw, 40px) 0;
	}

	.sh-statement {
		max-width: 18ch;
	}

	.sh-register {
		padding-left: 0;
		padding-top: clamp(24px, 4vw, 34px);
	}

	.sh-register::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		transform: scaleX(0);
		transform-origin: left;
	}

	@media (prefers-reduced-motion: no-preference) {
		.sh-register::before {
			animation-name: sh-draw-x;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.sh-register::before {
			transform: scaleX(1);
		}
	}
}

@keyframes sh-draw-x {
	to {
		transform: scaleX(1);
	}
}

@media (max-width: 520px) {
	.sh-header {
		gap: 12px 20px;
	}

	.sh-register__list li {
		padding: 8px 0;
	}
}

/* The WordPress admin bar must not push the frame past the fold. */
body.admin-bar.solterra {
	min-height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar.solterra {
		min-height: calc(100dvh - 46px);
	}
}