/*
Theme Name: Sunshine
Theme URI: https://colorlib.com/wp/themes/sunshine/
Author: Colorlib
Author URI: https://colorlib.com/
Description: A block theme for one couple's wedding website. The couple's photograph with their names and the date in a terracotta circle, a live countdown to the day, the love story told beside two round portraits, a gallery of photographs in rows of different widths that open in a lightbox, the day's programme on photograph-framed cards, an RSVP form (attending or not, how many, dietary needs, a song request) that needs no plugin, suggested hotels for guests, a map of the venue and a blog — eight colour palettes, five type pairings, visitor dark mode and WooCommerce styling. Full site editing throughout.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://updates.colorlib.com/theme/sunshine.json
Text Domain: sunshine
Tags: blog, full-site-editing, block-patterns, block-styles, template-editing, wide-blocks, accessibility-ready, translation-ready, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, one-column, two-columns, right-sidebar, sticky-post, theme-options

Sunshine WordPress Theme, (C) 2026 Colorlib.
Sunshine is distributed under the terms of the GNU GPL v2 or later.

Sunshine bundles the following third-party resources:

Petit Formal Script, Mulish and Cormorant Garamond
License: SIL Open Font License 1.1, https://openfontlicense.org/
Source: https://fontsource.org/

Tabler Icons
License: MIT, https://github.com/tabler/tabler-icons/blob/main/LICENSE
Source: https://tabler.io/icons

Photographs
License: Pexels License, https://www.pexels.com/license/
Source: https://www.pexels.com/ (each file is credited in readme.txt)

The botanical ornaments in assets/ornaments/ were drawn for this theme and are
released under the GPL with it.
*/

/*
 * A block theme styles itself from theme.json. What lives here is what
 * theme.json cannot express: the components behind the block style variations
 * registered in functions.php, the drawn ornaments, the hero's circle, the
 * countdown, the love story's portraits and timeline, the gallery's rows of
 * different widths, the RSVP card, the map with its card, and the layout
 * corrections a full-width design needs.
 *
 * This file is also the editor stylesheet (add_editor_style), so a section
 * title, a portrait or the RSVP card looks the same while it is being edited.
 *
 * Every colour is a palette variable. Nothing here is a literal colour except
 * white and black at low opacity for highlights and shadows, which is what
 * lets all eight palettes, and dark mode, restyle every component.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

body {
	/* The edge of anything a visitor operates -- a field, a choice. The
	   template drew these in #ddd, 1.4:1 against the page: nothing a guest
	   could find. Half the text colour into the ground clears 3:1 (WCAG
	   1.4.11) in every palette and turns over with dark mode. */
	--sunshine-edge: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, var(--wp--preset--color--base));
	/* The pink of the drawn flowers: the accent, softened into the page. */
	--sunshine-petal: color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--base));
	/* The header's height, which the anchors keep clear of. */
	--sunshine-header-h: 100px;
}

@media (max-width: 991px) {
	body {
		--sunshine-header-h: 76px;
	}
}

html {
	scroll-padding-top: calc(var(--sunshine-header-h) + 1rem);
}

/* ==========================================================================
   Screen reader text
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	height: auto;
	left: 6px;
	padding: 15px 23px 14px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Layout rhythm

   WordPress separates the top-level pieces of a page, and every full-width
   section inside a page's content, with the root block gap: a strip of bare
   page between every pair. Sections carry their own padding, so they meet
   edge to edge instead.
   ========================================================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignwide + .alignfull,
.wp-block-post-content > .alignfull + .alignwide {
	margin-block-start: 0;
}

/* Two sections on the page ground share one gap, as the template's do. */
.sunshine-section:not(.has-background) + .sunshine-section:not(.has-background) {
	padding-top: 0 !important;
}

/* A page built from sections needs no padding of its own -- each section has
   it. A page of ordinary paragraphs still needs room to breathe. */
.sunshine-page-content:not(:has(> .alignfull:first-child, > .alignwide:first-child)) {
	padding-top: var(--wp--preset--spacing--70);
}

