/* ==========================================================================
   Layout Generic 11 — 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). */
.lg11-header p:empty,
.lg11-footer p:empty,
.lg11-band p:empty { display: none; }

.lg11-art { display: inline-flex; line-height: 0; }
.lg11-art svg { display: block; width: 100%; height: 100%; }

.lg11-subscribe .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Header ------------------------------------------------------------ */
.lg11-header p { margin: 0; }
.lg11-header a:not(.wp-element-button) { color: inherit; }
.lg11-brand .lg11-art--hexagon {
	width: 30px;
	height: 30px;
	color: var(--wp--preset--color--accent-2);
}
.lg11-header .wp-block-site-title { margin: 0; white-space: nowrap; }
.lg11-header .wp-block-site-title a { text-decoration: none; }
.lg11-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-1); text-decoration: none; }
.lg11-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent-1); }

/* --- Image bands (hero + two banners) ---------------------------------- */
.lg11-band.wp-block-cover { padding-block: 64px; }
.lg11-band--hero.wp-block-cover { min-height: clamp(380px, 38vw, 560px) !important; }
.lg11-band--short.wp-block-cover { min-height: clamp(260px, 24vw, 340px) !important; }

/* The charcoal is a placeholder: once a photo is added, drop it to a dim so
   the photo shows and the label boxes still read. */
.lg11-band:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: .45 !important; }

/* Stacked label boxes: white headline box over an orange tagline box,
   each only as wide as its own text. */
.lg11-label,
.lg11-tag {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto !important;   /* centre each box on its own width, whatever the Cover's layout */
	text-align: center;
}
.lg11-label h1,
.lg11-label h2 { margin: 0; text-wrap: balance; }
.lg11-tag { margin-top: 10px !important; }
.lg11-tag p { margin: 0; text-wrap: balance; }

/* Newsletter field on the dark band: outlined, translucent, as drawn. */
.lg11-band .lg11-subscribe { margin-top: 10px; }
.lg11-subscribe {
	display: flex;
	width: min(440px, 100%);
	margin-inline: auto;
	border: 1.5px solid rgba(255, 255, 255, .9);
	border-radius: 2px;
	background: rgba(255, 255, 255, .14);
	transition: background .2s ease;
}
.lg11-subscribe:focus-within { background: rgba(255, 255, 255, .24); }
.lg11-subscribe input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.lg11-subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, .78); }
.lg11-subscribe input[type="email"]:focus { outline: none; }
.lg11-subscribe button {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background .2s ease;
}
.lg11-subscribe button:hover,
.lg11-subscribe button:focus-visible { background: var(--wp--preset--color--accent-1); outline: none; }

/* --- Section intros ---------------------------------------------------- */
.lg11-intro { max-width: 56ch; margin-inline: auto !important; }

/* --- Steps ------------------------------------------------------------- */
.lg11-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px !important;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--accent-2);
	font-weight: 700;
	letter-spacing: .02em;
}
.lg11-step-text { max-width: 30ch; margin-inline: auto !important; }

/* --- Reviews carousel -------------------------------------------------- */
.lg11-avatar.wp-block-cover {
	width: 72px;
	min-height: 0;
	aspect-ratio: 1;
	margin: 0 auto 14px !important;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
}
.lg11-avatar:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: 0 !important; }
.lg11-quote { text-align: center; }
.lg11-quote h3 { margin-bottom: 6px !important; }
.lg11-quote-text { max-width: 32ch; margin-inline: auto !important; }

/* Row layout exists on the front end only (see body_class in functions.php);
   in the editor the reviews stay stacked for easy editing. */
.lg11-front .lg11-carousel { position: relative; padding-inline: 56px; }
.lg11-front .lg11-carousel-track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
}
.lg11-front .lg11-carousel-track > * {
	flex: 0 0 calc((100% - 64px) / 3);
	margin: 0 !important;
	scroll-snap-align: start;
}
.lg11-front .lg11-carousel-track:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; }
/* Scrollbar hides only once arrows exist to replace it. */
.lg11-carousel.is-enhanced .lg11-carousel-track { scrollbar-width: none; }
.lg11-carousel.is-enhanced .lg11-carousel-track::-webkit-scrollbar { display: none; }

