/* =========================================================================
   04 — FOOTER  (site-wide)
   Restyles Flatsome's footer surfaces, widget titles, links and socials.
   ========================================================================= */

.footer-wrapper,
.footer,
.footer-1,
.footer-2 {
	background-color: var(--s67-bg-deep) !important;
	color: var(--s67-text-muted) !important;
}

.footer-wrapper {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(180deg, #0d0d15 0%, #060609 70%) !important;
	/* Signature glowing gold gradient bar across the top (matches the header) */
	border-style: solid;
	border-width: 3px 0 0 0;
	border-image: linear-gradient(90deg, transparent 0%, var(--s67-gold-500) 16%, var(--s67-gold-300) 50%, var(--s67-gold-500) 84%, transparent 100%) 1;
	box-shadow:
		inset 0 3px 26px -6px rgba(241, 194, 51, 0.22),
		0 -16px 52px -22px rgba(241, 194, 51, 0.32);
}
/* Glow accents */
.footer-wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(900px 340px at 50% -10%, rgba(241, 194, 51, 0.20), transparent 60%),
		radial-gradient(620px 240px at 8% 100%, rgba(212, 160, 31, 0.09), transparent 70%),
		radial-gradient(620px 240px at 92% 100%, rgba(212, 160, 31, 0.08), transparent 70%);
	pointer-events: none;
}
/* Subtle grid pattern that fades downward */
.footer-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(241, 194, 51, 0.085) 1px, transparent 1px),
		linear-gradient(90deg, rgba(241, 194, 51, 0.085) 1px, transparent 1px);
	background-size: 46px 46px;
	background-position: center top;
	mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 78%);
	-webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 78%);
	pointer-events: none;
}
/* Keep footer content above the decorative layers */
.footer-wrapper > .row,
.footer-wrapper > .container,
.footer-wrapper > section,
.footer-wrapper .section-content { position: relative; z-index: 1; }

/* Widget titles with gold underline */
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper .widget-title,
.footer-wrapper .widgettitle {
	background-image: var(--s67-grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: relative;
	padding-bottom: var(--s67-space-2);
	margin-bottom: var(--s67-space-4);
	filter: drop-shadow(0 2px 12px rgba(241, 194, 51, 0.18));
}
.footer-wrapper h3::after,
.footer-wrapper h4::after,
.footer-wrapper .widget-title::after,
.footer-wrapper .widgettitle::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 34px; height: 2px;
	background: var(--s67-grad-gold);
	box-shadow: 0 0 8px var(--s67-gold-glow);
	border-radius: 2px;
	-webkit-text-fill-color: initial;
}

/* Footer brand logo — stage-lit with a soft gold glow */
.footer-wrapper .img-inner img,
.footer-wrapper .logo img {
	filter: drop-shadow(0 0 26px rgba(241, 194, 51, 0.28));
}

/* Footer links */
.footer-wrapper a {
	color: var(--s67-text-muted) !important;
	transition: color var(--s67-dur-fast) var(--s67-ease), padding-left var(--s67-dur-fast) var(--s67-ease);
}
.footer-wrapper li a:hover { color: var(--s67-gold-100) !important; padding-left: 4px; }
.footer-wrapper li { border-color: var(--s67-border) !important; }

/* --- First content column was boxed by the generic .col-inner.dark panel
   styling. Footer columns must stay flat so all columns look consistent. --- */
.footer-wrapper .col-inner.dark,
.footer-wrapper .col-inner {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* --- Footer UX menus (.ux-menu-link): drop the cramped divider borders and
   give each item room to breathe. --- */
.footer-wrapper .ux-menu-link,
.footer-wrapper .ux-menu-link.menu-item {
	border: 0 !important;
	margin: 0 !important;
}
.footer-wrapper .ux-menu.stack-col { gap: 2px; }
.footer-wrapper .ux-menu-link__link {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
	color: var(--s67-text-muted) !important;
	border: 0 !important;
	transition: color var(--s67-dur-fast) var(--s67-ease), padding-left var(--s67-dur-fast) var(--s67-ease);
}
.footer-wrapper .ux-menu-link:hover .ux-menu-link__link,
.footer-wrapper .ux-menu-link__link:hover {
	color: var(--s67-gold-100) !important;
	padding-left: 4px !important;
}
.footer-wrapper .ux-menu-link__icon {
	color: var(--s67-gold-500) !important;
	opacity: 0.7;
	transition: opacity var(--s67-dur-fast) var(--s67-ease), color var(--s67-dur-fast) var(--s67-ease);
}
.footer-wrapper .ux-menu-link:hover .ux-menu-link__icon {
	color: var(--s67-gold-300) !important;
	opacity: 1;
}

/* Social icons */
.footer-wrapper .social-icons a,
.footer-wrapper .social-icons .icon {
	background: var(--s67-bg-elev-1) !important;
	border: 1px solid var(--s67-border) !important;
	color: var(--s67-text) !important;
	border-radius: var(--s67-radius-pill) !important;
	transition: all var(--s67-dur-fast) var(--s67-ease);
}
.footer-wrapper .social-icons a:hover {
	background-image: var(--s67-grad-gold-soft) !important;
	border-color: var(--s67-border-gold) !important;
	color: var(--s67-gold-100) !important;
	transform: translateY(-2px);
}

/* Absolute footer (bottom copyright strip) */
.absolute-footer {
	background-color: var(--s67-bg-deepest) !important;
	border-top: 1px solid var(--s67-border);
	color: var(--s67-text-dim) !important;
}
.absolute-footer a { color: var(--s67-text-muted) !important; }
.absolute-footer a:hover { color: var(--s67-gold-100) !important; }

/* =========================================================================
   Footer brand logo block (the centered .col-inner.text-center at the top of
   the footer). It carried a -30px negative bottom margin that pulled the text
   block below up against it. Fix the spacing, shrink the logo a touch, and add
   a gold radial glow behind it so the logo appears to radiate light.
   ========================================================================= */
.footer-wrapper .col-inner.text-center {
	margin-bottom: var(--s67-space-6) !important;   /* was -30px */
	padding: var(--s67-space-6) 0 var(--s67-space-5) !important;
	background: none !important;   /* no radial box — the glow comes from the logo shape */
}
.footer-wrapper .col-inner.text-center .img {
	width: 56% !important;
	margin-inline: auto;
}
@media (min-width: 550px) {
	.footer-wrapper .col-inner.text-center .img { width: 23% !important; }
}
/* Glow follows the transparent logo's shape (letters + rooster), so it radiates
   light without drawing any rectangular frame. */
.footer-wrapper .col-inner.text-center .img img {
	filter:
		drop-shadow(0 0 8px rgba(255, 226, 138, 0.85))
		drop-shadow(0 0 22px rgba(241, 194, 51, 0.6))
		drop-shadow(0 0 50px rgba(241, 194, 51, 0.42));
}

/* A little top breathing room for the first text column under the logo. */
.footer-wrapper .col-inner.dark { padding-top: var(--s67-space-2); }