.sunshine-page-content:not(:has(> .alignfull:last-child, > .alignwide:last-child)) {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* The page banner and the page's first section: the section keeps its full
   gap under the photograph. */
.sunshine-banner + main .sunshine-page-content > .sunshine-section:first-child,
.sunshine-banner + main > .sunshine-page-content > .sunshine-section:first-child {
	padding-top: var(--wp--preset--spacing--70) !important;
}

@media (min-width: 782px) {
	.sunshine-split {
		justify-content: space-between;
	}
}

/* An <iframe> is inline, and auto margins do not centre an inline box. */
.sunshine-map {
	display: block;
}

/* Sections that float ornaments keep them inside: nothing may push the page
   sideways on a phone. */
.sunshine-section,
.sunshine-footer {
	position: relative;
	overflow-x: clip;
}

/* ==========================================================================
   Header

   The template's white bar: the name in a thin frame at the left, the menu at
   the right with a terracotta line under the page you are on. It stays at
   the top, and lifts off the page with a soft shadow once the page moves.
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on a phone, so the header must not wait for it. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.sunshine-header {
	transition: box-shadow 0.4s ease;
}

.sunshine-scrolled .wp-site-blocks > header .sunshine-header {
	box-shadow: 0 3px 16px rgb(0 0 0 / 0.1);
}

.sunshine-header__bar {
	min-height: var(--sunshine-header-h);
}

/* The name in the template's thin terracotta frame, spaced out. */
.sunshine-brand .wp-block-site-title a {
	display: inline-block;
	padding: 0.95rem 2.2rem 0.95rem 2.4rem;
	border: 1px solid var(--wp--preset--color--accent);
	text-decoration: none;
	white-space: nowrap;
}

.sunshine-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

@media (max-width: 600px) {
	.sunshine-brand .wp-block-site-title a {
		padding: 0.7rem 1.1rem 0.7rem 1.3rem;
		letter-spacing: 0.14em;
	}
}

.sunshine-header .wp-block-navigation {
	color: var(--wp--preset--color--muted);
}

.sunshine-header .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0;
}

.sunshine-header .wp-block-navigation-item__content {
	position: relative;
	padding: 2.35rem 1.1rem;
	text-transform: capitalize;
	transition: color 0.2s ease;
}

.sunshine-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* The page you are on, and the one under the pointer, carry the terracotta
   line along the foot of the bar, as in the template. */
.sunshine-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.sunshine-header .wp-block-navigation-item__content:hover::after,
.sunshine-header .wp-block-navigation-item__content:focus-visible::after,
.sunshine-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.sunshine-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 1199px) {
	.sunshine-header .wp-block-navigation-item__content {
		padding-inline: 0.55rem;
	}
}

/*
 * Core switches the navigation to its menu button below 600px. Six links and
 * the framed name need about 900px, so between 600 and 992 the links had
 * nowhere to go but a second row. Collapse where the template does.
 */
@media (max-width: 991px) {
	.sunshine-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sunshine-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.sunshine-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.sunshine-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	right: auto;
	width: 2.5rem;
}

.sunshine-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.sunshine-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.sunshine-header__actions {
	flex-wrap: nowrap;
}

/* The dark mode switch: an icon in the menu's colour. */
.sunshine-header .sunshine-scheme-toggle > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 991px) {
	/* The menu button goes to the far right, after the dark mode switch. */
	.sunshine-header__end > .sunshine-nav {
		order: 3;
	}

	.sunshine-header__end {
		gap: 0.25rem !important;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	outline-offset: 3px;
}

/* ==========================================================================
   Icons

   Tabler Icons, used as masks: the SVG supplies the shape and the element's
   own text colour fills it, so an icon takes whatever palette is active and
   turns over in dark mode with no extra files. The class sits on the block
   itself -- the editor draws a block's classes, but not an empty span inside
   its text. An editor changes an icon under Advanced › Additional CSS
   class(es).
   ========================================================================== */

.sunshine-icon--calendar-event { --sunshine-icon: url("assets/icons/calendar-event.svg"); }
.sunshine-icon--bed { --sunshine-icon: url("assets/icons/bed.svg"); }
.sunshine-icon--mail { --sunshine-icon: url("assets/icons/mail.svg"); }
.sunshine-icon--home { --sunshine-icon: url("assets/icons/home.svg"); }
.sunshine-icon--device-tablet { --sunshine-icon: url("assets/icons/device-tablet.svg"); }
.sunshine-icon--user { --sunshine-icon: url("assets/icons/user.svg"); }
.sunshine-icon--folder { --sunshine-icon: url("assets/icons/folder.svg"); }

.sunshine-stay__icon[class*="sunshine-icon--"]::before,
.sunshine-line[class*="sunshine-icon--"]::before,
.sunshine-meta[class*="sunshine-icon--"]::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--sunshine-icon) center / contain no-repeat;
	mask: var(--sunshine-icon) center / contain no-repeat;
}

