/*
Theme Name: Avada Child - Paradise Gardens
Description: Child theme for the Paradise Gardens wedding & reception garden venue website (Moama, NSW), built on Avada.
Theme URI: https://www.paradisegardensmoama.com.au/
Author: Shannon Savage
Template: Avada
Version: 1.0.33
Requires PHP: 7.4
Text Domain: avada-child
*/

/* ==========================================================================
   Paradise Gardens custom overrides
   Everything below is intentionally minimal — global styling (colors,
   typography, spacing) is configured through the Avada Options Panel /
   Fusion Builder Global Options wherever possible. This stylesheet only
   holds overrides that can't be done through the builder UI.
   ========================================================================== */

/* Accessibility: WCAG AA color contrast fixes.
   Both of these are Avada's out-of-box default colors (not something we
   customized) — the light mint "active nav item" accent and the default
   footer copyright text both fail 4.5:1 against their backgrounds. */
.fusion-main-menu .fusion-bar-highlight .menu-text,
.fusion-main-menu li.current-menu-item > a .menu-text,
.fusion-main-menu li > a:hover .menu-text {
	color: #2C5E3F !important;
}

.fusion-copyright-notice,
.fusion-copyright-notice a {
	color: #a9a9a9 !important;
}

/* Header logo: the generated wordmark is uploaded at native size (481x97)
   and Avada doesn't constrain custom logo height by default — cap it so
   the header keeps sensible proportions. Must cover BOTH logo variants:
   .fusion-standard-logo (desktop) and .fusion-mobile-logo (tablet/phone,
   swapped in by Avada's own responsive breakpoint, not the one used
   elsewhere in this file for the hero-blend header). Missing the mobile
   variant here was rendering the logo at its full native 481×97px on
   iPad/phone — nearly two-thirds of the screen width — ballooning the
   header height and crowding the hero heroes on the wedding pages right
   underneath it. */
.fusion-standard-logo,
.fusion-mobile-logo {
	max-height: 60px;
	width: auto;
}

/* Home hero: gradient wash over the video (instead of a flat overlay
   color) so the centered white headline/buttons stay legible against
   any part of the footage — darkest at top and bottom where the text
   sits, lighter through the middle. Fusion Builder's own gradient
   option is a simple 2-stop linear/radial gradient and can't do this
   3-stop vignette, so it's handled here instead, scoped to .pg-hero
   via the container's custom class. */
.pg-hero {
	position: relative;
}
.pg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* Nav, headline, subtext and buttons all sit in roughly the top 60%
	   of the hero — keep that whole band consistently dark rather than
	   fading up in the middle (an earlier version lightened right where
	   the headline sits). Only ease off in the bottom ~40%, where
	   there's no text, to let more of the photo show through. */
	background: linear-gradient(
		180deg,
		rgba(10, 20, 14, 0.78) 0%,
		rgba(10, 20, 14, 0.6) 60%,
		rgba(10, 20, 14, 0.3) 100%
	);
}
/* Hero content sits above the gradient layer. */
.pg-hero > .fusion-builder-row {
	position: relative;
	z-index: 3;
}

/* Wedding offering page heroes (not the home page, which has its own
   scroll-triggered layout below the hero): a small bouncing chevron at the
   bottom signals there's more to see, since the whole point of this
   redesign is pulling a phone/iPad visitor straight into the photos
   instead of leaving the hero looking like a dead end. Respects
   prefers-reduced-motion by simply not animating. */
.pg-hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 3;
	color: #ffffff;
	font-size: 22px;
	opacity: 0.85;
	animation: pg-scroll-cue-bounce 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.pg-hero-scroll-cue {
		animation: none;
	}
}
@keyframes pg-scroll-cue-bounce {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(8px);
	}
}

/* Emotional "hook" line: the client's own offering description, promoted
   from a small centered paragraph into the page's second big moment,
   right after the hero. The specific guest-cap figure that used to live
   in the same sentence (e.g. "...lush green garden (maximum of 120
   guests)") now lives in the stats row below instead, so this reads as a
   clean, uncluttered statement rather than a fact dump. */
.pg-hook {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 30px;
	line-height: 1.45;
	color: #2c5e3f;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
/* Avada's own `.fusion-text p` margin rule outranks `margin: 0 auto`
   above and was pinning the hook to the left of its column. */
#main .pg-hook,
#main .pg-quote-break p {
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 640px) {
	.pg-hook {
		font-size: 23px;
	}
}

