/* GGG eSite — header/footer built with Elementor (GGGESITE_Chrome_Builder). */
.ggg-ehead{position:relative;z-index:9990}
.ggg-ehead.is-sticky{position:sticky;top:0}
.ggg-ehead.is-overlay{position:absolute;top:0;left:0;right:0}
.ggg-ehead.is-overlay.is-sticky{position:fixed}
body.admin-bar .ggg-ehead.is-sticky,body.admin-bar .ggg-ehead.is-overlay{top:32px}
@media (max-width:782px){body.admin-bar .ggg-ehead.is-sticky,body.admin-bar .ggg-ehead.is-overlay{top:46px}}
/* A row with the class "ggg-ehead-pin" is the part of a sticky header that stays: what is above it scrolls away
   (ehead.js measures that height into --ggg-ehead-pin). */
.ggg-ehead.is-sticky:not(.is-overlay){top:calc(0px - var(--ggg-ehead-pin,0px))}
body.admin-bar .ggg-ehead.is-sticky:not(.is-overlay){top:calc(32px - var(--ggg-ehead-pin,0px))}
@media (max-width:782px){body.admin-bar .ggg-ehead.is-sticky:not(.is-overlay){top:calc(46px - var(--ggg-ehead-pin,0px))}}
/* Transparent over the hero until scrolled: the eSite "Surface" color becomes clear and "Text"/"Text soft"
   become the light "On photo" color — so the same design works over a photo and on a solid bar. */
.ggg-ehead.is-overlay:not(.is-scrolled){
	--e-global-color-ggg_surface:transparent;
	--e-global-color-ggg_bg:transparent;
	--e-global-color-ggg_text:var(--e-global-color-ggg_on_media,#fff);
	--e-global-color-ggg_text_soft:var(--e-global-color-ggg_on_media,#fff);
	--e-global-color-ggg_line:rgba(255,255,255,.35);
}
/* …and the bar's own picture goes too (a paper texture as its background or laid over it, Elementor's background
   overlay): it fades back in when the bar turns solid. */
.ggg-ehead.is-overlay:not(.is-scrolled) .e-con.e-parent{--overlay-opacity:0;background-image:none}
/* The menu panel and its close button sit on the solid panel, not the photo: give them the real colors back
   (copied on <body>, where the Elementor kit defines them, before the header overrides them). */
body{--ggg-real-surface:var(--e-global-color-ggg_surface,#fff);--ggg-real-text:var(--e-global-color-ggg_text,#222)}
/* …only where the menu is that opening panel (nav.css's breakpoints): a menu shown as a row of links stays on the photo. */
.ggg-ehead.is-overlay:not(.is-scrolled) .ggg-nav--always .ggg-nav__panel,
.ggg-ehead.is-overlay:not(.is-scrolled) .ggg-nav.is-open .ggg-nav__toggle{
	--e-global-color-ggg_surface:var(--ggg-real-surface);--e-global-color-ggg_text:var(--ggg-real-text);
}
@media (max-width:1024px){.ggg-ehead.is-overlay:not(.is-scrolled) .ggg-nav--tablet .ggg-nav__panel{--e-global-color-ggg_surface:var(--ggg-real-surface);--e-global-color-ggg_text:var(--ggg-real-text)}}
@media (max-width:767px){.ggg-ehead.is-overlay:not(.is-scrolled) .ggg-nav--mobile .ggg-nav__panel{--e-global-color-ggg_surface:var(--ggg-real-surface);--e-global-color-ggg_text:var(--ggg-real-text)}}
.ggg-ehead > .elementor,.ggg-ehead > .elementor > .e-con{transition:background-color var(--ggg-ehead-solid-speed,.3s) ease,box-shadow var(--ggg-ehead-solid-speed,.3s) ease}
/* soft shade so light menu text stays readable over bright photos (gone once the bar turns solid) */
.ggg-ehead.is-overlay:not(.is-scrolled) > .elementor{background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.18) 60%,transparent)}
.ggg-ehead.is-scrolled > .elementor > .e-con,.ggg-ehead.is-sticky:not(.is-overlay) > .elementor > .e-con{box-shadow:0 2px 26px rgba(0,0,0,.08)}
/* Hide while scrolling down, show while scrolling up (ehead.js adds .is-hidden on the devices of .ggg-hide-d/t/m).
   Shown = no transform at all: a transformed header would become the frame of its fixed menu panel. */
.ggg-ehead[class*="ggg-hide-"]{transition:transform var(--ggg-ehead-speed,.38s) cubic-bezier(.4,0,.2,1),opacity var(--ggg-ehead-speed,.38s) ease}
.ggg-ehead.is-hidden{transform:translateY(calc(-100% - 40px))}
/* the owner's choice of how it goes (My site → Header): fade in place, or slide and fade */
.ggg-ehead.ggg-anim-fade.is-hidden{transform:none;opacity:0;pointer-events:none}
.ggg-ehead.ggg-anim-both.is-hidden{opacity:0}
@media (prefers-reduced-motion:reduce){.ggg-ehead[class*="ggg-hide-"]{transition:none}}
/* A design drawn with a solid header that the owner made transparent: its opening section starts with room for the
   header (ehead.js keeps the header's height in --ggg-ehead-h), so the header doesn't cover its first words. */
html:has(.ggg-ehead.is-overlay.ggg-ov-own) .ggg-hero-photo{padding-top:calc(var(--ggg-ehead-h,0px) + 12px)!important}
/* links to a section (#rsvp…) stop below the fixed / sticky header instead of under it */
html:has(.ggg-ehead.is-sticky),html:has(.ggg-ehead.is-overlay){scroll-padding-top:96px}