/* A line with its icon in front, as the template's contact details: the icon
   hangs in the margin, so a line that wraps stays one block of text. */
.sunshine-line[class*="sunshine-icon--"] {
	position: relative;
	padding-left: 2.4em;
	line-height: 1.7;
}

.sunshine-line[class*="sunshine-icon--"]::before {
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.5em;
	height: 1.5em;
	color: var(--wp--preset--color--muted);
}

.sunshine-line strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
}

.sunshine-meta[class*="sunshine-icon--"] {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

mark.has-inline-color:not([style*="background"]) {
	background-color: transparent;
}

/* ==========================================================================
   Ornaments  (assets/ornaments/, drawn by .dev/build_ornaments.py)

   Each ornament is two masks, one for its leaves and one for its flowers,
   filled from the palette: `leaf` for the leaves and a soft pink made from
   `accent` for the petals. Decoration only -- empty, and hidden from pointer
   events.
   ========================================================================== */

.sunshine-ornament {
	position: relative;
	margin-inline: auto !important;
	pointer-events: none;
}

.sunshine-ornament::before,
.sunshine-ornament::after,
.sunshine-has-branch::before,
.sunshine-has-blossom::before,
.sunshine-has-blossom::after,
.sunshine-rsvp::before,
.sunshine-rsvp::after,
.sunshine-rsvp-section::before,
.sunshine-rsvp-section::after {
	content: "";
	position: absolute;
	pointer-events: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.sunshine-ornament::before,
.sunshine-ornament::after {
	inset: 0;
}

/* The sprig over every section title. */
.sunshine-ornament--sprig {
	width: 211px;
	max-width: 100%;
	height: 54px;
	margin-block: 0 !important;
}

.sunshine-ornament--sprig::before {
	background-color: var(--wp--preset--color--leaf);
	-webkit-mask-image: url("assets/ornaments/sprig-leaves.svg");
	mask-image: url("assets/ornaments/sprig-leaves.svg");
}

.sunshine-ornament--sprig::after {
	background-color: var(--sunshine-petal);
	-webkit-mask-image: url("assets/ornaments/sprig-flowers.svg");
	mask-image: url("assets/ornaments/sprig-flowers.svg");
}

/* The small flourish in the hero's circle and under a programme card. */
.sunshine-ornament--flourish {
	width: 63px;
	height: 14px;
}

.sunshine-ornament--flourish::before {
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: url("assets/ornaments/flourish.svg");
	mask-image: url("assets/ornaments/flourish.svg");
}

.sunshine-ornament--on-primary::before {
	background-color: currentColor;
}

/* The branch at the countdown's corner. */
.sunshine-has-branch::before {
	top: clamp(4rem, 8vw, 6.5rem);
	right: -1rem;
	z-index: 0;
	width: 188px;
	height: 228px;
	background-color: color-mix(in srgb, var(--wp--preset--color--leaf) 70%, var(--wp--preset--color--base));
	-webkit-mask-image: url("assets/ornaments/branch.svg");
	mask-image: url("assets/ornaments/branch.svg");
}

/* The blossoms at the love story's top left, spilling from the countdown. */
.sunshine-has-blossom::before,
.sunshine-has-blossom::after {
	top: -5rem;
	left: -4rem;
	z-index: 0;
	width: 300px;
	height: 250px;
}

.sunshine-has-blossom::before,
.sunshine-rsvp::before,
.sunshine-rsvp-section::before {
	background-color: var(--wp--preset--color--leaf);
	-webkit-mask-image: url("assets/ornaments/blossom-leaves.svg");
	mask-image: url("assets/ornaments/blossom-leaves.svg");
}

.sunshine-has-blossom::after,
.sunshine-rsvp::after,
.sunshine-rsvp-section::after {
	background-color: var(--sunshine-petal);
	-webkit-mask-image: url("assets/ornaments/blossom-flowers.svg");
	mask-image: url("assets/ornaments/blossom-flowers.svg");
}

.sunshine-section > * {
	position: relative;
	z-index: 1;
}

/* The template drops its flowers below 992px, where they would sit on text. */
@media (max-width: 991px) {
	.sunshine-has-branch::before,
	.sunshine-has-blossom::before,
	.sunshine-has-blossom::after,
	.sunshine-rsvp::before,
	.sunshine-rsvp::after,
	.sunshine-rsvp-section::before,
	.sunshine-rsvp-section::after {
		display: none;
	}
}

/* ==========================================================================
   Section heads: the sprig, a date, and the title in spaced capitals
   (block style: core/heading › Spaced capitals)
   ========================================================================== */

.sunshine-section-head {
	margin-bottom: clamp(1.75rem, 4.5vw, 3.875rem);
}

.sunshine-section-head > .sunshine-ornament + * {
	margin-block-start: 1.25rem;
}

.wp-block-heading.is-style-sunshine-capitals {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sunshine-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.sunshine-lead {
	margin-inline: auto;
	font-size: 0.9375rem;
}

/* ==========================================================================
   Hero: the couple's photograph, and their names in a terracotta circle
   ringed by two fine lines, as the template draws it
   ========================================================================== */

.wp-block-cover.sunshine-hero {
	min-height: clamp(26rem, 58vw, 50rem) !important;
	padding: 2rem 1rem;
}

.sunshine-hero > .wp-block-cover__inner-container {
	display: flex;
	justify-content: center;
}

.sunshine-hero__circle {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(16.5rem, 34vw, 30rem);
	max-width: none !important;
	aspect-ratio: 1;
	margin: 0 auto !important;
	padding: 2rem;
	border-radius: 50%;
}

.sunshine-hero__circle > * {
	margin-block: 0 !important;
}

/* The rings: a terracotta one and a gold one, each a little off the circle,
   as if drawn by hand. */
.sunshine-hero__circle::before,
.sunshine-hero__circle::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.sunshine-hero__circle::before {
	inset: -1.9rem -2.5rem -1.6rem -1.25rem;
	border: 1px solid var(--wp--preset--color--accent);
}

.sunshine-hero__circle::after {
	inset: -1.9rem -1.6rem -1.6rem -2.5rem;
	border: 1px solid var(--wp--preset--color--gold);
}

.sunshine-hero__circle .sunshine-ornament {
	margin-bottom: 0.4rem !important;
}

.sunshine-hero__date {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-top: 0.3rem !important;
}

.sunshine-hero__names.wp-block-heading {
	margin-block: 1.1rem 1.6rem !important;
	color: inherit;
	font-size: clamp(1.25rem, 2.6vw, 2.25rem);
	line-height: 1.3;
}

.sunshine-hero__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 781px) {
	/* On a phone the circle goes to the foot of the photograph, clear of the
	   couple's faces, and loses its rings. */
	.wp-block-cover.sunshine-hero {
		align-items: flex-end;
		min-height: 36rem !important;
		padding-bottom: 1.5rem;
	}

	.sunshine-hero__circle {
		padding: 1.5rem;
	}

	/* The narrow frame follows the bride, so her face is whole above the
	   circle rather than cut by the edge. */
	.sunshine-hero > .wp-block-cover__image-background {
		object-position: 96% 30% !important;
	}

	.sunshine-hero__circle::before,
	.sunshine-hero__circle::after {
		display: none;
	}

	.sunshine-hero__names.wp-block-heading {
		margin-block: 0.6rem 0.9rem !important;
	}
}

/* ==========================================================================
   The page banner: the couple on the bridge under a veil, the page's name in
   the script at 80px
   ========================================================================== */

.wp-block-cover.sunshine-banner {
	min-height: clamp(15rem, 34vw, 31.25rem) !important;
}

/* In a template the banner sits outside any constrained layout, where
   `alignwide` has nothing to be wide of: hold it to the wide size, inset by
   the page gutter, as the hero is. */
.wp-site-blocks > .sunshine-banner {
	width: min(var(--wp--style--global--wide-size), calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)));
	margin-inline: auto;
}