/* Photo showcase: an editorial layout instead of a uniform thumbnail grid
   — a large lead photo with smaller supporting shots for pages with 4
   images, two even large tiles for pages with 2, and a single generous
   banner for pages (like Riverbank Ceremonies) that only have one
   approved photo so far, so a thin gallery doesn't look like a mistake.

   On phone/iPad widths all three variants collapse into the same
   horizontal swipe filmstrip — genuinely easier to browse one-handed than
   a cramped multi-column grid, and the partially-visible next photo (85%
   tile width) signals it's swipeable without needing an instruction. */
.pg-showcase {
	display: grid;
	gap: 12px;
}
.pg-showcase--grid {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 190px;
}
.pg-showcase--grid .pg-showcase-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.pg-showcase--pair {
	grid-template-columns: repeat(2, 1fr);
}
.pg-showcase--pair .pg-showcase-item {
	height: 420px;
}
.pg-showcase--single {
	grid-template-columns: 1fr;
}
.pg-showcase--single .pg-showcase-item {
	height: 460px;
}
.pg-showcase-item {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.pg-showcase-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.pg-showcase-item:hover img {
	transform: scale(1.03);
}
@media (max-width: 800px) {
	.pg-showcase {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.pg-showcase::-webkit-scrollbar {
		display: none;
	}
	.pg-showcase-item {
		flex: 0 0 85%;
		height: 340px;
		scroll-snap-align: center;
		grid-column: unset;
		grid-row: unset;
	}
	.pg-showcase--single .pg-showcase-item {
		flex-basis: 100%;
		height: 320px;
	}
}

/* The --grid variant above is built for 5 photos (2x2 lead + 4 tiles);
   with fewer, it left an empty block bottom-right. Pages with 3 or 4
   photos instead get a lead photo with the rest stacked beside it.
   Desktop only — the mobile filmstrip ignores grid placement anyway. */
@media (min-width: 801px) {
	.pg-showcase--grid:has(> .pg-showcase-item:nth-child(3):last-child),
	.pg-showcase--grid:has(> .pg-showcase-item:nth-child(4):last-child) {
		grid-template-columns: 2fr 1fr;
	}
	.pg-showcase--grid:has(> .pg-showcase-item:nth-child(3):last-child) .pg-showcase-item:first-child {
		grid-column: 1;
		grid-row: span 2;
	}
	.pg-showcase--grid:has(> .pg-showcase-item:nth-child(4):last-child) {
		grid-auto-rows: 130px;
	}
	.pg-showcase--grid:has(> .pg-showcase-item:nth-child(4):last-child) .pg-showcase-item:first-child {
		grid-column: 1;
		grid-row: span 3;
	}
}

/* At-a-glance stats: pulls the practical facts (guest cap, timing,
   catering) out of prose and into a scannable row of icon + figure, so
   they register in a glance on a phone instead of needing to be read as a
   sentence. */
.pg-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 900px;
	margin: 0 auto;
}
.pg-stat {
	text-align: center;
}
.pg-stat i {
	font-size: 30px;
	color: #2c5e3f;
	margin-bottom: 10px;
	display: block;
}
.pg-stat-value {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 24px;
	color: #2c5e3f;
	display: block;
}
.pg-stat-label {
	font-size: 14px;
	color: #6b6b60;
}
@media (max-width: 640px) {
	.pg-stats {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* "What's included" + price panel: replaces the earlier single pricing
   card. Each page has exactly one package, so a tier-style card (header
   bar, long bullet list, price buried in small text at the bottom) read
   like a pricing table missing its other columns. Instead: a scannable
   icon grid of inclusions on the left, and the price itself as the
   focal point of a summary panel on the right with the key facts (hours,
   guest cap), optional extras and the Contact Us button. Stacks to one
   column at tablet width and below, with the price panel last. */
.pg-included {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 56px;
	align-items: start;
	max-width: 1080px;
	margin: 0 auto;
	text-align: left;
}
#main .pg-included-kicker {
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #6b6b60;
	margin: 0 0 30px;
}
#main .pg-included-title {
	font-family: "Playfair Display", serif !important;
	font-style: italic;
	font-weight: 400 !important;
	font-size: 60px !important;
	line-height: 1.05 !important;
	color: #2c5e3f !important;
	margin: 0 0 14px;
}
.pg-included ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 32px;
}
.pg-included li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	color: #2b2b26;
	font-size: 15px;
	line-height: 1.6;
}
.pg-included li > i {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 50%;
	background: #e8efe9;
	color: #2c5e3f;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	margin-top: 2px;
}
.pg-included li strong {
	display: block;
	font-size: 16px;
	color: #2c5e3f;
	margin-bottom: 2px;
}
.pg-included-price {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #eee6d8;
	box-shadow: 0 20px 50px rgba(44, 94, 63, 0.12);
	padding: 36px 34px;
	text-align: center;
	position: sticky;
	top: 120px;
}
#main .pg-included-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #6b6b60;
	margin: 0;
}
#main .pg-included-amount {
	font-family: "Playfair Display", serif;
	font-size: 58px;
	line-height: 1;
	color: #2c5e3f;
	margin: 14px 0 6px;
}
#main .pg-included-what {
	font-size: 15px;
	color: #2b2b26;
	margin: 0 0 22px;
}
.pg-included-price dl {
	margin: 0 0 22px;
	border-top: 1px solid #f0ece0;
}
.pg-included-price dl div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid #f0ece0;
	font-size: 15px;
}
.pg-included-price dt {
	color: #6b6b60;
}
.pg-included-price dd {
	margin: 0;
	color: #2b2b26;
	font-weight: 600;
}
#main .pg-included-extra {
	font-size: 14px;
	font-style: italic;
	color: #6b6b60;
	margin: 0 0 22px;
}
#main a.pg-included-cta {
	display: block;
	background: #2c5e3f;
	color: #ffffff;
	border-radius: 6px;
	padding: 15px;
	font-weight: 600;
	text-decoration: none;
}
/* WordPress's auto-paragraphing can wrap the button in a stray <p>/<br>
   if the content is re-saved from the editor — don't let that add a gap. */
