/* Footer landscape: tall mountains across the base, and a Zagros oak (Quercus brantii,
   "dar-baroo") standing on the broad peak at the right. In a right-to-left language
   (Kurdish Sorani, Arabic) the whole scene mirrors, so the tree stands on the left.
   Decorative only: behind the footer content, never takes clicks, adds no height. */
.footer .footer-landscape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    z-index: 0;
    pointer-events: none;
}
.footer .footer-ridge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.footer .ridge-far  { fill: #4274d9; opacity: .11; }
.footer .ridge-near { fill: #2d51a8; opacity: .17; }

/* The tree's feet sit on the peak. The ridge is stretched sideways only (height is a fixed
   220px), so the peak is always 150px above the bottom whatever the screen width. */
.footer .footer-oak {
    position: absolute;
    right: 4%;
    bottom: 146px;
    width: 120px;
    height: auto;
    display: block;
    pointer-events: none;
}
.footer .oak-shadow  { fill: #1c2547; opacity: .16; }
.footer .oak-trunk   { fill: #6b4a2b; }
.footer .oak-canopy  { fill: #2f6b4d; }
.footer .oak-light   { fill: #4a9a6e; opacity: .75; }
.footer .oak-acorns  { fill: #a8742f; }

/* Right-to-left: mirror the mountains and move the tree to the other side with them */
[dir="rtl"] .footer .footer-ridge { transform: scaleX(-1); }
[dir="rtl"] .footer .footer-oak { right: auto; left: 4%; }

/* The thin rule above the copyright row is gone: the mountains close the page instead */
.footer .footer-bottom,
body.theme-dark .footer .footer-bottom { border-top: 0 !important; }

body.theme-dark .footer .ridge-far  { fill: #6693e0; opacity: .12; }
body.theme-dark .footer .ridge-near { fill: #93b4e9; opacity: .09; }
body.theme-dark .footer .oak-trunk  { fill: #8a6a48; }
body.theme-dark .footer .oak-canopy { fill: #3b8a62; }
body.theme-dark .footer .oak-light  { fill: #5db487; opacity: .6; }
body.theme-dark .footer .oak-shadow { fill: #000; opacity: .3; }

@media (max-width: 900px) {
    .footer .footer-landscape { height: 190px; }
    .footer .footer-oak { width: 96px; bottom: 124px; }   /* the peak is ~127px up at this height */
}
@media (max-width: 560px) {
    .footer .footer-oak { width: 76px; }
}