/* The veil (the page colour, set on the block at 50%) gathered into a glow
   behind the title: the photograph keeps its colour at the edges, where the
   couple is, and the words sit on a pale ground -- a dim one in a dark
   palette or dark mode, where the title is light. */
.sunshine-banner > .wp-block-cover__background.has-background-dim {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: radial-gradient(
		ellipse 56% 34% at 50% 50%,
		color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent) 60%,
		color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent) 100%
	);
}

.sunshine-banner h1,
.sunshine-banner .wp-block-post-title,
.sunshine-banner .wp-block-query-title {
	margin: 0;
	/* A page's name is one word more often than not ("Accommodation"): on a
	   phone it shrinks to fit rather than breaking in the middle. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

@media (max-width: 600px) {
	.sunshine-banner h1.has-colossal-font-size,
	.sunshine-banner .wp-block-post-title.has-colossal-font-size {
		font-size: clamp(1.9rem, 9.2vw, 2.5rem) !important;
	}
}

.sunshine-banner__terms {
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sunshine-banner__terms a,
.sunshine-banner__terms .wp-block-post-terms__separator {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* ==========================================================================
   The countdown  ([sunshine_countdown], inc/wedding.php): four figures in the
   script in a white box, on a band of baby's breath
   ========================================================================== */

.wp-block-cover.sunshine-countdown-band {
	position: relative;
	min-height: 0 !important;
	overflow: visible;
	padding: 2.2rem 2.2rem 3.1rem;
}

/* The small point under the band. */
.sunshine-countdown-band::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.9rem;
	width: 2rem;
	height: 1rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--leaf) 30%, var(--wp--preset--color--base));
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
}

