/* Rise at Kendal: styles theme.json cannot express. Mobile-first. */

.rise-logo { display: inline-flex; color: var(--rise-logo); min-width: 60px; }
.rise-logo svg { width: clamp(60px, 14vw, 120px); height: auto; }

/* Logo colour follows the background it sits on. Only pairings that the brand guide
   approves (p. 9, plus ZGM's letterhead) AND that reach 3:1 against the background
   (WCAG 2.2 SC 1.4.11) are used; the low-contrast approved pairings (pink on cream or
   yellow, yellow or cream on pink, cream on lavender) are left out. For gradients, the
   colour under the logo (top-left) decides. tests/js/theme-logo.test.js enforces this. */

:root,
.is-style-section-cream {
	--rise-logo: var(--wp--preset--color--black);
}
.is-style-section-yellow,
.is-style-section-band-yellow-cream,
.is-style-section-gradient-yellow-cream,
.is-style-section-gradient-yellow-lavender,
.is-style-section-gradient-yellow-pink {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.is-style-section-lavender,
.rise-letterhead--lavender-pink-purple {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.is-style-section-pink,
.is-style-section-gradient-pink-lavender {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.is-style-section-purple {
	--rise-logo: var(--wp--preset--color--sunlit-yellow);
}
.is-style-section-indigo,
.wp-block-cover:not(.is-light) {
	--rise-logo: #fff;
}
/* Colours and gradients picked in the editor's colour controls (e.g. on the header)
   come after the section styles, so an explicit colour wins. */
.has-cloud-cream-background-color,
.has-yellow-cream-br-gradient-background {
	--rise-logo: var(--wp--preset--color--black);
}
.has-sunlit-yellow-background-color,
.has-yellow-cream-tl-gradient-background,
.has-yellow-lavender-tl-gradient-background,
.has-yellow-pink-tl-gradient-background,
.has-band-yellow-cream-gradient-background,
.has-band-yellow-pink-gradient-background {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.has-daybreak-lavender-background-color,
.has-yellow-lavender-br-gradient-background,
.has-pink-lavender-br-gradient-background,
.has-band-lavender-pink-gradient-background {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.has-horizon-pink-background-color,
.has-yellow-pink-br-gradient-background,
.has-pink-lavender-tl-gradient-background {
	--rise-logo: var(--wp--preset--color--dusk-purple);
}
.has-dusk-purple-background-color {
	--rise-logo: var(--wp--preset--color--sunlit-yellow);
}
.has-midnight-indigo-background-color,
.has-black-background-color {
	--rise-logo: #fff;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.rise-eyebrow {
	font-family: var(--wp--preset--font-family--amplitude-condensed);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* R graphic (brand guide p. 13): the icon enlarged and cropped off the frame edge. */
.has-rise-graphic { position: relative; overflow: hidden; isolation: isolate; }
.has-rise-graphic::after {
	/* Size and corner come from the block's R graphic panel (rise-graphic-editor.js):
	   rise-graphic--sm/--lg scale it; rise-graphic--<corner> moves it. Defaults: medium,
	   bottom right. */
	--rise-graphic-size: calc(min(70vw, 720px) * var(--rise-graphic-scale, 1));
	--rise-graphic-x: -18%;
	--rise-graphic-y: -28%;
	content: "";
	position: absolute;
	inset: auto var(--rise-graphic-x) var(--rise-graphic-y) auto;
	width: var(--rise-graphic-size);
	aspect-ratio: 1;
	background: currentColor;
	opacity: 0.12;
	-webkit-mask: url(../svg/rise-icon.svg) no-repeat center / contain;
	mask: url(../svg/rise-icon.svg) no-repeat center / contain;
	pointer-events: none;
	z-index: -1;
}
/* Wide screens: the 720px cap and section-relative offsets shrank the R into the corner
   (a smaller graphic pushed further off the edge). Above 1440px it grows with the screen
   and its offsets follow its own size, so it keeps the crop it has at 1440px. */
@media (min-width: 1441px) {
	.has-rise-graphic::after {
		--rise-graphic-size: calc(min(50vw, 1400px) * var(--rise-graphic-scale, 1));
		--rise-graphic-x: calc(var(--rise-graphic-size) * -0.36);
		--rise-graphic-y: calc(var(--rise-graphic-size) * -0.3);
	}
}
.rise-graphic--sm { --rise-graphic-scale: 0.65; }
.rise-graphic--lg { --rise-graphic-scale: 1.4; }
/* Top corners crop less: cut as deep as at the bottom, only the R's legs would show. */
.rise-graphic--top-right::after { inset: calc(var(--rise-graphic-y) * 0.35) var(--rise-graphic-x) auto auto; }
.rise-graphic--bottom-left::after { inset: auto auto var(--rise-graphic-y) var(--rise-graphic-x); }
.rise-graphic--top-left::after { inset: calc(var(--rise-graphic-y) * 0.35) auto auto var(--rise-graphic-x); }
/* A Cover paints its opaque overlay span above negative z-index layers, so lift the
   graphic over the overlay and keep the content above the graphic. */
.wp-block-cover.has-rise-graphic::after { z-index: 1; }
.wp-block-cover.has-rise-graphic > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* A section style paints the Cover's box, under its overlay: the overlay takes the style's
   background (beating its own !important preset classes). Default keeps the overlay. */
.wp-block-cover[class*="is-style-section-"] > .wp-block-cover__background { background: inherit !important; }

/* Core sets light Covers to #000; the brand's dark text is Midnight Indigo. Zero-specificity
   core rule, so an editor's own text colour (has-text-color) still wins. Section styles
   bring their own text colour. */
.wp-block-cover.is-light:not(.has-text-color):not([class*="is-style-section-"]) { color: var(--wp--preset--color--midnight-indigo); }

.rise-pillar { padding: var(--wp--preset--spacing--50); border-radius: 24px; }

.rise-coming-soon-cta { font-family: var(--wp--preset--font-family--amplitude-condensed); text-transform: uppercase; letter-spacing: 0.06em; }
.rise-coming-soon__label {
	display: inline-block;
	margin-inline-start: 0.5em;
	padding: 0.1em 0.6em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75em;
}

/* Gravity Forms in the VIP slot: brand styling only; the form itself is Max's team's. */
.rise-register-form .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.rise-register-form .gform_wrapper select,
.rise-register-form .gform_wrapper textarea {
	border: 2px solid var(--wp--preset--color--midnight-indigo);
	border-radius: 12px;
	background: var(--wp--preset--color--cloud-cream);
	color: var(--wp--preset--color--midnight-indigo);
	padding: 0.7rem 0.9rem;
	font: inherit;
}
.rise-register-form .gform_wrapper .gfield_label { font-family: var(--wp--preset--font-family--amplitude-condensed); text-transform: uppercase; letter-spacing: 0.06em; }
.rise-register-form .gform_wrapper .gform_button {
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.8rem;
	background: var(--wp--preset--color--midnight-indigo);
	color: var(--wp--preset--color--cloud-cream);
	font-family: var(--wp--preset--font-family--amplitude-condensed);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.rise-register-form .gform_wrapper .validation_message,
.rise-register-form .gform_wrapper .gform_validation_errors { color: var(--wp--preset--color--midnight-indigo); font-weight: 600; }

/* Map block theming hooks (the plugin stays brand-neutral). */
.cck-map { --cck-map-boundary: var(--wp--preset--color--dusk-purple); --cck-map-chip-active-bg: var(--wp--preset--color--cloud-cream); }
/* Map pins and the chips' legend icons: light brand fills with a Midnight Indigo outline
   and icon (the outline gives 3:1 against the map; icons read at 6.1:1 or better). Key
   destinations are the one dark pin; the community pin is the Site Icon, larger. */
.cck-map {
	--cck-pin-ink: var(--wp--preset--color--midnight-indigo);
	--cck-pin-community: var(--wp--preset--color--dusk-purple);
	--cck-pin-nature: var(--wp--preset--color--daybreak-lavender);
	--cck-pin-schools: var(--wp--preset--color--sunlit-yellow);
	--cck-pin-recreation: var(--wp--preset--color--horizon-pink);
	--cck-pin-shopping: var(--wp--preset--color--cloud-cream);
	--cck-pin-destinations: var(--wp--preset--color--dusk-purple);
	--cck-pin-destinations-ink: #FFFFFF;
}

.rise-register-benefits { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.rise-register-benefits strong { display: block; font-family: var(--wp--preset--font-family--amplitude-condensed); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 782px) { .rise-register-benefits { grid-template-columns: repeat(2, 1fr); } }

/* Section groups placed from page patterns carry no inline padding. */
.wp-block-group[class*="is-style-section-"]:not([style*="padding"]) {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.rise-card {
	padding: var(--wp--preset--spacing--40);
	border-radius: 20px;
	background: var(--wp--preset--color--cloud-cream);
	color: var(--wp--preset--color--midnight-indigo);
}
.rise-card__logo img { max-height: 72px; width: auto; }
.rise-rounded img { border-radius: 20px; }

/* Lifestyle moments (Brief §13): tiles that follow the sun's day, morning yellow to evening
   indigo, each in a section style so its caption's contrast is already tested. A tile takes
   a photo through its Background image setting. Two columns on phones, not a long stack. */
.wp-block-group.rise-moment {
	justify-content: flex-end;
	min-height: clamp(8rem, 24vw, 14rem);
	border-radius: 20px;
	background-size: cover;
	background-position: center;
}
.rise-moment__caption {
	margin: 0;
	font-family: var(--wp--preset--font-family--mosie);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}
@media (max-width: 599px) {
	.wp-block-group.rise-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* An odd last moment spans the row instead of sitting alone in half of it. */
	.rise-moments > .rise-moment:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.rise-details { list-style: none; padding: 0; }
.rise-details strong { font-family: var(--wp--preset--font-family--amplitude-condensed); text-transform: uppercase; letter-spacing: 0.06em; margin-inline-end: 0.5em; }
.rise-doc-row { padding-block: var(--wp--preset--spacing--30); border-top: 1px solid currentColor; }
.wp-block-button__link:not([href]) { cursor: default; }

/* A Coming Soon menu item: one outlined pill around "Coming Soon: <label>", in the
   menu's own type size, so it reads as one item rather than a label and a badge. The
   white wash only lightens what's behind the dark menu text, so contrast goes up. */
.rise-coming-soon,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .rise-coming-soon.wp-block-navigation-item__content {
	cursor: default;
	padding: 0.35em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: rgb(255 255 255 / 0.6);
}

/* Header submenus: a Cloud Cream panel with a Dusk Purple outline, the map's rounded
   corners and a soft shadow; items in Midnight Indigo (17:1), Daybreak Lavender on hover
   and focus (11:1). The phone menu shows them differently (below). */
.rise-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	min-width: 14rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--dusk-purple);
	border-radius: 16px;
	background-color: var(--wp--preset--color--cloud-cream);
	color: var(--wp--preset--color--midnight-indigo);
	box-shadow: 0 8px 24px rgb(18 17 60 / 0.15);
}
.rise-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 10px;
	color: var(--wp--preset--color--midnight-indigo);
}
.rise-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--daybreak-lavender);
}
/* In the phone menu, submenu items are plain text under their parent, right-aligned like
   every other item: none of the dropdown's panel, pill padding or lavender fill. Hover is
   an underline; keyboard focus keeps the standard focus ring. */
.rise-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	min-width: 0;
	/* Core indents overlay submenus 2rem on both sides; in a right-aligned menu that
	   only pushes the item left. Its selector is matched here so this wins. */
	padding: 0;
	margin-top: 0.6em;
	border: 0;
	box-shadow: none;
	background: transparent;
	/* A step smaller than its parent, so it reads as belonging to it, not as a peer. */
	font-size: 0.9em;
}
.rise-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.rise-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	/* No pill padding, but a tap target of at least 24px (WCAG 2.2 SC 2.5.8). */
	padding: 0;
	min-height: 24px;
	border-radius: 0;
	background-color: transparent;
}
.rise-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* The mobile menu overlay: keep items off the screen edges. Core pads it with
   clamp(1rem, var(--wp--style--root--padding-*), 20rem), which is invalid (so 0) because
   this theme sets no root padding; match core's selector so this rule wins. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--40);
}

/* Join VIP: the header's register CTA as a Dusk Purple pill with white text (9.2:1), in
   the other menu items' typeface. */
.wp-block-navigation .rise-nav-register .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .rise-nav-register .wp-block-navigation-item__content {
	padding: 0.55em 1.2em;
	border-radius: 999px;
	background: var(--wp--preset--color--dusk-purple);
	color: #fff;
	/* Optical size: white capitals on a dark pill read larger than the dark lowercase
	   items beside it, so 0.9 of their size looks the same. */
	font-size: 0.9em;
	text-decoration: none;
}
.wp-block-navigation .rise-nav-register .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--midnight-indigo);
}
/* The global focus ring is currentColor, which would be white on the pill's surround. */
.wp-block-navigation .rise-nav-register .wp-block-navigation-item__content:focus-visible {
	outline-color: var(--wp--preset--color--dusk-purple);
}

