/*
 * Global footer (.ft). Navy and gold, four columns, decorative skyline and curved gold lines.
 * Loaded on every page after main.css / pages.css.
 */

.ft {
	--ft-navy: #061a35;
	--ft-dark: #04152d;
	--ft-navy-2: #0b2c53;
	--ft-gold: #c38a2c;
	--ft-gold-hi: #e0b35d;
	--ft-muted: #c3d0e2;
	--ft-line: rgba(255, 255, 255, 0.15);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--ft-muted);
	font-size: 1rem;
	background: linear-gradient(100deg, var(--ft-dark) 0%, var(--ft-navy) 48%, #0a2750 100%);
}

.ft a { text-decoration: none; }
.ft a:focus-visible { outline: 3px solid var(--ft-gold-hi); outline-offset: 3px; border-radius: 4px; }

/* Decorative layers ------------------------------------------------------- */
.ft__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.ft__skyline {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(46%, 720px);
	height: 100%;
	object-fit: cover;
	object-position: 55% 38%;
	opacity: 0.62;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%), linear-gradient(0deg, transparent 0%, #000 34%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 58%), linear-gradient(0deg, transparent 0%, #000 34%);
	mask-composite: intersect;
}

.ft__waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 78%; overflow: visible; }
.ft__line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ft__line--thin { stroke-width: 1; opacity: 0.7; }

/* Main grid ----------------------------------------------------------------- */
.ft__wrap {
	position: relative;
	z-index: 2;
	max-width: 1500px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 5rem);
}

.ft__grid {
	display: grid;
	grid-template-columns: 22fr 12fr 25fr 41fr;
	gap: clamp(1.5rem, 3.4vw, 3.5rem);
	padding-block: clamp(2.6rem, 4.4vw, 4.2rem) clamp(2.4rem, 4vw, 3.4rem);
}

.ft__col { min-width: 0; }

/* Brand */
.ft__logo { display: inline-block; padding: 0.55rem 0.8rem; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
.ft__logo img { display: block; width: 10rem; max-width: 100%; height: auto; }

.ft__about { max-width: 22.5rem; margin: 1.4rem 0 1.5rem; color: var(--ft-muted); font-size: 1rem; line-height: 1.7; }

.ft__social { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }

.ft__social a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ft-gold);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ft__social a:hover { background: rgba(195, 138, 44, 0.2); border-color: var(--ft-gold-hi); color: var(--ft-gold-hi); }
.ft__social .icon { width: 1.15rem; height: 1.15rem; }

/* Headings */
.ft__title {
	margin: 0 0 1.4rem;
	color: #fff;
	font-family: var(--sb-sans);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.3;
	text-transform: uppercase;
}

.ft__title::after { content: ""; display: block; width: 2.1rem; height: 2px; margin-top: 0.8rem; background: var(--ft-gold); }

/* Link lists (Navigate, Services) */
.ft__list { margin: 0; padding: 0; list-style: none; }
.ft__list li { border-bottom: 1px solid var(--ft-line); }