.sunshine-countdown-band > .wp-block-cover__inner-container {
	width: 100%;
}

.sunshine-countdown__units {
	display: flex;
	justify-content: space-evenly;
	padding: 1.9rem 1rem 2.25rem;
	background-color: var(--wp--preset--color--base);
	text-align: center;
}

.sunshine-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4rem;
}

.sunshine-countdown__value {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.sunshine-countdown__name {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.wp-block-cover.sunshine-countdown-band {
		padding: 1.5rem 1.25rem 2.2rem;
	}

	.sunshine-countdown__units {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1.25rem;
	}
}

/* ==========================================================================
   Our love story: two round portraits either side of a cream timeline
   ========================================================================== */

.sunshine-person__photo {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto !important;
}

.sunshine-person__photo img {
	display: block;
	width: 247px;
	max-width: 100%;
	height: auto;
}

/* The white ring inside the portrait. */
.sunshine-person__photo::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px solid var(--wp--preset--color--base);
	border-radius: 50%;
	pointer-events: none;
}

.sunshine-person__role {
	margin-top: 2rem !important;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
}

.sunshine-person__name.wp-block-heading {
	margin-top: 0.4rem !important;
}

.sunshine-person__bio {
	margin-top: 1.5rem !important;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.8;
}

.sunshine-social {
	gap: 0.4rem !important;
	margin-top: 1rem !important;
}

.sunshine-social .wp-social-link {
	transition: background-color 0.3s ease, color 0.3s ease;
}

.sunshine-social .wp-social-link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
}

.sunshine-timeline {
	padding: 1.9rem;
}

.sunshine-moment {
	position: relative;
	padding-block: 2.8rem 3rem;
}

.sunshine-moment + .sunshine-moment {
	margin-block-start: 0 !important;
}

/* The short line between two moments. */
.sunshine-moment:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.6rem;
	width: 1px;
	height: 2.5rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.sunshine-moment > h3 {
	margin: 0;
}

.sunshine-moment > p {
	margin-top: 0.75rem !important;
}

@media (max-width: 781px) {
	.sunshine-story > .wp-block-column + .wp-block-column {
		margin-top: 1rem;
	}
}

/* ==========================================================================
   Gallery: three photographs to a row, in widths of four, three and five
   twelfths, the next row the other way round, as the template's grid

   A core gallery with a class: the photographs stay ordinary images, each
   with core's lightbox, and an editor adds or reorders them in the gallery.
   ========================================================================== */

.sunshine-mosaic.wp-block-gallery.has-nested-images {
	--sunshine-gap: 8px;
	gap: var(--sunshine-gap) !important;
}