.pg-included-price > :last-child,
.pg-included-price > p:last-child {
	margin-bottom: 0;
}
.pg-included-price br {
	display: none;
}
#main a.pg-included-cta:hover {
	background: #234b32;
}
@media (max-width: 1024px) {
	.pg-included {
		grid-template-columns: 1fr;
		gap: 40px;
		max-width: 640px;
	}
	.pg-included-price {
		position: static;
	}
}
@media (max-width: 640px) {
	.pg-included ul {
		grid-template-columns: 1fr;
	}
	#main .pg-included-title {
		font-size: 44px !important;
	}
	.pg-included-price {
		padding: 30px 24px;
	}
}

/* Story section: a couple of paragraphs of scene-setting body copy
   (Moama, the Murray, what a day here actually feels like), sitting
   between the stats row and pricing so the page has some narrative flesh
   beyond headline + hook + facts. Plain body type, not the hook's italic
   treatment — this is prose to read, not a pull-quote. */
.pg-story {
	max-width: 720px;
	margin: 0 auto;
}
.pg-story p {
	font-size: 17px;
	line-height: 1.75;
	color: #2b2b26;
}
.pg-story p + p {
	margin-top: 18px;
}

/* Story section heading lockup: the client's "PARADISE on the Murray" /
   "RECEPTIONS by the Murray" heading, split into a large italic serif
   title ("Paradise") over a letter-spaced line ("on the Murray", echoing
   the hero's "PARADISE GARDENS · MOAMA" eyebrow), with a short rule below — so
   the section reads as a designed editorial moment rather than a stray
   h3 over plain body copy. The two spans live inside the Fusion Title
   element's content; the section and story are matched via :has() so a
   Fusion re-save stripping container classes can't break it. */
.fusion-fullwidth:has(.pg-kicker):has(.pg-story) {
	padding-top: 100px !important;
	padding-bottom: 100px !important;
}
.fusion-title .pg-kicker {
	display: block;
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #6b6b60;
	margin-top: 14px;
	line-height: 1.4;
}
.fusion-title .pg-kicker-title {
	display: block;
	font-family: "Playfair Display", serif;
	font-style: italic;
	/* !important: some builder titles carry a 700 font-variant setting. */
	font-weight: 400 !important;
	font-size: 60px;
	line-height: 1.05;
	color: #2c5e3f;
}
.fusion-title:has(.pg-kicker) + .fusion-text .pg-story::before {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	background: #2c5e3f;
	opacity: 0.45;
	margin: 6px auto 36px;
}
/* No separate "lead paragraph" styling: client asked (Nov 2026) for all
   story paragraphs to share one type size and colour. */
