/* =========================================================
   Golden Gates Solutions — Footer
   Dark navy panel entered through a two-layer animated wave (parallax
   depth — a slow pale back layer + a faster solid front layer that
   becomes the footer's own top edge), drifting glow orbs, a sensor-
   rail accent, 3D pointer-tilt on each column, and richer link/heading
   motion. Mobile folds the columns into accordions.

   !important is used deliberately and only where Hello Elementor /
   Elementor's own base + reset stylesheets were confirmed (via the
   header build) to win over plain author rules on generic elements
   (button, ul/li, a) with equal or higher specificity loaded after
   this file — without it those elements silently fall back to
   browser/theme defaults instead of the design below.
   ========================================================= */

.ggs-footer{
	/* No overflow:hidden here — the wave sits ABOVE the footer's own
	   box (translateY(-99%)) so it can visually bridge into whatever
	   content precedes it; clipping the footer would clip the wave
	   too. The glow orbs get their own overflow:hidden wrapper below
	   instead of relying on this element for containment. */
	position:relative;isolation:isolate;
	margin-top:110px;
	background:var(--navy-dark) !important;
	color:rgba(255,255,255,.72) !important;
}

.ggs-footer-glow-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}

/* ---- Wave transition into the footer (parallax: back layer pale +
   slow, front layer solid + faster, opposite drift for depth) ---- */
.ggs-wave-wrap{
	position:absolute;top:0;left:0;width:100%;height:110px;
	transform:translateY(-99%);overflow:hidden;pointer-events:none;z-index:2;
	line-height:0;
}
.ggs-wave{position:absolute;top:0;left:0;width:200%;height:100%;}
.ggs-wave-back{fill:rgba(3,23,84,.35);animation:ggsWaveDriftBack 22s linear infinite;}
.ggs-wave-front{fill:var(--navy-dark);animation:ggsWaveDriftFront 14s linear infinite reverse;}
/* -50% (not a hardcoded px value) — the SVG is 200% of its wrapper's
   width, so -50% is always exactly half of the SVG's OWN rendered
   width regardless of viewport size. The path's pattern repeats every
   half of its viewBox, so shifting by exactly half its rendered width
   lands precisely back on an identical frame — a seamless, truly
   infinite loop at any screen size. A fixed px offset only lined up
   by coincidence at one specific viewport width. */
@keyframes ggsWaveDriftBack{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes ggsWaveDriftFront{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Sensor rail: drifts along the footer's own top edge (under the
   wave's front crest), same motif as the header's. */
/* ---- Ambient glow orbs — slow independent drift/pulse per orb ---- */
.ggs-footer-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.ggs-footer-glow-1{width:440px;height:440px;top:20px;inset-inline-start:-120px;background:radial-gradient(circle,rgba(var(--gold-rgb),.2),transparent 70%);animation:ggsGlowDrift1 14s ease-in-out infinite;}
.ggs-footer-glow-2{width:500px;height:500px;bottom:-220px;inset-inline-end:-140px;background:radial-gradient(circle,rgba(32,188,237,.18),transparent 70%);animation:ggsGlowDrift2 18s ease-in-out infinite;}
.ggs-footer-glow-3{width:320px;height:320px;top:40%;inset-inline-start:38%;background:radial-gradient(circle,rgba(5,38,153,.35),transparent 70%);animation:ggsGlowDrift3 16s ease-in-out infinite;}
@keyframes ggsGlowDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,20px) scale(1.12);}}
@keyframes ggsGlowDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-25px,-30px) scale(1.08);}}
@keyframes ggsGlowDrift3{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:.9;transform:scale(1.2);}}

.ggs-footer-inner{position:relative;z-index:1;max-width:1280px;margin-inline:auto;padding:76px 28px 0;}