/* The floating behaviour applies on the live page only (in the editor every block has
   .block-editor-block-list__block), so the button stays visible and editable there. */
.rise-sticky-cta:not(.block-editor-block-list__block) {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
	transform: translateY(120%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
	pointer-events: none;
}
.rise-sticky-cta.is-visible:not(.block-editor-block-list__block) { transform: none; visibility: visible; transition: transform 0.25s ease; }
/* A Cloud Cream ring keeps the button distinct over every section it floats across: on
   Dusk Purple and Midnight Indigo the ring carries the edge (8.7:1, 16.8:1); on light
   sections the purple button itself does (3.1:1 on pink, 5.3:1 lavender, 6.5:1 yellow, 8.7:1 cream). WCAG 2.2 SC 1.4.11. */
.rise-sticky-cta .wp-block-button__link {
	pointer-events: auto;
	box-shadow: 0 0 0 3px var(--wp--preset--color--cloud-cream), 0 6px 24px rgb(18 17 60 / 0.25);
}
@media (prefers-reduced-motion: reduce) { .rise-sticky-cta { transition: none; } }
/* The full-screen phone menu is open: the bar would cover its last items. */
html.has-modal-open .rise-sticky-cta { display: none; }
/* Keep the footer's last line, and any scrolled-to/focused element (WCAG 2.2 SC 2.4.11),
   clear of the bar on small screens. Scoped to templates that include the bar. */
html:has(.rise-sticky-cta) { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
/* Pad the footer's own coloured group, not its transparent wrapper (which showed a cream
   strip). !important beats the group's inline padding from the block editor. */
body:has(.rise-sticky-cta) .rise-footer { padding-bottom: calc(var(--wp--preset--spacing--60) + 5rem) !important; }

/* "Proudly developed by" (roadmap §7, T3): each developer is a link to its own site. Text
   wordmarks stand in until the logos arrive (F2); an editor swaps each for a linked Image
   block, which the img rule sizes. The footer is Midnight Indigo, so logos need knockouts. */
.rise-developers { column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--20); }
.rise-developers > p { margin: 0; }
.rise-developer a {
	display: inline-block;
	min-height: 24px;
	font-family: var(--wp--preset--font-family--mosie);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	text-decoration: none;
}
.rise-developer a:hover { text-decoration: underline; }
.rise-developers img { display: block; height: 48px; width: auto; }

/* Sections run edge to edge: no root block gap between header, main and footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }

.rise-video-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: 0.4rem 0.8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--wp--preset--color--cloud-cream);
	color: var(--wp--preset--color--midnight-indigo);
	font: inherit;
	font-size: 0.8rem;
}

/* Templates built from full-bleed sections (front page, full width): sections meet edge to edge. */
.rise-sections > .wp-block-post-content > * + * { margin-block-start: 0; }

/* Header options (block styles on the header template part; Site Editor → Styles). */
/* Rule below: a solid 2px Dusk Purple edge between the header and the first section. */
header.wp-block-template-part.is-style-header-rule {
	border-bottom: 2px solid var(--wp--preset--color--dusk-purple);
}
/* Over the hero: only when the page starts with a Cover (the hero), the header lies on
   top of it with no band of its own; elsewhere it stays a normal header. The logo and
   menu keep the yellow pairing (Dusk Purple, Midnight Indigo) that the hero's yellow
   corner supports; over a dark photo hero they switch to the white knockout. */
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:first-child) > header.is-style-header-overlay {
	position: absolute;
	inset-inline: 0;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:first-child) > header.is-style-header-overlay .rise-header {
	background: none !important;
}
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:not(.is-light):first-child) > header.is-style-header-overlay .rise-header {
	--rise-logo: #fff;
	color: #fff;
}
/* Focus rings there are white too: the Join VIP pill's Dusk Purple ring would be about
   2.3:1 against a dark photo. */
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:not(.is-light):first-child) > header.is-style-header-overlay .rise-header :focus-visible,
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:not(.is-light):first-child) > header.is-style-header-overlay .rise-nav-register .wp-block-navigation-item__content:focus-visible {
	outline-color: #fff;
}
/* White text there, so the pill's wash turns dark to keep it readable over the photo. */
.wp-site-blocks:has(> main .wp-block-post-content > .wp-block-cover:not(.is-light):first-child) > header.is-style-header-overlay .rise-coming-soon {
	background-color: rgb(18 17 60 / 0.35);
}