@media (max-width: 640px) {
	.fusion-fullwidth:has(.pg-kicker):has(.pg-story) {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
	.fusion-title .pg-kicker {
		font-size: 12px;
		letter-spacing: 0.3em;
	}
	.fusion-title .pg-kicker-title {
		font-size: 44px;
	}
}

/* "Real weddings" carousel: full-width strip of real-wedding photos on
   the event pages, built with Avada's own Image Carousel element (class
   pg-carousel) so photos can be added/reordered in the builder. Slides
   share a 4:3 shape (the photos' native ratio) so they line up without
   being cropped or upscaled — a fixed pixel height made the browser's
   srcset pick a too-small file and stretch it. Brand-green arrows;
   lightbox is the element's own setting. */
.fusion-fullwidth.pg-real-weddings {
	overflow: hidden;
}
.pg-carousel {
	margin-top: 12px;
	width: 100%;
	max-width: 100%;
}
.pg-real-weddings .awb-swiper-button {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background-color: rgba(44, 94, 63, 0.9) !important;
	color: #ffffff !important;
	font-size: 18px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.pg-real-weddings .awb-swiper-button-prev {
	left: 12px !important;
}
.pg-real-weddings .awb-swiper-button-next {
	right: 12px !important;
}
.pg-real-weddings .awb-swiper-button:hover {
	background-color: #2c5e3f !important;
}
.pg-carousel .fusion-carousel-item-wrapper,
.pg-carousel .fusion-image-wrapper,
.pg-carousel .fusion-image-wrapper > a {
	display: block !important;
	width: 100% !important;
}
.pg-carousel .swiper-slide img {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Testimonials page: one featured review beside a photo, then an even
   grid of equal-height quote cards and a strip of wedding photos. Salutation ("Dear
   Sue,") is kept from the original thank-you cards for authenticity. */
.pg-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
.pg-testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #faf7f0;
	border-radius: 10px;
	padding: 30px 28px 26px;
}
/* Names line up along the bottom of each row of equal-height cards. */
.pg-testimonial figcaption {
	margin-top: auto !important;
	padding-top: 18px;
}
/* Featured review: the longest quote, set beside a large photo. */
.pg-testimonial-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
	align-items: stretch;
}
.pg-testimonial-feature-media,
.pg-testimonial-feature-media > p {
	margin: 0;
	height: 100%;
}
.pg-testimonial-feature > p:empty,
.pg-testimonial-photos > p:empty {
	display: none;
}
.pg-testimonial-feature-photo {
	display: block;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	min-height: 360px;
}
.pg-testimonial-feature-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pg-testimonial--featured {
	justify-content: center;
	padding: 44px 44px 40px;
}
#main .pg-testimonial--featured blockquote p {
	font-size: 18px !important;
}
/* Photo strip under the cards. */
.pg-testimonial-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 48px;
}
.pg-testimonial-photos .pg-showcase-item {
	aspect-ratio: 1 / 1;
	height: auto;
}
@media (max-width: 1024px) {
	.pg-testimonials {
		grid-template-columns: repeat(2, 1fr);
	}
	.pg-testimonial-feature {
		grid-template-columns: 1fr;
	}
	.pg-testimonial-feature-photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.pg-testimonial-photos {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.pg-testimonials {
		grid-template-columns: 1fr;
	}
	.pg-testimonial--featured {
		padding: 30px 28px 26px;
	}
}
.pg-testimonial > i {
	color: #2c5e3f;
	opacity: 0.45;
	font-size: 24px;
}
/* !important: Avada's global blockquote style adds a blue left bar,
   grey box and body font. */
#main .pg-testimonial blockquote,
#main .pg-testimonial blockquote p {
	margin: 14px 0 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: Inter, Arial, Helvetica, sans-serif !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: #2b2b26;
}
#main .pg-testimonial blockquote p {
	margin: 0 0 10px;
}
#main .pg-testimonial blockquote p:last-child {
	margin-bottom: 0;
}
/* Salutation keeps a touch of the heading font so the card still reads
   as a handwritten-style note; the quote itself is plain body text for
   easy reading. */
#main .pg-testimonial .pg-testimonial-salutation {
	font-family: "Playfair Display", serif !important;
	font-style: italic !important;
	font-size: 19px !important;
	color: #2c5e3f;
}
.pg-testimonial figcaption {
	font-weight: 600;
	font-size: 15px;
	color: #2c5e3f;
}
.pg-testimonial figcaption span {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #6b6b60;
}