.lg11-arrow {
	position: absolute;
	top: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 52px;
	padding: 4px;
	border: 0;
	background: none;
	color: #a9a9b0;
	cursor: pointer;
	transition: color .2s ease;
}
.lg11-arrow[hidden] { display: none; }
.lg11-arrow:hover { color: var(--wp--preset--color--contrast); }
.lg11-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
.lg11-arrow svg { width: 100%; height: 100%; }
.lg11-arrow--prev { left: 0; }
.lg11-arrow--next { right: 0; }

/* --- Story zig-zag ----------------------------------------------------- */
.lg11-story-media.wp-block-cover {
	min-height: 0;
	height: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
}
/* Mountain glyph marks an empty image slot; gone once a photo is added. */
.lg11-story-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Ccircle cx='90' cy='18' r='11' fill='%23dcdce1'/%3E%3Cpath d='M8 76c4-30 14-52 26-52 13 0 20 30 30 30 7 0 11-10 19-10 10 0 16 16 18 32z' fill='%23dcdce1'/%3E%3C/svg%3E") center / 42% no-repeat;
	pointer-events: none;
}
.lg11-story-media:has(.wp-block-cover__image-background)::after { display: none; }
.lg11-story-media:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: 0 !important; }

.lg11-story-copy { padding: 28px clamp(24px, 4vw, 44px) !important; }
.lg11-story-copy h3 { margin-bottom: 10px !important; }

/* --- Footer: follow bar ------------------------------------------------ */
.lg11-follow p { margin: 0; }
.lg11-follow .wp-block-social-links {
	padding-left: 28px;
	border-left: 1.5px solid rgba(255, 255, 255, .7);
}

/* --- Footer: main ------------------------------------------------------ */
.lg11-footer a:not(.wp-element-button) { color: inherit; }
.lg11-footer h2 { color: inherit; letter-spacing: .06em; text-transform: uppercase; }
.lg11-footer .wp-block-navigation-item__content { opacity: .75; }
.lg11-footer .wp-block-navigation-item__content:hover { opacity: 1; text-decoration: none; }
.lg11-footer-brand .lg11-art--hexagon {
	width: 72px;
	height: 72px;
	color: rgba(255, 255, 255, .22);
}
.lg11-footer-brand .wp-block-site-title { margin: 0; }
.lg11-footer-brand .wp-block-site-title a { text-decoration: none; }
.lg11-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.lg11-copyright { opacity: .65; }

/* --- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.lg11-header .lg11-nav .wp-block-navigation__container { gap: 24px; }
	.lg11-front .lg11-carousel-track > * { flex-basis: calc((100% - 32px) / 2); }
}

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 781px) {
	.lg11-label h1 { font-size: 30px !important; }
	.lg11-label h2 { font-size: 24px !important; }

	/* Stacked zig-zag: picture first in both rows. Reorder rather than
	   reverse the direction — core's vertical-centre class sets
	   align-items:center, which in a column layout would shrink the image
	   column to its (empty) content width. */
	.lg11-zig--reverse > .wp-block-column:last-child { order: -1; }
	.lg11-story-media.wp-block-cover { height: auto; }

	.lg11-follow { flex-direction: column; text-align: center; }
	.lg11-follow .wp-block-social-links { padding-left: 0; border-left: 0; }

	.lg11-footer .wp-block-columns { text-align: center; }
	.lg11-footer .wp-block-navigation__container { align-items: center !important; }
	.lg11-footer-brand { align-items: center !important; }
	.lg11-footer-bottom { justify-content: center !important; text-align: center; }
}

@media (max-width: 600px) {
	.lg11-front .lg11-carousel { padding-inline: 40px; }
	.lg11-front .lg11-carousel-track > * { flex-basis: 100%; }
}