/* ==========================================================================
   Footer: "Flutlicht" — a night match under floodlights. Sash cut on top,
   crest, sitemap from the main menu, partners.
   Always dark, in both color schemes.
   ========================================================================== */

.wm-footer {
    position: relative;
    margin-top: clamp(2rem, 5vw, 4rem);
    color: rgb(255 255 255 / 80%);
    background: var(--wm-night);
    color-scheme: dark;
}

.wm-footer__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--wm-cut) * 2 + clamp(2.5rem, 6vw, 5rem));
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(120% 60% at 50% 120%, rgb(226 0 26 / 32%), transparent 60%),
        linear-gradient(180deg, var(--wm-night-2), var(--wm-night) 55%);
}
/* Red/white sash, mirrored to the header's cut */
.wm-footer__stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--wm-cut) * 2);
    z-index: 1;
    background:
        linear-gradient(to bottom right, var(--wm-bg) calc(50% - 0.5px), #fff 50%, #fff calc(50% + 3px), var(--wm-red) calc(50% + 3.5px), var(--wm-red) calc(50% + 14px), transparent calc(50% + 14.5px));
}

/* Floodlights: two cones of light from the top corners, slowly breathing */
.wm-footer__lights {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.wm-footer__lights::before,
.wm-footer__lights::after {
    content: "";
    position: absolute;
    top: -20%;
    width: 70%;
    height: 120%;
    background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgb(255 248 230 / 10%) 14deg, rgb(255 248 230 / 2%) 30deg, transparent 40deg);
    filter: blur(6px);
    animation: wm-floodlight 9s ease-in-out infinite alternate;
}
.wm-footer__lights::before { left: -25%; transform: rotate(-12deg); transform-origin: 50% 0; }
.wm-footer__lights::after { right: -25%; transform: rotate(12deg) scaleX(-1); transform-origin: 50% 0; animation-delay: -4.5s; }
@keyframes wm-floodlight { to { opacity: .55; } }

/* The Wormatia dragon (same artwork as the games page footer) rising behind the content.
   The image is used as a mask, so its color comes from the gradient: white fading into club red. */
.wm-footer__dragon {
    position: absolute;
    right: max(-3vw, -60px);
    bottom: clamp(3rem, 9vw, 9rem);
    z-index: -1;
    width: clamp(240px, 34vw, 620px);
    aspect-ratio: 615 / 770;
    background: linear-gradient(160deg, #fff, var(--wm-red) 70%);
    -webkit-mask: url("../images/dragon.webp") center / contain no-repeat;
    mask: url("../images/dragon.webp") center / contain no-repeat;
    opacity: .16;
    transform: scaleX(-1);
    pointer-events: none;
    animation: wm-dragon-breathe 8s ease-in-out infinite alternate;
}
@keyframes wm-dragon-breathe { to { opacity: .22; translate: 0 -8px; } }
@media (max-width: 47.99em) {
    .wm-footer__dragon { right: -70px; bottom: 7rem; width: 300px; opacity: .1; animation: none; }
}

.wm-footer__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 64em) {
    .wm-footer__grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
}

/* Brand block */
.wm-footer__brand { display: grid; justify-items: start; gap: 1rem; }
.wm-footer__crest img {
    width: clamp(64px, 8vw, 100px);
    height: auto;
    filter: drop-shadow(0 0 40px rgb(226 0 26 / 45%)) drop-shadow(0 12px 22px rgb(0 0 0 / 60%));
    transition: transform .6s var(--wm-ease);
}
.wm-footer__crest:hover img { transform: translateY(-4px) rotate(-3deg); }
.wm-footer__since {
    margin: 0;
    font-family: var(--wm-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 60%);
}
.wm-footer__social { margin-top: .5rem; }
.wm-footer__social a { width: 44px; height: 44px; color: #fff; background: rgb(255 255 255 / 8%); }

/* Sitemap */
.wm-footer__sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 2rem 1.5rem;
}
@media (max-width: 47.99em) {
    /* Phones: section headings only; the drawer menu has the full tree. */
    .wm-footer__sitemap { grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
    .wm-footer__sitemap .wm-footer__column ul { display: none; }
    .wm-footer__heading { margin-bottom: .4rem; }
}
.wm-footer__heading {
    display: inline-block;
    margin-bottom: .75rem;
    padding-bottom: .3rem;
    font-family: var(--wm-font-display);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid var(--wm-red);
}
.wm-theme .wm-footer__heading:hover { color: #fff; border-bottom-color: #fff; }
.wm-footer__column ul { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.wm-footer__column li a {
    display: inline-block;
    padding: .2rem 0;
    font-size: var(--wm-step--1);
    color: rgb(255 255 255 / 68%);
    transition: color .2s, transform .2s var(--wm-ease);
}
.wm-theme .wm-footer__column li a:hover { color: #fff; transform: translateX(3px); }

/* Optional footer widget areas (parent markup) */
.wm-footer__widgets { margin-top: 3rem; }
.wm-footer__widgets .mh-footer { background: none; }
.wm-footer__widgets .mh-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.wm-footer__widgets .mh-footer-area { float: none; width: auto; margin: 0; }
.wm-footer__widgets .mh-widget-title { color: #fff; }

/* Partners: logos on light tiles so brand colors stay true */
.wm-footer__partners {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
}
.wm-footer__partners-label {
    margin: 0;
    font-family: var(--wm-font-display);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-align: center;
    text-transform: uppercase;
    color: rgb(255 255 255 / 60%);
}
.wm-footer__partner-logos :is(.mh-widget, .textwidget, div:not([class])) { display: contents; }
.wm-footer__partner-logos .main-sponsors,
.wm-footer__partner-logos .co-sponsors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.wm-footer__partner-logos a {
    display: grid;
    place-items: center;
    width: clamp(120px, 14vw, 180px);
    height: 72px;
    padding: .6rem 1rem;
    background: #fff;
    border-radius: var(--wm-radius-sm);
    transition: transform .3s var(--wm-ease), box-shadow .3s;
}
.wm-footer__partner-logos a:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgb(226 0 26 / 55%); }
.wm-footer__partner-logos img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }

/* Legal bar */
.wm-footer__legal {
    position: relative;
    z-index: 1;
    font-size: var(--wm-step--1);
    color: rgb(255 255 255 / 70%);
    background: var(--wm-red);
}
.wm-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
}
.wm-footer__copyright { margin: 0; font-weight: 700; color: #fff; }
.wm-footer__legal ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.wm-footer__legal a { color: rgb(255 255 255 / 88%); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; }
.wm-theme .wm-footer__legal a:hover { color: #fff; text-decoration-color: currentColor; }
/* Keep clear of the fixed consent launcher ("Zustimmungen verwalten", wormatia-consent) and back-to-top.
   Mouse desktops: the launcher is a tab bottom right (right: 80px, ~165px wide), so the links end before it.
   Phones/touch: it is a round icon bottom left, so the legal bar gets room below its content instead.
   The media queries mirror the plugin's own breakpoints (assets/consent.css). */
@media (min-width: 48em) and (hover: hover) and (pointer: fine) {
    .wm-footer__legal-inner { padding-right: max(var(--wm-gutter), 17rem); }
}
@media (max-width: 47.99em), (hover: none), (pointer: coarse) {
    .wm-footer__legal-inner { justify-content: center; text-align: center; padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    .wm-footer__legal ul { justify-content: center; }
}