/* About page: aerial drone photos (2x2, lightbox) and the two
   YouTube tours (side by side, stacking on phones). Videos keep a 16:9
   frame at any width. */
.pg-aerials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.pg-aerials .pg-showcase-item {
	aspect-ratio: 16 / 9;
	height: auto;
}
.pg-videos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.pg-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: #1a1a1a;
}
.pg-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 640px) {
	.pg-aerials,
	.pg-videos {
		grid-template-columns: 1fr;
	}
}

/* Quote break: a second, shorter full-bleed image band further down the
   page (reuses .pg-hero's dark gradient + white text treatment, just at a
   smaller min-height set per-container) — a deliberate pacing beat between
   the pricing card and the closing CTA, rather than letting the page end
   on a wall of pricing text. */
.pg-quote-break p {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 26px;
	max-width: 640px;
}
@media (max-width: 640px) {
	.pg-quote-break p {
		font-size: 20px;
	}
}

/* Sticky mobile "Contact Us" bar (see functions.php for the markup) —
   most visitors here are researching on a phone or iPad, and the primary
   action can otherwise scroll out of reach on a long, photo-heavy page.
   Desktop is untouched; the bar only appears at tablet width and below. */
.pg-sticky-cta {
	display: none;
}
@media (max-width: 1024px) {
	.pg-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(6px);
		border-top: 1px solid #e3ddd0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
	}
	.pg-sticky-cta-inner {
		display: flex;
		gap: 10px;
		max-width: 600px;
		margin: 0 auto;
	}
	.pg-sticky-cta a.pg-sticky-enquire {
		flex: 1;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 26px;
		background: #2c5e3f;
		color: #ffffff;
		font-weight: 600;
		text-decoration: none;
		font-size: 16px;
	}
	/* Leave room at the bottom of these 4 pages so the sticky bar never
	   overlaps the page's own final CTA buttons. */
	.page-id-66,
	.page-id-67,
	.page-id-68,
	.page-id-69 {
		padding-bottom: 78px;
	}
}

/* Hero-blend header: overlay the header on top of a page's hero image
   instead of it pushing the hero down as a separate white bar. Originally
   home-page-only; extended to the four wedding offering pages once they
   got their own hero banners (Garden/Riverbank Ceremonies, Riverbank
   Receptions, and the still-draft Wedding Receptions) — every page in this
   list must also put class="pg-hero" on its hero container (see the
   .pg-hero gradient rules above) or the header will overlay a section with
   no dark-enough backdrop for white nav text.
   Scoped to desktop widths only — mobile keeps the normal solid header,
   since there's less room to spare and no complaint about it there. Only
   applies before the header goes sticky (`.fusion-is-sticky`, added by
   Avada's own scroll-tracking JS) — once scrolled past the hero, the
   header reverts to its normal solid white bar so it stays legible over
   whatever page content is behind it. Every other page is unaffected. */
/* Avada reserves a themewide top padding on #main (via the
   --main_padding-top custom property) that assumes nothing full-bleed
   sits at the top of the page. On these hero pages it was a blank gap:
   between the true page top and the hero on desktop (header taken out
   of flow below), and between the solid header and the hero on phones —
   so it's removed at every width, not just inside the hero-blend query. */
.home #main,
.page-id-66 #main,
.page-id-67 #main,
.page-id-68 #main,
.page-id-69 #main,
.page-id-258 #main,
.page-id-8 #main {
	--main_padding-top: 0px;
}

@media (min-width: 641px) {
	.home .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky),
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header {
		background-color: transparent !important;
		box-shadow: none !important;
	}
	/* Logo: filter the (green) wordmark to white rather than swapping
	   image files — Avada's logo setting is global across every page,
	   so a second logo asset would need fighting that everywhere else.
	   Covers both .fusion-standard-logo (desktop) and .fusion-mobile-logo
	   (tablet width, still above our own 641px breakpoint here) — missing
	   the mobile variant left the green wordmark low-contrast against the
	   dark hero photo on iPad-width screens. */
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo {
		filter: brightness(0) invert(1);
	}
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-66 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-67 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-68 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .menu-text,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header a,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-header i,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-main-menu-icon::before,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons a::before,
	.page-id-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.page-id-258 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i,
	.page-id-8 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-menu-icons i {
		color: #ffffff !important;
	}
}

