/*
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.5
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;
}
@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: 92%;
		height: 320px;
	}
}

/* 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;
	}
}

/* Pricing card: replaces Fusion Builder's boxed pricing-table look (see
   the hover fix elsewhere in this file) with a single elevated card. Also
   fixes something the previous version got wrong in public: rows that
   literally said "TODO: confirm ceremony time window" were visible to
   real visitors while the client's actual numbers were still pending —
   replaced everywhere with a soft "get in touch for a full quote" note
   instead of exposing an internal placeholder. */
.pg-price-card {
	max-width: 560px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #eee6d8;
	box-shadow: 0 20px 50px rgba(44, 94, 63, 0.12);
}
.pg-price-card-header {
	background: #2c5e3f;
	padding: 26px 32px;
	text-align: center;
}
.pg-price-card-header h3 {
	margin: 0;
	font-family: "Playfair Display", serif;
	font-size: 25px;
	color: #ffffff;
}
.pg-price-card-body {
	padding: 32px;
}
.pg-price-card ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.pg-price-card li {
	padding: 11px 0;
	border-bottom: 1px solid #f0ece0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #2b2b26;
}
.pg-price-card li:last-child {
	border-bottom: none;
}
.pg-price-card li i {
	color: #2c5e3f;
	margin-top: 4px;
	flex: 0 0 auto;
}
.pg-price-note {
	text-align: center;
	font-style: italic;
	color: #6b6b60;
	margin: 0 0 20px;
}

/* 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;
}

/* 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 "Enquire Now" 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-call {
		flex: 0 0 52px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #faf7f0;
		color: #2c5e3f;
		border: 1px solid #2c5e3f;
		font-size: 18px;
	}
	.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. */
@media (min-width: 641px) {
	/* Avada reserves a themewide top padding on #main (via the
	   --main_padding-top custom property) that assumes the header sits
	   in normal document flow above it. With the header taken out of
	   flow (position:absolute, below) that padding just becomes a
	   blank gap between the true page top and the hero — remove it
	   here so the hero starts flush at y:0, right behind the header. */
	.home #main,
	.page-id-66 #main,
	.page-id-67 #main,
	.page-id-68 #main,
	.page-id-69 #main {
		--main_padding-top: 0px;
	}

	.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) {
		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-69 .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-69 .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-mobile-menu-icons i,
	.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-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-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-mobile-menu-icons i,
	.page-id-69 .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-69 .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-69 .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu-search-icon,
	.page-id-69 .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 {
	align-items: stretch !important;
}
.pg-offering-row .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.pg-offering-row .fusion-column-wrapper > *:last-child {
	margin-top: auto;
}

/* 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;
}