.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
	height: clamp(15rem, 28.5vw, 25.625rem);
	margin: 0;
}

.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1200px) {
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+1),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+6),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+7) {
		width: calc((100% - 2 * var(--sunshine-gap)) * 4 / 12);
	}

	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+2),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+4),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+8) {
		width: calc((100% - 2 * var(--sunshine-gap)) * 3 / 12);
	}

	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+3),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+5),
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-child(9n+9) {
		width: calc((100% - 2 * var(--sunshine-gap)) * 5 / 12);
	}
}

@media (min-width: 600px) and (max-width: 1199px) {
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: calc((100% - var(--sunshine-gap)) / 2);
	}
}

@media (max-width: 599px) {
	.sunshine-mosaic.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
		height: 20rem;
	}
}

/* The sidebar's album: six small squares. */
.sunshine-album.wp-block-gallery.has-nested-images {
	gap: 0.5rem !important;
}

.sunshine-album.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: calc((100% - 1rem) / 3);
	aspect-ratio: 1;
	margin: 0;
}

.sunshine-album.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   The day: three photographs, each framing a white card with the time, what
   happens and a line about it
   ========================================================================== */

.wp-block-cover.sunshine-programme {
	min-height: 0 !important;
	height: 100%;
	padding: 1.25rem;
	align-items: stretch;
}

.sunshine-programme > .wp-block-cover__inner-container {
	display: flex;
	width: 100%;
}

.sunshine-programme__box {
	flex: 1;
	/* A cover sets its content in white for the photograph; the card is white. */
	color: var(--wp--preset--color--muted);
	padding: clamp(2rem, 4vw, 3.5rem) 1.9rem;
}

.sunshine-programme__box > .sunshine-ornament {
	margin-top: 1rem !important;
}

.sunshine-programme__time {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
}

.sunshine-programme__title.wp-block-heading {
	margin-top: 0.6rem !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
}

.sunshine-programme-row > .wp-block-column {
	display: flex;
}

.sunshine-programme-row > .wp-block-column > .wp-block-cover {
	flex: 1;
}

/* ==========================================================================
   RSVP: a white card between two sprays of flowers
   ========================================================================== */

.sunshine-rsvp-section {
	padding-bottom: clamp(3rem, 12vw, 11rem) !important;
}

.sunshine-rsvp {
	position: relative;
}

.sunshine-rsvp__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 35rem !important;
	margin-inline: auto !important;
	padding: clamp(1.5rem, 4vw, 3.2rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.75rem, 4.5vw, 3.75rem);
	box-shadow: var(--wp--preset--shadow--card);
}

.sunshine-rsvp__title.wp-block-heading {
	margin: 0;
}

.sunshine-rsvp__lead {
	margin-top: 0.4rem !important;
	font-size: 0.9375rem;
}

.sunshine-rsvp__card .wp-block-shortcode {
	margin-top: 1.5rem;
}

/* One spray at the card's top left, one at its foot on the right. */
.sunshine-rsvp::before,
.sunshine-rsvp::after {
	top: -6.5rem;
	left: calc(50% - 35rem / 2 - 9rem);
	width: 270px;
	height: 225px;
}

.sunshine-rsvp-section::before,
.sunshine-rsvp-section::after {
	bottom: clamp(1rem, 4vw, 4rem);
	left: calc(50% + 35rem / 2 - 8rem);
	z-index: 2;
	width: 230px;
	height: 192px;
	transform: rotate(160deg);
}

/* ==========================================================================
   Location: the map, with a white card over its foot
   ========================================================================== */

.sunshine-location {
	position: relative;
}

.sunshine-location .sunshine-map {
	/* The map spans the section's wide width, as the template's does, not the
	   text column a constrained layout would hold it to. */
	width: 100%;
	max-width: none !important;
	height: clamp(20rem, 44vw, 40rem) !important;
}

.sunshine-location__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 38.5rem !important;
	margin-top: clamp(-22rem, -23vw, -2rem) !important;
	margin-inline: auto !important;
	padding: clamp(1.5rem, 4vw, 3.4rem) clamp(1.25rem, 4vw, 3.75rem);
}

.sunshine-location__card > h2 {
	margin: 0;
}