/* Hero background video: fall back to the static poster image (the
   container's video_preview_image, rendered as .fullwidth-video-image)
   on small screens — saves mobile data and sidesteps inconsistent
   autoplay behaviour, without hiding the rest of the hero content. */
@media (max-width: 640px) {
	.fullwidth-video {
		display: none !important;
	}
}

/* Accessibility: prefers-reduced-motion — swap any hero background video
   for its static poster image and stop it playing, per WCAG 2.2.2. */
@media (prefers-reduced-motion: reduce) {
	.fullwidth-video {
		display: none !important;
	}
}

/* Home page: the three offering cards (Garden Ceremonies / Riverbank
   Ceremonies / Wedding Receptions) have different description lengths, so
   Fusion Builder's default top-aligned row (align-items: flex-start) left
   each card its own height and the buttons landed at different vertical
   positions. Stretch the row so all three columns match height, then lay
   each column out as a flex column with the button (last child: image,
   title, description, button) pushed to the bottom via margin-top: auto —
   headings and buttons now line up across all three cards regardless of
   description length. Scoped via the custom row class set in the row's
   Fusion Builder attributes on the Home page, not a generic selector. */
.pg-offering-row.fusion-row,
.fusion-builder-row:has(.pg-card-image) {
	align-items: stretch !important;
}
.pg-offering-row .fusion-column-wrapper,
.fusion-builder-row:has(.pg-card-image) .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.pg-offering-row .fusion-column-wrapper > *:last-child,
.fusion-builder-row:has(.pg-card-image) .fusion-column-wrapper > *:last-child {
	margin-top: auto;
}
/* Keep each card's button label on one line at iPad widths — a wrapped
   two-line "View Riverbank Ceremonies" was taller than its neighbours and
   threw the three buttons out of line. */
@media (min-width: 801px) and (max-width: 1100px) {
	.fusion-builder-row:has(.pg-card-image) .fusion-button {
		white-space: nowrap;
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Home page photo sizing: the three offering-card images and the "Glimpse
   of the Gardens & River" strip both use a fixed-height crop container
   (width: 100%; object-fit: cover on the inner <img>) rather than
   aspect-ratio, since that's what actually renders consistently across the
   three cards (see git history for why). Sizes are set here as classes
   instead of inline pixel heights so they can scale down on smaller
   screens, and so future image swaps only need the class name kept, not a
   pixel value re-typed by hand.

   Card images are the largest photos on the page (after the hero) since
   they're the primary "sell" for each offering — desktop height is
   intentionally generous. Glimpse strip images are secondary/supporting,
   so they're sized a step down from the cards. */
.pg-card-image {
	width: 100%;
	height: 460px;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 24px;
}
.pg-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 800px) {
	.pg-card-image {
		height: 340px;
	}
}
@media (max-width: 480px) {
	.pg-card-image {
		height: 280px;
	}
}

.pg-glimpse-image {
	display: block;
	width: 100%;
	height: 320px;
	overflow: hidden;
	border-radius: 4px;
}
.pg-glimpse-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 800px) {
	.pg-glimpse-image {
		height: 240px;
	}
}
@media (max-width: 480px) {
	.pg-glimpse-image {
		height: 200px;
	}
}

/* Pricing table: Avada's default hover state swaps the panel and
   panel-heading background to light gray and shows a pointer cursor over
   the whole card, implying the entire panel is clickable — but only the
   "Enquire" button inside it actually is, and on our already-light page
   background the gray swap barely reads as anything, more like a glitch
   than feedback. Neutralize the background swap/cursor and replace it
   with a deliberate hover state (brand-green border + soft shadow lift)
   scoped to our pricing table's own colors, which only appears on these
   wedding offering pages. */
.fusion-pricing-table .panel-wrapper:hover {
	cursor: default;
}
.fusion-pricing-table .panel-wrapper:hover .fusion-panel,
.fusion-pricing-table .panel-wrapper:hover .panel-heading {
	background-color: #ffffff !important;
}
.fusion-pricing-table .fusion-panel {
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.fusion-pricing-table .panel-wrapper:hover .fusion-panel {
	border-color: #2c5e3f;
	box-shadow: 0 10px 28px rgba(44, 94, 63, 0.16);
}

/* Accessibility: make sure focus is always visible even if Fusion Builder
   or a future design pass strips default outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.fusion-button:focus-visible {
	outline: 3px solid #2c5e3f;
	outline-offset: 2px;
}

/* Pages that end on a full-bleed green CTA (or, on Contact, a full-bleed
   cream section): Avada's #main bottom padding showed as a white strip
   between that last section and the footer. */
.home #main,
.page-id-11 #main,
.page-id-12 #main,
.page-id-13 #main,
.page-id-66 #main,
.page-id-67 #main,
.page-id-68 #main,
.page-id-69 #main,
.page-id-258 #main,
.page-id-8 #main {
	--main_padding-bottom: 0px;
}
/* Testimonials and Contact use the default page template (not 100-width),
   where Avada gives #content a 50px bottom margin on phones. */