.ft__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.88rem 0;
	color: #fff;
	font-size: 0.95rem;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.ft__list a::after {
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-top: 2px solid var(--ft-gold-hi);
	border-right: 2px solid var(--ft-gold-hi);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.ft__list a:hover { color: var(--ft-gold-hi); padding-left: 0.3rem; }
.ft__list a:hover::after { transform: translateX(3px) rotate(45deg); }

/* Contact rows */
.ft__rows { margin: 0; padding: 0; list-style: none; }
.ft__rows li { display: flex; align-items: center; gap: 1rem; padding-block: 0.55rem; }

.ft__ico { display: grid; place-items: center; flex: none; width: 3.1rem; height: 3.1rem; border: 1px solid var(--ft-gold); border-radius: 50%; color: var(--ft-gold-hi); }
.ft__ico .icon { width: 1.3rem; height: 1.3rem; stroke-width: 1.6; }

.ft__label { margin: 0 0 0.1rem; color: #fff; font-size: 0.93rem; font-weight: 600; }
.ft__rows a,
.ft__value { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: #e4ecf7; font-size: 1rem; overflow-wrap: anywhere; }
.ft__rows a:hover { color: var(--ft-gold-hi); }

/* Address block (see skybiz_address_html()): one block inside the flex row, "Zone-FZ" never split. */
.addr { display: block; }
.addr__nb { white-space: nowrap; }
.ft__rows a .icon { width: 1.05rem; height: 1.05rem; }

/* Bottom bar ------------------------------------------------------------------ */
.ft__bar { position: relative; z-index: 2; border-top: 1px solid var(--ft-line); }

.ft__bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem 2rem; padding-block: 1.5rem; padding-right: clamp(5.2rem, 7vw, 7.5rem); /* keeps the CTA clear of the floating WhatsApp button */ }

.ft__copy { grid-column: 1; font-size: 0.92rem; color: #fff; }
.ft__copy p { margin: 0; }

.ft__legal { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.ft__legal li + li { border-left: 1px solid rgba(213, 172, 98, 0.65); }
.ft__legal a { display: block; padding: 0.2rem 1.1rem; color: #fff; font-size: 0.9rem; transition: color 0.2s ease; }
.ft__legal a:hover { color: var(--ft-gold-hi); }
.ft__legal a:focus-visible { outline: 2px solid var(--ft-gold-hi); outline-offset: 2px; border-radius: 3px; color: var(--ft-gold-hi); }

.ft__cta {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	height: 52px;
	padding: 0 1.8rem;
	border-radius: 7px;
	background: linear-gradient(135deg, #cf9a3b 0%, #b8832c 52%, #9c6a23 100%);
	box-shadow: 0 12px 24px -12px rgba(195, 138, 44, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	color: #fff;
	font-size: 0.98rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.25s ease, transform 0.2s ease;
}

.ft__cta:hover { background: linear-gradient(135deg, #b8832c 0%, #9c6a23 52%, #85591b 100%); transform: translateY(-1px); color: #fff; }
.ft__cta .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.2s ease; }
.ft__cta:hover .icon { transform: translateX(3px); }

/* Photo credits: collapsed, tiny, out of the way */
.ft__credits { margin-top: 0.35rem; font-size: 0.72rem; color: #8fa3c0; }
.ft__credits summary { display: inline-block; cursor: pointer; color: #8fa3c0; }
.ft__credits summary:hover { color: var(--ft-gold-hi); }
.ft__credits p { max-width: 34rem; margin: 0.4rem 0 0; line-height: 1.6; color: #8fa3c0; }
.ft__credits a { color: #b9c8de; text-decoration: underline; }

/* Responsive ------------------------------------------------------------------- */
/* Slightly narrower laptops: give the Services column more room so names stay on one line. */
@media (min-width: 1100px) and (max-width: 1299px) {
	.ft__grid { grid-template-columns: 20fr 13fr 25fr 42fr; gap: 1.5rem 1.4rem; }
	.ft__list a { font-size: 0.9rem; }
}

@media (max-width: 1099px) {
	.ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
	.ft__brand { grid-column: 1 / -1; }
	.ft__contact { grid-column: 1 / -1; }
	.ft__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.ft__skyline { width: 62%; opacity: 0.32; }
	/* Keep the curved lines in the lower area so they never run through the text. */
	.ft__waves { height: 34%; }
	.ft__bar-inner { grid-template-columns: 1fr; justify-items: start; padding-right: clamp(1.25rem, 5vw, 5rem); }
	.ft__copy, .ft__legal, .ft__cta { grid-column: 1; }
	.ft__legal { justify-content: flex-start; }
	.ft__legal li:first-child a { padding-left: 0; }
	.ft__cta { justify-self: start; }
}

@media (max-width: 639px) {
	.ft__grid { grid-template-columns: minmax(0, 1fr); }
	.ft__rows { grid-template-columns: minmax(0, 1fr); }
	.ft__skyline { width: 100%; opacity: 0.28; }
	.ft__waves { height: 28%; opacity: 0.85; }
	.ft__logo img { width: 8.75rem; }
	.ft__cta { width: 100%; }
	/* Leave room so the floating WhatsApp button never covers the last controls. */
	.ft__bar-inner { padding-bottom: 5.2rem; }
	.ft__bar-inner { justify-items: center; text-align: center; }
	.ft__legal { justify-content: center; }
	.ft__legal li:first-child a { padding-left: 1rem; }
	.ft__legal a { padding-inline: 1rem; }
}

/* Legal links on small phones: keep them on one row with separators where they fit, stack when not. */
@media (max-width: 479px) {
	.ft__legal a { padding-inline: 0.6rem; font-size: 0.84rem; }
	.ft__legal li:first-child a { padding-left: 0.6rem; }
}

@media (max-width: 359px) {
	.ft__legal { flex-direction: column; align-items: center; }
	.ft__legal li + li { border-left: 0; }
}

/* Location: three lines on desktop (breaks come from skybiz_address_html()), line-height for easy reading;
   on narrower screens each line simply wraps naturally inside the column. */
.ft__value .addr { line-height: 1.6; }