/* Sticky header: core's Position setting on the header's Group (edit the Header part →
   select the Group → Position: Sticky). Core makes that Group sticky, but it sits inside
   <header>, which is exactly as tall as it, so it has nowhere to move. The theme pins
   the <header> itself instead, so it combines with the header styles (Rule below;
   Over the hero keeps priority, as a see-through header can't stay over scrolling
   content). It slims down over the first 150px of scrolling (scroll-driven CSS; full
   size with reduced motion), and the page reserves the header's current height so jump
   links, the skip link and focused elements land below it (smooth-scroll.js measures it). */
header.wp-block-template-part:has(> .is-position-sticky) {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 30;
}
:root:has(header.wp-block-template-part > .is-position-sticky) {
	/* smooth-scroll.js keeps --rise-sticky-h at the header's real height; 9rem clears
	   the full-size header when the script hasn't run. */
	scroll-padding-top: calc(var(--wp-admin--admin-bar--position-offset, 0px) + var(--rise-sticky-h, 9rem));
}
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		header.wp-block-template-part > .is-position-sticky,
		header.wp-block-template-part > .is-position-sticky .rise-logo svg {
			animation: rise-header-slim linear both;
			animation-timeline: scroll(root);
			animation-range: 0 150px;
		}
		header.wp-block-template-part > .is-position-sticky .rise-logo svg { animation-name: rise-logo-slim; }
	}
}
@keyframes rise-header-slim {
	to { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@keyframes rise-logo-slim {
	to { width: 60px; }
}

/* Sun’s journey (prototype; brand guide p. 11, "the sun's journey from dawn to dusk"):
   the pool of yellow light travels left to right across the section as it scrolls
   through the viewport. Only the yellow-to-pink pairing is used, so Midnight Indigo
   text passes throughout (12.6:1 on yellow, 6.1:1 on pink). Static where scroll-driven
   animations aren't supported or reduced motion is preferred. */
@property --rise-sun-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 10%;
}
.is-style-sun-journey {
	background: radial-gradient(85% 200% at var(--rise-sun-x) -55%, #FFD368 31.6%, #F16A7C 100%);
	color: var(--wp--preset--color--midnight-indigo);
}
.is-style-sun-journey a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--midnight-indigo);
}
@keyframes rise-sun-journey {
	from { --rise-sun-x: 0%; }
	to { --rise-sun-x: 100%; }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.is-style-sun-journey {
			animation: rise-sun-journey linear both;
			animation-timeline: view();
		}
	}
}
/* End sun’s journey */