/* =========================================================
   HFDXARC THEME ARTWORK v1.4.0
   Club background artwork: Made by Andy G7LRR 2026
   Loaded after the site-wide visual unifier.
   ========================================================= */

html {
    background: #020408 !important;
}

body {
    position: relative !important;
    min-height: 100vh !important;
    overflow-x: hidden;
    background: #020408 !important;
}

/*
 * The artwork is decorative and fixed behind the complete WordPress site.
 * Its composition deliberately keeps the left side quieter and places the
 * club badge/radio design on the right.
 */
body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: url("../images/hfdxarc-theme-background-andy-g7lrr-2026.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    opacity: 0.86 !important;
    transform: translateZ(0);
}

/* Dark readability layer above the artwork and below all site content. */
body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(1, 4, 8, 0.34) 0%,
            rgba(1, 4, 8, 0.18) 45%,
            rgba(1, 4, 8, 0.30) 100%
        ),
        linear-gradient(
            180deg,
            rgba(1, 4, 8, 0.20) 0%,
            rgba(1, 4, 8, 0.32) 58%,
            rgba(1, 4, 8, 0.64) 100%
        ) !important;
}

body > * {
    position: relative;
    z-index: 1;
}

/*
 * Keep the parent and child theme shells transparent so the artwork remains
 * visible around cards, menus and full-width plugin pages.
 */
body #wrapper,
body #wrap,
body #container,
body #content-wrap,
body #main-wrap,
body #header-wrap,
body #footer-wrap {
    background-color: transparent !important;
    background-image: none !important;
}

/* Large desktop and 4K screens: keep the badge visually anchored right. */
@media only screen and (min-width: 1921px) {
    body::before {
        background-position: center top !important;
        background-size: cover !important;
    }
}

/* Tablets: retain the right-side badge while reducing visual competition. */
@media only screen and (max-width: 1100px) {
    body::before {
        background-position: 67% top !important;
        opacity: 0.72 !important;
    }

    body::after {
        background:
            linear-gradient(90deg, rgba(1, 4, 8, 0.42), rgba(1, 4, 8, 0.30)),
            linear-gradient(180deg, rgba(1, 4, 8, 0.25), rgba(1, 4, 8, 0.66)) !important;
    }
}

/* Mobiles: preserve a useful crop and avoid fixed-background rendering issues. */
@media only screen and (max-width: 720px) {
    body::before {
        position: absolute !important;
        min-height: 100vh !important;
        background-position: 70% top !important;
        background-size: auto 100vh !important;
        opacity: 0.54 !important;
    }

    body::after {
        position: absolute !important;
        min-height: 100vh !important;
        background:
            linear-gradient(90deg, rgba(1, 4, 8, 0.66), rgba(1, 4, 8, 0.48)),
            linear-gradient(180deg, rgba(1, 4, 8, 0.34), rgba(1, 4, 8, 0.76)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        transform: none;
    }
}