/* ---- Grid ---- */
.ggs-footer-grid{
	display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:40px;
	padding-bottom:48px;
	perspective:1400px;
}
.ggs-footer-col{
	opacity:0;transform:translateY(24px);
	transition:opacity .7s var(--ease),transform .35s var(--ease);
	transform-style:preserve-3d;
	will-change:transform;
}
.ggs-footer-col.is-visible{opacity:1;transform:translateY(0);}
.ggs-footer-col:nth-child(1){transition-delay:0s,0s;}
.ggs-footer-col:nth-child(2){transition-delay:.08s,0s;}
.ggs-footer-col:nth-child(3){transition-delay:.16s,0s;}
.ggs-footer-col:nth-child(4){transition-delay:.24s,0s;}

.ggs-footer-logo{margin-bottom:20px;}
.ggs-footer-logo img{height:58px !important;width:auto !important;filter:brightness(0) invert(1) drop-shadow(0 8px 20px rgba(17,106,248,.35));opacity:.97;}
/* .58 → .72 opacity: Lighthouse flagged the .58 value as failing WCAG
   AA contrast (needs 4.5:1 for 14px normal text) against the navy-dark
   footer background. .72 matches .ggs-footer's own base text color
   (already proven safe) and lands ~9:1. */
.ggs-footer-brand p{font-size:14px !important;line-height:1.9 !important;color:rgba(255,255,255,.72) !important;max-width:340px;margin:0 !important;}