.sunshine-location__address {
	margin-top: 0.6rem !important;
}

.sunshine-location__address a {
	text-decoration: none;
}

.sunshine-location__label.wp-block-heading {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.sunshine-location__columns p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.sunshine-location__card {
		margin-top: 0 !important;
	}
}

/* ==========================================================================
   Accommodation: the photographs, and three hotels on cream cards
   ========================================================================== */

.sunshine-stay-photos .wp-block-image,
.sunshine-stay-pair .wp-block-image {
	margin: 0;
}

.sunshine-stay-photos .wp-block-image img {
	width: 100%;
}

.sunshine-stay-pair {
	margin-block-start: 0.5rem !important;
}

.sunshine-stay {
	height: 100%;
	box-sizing: border-box;
	padding: 2.5rem 1.9rem 2.2rem;
}

.sunshine-stays > .wp-block-column {
	display: flex;
}

.sunshine-stays > .wp-block-column > .sunshine-stay {
	flex: 1;
}

.sunshine-stay__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-inline: auto !important;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.sunshine-stay__icon[class*="sunshine-icon--"]::before {
	width: 1.6rem;
	height: 1.6rem;
}

.sunshine-stay > h3 {
	margin-top: 1rem !important;
}

.sunshine-stay__distance {
	margin-top: 0.3rem !important;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	font-size: 0.9375rem;
}

.sunshine-stay__note {
	margin-top: 1.25rem !important;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--divider);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.sunshine-contact h2 {
	margin: 0;
}

/* ==========================================================================
   The blog list: a wide photograph with the date on a dark tab over its
   corner, then the words in a panel with a soft shadow
   ========================================================================== */

.sunshine-post-list > li + li {
	margin-top: 2.25rem;
}

.sunshine-post-card__media {
	position: relative;
}

.sunshine-post-card__media > .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.sunshine-post-card__media > .wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sunshine-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.sunshine-post-card__media > .sunshine-date-tab {
	position: absolute;
	left: clamp(1.25rem, 3vw, 2.5rem);
	bottom: -1.25rem;
	z-index: 1;
	max-width: none;
	margin: 0 !important;
	padding: 0.5rem 1.4rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* A post with no featured image: the tab sits in the flow and overlaps the
   panel below, instead of floating over nothing. */
.sunshine-post-card__media:not(:has(img)) > .sunshine-date-tab {
	position: relative;
	bottom: auto;
	display: inline-block;
	margin: 0 0 -1.25rem clamp(1.25rem, 3vw, 2.5rem) !important;
}

.sunshine-date-tab > * {
	margin: 0 !important;
}

.sunshine-date-tab__day {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	line-height: 1.3;
}

.sunshine-date-tab__month {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	line-height: 1.4;
}

.sunshine-post-card > .wp-block-group.sunshine-post-card__body {
	margin-block-start: 0;
	padding: clamp(2.5rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 1.75rem) 2rem;
	box-shadow: var(--wp--preset--shadow--card);
}

.sunshine-post-card__body .wp-block-post-title {
	font-weight: 600;
}

.sunshine-post-card__body .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.sunshine-post-meta {
	color: var(--wp--preset--color--muted);
}

.sunshine-post-meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.sunshine-post-meta a:hover {
	color: var(--wp--preset--color--primary);
}

.sunshine-pagination {
	margin-top: 3.125rem;
	gap: 0.6rem;
}

.sunshine-pagination .page-numbers,
.sunshine-pagination .wp-block-query-pagination-previous,
.sunshine-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.8rem;
	height: 2.8rem;
	padding: 0 0.8rem;
	border: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sunshine-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--surface);
}

.sunshine-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.6rem;
}

/* The three newest posts (pattern: Latest news). */
.sunshine-news .wp-block-post-featured-image {
	margin: 0;
}

.sunshine-kicker {
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   Sidebar  (block style: core/group › Widget panel)
   ========================================================================== */

.wp-block-group.is-style-sunshine-widget {
	padding: 1.875rem;
	background-color: var(--wp--preset--color--blush);
}

.sunshine-sidebar > .is-style-sunshine-widget + .is-style-sunshine-widget {
	margin-block-start: 1.875rem;
}

.is-style-sunshine-widget > .sunshine-widget__title {
	margin-bottom: 0;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-weight: 500;
}

.is-style-sunshine-widget .wp-block-categories,
.is-style-sunshine-widget .wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
}

