/* =============================================================
   Footer Artwork — Yakulaas
   Order, top to bottom:
       [ Who We Are ]  [ Pages ]  [ Policies ]     <- menu row
                ~~~ artwork (behind / under the menus) ~~~
       ---------------------------------------------
       © Copyright                      social icons   <- below the artwork

   Astra's footer rows and widgets are untouched. The artwork is a background
   of the MENU row only (primary row), so the copyright + social row naturally
   sits underneath it. Menus are lowered into the empty sky of the artwork,
   which removes the dead space.

   Desktop + tablet: full illustration (footer-artwork.webp).
   Phones: right half of it, zoomed in (footer-artwork-half.webp).
   ============================================================= */

:root {
	--yk-fa-bg:         #f5f3e5;   /* cream — matches the artwork's own background */
	--yk-fa-text:       #2f3d36;   /* body text */
	--yk-fa-heading:    #033d31;   /* column titles */
	--yk-fa-link:       #055B49;   /* links + social icons (brand green) */
	--yk-fa-link-hover: #033d31;
	--yk-fa-line:       rgba(5, 91, 73, .18);   /* divider line above the copyright row */

	--yk-fa-max:        2200px;    /* art stops growing beyond this width */
	--yk-fa-art-w:      min(100vw, var(--yk-fa-max));
	--yk-fa-gap:        .12;       /* space under the menus kept for the scenery, as a fraction of art width.
	                                  Smaller = shorter footer (but menus may touch the art). */
	--yk-fa-top:        44px;      /* space above the menus */
}

/* ---- Footer shell: plain cream ---------------------------------------- */
.site-footer {
	background-color: var(--yk-fa-bg) !important;
	background-image: none !important;
}

/* ---- Menu row carries the artwork ------------------------------------- */
.site-footer .site-primary-footer-wrap {
	background-color: transparent !important;
	background-image: url('footer-artwork.webp') !important;
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	background-size: min(100%, var(--yk-fa-max)) auto !important;

	min-height: 0 !important;
	padding-top: var(--yk-fa-top) !important;
	padding-bottom: calc(var(--yk-fa-art-w) * var(--yk-fa-gap)) !important;
}
.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
	min-height: 0 !important;
}

/* other rows: transparent, divider line in brand tint */
.site-footer .site-above-footer-wrap,
.site-footer .site-below-footer-wrap {
	background-color: transparent !important;
	background-image: none !important;
}
.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .ast-builder-grid-row-container-inner {
	border-color: var(--yk-fa-line) !important;
}

/* If the social icons are in the "Above footer" row, show that row at the
   very bottom instead of the top (below the artwork). */
.site-footer {
	display: flex;
	flex-direction: column;
}
.site-footer .site-above-footer-wrap:has(.ast-footer-social-wrap) {
	order: 3;
}

/* ---- Colours for the cream background --------------------------------- */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer .ast-footer-copyright {
	color: var(--yk-fa-text) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: var(--yk-fa-heading) !important;
}

.site-footer a {
	color: var(--yk-fa-link) !important;
}
.site-footer a:hover,
.site-footer a:focus {
	color: var(--yk-fa-link-hover) !important;
}

/* social icons keep Astra's size/spacing; only the colour changes */
.site-footer a.ast-builder-social-element span {
	color: inherit !important;
}
.site-footer a.ast-builder-social-element svg {
	fill: currentColor !important;
}

/* ---- Tablet: same art, full width ------------------------------------- */
@media (max-width: 921px) {
	:root { --yk-fa-art-w: 100vw; --yk-fa-top: 36px; }
	.site-footer .site-primary-footer-wrap { background-size: 100% auto !important; }
}

/* ---- Phones: right half of the art, zoomed in 1.5x -------------------- */
@media (max-width: 600px) {
	:root { --yk-fa-art-w: 150vw; --yk-fa-gap: .32; }

	.site-footer .site-primary-footer-wrap {
		background-image: url('footer-artwork-half.webp') !important;
		background-position: right bottom !important;
		background-size: 150% auto !important;
	}
}