/* ---- Social icons: frosted-glass tray + squircle gradient buttons ---- */
.ggs-social-glass{
	display:inline-flex;align-items:flex-end;gap:10px;
	margin-top:22px;padding:10px;border-radius:18px;
	background:rgba(0,0,0,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	border:1px solid rgba(255,255,255,.1);
	box-shadow:0 20px 45px -20px rgba(0,0,0,.5);
}
.ggs-social-icon{
	display:flex !important;align-items:center;justify-content:center;
	width:52px;height:52px;
	/* Was clip-path:url(#ggsSquircle) — an SVG clip-path animated via
	   transform on the SAME element is a known rendering-jitter trap:
	   the browser has to keep re-rasterizing the clip mask against the
	   continuously changing post-transform box, which reads as a
	   shaking/trembling icon on hover, not a smooth scale (will-change
	   alone didn't fix it — the clip-path itself was the problem, not
	   layer promotion). border-radius is a native, compositor-native
	   property with no such recompute, and gives the same soft-squircle
	   look at this size. */
	border-radius:30%;
	box-shadow:0 10px 22px -8px rgba(0,0,0,.55);
	border:1px solid rgba(255,255,255,.14);
	cursor:pointer;
	transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease);
}
.ggs-social-icon:hover{transform:scale(1.1) translateY(-6px);box-shadow:0 22px 34px -10px rgba(0,0,0,.6);}
.ggs-social-icon svg{width:26px !important;height:26px !important;color:#fff;fill:currentColor;}
.ggs-social-instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);}
.ggs-social-facebook{background:linear-gradient(160deg,#1877f2,#0e4fa8);}
.ggs-social-twitter{background:linear-gradient(160deg,#3a3a3a,#0a0a0a);}

.ggs-footer-col-combined{display:flex;flex-direction:column;gap:30px;}

.ggs-footer-col-head{
	display:flex !important;align-items:center;justify-content:space-between;width:100%;
	background:none !important;border:none !important;padding:0 0 20px !important;margin:0 !important;cursor:default;
	font-family:var(--font-body) !important;font-weight:800 !important;font-size:15px !important;color:#fff !important;
	text-align:start;box-shadow:none !important;
}
.ggs-footer-col-head::before{
	content:"";display:inline-block;width:16px;height:2px;border-radius:2px;flex-shrink:0;
	background:linear-gradient(90deg,var(--gold),var(--gold-light));
	margin-inline-end:9px;
	transition:width .4s var(--ease);
}
.ggs-footer-col.is-visible .ggs-footer-col-head::before{width:26px;}
.ggs-footer-col-head span{display:flex;align-items:center;}
.ggs-footer-col-chev{display:none;width:16px;height:16px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}

.ggs-footer-col-list{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:13px;font-size:13.5px !important;}
.ggs-footer-col-list li{color:rgba(255,255,255,.55) !important;}
.ggs-footer-col-list a{
	position:relative;color:inherit !important;text-decoration:none !important;
	transition:color .3s var(--ease);
}
.ggs-footer-col-list a::before{
	content:"";display:inline-block;width:0;height:1px;background:var(--gold-light);
	margin-inline-end:0;vertical-align:middle;transition:width .3s var(--ease),margin .3s var(--ease);
}
.ggs-footer-col-list a:hover{color:#fff !important;}
.ggs-footer-col-list a:hover::before{width:10px;margin-inline-end:6px;}
.ggs-footer-contact-list li{direction:rtl;}
html[dir="ltr"] .ggs-footer-contact-list li{direction:ltr;}
.ggs-footer-contact-list a{color:rgba(255,255,255,.55) !important;}
.ggs-footer-contact-list a:hover{color:#fff !important;}

/* ---- Divider ---- */
.ggs-footer-divider{display:flex;align-items:center;gap:14px;padding:0 0 28px;}
.ggs-footer-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);}
.ggs-footer-divider-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 12px rgba(var(--gold-rgb),.7);flex-shrink:0;animation:ggsDotPulse 2.2s ease-in-out infinite;}
@keyframes ggsDotPulse{0%,100%{box-shadow:0 0 12px rgba(var(--gold-rgb),.7);transform:scale(1);}50%{box-shadow:0 0 20px rgba(var(--gold-rgb),1);transform:scale(1.35);}}

/* ---- Bottom bar ---- */
.ggs-footer-bottom{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding-block:22px;border-top:1px solid rgba(255,255,255,.08);
	flex-wrap:wrap;
}
/* .45 → .62 opacity: .45 measured ~4.24:1 against the navy-dark
   footer background, just under WCAG AA's 4.5:1 minimum for 12.5px
   text. .62 lands ~7:1. */
.ggs-footer-copyright{margin:0 !important;font-size:12.5px !important;color:rgba(255,255,255,.62) !important;}
/* Legal links live inline with the copyright now (used to be their own
   stacked accordion column above, which just made the footer taller
   for two links) — same compact row, no extra height. */
.ggs-footer-bottom-legal{display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.ggs-footer-bottom-legal a{
	text-decoration:none !important;font-size:12.5px !important;font-weight:700 !important;
	color:rgba(255,255,255,.5) !important;transition:color .3s var(--ease);
}
.ggs-footer-bottom-legal a:hover{color:var(--gold-light) !important;}
.ggs-footer-bottom-sep{color:rgba(255,255,255,.25);font-size:11px;}
.ggs-footer-bottom-actions{display:flex;align-items:center;gap:12px;}

.ggs-footer-lang-link{
	display:inline-block !important;text-decoration:none !important;
	background:none !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:100px !important;
	padding:8px 18px !important;font-family:var(--font-body) !important;font-weight:700 !important;font-size:12.5px !important;
	color:rgba(255,255,255,.7) !important;cursor:pointer;box-shadow:none !important;
	transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.ggs-footer-lang-link:hover{color:#fff !important;border-color:rgba(var(--gold-rgb),.5) !important;transform:translateY(-2px);}

.ggs-footer-totop{
	width:40px !important;height:40px !important;border-radius:50% !important;
	display:flex !important;align-items:center;justify-content:center;
	padding:0px !important;
	background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.1) !important;
	cursor:pointer;box-shadow:none !important;
	transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .3s var(--ease),border-color .3s var(--ease);
}
.ggs-footer-totop:hover{background:rgba(var(--gold-rgb),.18) !important;border-color:rgba(var(--gold-rgb),.45) !important;transform:translateY(-4px) scale(1.08);}
.ggs-footer-totop svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Fixed luxury WhatsApp button — present on every page ---- */
.ggs-whatsapp-fab{
	position:fixed;bottom:26px;right:26px;z-index:200;
	display:flex !important;align-items:center;justify-content:center;
	width:60px;height:60px;border-radius:50%;
	background:linear-gradient(150deg,#25d366,#128c4a);
	box-shadow:0 16px 34px -10px rgba(18,140,74,.65),0 4px 12px rgba(0,0,0,.25);
	border:none !important;
	animation:ggsWhatsappFloat 3.2s ease-in-out infinite;
	transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease);
	/* Promotes this to its own GPU layer ahead of time so the
	   continuous float animation runs composited (off the main
	   thread) instead of triggering a Lighthouse "non-composited
	   animation" flag. */
	will-change:transform;
}
.ggs-whatsapp-fab:hover{
	transform:scale(1.1);
	box-shadow:0 20px 40px -8px rgba(18,140,74,.75),0 6px 16px rgba(0,0,0,.3);
}
.ggs-whatsapp-fab svg{width:30px !important;height:30px !important;fill:#fff;position:relative;z-index:2;}
@keyframes ggsWhatsappFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.ggs-whatsapp-fab:hover{animation-play-state:paused;}

.ggs-whatsapp-ring{
	position:absolute;inset:0;border-radius:50%;z-index:1;
	border:2px solid rgba(37,211,102,.55);
	animation:ggsWhatsappPulse 2.6s cubic-bezier(0,.55,.55,1) infinite;
	will-change:transform,opacity;
}
.ggs-whatsapp-ring-2{animation-delay:.9s;}
@keyframes ggsWhatsappPulse{
	0%{transform:scale(1);opacity:.8;}
	100%{transform:scale(1.9);opacity:0;}
}

/* Bottom offset cleared by the fixed bottom mobile nav (header.css,
   ~70px + safe-area, same max-width:960px breakpoint), so the FAB
   floats just above that bar instead of sitting behind/under it. */
@media (max-width:960px){
	.ggs-whatsapp-fab{bottom:calc(70px + env(safe-area-inset-bottom) + 16px);}
}
@media (max-width:640px){
	.ggs-whatsapp-fab{width:54px;height:54px;right:14px;}
	.ggs-whatsapp-fab svg{width:26px !important;height:26px !important;}
}

/* ---- Fixed luxury scroll-to-top button — mirrors the WhatsApp FAB on
   the opposite corner. Hidden until the visitor scrolls past a
   threshold (footer.js toggles .is-visible), with a gold ring around
   it that fills to show progress through the page — not just an
   on/off appearance, an actual "how far down the page am I" gauge. */
/* Forced — same reasoning as .ggs-project-lightbox-close: all:unset
   wipes any browser-default <button> chrome (or a stray external
   style) first, then every property this button actually needs is
   re-declared with !important right after, in both its hidden/base
   state and its .is-visible state. Safe to force transform here too:
   footer.js only ever sets an inline style on the ring circle inside
   it (stroke-dashoffset), never on the button itself. */
.ggs-scrolltop-fab{
	all:unset !important;
	position:fixed !important;bottom:26px !important;left:26px !important;z-index:200 !important;
	display:flex !important;align-items:center !important;justify-content:center !important;
	width:54px !important;height:54px !important;border-radius:50% !important;box-sizing:border-box !important;
	background:var(--surface) !important;border:none !important;cursor:pointer !important;
	margin:0 !important;padding:0 !important;
	box-shadow:0 16px 34px -10px rgba(5,23,84,.35),0 4px 12px rgba(0,0,0,.12) !important;
	opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
	transform:translateY(18px) scale(.7) rotate(-12deg) !important;
	transition:opacity .45s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease),visibility 0s linear .45s !important;
}
.ggs-scrolltop-fab.is-visible{
	opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
	transform:translateY(0) scale(1) rotate(0deg) !important;
	transition:opacity .45s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease),visibility 0s linear 0s !important;
}
.ggs-scrolltop-fab:hover{
	box-shadow:0 20px 40px -8px rgba(var(--gold-rgb),.5),0 6px 16px rgba(0,0,0,.18) !important;
}
.ggs-scrolltop-fab.is-visible:hover{transform:translateY(-5px) scale(1.08) rotate(0deg) !important;}
.ggs-scrolltop-fab:active{transform:translateY(-1px) scale(.95) !important;}

.ggs-scrolltop-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.ggs-scrolltop-ring-track{fill:none;stroke:var(--bg-alt);stroke-width:2.5;}
.ggs-scrolltop-ring-fill{
	fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
	stroke-dasharray:150.8;stroke-dashoffset:150.8;
	transition:stroke-dashoffset .1s linear;
	filter:drop-shadow(0 0 4px rgba(var(--gold-rgb),.6));
}
.ggs-scrolltop-arrow{
	position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;color:var(--navy);
	transition:transform .4s cubic-bezier(.34,1.56,.64,1),color .35s var(--ease);
}
.ggs-scrolltop-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ggs-scrolltop-fab:hover .ggs-scrolltop-arrow{transform:translateY(-3px);color:var(--gold-deep);}
.ggs-scrolltop-fab:active .ggs-scrolltop-arrow{transform:translateY(0);}

@media (max-width:960px){
	/* !important needed here too now — the base rule above forces
	   these same properties, so a plain override would lose. */
	.ggs-scrolltop-fab{bottom:calc(70px + env(safe-area-inset-bottom) + 16px) !important;}
}
@media (max-width:640px){
	.ggs-scrolltop-fab{width:46px !important;height:46px !important;left:14px !important;}
	.ggs-scrolltop-arrow svg{width:15px;height:15px;}
}

/* ---- Mobile: columns collapse into accordions ---- */
@media (max-width:900px){
	.ggs-footer{margin-top:70px;}
	.ggs-footer-inner{padding-top:56px;}
	.ggs-footer-grid{grid-template-columns:1fr;gap:0;}
	.ggs-footer-col-combined{gap:0;}
	.ggs-footer-brand{padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;}

	.ggs-footer-col:not(.ggs-footer-brand) > .ggs-footer-col-head,
	.ggs-footer-subcol > .ggs-footer-col-head{
		/* padding-bottom is set again below, AFTER padding-block — the
		   longhand overrides just that one edge of the shorthand above
		   it, rather than needing extra specificity to win. */
		cursor:pointer;padding-block:18px !important;border-bottom:1px solid rgba(255,255,255,.08);
		margin-top:20px !important;padding-bottom:0px !important;
	}
	.ggs-footer-col-chev{display:block;}
	.ggs-footer-col-head[aria-expanded="true"] .ggs-footer-col-chev{transform:rotate(180deg);}

	.ggs-footer-col-list{
		overflow:hidden;max-height:0;
		transition:max-height .4s var(--ease),padding .4s var(--ease);
		padding-block:0 !important;gap:12px;
	}
	/* Open state only — overflow:visible so nothing is clipped once
	   expanded. max-height itself is deliberately left alone here:
	   footer.js sets it inline to the exact scrollHeight the moment
	   aria-expanded flips to true (same click, same frame), so a CSS
	   override big enough to matter would have to be `max-height:none
	   !important` to beat that inline value — but `none` isn't a
	   value CSS can transition FROM/TO, so it would make the panel
	   snap open instantly instead of animating. Leaving max-height to
	   JS keeps the .4s slide working; overflow:visible is safe to flip
	   immediately since it doesn't participate in the transition. */
	.ggs-footer-col-head[aria-expanded="true"] + .ggs-footer-col-list{
		overflow:visible;padding-block:16px 20px !important;
	}

	.ggs-footer-bottom{justify-content:center;text-align:center;}
	.ggs-footer-bottom-legal{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
	.ggs-footer-col,.ggs-wave-back,.ggs-wave-front,
	.ggs-footer-glow-1,.ggs-footer-glow-2,.ggs-footer-glow-3,.ggs-footer-divider-dot,
	.ggs-whatsapp-fab,.ggs-whatsapp-ring{
		animation:none !important;transition:none !important;opacity:1;transform:none !important;
	}
}