.is-style-sunshine-widget .wp-block-categories li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-sunshine-widget .wp-block-categories li:first-child {
	padding-top: 0;
}

.is-style-sunshine-widget .wp-block-categories a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.is-style-sunshine-widget .wp-block-categories a:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-sunshine-widget .wp-block-latest-posts li {
	display: flow-root;
	margin-bottom: 1.25rem;
}

.is-style-sunshine-widget .wp-block-latest-posts__featured-image.alignleft {
	margin: 0 1.25rem 0 0;
}

.is-style-sunshine-widget .wp-block-latest-posts__featured-image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.is-style-sunshine-widget .wp-block-latest-posts__post-title {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

.is-style-sunshine-widget .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-sunshine-widget .wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-sunshine-widget .wp-block-tag-cloud a {
	margin: 0 0.2rem 0.5rem 0;
	padding: 0.25rem 1.1rem;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem !important;
	text-decoration: none;
}

.is-style-sunshine-widget .wp-block-tag-cloud a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.sunshine-widget--search .wp-block-search__inside-wrapper {
	flex-direction: column;
	gap: 1rem;
}

.sunshine-widget--search .wp-block-search__button,
.sunshine-widget--search .wp-block-search__input {
	width: 100%;
	margin: 0;
}

.sunshine-widget--search .wp-block-search__button {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Single post
   ========================================================================== */

.sunshine-post-meta.is-layout-flex {
	margin-block-start: 1.5rem;
}

.sunshine-entry blockquote.wp-block-quote {
	margin: 2rem 0;
	padding: 1.9rem 1.9rem 1.9rem 2.2rem;
	background-color: var(--wp--preset--color--surface);
}

.sunshine-entry blockquote.wp-block-quote p {
	margin: 0;
}

.sunshine-tags a {
	display: inline-block;
	margin: 0 0.3rem 0.4rem 0;
	padding: 0.2rem 0.9rem;
	border: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.sunshine-tags .wp-block-post-terms__separator {
	display: none;
}

.sunshine-post-nav {
	padding-block: 1.9rem;
	border-top: 1px solid var(--wp--preset--color--divider);
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-weight: 500;
}

.sunshine-post-nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sunshine-post-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* A post with no author (an import, a script) renders an empty author block:
   no panel for it either. */
.sunshine-author-box:not(:has(.wp-block-post-author)) {
	display: none;
}

.sunshine-author .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.sunshine-author .wp-block-post-author__name {
	font-weight: 600;
}

.sunshine-author .wp-block-post-author__bio {
	color: var(--wp--preset--color--muted);
}

.sunshine-comments .sunshine-comment {
	margin-block: 1.9rem 0;
}

.sunshine-comments .wp-block-comment-content p {
	margin-top: 0;
	color: var(--wp--preset--color--muted);
}

.sunshine-comment .wp-block-comment-date a,
.sunshine-comment__reply a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	text-transform: uppercase;
}

/* ==========================================================================
   Footer: a cream band of links, and a line with the names under it
   ========================================================================== */

.sunshine-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem clamp(1.25rem, 3.8vw, 3.375rem);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sunshine-footer__links li {
	margin: 0;
}

.sunshine-footer__links a {
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	text-decoration: none;
}

.sunshine-footer__links a:hover,
.sunshine-footer__links a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.sunshine-footer__copy {
	margin: 0;
}

.sunshine-footer__copy a {
	text-decoration: none;
}

/* ==========================================================================
   Scroll reveals (assets/js/interactions.js)

   Hidden only once the script has run, and only for what is below the first
   screen, so a visitor without JavaScript, a crawler, or anyone looking at the
   top of the page sees content immediately.
   ========================================================================== */

.sunshine-motion .sunshine-reveal {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--sunshine-reveal-delay, 0ms);
}

.sunshine-motion .sunshine-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Reduced motion: no movement anywhere, content shown at once.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sunshine-motion .sunshine-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sunshine-header,
	.sunshine-header .wp-block-navigation-item__content::after,
	.sunshine-social .wp-social-link,
	.wp-block-post-featured-image img {
		transition: none;
	}

	.sunshine-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}