/* ==========================================================================
   Layout Generic 10 — layout styles
   Enqueued from functions.php. Colours, type and spacing come from theme.json
   presets (var(--wp--preset--*)), so Global Styles edits flow through here.
   ========================================================================== */

/* Shortcode blocks can leave empty <p> wrappers behind (wpautop). */
.lg10-header p:empty,
.lg10-footer p:empty,
.lg10-hero p:empty,
.lg10-explore p:empty { display: none; }

/* --- Artwork (from [lg10_icon]) ---------------------------------------- */
.lg10-art { display: inline-flex; line-height: 0; }
.lg10-art svg { display: block; width: 100%; height: 100%; }

/* --- Header ------------------------------------------------------------ */
/* Full-bleed with no layout padding of its own — keep logo and CTA off the
   viewport edges. */
.lg10-header { padding-inline: clamp(20px, 5vw, 72px) !important; }
.lg10-header p { margin: 0; }

.lg10-header a:not(.wp-element-button),
.lg10-footer a:not(.wp-element-button) { color: inherit; }

.lg10-brand .lg10-art--hexagon {
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--base);
}
.lg10-header .wp-block-site-title { margin: 0; white-space: nowrap; }
.lg10-header .wp-block-site-title a { text-decoration: none; }

.lg10-nav .wp-block-navigation-item__content { opacity: .92; }
.lg10-nav .wp-block-navigation-item__content:hover { opacity: 1; }
.lg10-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-underline-offset: 6px; }

.lg10-cta .wp-element-button { white-space: nowrap; }

/* --- Hero -------------------------------------------------------------- */
.lg10-hero.wp-block-cover {
	min-height: clamp(440px, 44vw, 640px) !important;
	padding-block: 80px 96px;
}
/* The chevron is positioned against the whole cover, not the text block. */
.lg10-hero .wp-block-cover__inner-container { position: static; }
.lg10-hero .wp-block-cover__inner-container > * { position: relative; z-index: 1; }

.lg10-hero h1 { margin-bottom: 18px; text-wrap: balance; }
.lg10-hero p  { text-wrap: balance; }

/* Placeholder charcoal is solid; once a photo is added, drop it to a dim so
   the photo shows through and the white headline stays legible. */
.lg10-hero:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: .55 !important; }

.lg10-hero .lg10-scroll {
	position: absolute;
	bottom: 26px;
	left: 50%;
	z-index: 1;
	display: block;
	width: 44px;
	height: 22px;
	color: var(--wp--preset--color--base);
	opacity: .85;
	transform: translateX(-50%);
	transition: opacity .2s ease, transform .2s ease;
}
.lg10-hero .lg10-scroll:hover,
.lg10-hero .lg10-scroll:focus-visible { opacity: 1; transform: translate(-50%, 3px); }
.lg10-hero .lg10-scroll svg { width: 100%; height: 100%; }
.lg10-hero .lg10-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 4px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#stats { scroll-margin-top: 24px; }

/* --- Stats ------------------------------------------------------------- */
.lg10-count {
	margin: 0;
	font-variant-numeric: oldstyle-nums;   /* Georgia's old-style figures, as in the wireframe */
	line-height: 1;
	letter-spacing: -0.02em;
}
.lg10-stat-label {
	margin-top: 22px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.lg10-stat-label::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--wp--preset--color--accent-1);
}
.lg10-stat-text { max-width: 26ch; margin-inline: auto !important; }

/* --- Video stories ----------------------------------------------------- */
.lg10-video.wp-block-cover {
	min-height: 0;
	aspect-ratio: 16 / 9;
	padding: 0;
	border-radius: 6px;
	overflow: hidden;
}
/* Play button — decoration on the thumbnail. */
.lg10-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 54px;
	height: 54px;
	margin: auto;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%236f6f76'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat,
		var(--wp--preset--color--accent-5);
	transition: transform .2s ease;
}
.lg10-video:hover::after { transform: scale(1.06); }
/* Once a real thumbnail is added, show it undimmed. */
.lg10-video:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: 0 !important; }

.lg10-video-title { margin-top: 16px !important; }
.lg10-video-title a { color: inherit; }              /* ink, not the orange link colour */
.lg10-video-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg10-video-meta { margin-top: 4px !important; }

/* --- Explore (globe) --------------------------------------------------- */
.lg10-explore .lg10-art--globe {
	width: min(180px, 100%);
	aspect-ratio: 1;
	color: var(--wp--preset--color--accent-5);
}
.lg10-globe-wrap { justify-content: center; }

/* --- Footer ------------------------------------------------------------ */
.lg10-footer .wp-block-site-title { margin: 0; }
.lg10-footer .wp-block-site-title a { text-decoration: none; }
.lg10-copyright { font-size: var(--wp--preset--font-size--x-small); opacity: .6; }

/* --- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.lg10-header .lg10-nav { --wp--style--block-gap: 22px; }
	.lg10-header .lg10-nav .wp-block-navigation__container { gap: 22px; }
	.lg10-header-actions { gap: 24px !important; }
}

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 781px) {
	.lg10-hero h1 { font-size: 36px !important; }
	.lg10-count { font-size: 60px !important; }
	.lg10-explore .wp-block-column { text-align: center; }
	.lg10-explore .wp-block-buttons { justify-content: center; }
	.lg10-explore .lg10-art--globe { width: 140px; }
}

/* The site title gives way before the menu does. */
@media (max-width: 700px) {
	.lg10-header .wp-block-site-title { display: none; }
}