.page-id-11 #content,
.page-id-13 #content {
	margin-bottom: 0;
}

/* The footer widget area is enabled but has no widgets — on phones it
   still rendered ~200px of blank space above the copyright bar. */
.fusion-footer-widget-area:not(:has(.widget)) {
	display: none;
}

/* Last paragraph in a text block: drop Avada's trailing paragraph margin
   so short one-liners (appointment bar, hook, quote, CTA subtext) sit
   vertically centred in their section instead of riding high. */
#main .fusion-text > p:last-child,
#main .fusion-text > div:last-child > p:last-child {
	margin-bottom: 0;
}
/* ...but keep breathing room where a text block is followed by a button. */
#main .fusion-text:has(+ div > a.fusion-button) {
	margin-bottom: 20px;
}

/* Never break a phone number across lines. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Closing CTA sections ("Call Sue" + "Send an Enquiry"): each Fusion
   button sits in its own block wrapper, so they stacked at different
   widths/heights. Lay them side by side at matching height. Matched via
   :has() on the tel: button rather than a custom class, since custom
   classes on this content have been stripped by Fusion Builder re-saves. */
#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) {
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	column-gap: 16px;
}
#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) > * {
	width: 100%;
}
#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) > div:has(> a.fusion-button) {
	width: auto;
}
#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) a.fusion-button {
	min-height: 48px;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}
@media (max-width: 480px) {
	#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) > div:has(> a.fusion-button) {
		width: 100%;
	}
	#main .fusion-column-wrapper:has(> div > a.fusion-button[href^="tel:"]) a.fusion-button {
		width: 100%;
		max-width: 280px;
		justify-content: center;
		margin-top: 6px;
		margin-bottom: 6px;
	}
}

/* Phones: a 60px logo is ~300px wide, which pushed the search/menu icons
   onto their own row under it. Slightly smaller logo keeps them level. */
@media (max-width: 640px) {
	.fusion-mobile-logo,
	.fusion-standard-logo {
		max-height: 44px;
	}
	.home .pg-hero .fusion-title h1 {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}
	/* Inner page titles (About, Testimonials, FAQ, Contact, Privacy): keep
	   them to two lines at most on phones, matching each other. */
	.page-id-3 #main h1,
	.page-id-8 #main h1,
	.page-id-11 #main h1,
	.page-id-12 #main h1,
	.page-id-13 #main h1 {
		font-size: 40px !important;
		line-height: 1.15 !important;
	}
}

/* Page-to-page transitions (cross-document View Transitions): a soft
   cross-fade between pages instead of a white flash, with the new page's
   content lifting a few pixels as it arrives. The header is named
   separately so the logo and menu stay steady while only the page
   changes. Supported in Chrome/Edge and Safari 18.2+; other browsers
   simply navigate as normal. */
@view-transition {
	navigation: auto;
}
.fusion-header-wrapper {
	view-transition-name: pg-header;
}
::view-transition-old(root) {
	animation: pg-page-out 0.25s ease both;
}
::view-transition-new(root) {
	animation: pg-page-in 0.45s ease both;
}
::view-transition-group(pg-header) {
	animation-duration: 0.3s;
}
@keyframes pg-page-out {
	to {
		opacity: 0;
	}
}
@keyframes pg-page-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Scroll fade-ups (see paradise_gardens_scroll_reveal() in functions.php
   for the script): photos and cards ease up into view as they're
   reached. Only applies once the script has added .pg-reveal-ready to
   <html>, so nothing is ever hidden if JavaScript doesn't run. */
.pg-reveal-ready .pg-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--pg-reveal-delay, 0s);
}
.pg-reveal-ready .pg-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Respect "reduce motion": no page or scroll animation at all. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
	.pg-reveal-ready .pg-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}