:root {
    --red: #ef233c;
    --red-dark: #b91226;
    --background: #05080b;
    --background-two: #090e12;
    --panel: #0b1116;
    --panel-light: #101820;
    --border: #202a31;
    --text: #ffffff;
    --muted: #aeb7bd;
    --green: #22d46b;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 80% 10%, rgba(239,35,60,.06), transparent 28%),
        #05080b;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   HEADER
========================================================== */

.header {

    height: 76px;

    display: flex;
    align-items: center;

    gap: 35px;

    padding:
        0
        clamp(25px, 4vw, 70px);

    background:
        rgba(4, 8, 11, .97);

    border-bottom:
        1px solid
        rgba(239,35,60,.25);

    position: sticky;

    top: 0;

    z-index: 1000;
}


.logo {

    display: flex;

    flex-direction: column;

    min-width: 205px;

    font-weight: 1000;

    font-style: italic;

    line-height: .80;

    letter-spacing: -1px;
}


.logo span {

    font-size: 28px;
}


.logo strong {

    color: var(--red);

    font-size: 20px;
}


.header nav {

    flex: 1;

    height: 100%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 29px;
}


.header nav a {

    display: flex;

    align-items: center;

    font-size: 14px;

    font-weight: 600;

    color: #d9dde0;

    border-bottom:
        3px solid
        transparent;

    transition:
        color .2s,
        border-color .2s;
}


.header nav a:hover,
.header nav a.active {

    color: white;

    border-bottom-color:
        var(--red);
}


.discord-button,
.primary-button {

    background:
        linear-gradient(
            135deg,
            #f32640,
            #e51d34
        );

    border:
        1px solid
        #ff4056;

    color: white;

    font-weight: 800;

    border-radius: 6px;

    padding: 14px 22px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    box-shadow:
        0 10px 30px
        rgba(239,35,60,.12);

    transition:
        transform .2s,
        box-shadow .2s;
}


.discord-button:hover,
.primary-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(239,35,60,.25);
}


.mobile-menu {

    display: none;

    border: 0;

    background: none;

    color: white;

    font-size: 28px;

    cursor: pointer;
}


/* ==========================================================
   HERO
========================================================== */

.hero {

    min-height: 455px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    padding:
        60px
        clamp(25px,4vw,70px);

    background:
        linear-gradient(
            90deg,
            rgba(3,7,10,.92) 0%,
            rgba(3,7,10,.68) 42%,
            rgba(3,7,10,.30) 72%,
            rgba(3,7,10,.55) 100%
        ),
        url("/assets/discord-background.png") center center / cover no-repeat;
}


.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .45;

    background:

        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 95px,
            rgba(255,255,255,.015) 96px,
            transparent 97px
        );
}


.hero::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 180px;

    background:
        linear-gradient(
            transparent,
            #070c0f
        );
}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black,
            transparent
        );
}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.hero-glow-one {

    width: 350px;

    height: 350px;

    right: 17%;

    top: 30px;

    background:
        rgba(239,35,60,.08);
}


.hero-glow-two {

    width: 300px;

    height: 300px;

    left: 20%;

    bottom: -100px;

    background:
        rgba(82,112,140,.08);
}


.hero-content {

    width: min(760px, 70%);

    position: relative;

    z-index: 5;
}


.welcome {

    color:
        #b7c0c7;

    letter-spacing:
        8px;

    font-weight:
        700;

    font-size:
        14px;

    margin-bottom:
        10px;
}


.hero h1 {

    margin:
        0 0 22px;

    display:
        flex;

    flex-direction:
        column;

    line-height:
        .78;

    font-style:
        italic;

    letter-spacing:
        -4px;

    text-transform:
        uppercase;
}


.hero h1 span {

    font-size:
        clamp(54px,6vw,84px);

    font-weight:
        1000;
}


.hero h1 strong {

    color:
        var(--red);

    font-size:
        clamp(39px,4.5vw,61px);

    font-weight:
        1000;
}


.hero h2 {

    font-size:
        clamp(23px,2.3vw,32px);

    margin:
        0 0 10px;

    font-weight:
        800;
}


.hero p {

    color:
        #e0e5e8;

    font-size:
        18px;

    margin:
        0 0 28px;
}


.hero-buttons {

    display:
        flex;

    gap:
        14px;
}


.secondary-button {

    padding:
        14px 22px;

    border:
        1px solid
        #69747d;

    border-radius:
        6px;

    font-weight:
        800;

    background:
        rgba(0,0,0,.25);

    transition:
        background .2s;
}


.secondary-button:hover {

    background:
        rgba(255,255,255,.08);
}


.hero-side {

    position:
        absolute;

    right:
        7%;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        4;
}


.motto {

    display:
        flex;

    flex-direction:
        column;

    transform:
        rotate(-6deg);

    text-align:
        center;

    font-style:
        italic;

    font-weight:
        1000;

    line-height:
        .92;

    font-size:
        clamp(26px,3vw,40px);

    text-shadow:
        0 5px 15px
        black;
}


.motto span:last-child {

    position:
        relative;
}


.motto span:last-child::after {

    content:
        "";

    position:
        absolute;

    width:
        110%;

    height:
        5px;

    background:
        var(--red);

    bottom:
        -13px;

    left:
        -5%;

    transform:
        rotate(-8deg);
}


.crosshair {

    width:
        190px;

    height:
        190px;

    position:
        absolute;

    left:
        -180px;

    top:
        -35px;

    opacity:
        .08;
}


.crosshair-ring {

    width:
        100%;

    height:
        100%;

    border:
        2px solid white;

    border-radius:
        50%;

    position:
        relative;
}


.crosshair-ring::before,
.crosshair-ring::after {

    content:
        "";

    position:
        absolute;

    background:
        white;
}


.crosshair-ring::before {

    width:
        240px;

    height:
        2px;

    left:
        -25px;

    top:
        50%;
}


.crosshair-ring::after {

    height:
        240px;

    width:
        2px;

    top:
        -25px;

    left:
        50%;
}


/* ==========================================================
   FEATURE BAR
========================================================== */

.feature-bar {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    background:
        #0a1014;

    border-bottom:
        1px solid
        var(--border);

    padding:
        20px
        clamp(25px,4vw,70px);
}


.feature {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        0 22px;

    border-right:
        1px solid
        #222b31;
}


.feature:first-child {

    padding-left:
        0;
}


.feature:last-child {

    border-right:
        0;
}


.feature-icon {

    font-size:
        33px;
}


.feature strong,
.feature span {

    display:
        block;
}


.feature strong {

    font-size:
        15px;
}


.feature span {

    color:
        var(--muted);

    font-size:
        13px;

    margin-top:
        5px;
}


/* ==========================================================
   GAMES
========================================================== */

.games {

    display:
        grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:
        12px;

    padding:
        18px
        2.5%;

    background:
        #060a0d;
}


.game-card {

    min-height:
        190px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        20px;

    border:
        1px solid
        #283139;

    border-radius:
        8px;

    background:

        radial-gradient(
            circle at 70% 20%,
            #26323a,
            transparent 45%
        ),

        linear-gradient(
            160deg,
            #151d23,
            #080d11
        );

    transition:
        transform .2s,
        border-color .2s;
}


.game-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #59636b;
}


.wardogs-card {

    border-color:
        var(--red);
}


.wardogs-card:hover {

    border-color:
        #ff5266;
}


.game-symbol {

    position:
        absolute;

    top:
        25px;

    right:
        20px;

    font-size:
        70px;

    opacity:
        .18;

    filter:
        grayscale(1);
}


.game-content {

    position:
        relative;

    z-index:
        3;
}


.game-content h3 {

    margin:
        0 0 7px;

    font-size:
        20px;
}


.game-content p {

    margin:
        0;

    font-size:
        13px;

    line-height:
        1.5;
}


.game-arrow {

    position:
        absolute;

    right:
        15px;

    bottom:
        16px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #59636c;

    font-size:
        25px;

    z-index:
        4;
}


.red-arrow {

    background:
        var(--red);
}


.target {

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    right:
        15px;

    top:
        15px;

    border:
        2px solid
        rgba(255,255,255,.07);

    border-radius:
        50%;
}


.target::before {

    content:
        "";

    position:
        absolute;

    width:
        70px;

    height:
        70px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        50%;

    left:
        23px;

    top:
        23px;
}


/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard {

    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        12px;

    padding:
        0 2.5% 18px;
}


.server-panel,
.community-panel {

    background:
        var(--panel);

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    padding:
        20px;
}


.section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        8px;
}


.section-heading h2,
.community-panel h2 {

    margin:
        0;

    font-size:
        19px;
}


.section-heading h2::before {

    content:
        "";

    display:
        inline-block;

    width:
        4px;

    height:
        20px;

    margin-right:
        12px;

    vertical-align:
        -4px;

    background:
        var(--red);

    box-shadow:
        0 0 12px
        var(--red);
}


.section-heading a {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        800;
}


.server-row {

    display:
        grid;

    grid-template-columns:
        1fr 2.5fr .8fr .9fr;

    gap:
        12px;

    padding:
        12px;

    border-top:
        1px solid
        #20282e;

    align-items:
        center;

    font-size:
        13px;
}


.server-header {

    color:
        var(--muted);

    font-weight:
        700;
}


.server-game {

    font-weight:
        600;
}


.status-online {

    color:
        var(--green);

    font-weight:
        700;
}


.community-panel p {

    color:
        #c5ccd1;

    line-height:
        1.55;

    font-size:
        14px;
}


.community-discord {

    width:
        100%;

    margin:
        5px 0 22px;
}


.community-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        12px;
}


.community-stats strong,
.community-stats span {

    display:
        block;
}


.community-stats span {

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;
}


/* ==========================================================
   BENEFITS
========================================================== */

.benefits {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    padding:
        24px
        clamp(25px,4vw,70px);

    background:
        #101820;

    border-top:
        1px solid
        #202930;

    border-bottom:
        1px solid
        #202930;
}


.benefit {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        0 25px;

    border-right:
        1px solid
        #263139;
}


.benefit:first-child {

    padding-left:
        0;
}


.benefit:last-child {

    border-right:
        0;
}


.benefit-icon {

    font-size:
        31px;
}


.benefit strong,
.benefit span {

    display:
        block;
}


.benefit span {

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;
}


/* ==========================================================
   FOOTER
========================================================== */

footer {

    display:
        grid;

    grid-template-columns:
        2.3fr
        repeat(3,1fr)
        1.5fr;

    gap:
        35px;

    padding:
        38px
        clamp(25px,4vw,70px);

    background:
        #05090c;

    color:
        #d4d9dc;
}


.footer-brand {

    padding-right:
        25px;
}


.footer-logo {

    margin-bottom:
        20px;
}


.footer-brand p,
.footer-small {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;
}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.footer-column strong {

    margin-bottom:
        5px;
}


.footer-column a,
.footer-column p,
.footer-column small {

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}


.footer-column a:hover {

    color:
        white;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1150px) {

    .header nav {

        gap:
            18px;
    }

    .games {

        grid-template-columns:
            repeat(3,1fr);
    }

}


@media (max-width: 950px) {

    .mobile-menu {

        display:
            block;

        margin-left:
            auto;
    }


    .header-discord {

        display:
            none;
    }


    .header nav {

        display:
            none;

        position:
            absolute;

        left:
            0;

        right:
            0;

        top:
            76px;

        height:
            auto;

        flex-direction:
            column;

        gap:
            0;

        background:
            #070b0e;

        padding:
            15px 30px;

        border-bottom:
            1px solid
            #283139;
    }


    .header nav.open {

        display:
            flex;
    }


    .header nav a {

        padding:
            13px 0;

        border-bottom:
            1px solid
            #1d252b;
    }


    .hero-content {

        width:
            85%;
    }


    .hero-side {

        opacity:
            .35;
    }


    .feature-bar,
    .benefits {

        grid-template-columns:
            repeat(2,1fr);
    }


    .feature,
    .benefit {

        border-bottom:
            1px solid
            #222b31;
    }


    .dashboard {

        grid-template-columns:
            1fr;
    }


    footer {

        grid-template-columns:
            repeat(2,1fr);
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }

}


@media (max-width: 650px) {

    .header {

        height:
            68px;

        padding:
            0 20px;
    }


    .header nav {

        top:
            68px;
    }


    .logo {

        min-width:
            auto;
    }


    .logo span {

        font-size:
            23px;
    }


    .logo strong {

        font-size:
            16px;
    }


    .hero {

        min-height:
            500px;

        padding:
            50px 20px;
    }


    .hero-content {

        width:
            100%;
    }


    .hero h1 {

        letter-spacing:
            -2px;
    }


    .hero-side {

        display:
            none;
    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .feature-bar,
    .benefits,
    .games {

        grid-template-columns:
            1fr;
    }


    .games {

        padding:
            14px 20px;
    }


    .game-card {

        min-height:
            150px;
    }


    .dashboard {

        padding:
            0 20px 20px;
    }


    .server-table {

        overflow-x:
            auto;
    }


    .server-row {

        min-width:
            700px;
    }


    .community-stats {

        grid-template-columns:
            1fr;
    }


    footer {

        grid-template-columns:
            1fr;

        padding:
            35px 20px;
    }


    .footer-brand {

        grid-column:
            auto;
    }

}


/* LIVE HERO BACKGROUND */
.hero {
    position: relative !important;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,9,.68) 0%,
            rgba(2,6,9,.40) 42%,
            rgba(2,6,9,.12) 72%,
            rgba(2,6,9,.22) 100%
        ),
        url("/assets/discord-background.png") center 42% / cover no-repeat !important;
}

.hero::before {
    display: none !important;
}

.hero::after {
    display: none !important;
}

.hero-grid,
.hero-glow {
    pointer-events: none !important;
}


/* ==========================================================
   RAMPAGE GAMING COMMUNITY - FINAL ARTWORK
========================================================== */

/* HERO */

.hero {
    position: relative !important;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,9,.70) 0%,
            rgba(2,6,9,.40) 35%,
            rgba(2,6,9,.12) 65%,
            rgba(2,6,9,.18) 100%
        ),
        url("/assets/discord-background.png") center center / cover no-repeat !important;
}


/* GAME CARDS */

.game-card {
    position: relative !important;
    overflow: hidden !important;

    min-height: 180px !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* DARK GRADIENT SO TEXT REMAINS READABLE */

.game-card::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(4,8,11,.04) 10%,
            rgba(4,8,11,.22) 42%,
            rgba(4,8,11,.92) 100%
        ) !important;

    z-index: 0 !important;
    pointer-events: none !important;
}


.game-card > * {
    position: relative !important;
    z-index: 2 !important;
}


/* CARD 1 - WARDOGS */

.game-card:nth-child(1) {
    background-image:
        url("/assets/game-wardogs.jpg") !important;
}


/* CARD 2 - THE ISLE */

.game-card:nth-child(2) {
    background-image:
        url("/assets/game-isle.jpg") !important;
}


/* CARD 3 - ARMA 3 */

.game-card:nth-child(3) {
    background-image:
        url("/assets/game-arma3.jpg") !important;
}


/* CARD 4 - SQUAD */

.game-card:nth-child(4) {
    background-image:
        url("/assets/game-squad.jpg") !important;
}


/* CARD 5 - ESCAPE FROM TARKOV */

.game-card:nth-child(5) {
    background-image:
        url("/assets/game-tarkov.jpg") !important;
}


/* CARD 6 - MORE GAMES */

.game-card:nth-child(6) {
    background-image:
        url("/assets/game-more.jpg") !important;
}


/* SELECTED WARDOGS CARD */

.game-card:first-child {
    border-color: #ff263f !important;
}


/* HERO/CARD IMAGE QUALITY */

.hero,
.game-card {
    image-rendering: auto;
}


/* DESKTOP CARD HEIGHT */

@media (min-width: 1000px) {

    .game-card {
        min-height: 185px !important;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .game-card {
        min-height: 170px !important;
    }

}


/* ==========================================================
   RAMPAGE GAMING COMMUNITY - TARGET DESIGN PROPORTIONS
========================================================== */

/* HERO - taller like target */
.hero {
    min-height: 430px !important;
    height: 430px !important;

    display: flex !important;
    align-items: center !important;

    background-position: center 45% !important;
}

/* Give hero content more breathing room */
.hero-inner,
.hero-container {
    width: 100% !important;
}

/* Larger main branding */
.hero h1,
.hero-title {
    font-size: clamp(54px, 5vw, 86px) !important;
    line-height: .82 !important;
}

/* Main tagline */
.hero h2,
.hero-subtitle {
    font-size: clamp(22px, 2vw, 34px) !important;
}

/* Feature strip */
.features,
.feature-strip {
    min-height: 78px !important;
}

/* ==========================================================
   GAME CARDS
========================================================== */

.games-grid,
.game-grid,
.game-cards {
    gap: 12px !important;
}

.game-card {
    min-height: 190px !important;
    height: 190px !important;

    display: flex !important;
    align-items: flex-end !important;

    padding: 18px !important;

    background-position: center center !important;
}

/* Stronger bottom fade like target */
.game-card::before {
    background:
        linear-gradient(
            180deg,
            rgba(3,7,10,.02) 0%,
            rgba(3,7,10,.08) 35%,
            rgba(3,7,10,.55) 65%,
            rgba(3,7,10,.96) 100%
        ) !important;
}

/* Game titles */
.game-card h3,
.game-card .game-title {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
}

/* Game descriptions */
.game-card p {
    font-size: 14px !important;
}

/* ==========================================================
   SERVER / COMMUNITY PANELS
========================================================== */

.server-status,
.server-panel,
.community-panel {
    min-height: 250px !important;
}

.server-status,
.server-panel,
.join-community,
.community-panel {
    padding: 20px !important;
}

/* ==========================================================
   PAGE WIDTH
========================================================== */

.container,
.site-container,
.hero-inner {
    max-width: 1500px !important;
}

/* ==========================================================
   FOOTER
========================================================== */

footer,
.footer {
    min-height: 230px !important;
    padding-top: 38px !important;
    padding-bottom: 38px !important;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    .hero {
        height: auto !important;
        min-height: 520px !important;
    }

    .game-card {
        height: 180px !important;
        min-height: 180px !important;
    }
}


/* ==========================================================
   GAME CARD ARROW POSITION FIX
========================================================== */

/* Give the text room so it never runs underneath the arrow */
.game-card {
    position: relative !important;
    padding: 18px 52px 18px 18px !important;
}

/* Move ALL card arrows to the far right */
.game-card .arrow,
.game-card .game-arrow,
.game-card .card-arrow,
.game-card .arrow-btn,
.game-card .game-card-arrow,
.game-card > a:last-child,
.game-card > button:last-child {
    position: absolute !important;

    right: 14px !important;
    left: auto !important;

    bottom: 16px !important;
    top: auto !important;

    margin: 0 !important;

    width: 32px !important;
    height: 32px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 10 !important;
}

/* Keep titles/descriptions away from arrow */
.game-card h3,
.game-card .game-title,
.game-card p,
.game-card .game-description {
    max-width: calc(100% - 24px) !important;
}

/* Prevent long titles such as Escape from Tarkov being clipped */
.game-card h3,
.game-card .game-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Mobile */
@media (max-width: 700px) {

    .game-card {
        padding-right: 50px !important;
    }

    .game-card .arrow,
    .game-card .game-arrow,
    .game-card .card-arrow,
    .game-card .arrow-btn,
    .game-card .game-card-arrow,
    .game-card > a:last-child,
    .game-card > button:last-child {
        right: 12px !important;
        bottom: 14px !important;
    }
}


/* ==========================================================
   HOMEPAGE LIVE SERVER STATUS
========================================================== */

.home-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    font-weight: 800;
    white-space: nowrap;
}

.home-status i {
    width: 6px;
    height: 6px;

    display: inline-block;

    flex-shrink: 0;

    border-radius: 50%;
}


/* ONLINE */

.home-status.online {
    color: #45e27b !important;
}

.home-status.online i {
    background: #45e27b;

    box-shadow:
        0 0 7px
        rgba(69,226,123,.55);
}


/* OFFLINE */

.home-status.offline {
    color: #ff4057 !important;
}

.home-status.offline i {
    background: #ff4057;

    box-shadow:
        0 0 7px
        rgba(255,64,87,.50);
}


/* CHECKING */

.home-status.checking {
    color: #f0b429 !important;
}

.home-status.checking i {
    background: #f0b429;
}


/* UNKNOWN */

.home-status.unknown {
    color: #7f8a91 !important;
}

.home-status.unknown i {
    background: #667078;
}


#home-wardogs-players {
    font-weight: 900;
}

.home-player-unknown {
    color: #69747b;
}


/* RAMPAGE HOMEPAGE SERVER STATUS FINAL */

.home-status {
    display: inline-flex !important;

    align-items: center;

    gap: 6px;

    font-weight: 800;

    white-space: nowrap;
}


.home-status i {
    display: inline-block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;
}


/* ONLINE */

.home-status.online {
    color: #45e27b !important;
}

.home-status.online i {
    background: #45e27b;

    box-shadow:
        0 0 7px
        rgba(69,226,123,.60);
}


/* OFFLINE */

.home-status.offline {
    color: #ff4057 !important;
}

.home-status.offline i {
    background: #ff4057;

    box-shadow:
        0 0 7px
        rgba(255,64,87,.55);
}


/* CHECKING */

.home-status.checking {
    color: #f0b429 !important;
}

.home-status.checking i {
    background: #f0b429;
}


/* UNKNOWN */

.home-status.unknown {
    color: #778188 !important;
}

.home-status.unknown i {
    background: #667078;
}


#wardogsPlayers {
    font-weight: 900;
}


/* END RAMPAGE HOMEPAGE SERVER STATUS FINAL */





/* CLICKABLE GAME CARDS START */

.game-card {
    cursor: pointer !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.game-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(239,35,60,.75) !important;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.35);

    filter:
        brightness(1.08);
}


.game-card:active {
    transform:
        translateY(-1px)
        scale(.995);
}


.game-card:focus-visible {
    outline:
        2px solid
        #ef233c;

    outline-offset:
        3px;
}


/* Make arrow react when card is hovered */

.game-card:hover .arrow,
.game-card:hover .game-arrow,
.game-card:hover .card-arrow,
.game-card:hover .arrow-btn,
.game-card:hover .game-card-arrow {
    transform:
        translateX(3px);

}


/* CLICKABLE GAME CARDS END */


/* =========================================================
   RAMPAGE HOMEPAGE HERO BACKGROUND
   ========================================================= */

.hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.62) 32%,
            rgba(0, 0, 0, 0.18) 65%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        url("/assets/discord-background.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}



/* =========================================================
   FORCE NEW RAMPAGE HERO - FINAL OVERRIDE
   ========================================================= */

section.hero {
    background-image: url("/assets/discord-background.png") !important;
    background-size: cover !important;
    background-position: center 48% !important;
    background-repeat: no-repeat !important;
    background-color: #05080b !important;
}

/* Remove old visual layers while testing new artwork */
section.hero::before,
section.hero::after {
    display: none !important;
}

section.hero .hero-grid,
section.hero .hero-glow {
    display: none !important;
}

/* Keep all hero text above the image */
section.hero .hero-content,
section.hero .hero-side {
    position: relative;
    z-index: 10;
}



/* RAMPAGE HERO FIT IMAGE */

html body section.hero {
    background-image: url("/assets/discord-background.png?v=10") !important;

    /* THIS STOPS THE ZOOM */
    background-size: 100% 100% !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* END RAMPAGE HERO FIT IMAGE */





/* ===== CLEAN HERO FIX ===== */

html body section.hero {
    position: relative !important;
    overflow: hidden !important;

    background-image: url("/assets/discord-background.png?v=100") !important;
    background-size: 50% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #05080b !important;
}

/* NO SECOND COPY OF THE IMAGE */
html body section.hero::before,
html body section.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Keep content visible */
html body section.hero .hero-content,
html body section.hero .hero-side {
    position: relative !important;
    z-index: 5 !important;
}

/* ===== END CLEAN HERO FIX ===== */


/* =========================================================
   FINAL FULL WIDTH HERO IMAGE
   ========================================================= */

html body section.hero {
    position: relative !important;
    overflow: hidden !important;

    background-image: url("/assets/discord-background.png?v=200") !important;

    /* FIT IMAGE ACROSS THE WHOLE HERO */
    background-size: 100% 100% !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #05080b !important;
}

/* Make sure there is NO duplicate background */
html body section.hero::before,
html body section.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Keep text/buttons above background */
html body section.hero .hero-content,
html body section.hero .hero-side {
    position: relative !important;
    z-index: 5 !important;
}

/* ========================================================= */


/* =========================================================
   RAMPAGE HERO - PROPER ASPECT RATIO
   ========================================================= */

html body section.hero {
    position: relative !important;
    overflow: hidden !important;

    /* Give the photo more vertical room */
    min-height: 430px !important;
    height: 430px !important;

    background-image: url("/assets/discord-background.png?v=300") !important;

    /* Fill hero WITHOUT stretching/distorting photo */
    background-size: cover !important;

    /* Move image slightly upward */
    background-position: center 45% !important;

    background-repeat: no-repeat !important;
    background-color: #05080b !important;
}


/* Make absolutely sure there is only ONE background */

html body section.hero::before,
html body section.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* Keep hero content above background */

html body section.hero .hero-content,
html body section.hero .hero-side {
    position: relative !important;
    z-index: 5 !important;
}


/* Remove old decorative hero layers */

html body section.hero .hero-grid,
html body section.hero .hero-glow {
    display: none !important;
}

/* ========================================================= */


/* =========================================================
   HERO FINAL FIT - DO NOT STRETCH / DO NOT ZOOM
   ========================================================= */

html body section.hero {
    position: relative !important;
    overflow: hidden !important;

    height: 430px !important;
    min-height: 430px !important;

    background-image: url("/assets/discord-background.png?v=500") !important;

    /*
       CONTAIN = SHOW THE COMPLETE IMAGE
       AUTO = NEVER DISTORT IT
    */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    background-color: #05080b !important;
}


/* REMOVE ALL OLD SECOND LAYERS */

html body section.hero::before,
html body section.hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* REMOVE OLD HERO EFFECTS */

html body section.hero .hero-grid,
html body section.hero .hero-glow {
    display: none !important;
}


/* KEEP TEXT ABOVE IMAGE */

html body section.hero .hero-content,
html body section.hero .hero-side {
    position: relative !important;
    z-index: 5 !important;
}

/* ========================================================= */


/* =========================================================
   HERO SLOGAN - RIGHT SIDE
   ========================================================= */

html body section.hero .hero-side {
    position: absolute !important;

    left: auto !important;
    right: 70px !important;

    top: 50% !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 260px !important;
    max-width: 260px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    z-index: 20 !important;
}

/* Make slogan easier to read */

html body section.hero .hero-side,
html body section.hero .hero-side * {
    line-height: 0.92 !important;
}

/* ========================================================= */


/* =========================================================
   HOMEPAGE GAME CARD IMAGE FIX
   ========================================================= */

/* Keep every game card the same shape */
html body .game-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 190px !important;
}

/*
   Fix background images.
   100% auto shows the full WIDTH without stretching.
*/
html body .game-card {
    background-size: 100% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #080d11 !important;
}

/* If the cards use an actual IMG element */
html body .game-card img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;
}

/* Keep card writing above the photo */
html body .game-card > * {
    position: relative;
    z-index: 2;
}

/* ========================================================= */


/* =========================================================
   HOMEPAGE GAME CARDS - FINAL CORRECT IMAGE MAPPING
   The Isle has been removed.
   ========================================================= */

/* ALL CARDS */

html body .games-grid .game-card {
    position: relative !important;
    overflow: hidden !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    min-height: 190px !important;
}


/* 1 - WARDOGS */

html body .games-grid .game-card:nth-child(1) {
    background-image: url("/assets/game-wardogs.jpg?v=1000") !important;
    background-position: center 35% !important;
}


/* 2 - ARMA 3 */

html body .games-grid .game-card:nth-child(2) {
    background-image: url("/assets/game-arma3.jpg?v=1000") !important;
    background-position: center center !important;
}


/* 3 - SQUAD */

html body .games-grid .game-card:nth-child(3) {
    background-image: url("/assets/game-squad.jpg?v=1000") !important;
    background-position: center center !important;
}


/* 4 - ESCAPE FROM TARKOV */

html body .games-grid .game-card:nth-child(4) {
    background-image: url("/assets/game-tarkov.jpg?v=1000") !important;
    background-position: center center !important;
}


/* 5 - MORE GAMES */

html body .games-grid .game-card:nth-child(5) {
    background-image: url("/assets/game-more.jpg?v=1000") !important;
    background-position: center center !important;
}


/* DARK GRADIENT SO CARD TEXT STAYS READABLE */

html body .games-grid .game-card::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,7,10,.62) 0%,
            rgba(3,7,10,.25) 55%,
            rgba(3,7,10,.10) 100%
        ) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}


/* KEEP TEXT / ICONS / ARROWS ABOVE IMAGE */

html body .games-grid .game-card .game-content,
html body .games-grid .game-card .game-symbol,
html body .games-grid .game-card .game-arrow,
html body .games-grid .game-card .card-background {
    position: relative !important;
    z-index: 2 !important;
}


/* ========================================================= */


/* =========================================================
   HOMEPAGE CARDS - DIRECT IMAGE FIX
   ========================================================= */

/* WARDOGS */
html body a.game-card[href="/wardogs"] {
    background-image: url("/assets/game-wardogs.jpg?v=2001") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ARMA 3 */
html body a.game-card[href="/games#arma-3"] {
    background-image: url("/assets/game-arma3.jpg?v=2001") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* SQUAD */
html body a.game-card[href="/games#squad"] {
    background-image: url("/assets/game-squad.jpg?v=2001") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ESCAPE FROM TARKOV */
html body a.game-card[href="/games#tarkov"] {
    background-image: url("/assets/game-tarkov.jpg?v=2001") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* MORE GAMES */
html body a.game-card[href="/games"] {
    background-image: url("/assets/game-more.jpg?v=2001") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ========================================================= */


/* =========================================================
   RAMPAGE HOMEPAGE - FINAL GAME CARD IMAGES
   ========================================================= */

html body a.game-card {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}


/* 1 - WARDOGS */

html body a.game-card[href="/wardogs"] {
    background-image: url("/assets/game-wardogs.jpg?v=5000") !important;
    background-position: center center !important;
}


/* 2 - ARMA 3 */

html body a.game-card[href="/games#arma-3"] {
    background-image: url("/assets/game-arma3.jpg?v=5000") !important;
    background-position: center center !important;
}


/* 3 - SQUAD */

html body a.game-card[href="/games#squad"] {
    background-image: url("/assets/game-squad.jpg?v=5000") !important;
    background-position: center center !important;
}


/* 4 - ESCAPE FROM TARKOV */

html body a.game-card[href="/games#tarkov"] {
    background-image: url("/assets/game-tarkov.jpg?v=5000") !important;
    background-position: center center !important;
}


/* 5 - MORE GAMES */

html body a.game-card[href="/games"] {
    background-image: url("/assets/game-more.jpg?v=5000") !important;
    background-position: center center !important;
}


/* =========================================================
   KEEP CARD TEXT READABLE
   ========================================================= */

html body a.game-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            to top,
            rgba(3,7,10,.88) 0%,
            rgba(3,7,10,.35) 45%,
            rgba(3,7,10,.05) 100%
        ) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}


html body a.game-card > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ========================================================= */


/* =========================================================
   RAMPAGE ACCOUNT HEADER V3
========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.header-account {
    position: relative;
}

.header-auth-button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;

    border: 1px solid #343a43;
    background: #11151a;
    color: #fff;

    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;
    white-space: nowrap;
}

.header-auth-button:hover {
    border-color: #ef2323;
    background: #171b21;
}

.header-auth-button img {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    object-fit: cover;
}

.header-account-menu {
    display: none;

    position: absolute;
    right: 0;
    top: calc(100% + 12px);

    width: 285px;

    background: #0c1014;
    border: 1px solid #303640;

    box-shadow:
        0 25px 70px rgba(0,0,0,.7);

    z-index: 9999;
}

.header-account-menu.open {
    display: block;
}

.header-account-menu::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: #ef2323;
}

.account-menu-user {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 17px;

    background: #11151a;

    border-bottom:
        1px solid #252a31;
}

.account-menu-user img {
    width: 42px;
    height: 42px;

    border-radius: 3px;
    object-fit: cover;

    background: #1b2026;
}

.account-menu-user strong {
    display: block;

    color: #fff;

    font-size: 12px;
}

.account-menu-user span {
    display: block;

    margin-top: 4px;

    color: #ef3b3b;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.header-account-menu > a {
    display: block;

    padding: 13px 17px;

    border-bottom:
        1px solid #20252c;

    color: #fff;
    text-decoration: none;

    transition: .15s ease;
}

.header-account-menu > a:hover {
    background: #161b21;

    padding-left: 21px;
}

.header-account-menu > a strong {
    display: block;

    font-size: 10px;
    letter-spacing: .8px;
}

.header-account-menu > a span {
    display: block;

    margin-top: 4px;

    color: #737b86;

    font-size: 8px;
}

.header-account-menu > a.linked strong {
    color: #55d986;
}

.header-account-menu
.account-staff-link strong {
    color: #ef4545;
}

.header-account-menu
.account-logout-link {
    border-bottom: 0;
}

.header-account-menu
.account-logout-link strong {
    color: #a7adb6;
}

@media (max-width: 1250px) {

    .header-discord {
        display: none;
    }

}

/* =========================================================
   GLOBAL ACCOUNT HEADER SAFETY
========================================================= */

.header {
    overflow: visible !important;
}

.header-account {
    position: relative;
    flex: 0 0 auto;
    z-index: 10000;
}

.header-account[hidden],
.header-account-menu[hidden] {
    display: none !important;
}

.header-auth-button {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #343a43;
    background: #11151a;
    color: #fff;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
}

.header-auth-button:hover {
    border-color: #ef2538;
}

.header-auth-button img {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 3px;
}

.header-account-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 285px;
    z-index: 99999;
    border: 1px solid #303640;
    background: #0c1014;
    box-shadow: 0 25px 70px rgba(0,0,0,.7);
}

.header-account-menu.open {
    display: block;
}

.account-menu-user {
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #252a31;
    background: #11151a;
}

.account-menu-user img {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.account-menu-user strong,
.account-menu-user span {
    display: block;
}

.account-menu-user strong {
    color: #fff;
    font-size: 10px;
}

.account-menu-user span {
    margin-top: 4px;
    color: #ef2538;
    font-size: 8px;
    font-weight: 900;
}

.header-account-menu > a {
    display: block;
    padding: 13px 17px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #20252c;
}

.header-account-menu > a:last-child {
    border-bottom: 0;
}

.header-account-menu > a:hover {
    background: #161b21;
}

.header-account-menu > a strong,
.header-account-menu > a span {
    display: block;
}

.header-account-menu > a strong {
    color: #fff;
    font-size: 10px;
}

.header-account-menu > a span {
    margin-top: 4px;
    color: #737b86;
    font-size: 8px;
}

.header-account-menu > a.linked strong {
    color: #56d88a;
}

.account-staff-link strong {
    color: #ef2538 !important;
}

@media (max-width: 720px) {

    .header-account-menu {
        position: fixed;
        top: 76px;
        right: 12px;
        width: min(300px, calc(100vw - 24px));
    }
}

/* =========================================================
   RAMPAGE WEBSITE IMAGE LOGO
========================================================= */

.header .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 155px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.header .logo .website-logo {
    display: block !important;
    width: auto !important;
    height: 50px !important;
    max-width: 155px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 900px) {

    .header .logo {
        width: 130px !important;
    }

    .header .logo .website-logo {
        height: 42px !important;
        max-width: 130px !important;
    }
}

/* =========================================================
   RAMPAGE HEADER LOGO - FINAL POSITION
   Original brand left / image logo far right
========================================================= */

/* Restore original left text logo */
.header > .logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 145px !important;
    height: 60px !important;

    padding: 0 !important;
    margin: 0 auto 0 0 !important;

    text-decoration: none !important;
}

.header > .logo span {
    display: block !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    font-style: italic !important;
    line-height: .85 !important;
}

.header > .logo strong {
    display: block !important;
    color: #ef233c !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    font-style: italic !important;
    line-height: .9 !important;
}


/* New image on FAR RIGHT */
.header-right-logo {
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 95px !important;
    height: 58px !important;

    margin-left: 12px !important;
    padding: 0 !important;

    border-left: 1px solid #20252b !important;

    text-decoration: none !important;
    overflow: hidden !important;
}

.header-right-logo img {
    display: block !important;

    width: 82px !important;
    height: 48px !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: center center !important;
}


/* Make sure right-side items remain in correct order */
.header-discord {
    flex: 0 0 auto !important;
}

.header-account {
    flex: 0 0 auto !important;
}


/* Mobile */
@media (max-width: 1100px) {

    .header-right-logo {
        width: 72px !important;
        margin-left: 7px !important;
    }

    .header-right-logo img {
        width: 62px !important;
        height: 42px !important;
    }
}

@media (max-width: 800px) {

    .header-right-logo {
        display: none !important;
    }
}

/* =========================================================
   HEADER RIGHT LOGO REMOVED - IMAGE IS NOW FAVICON
========================================================= */

.header-right-logo {
    display: none !important;
}

/* Keep original left Rampage Gaming Community branding */
.header > .logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 145px !important;
    height: 60px !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.header > .logo span {
    display: block !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    font-style: italic !important;
    line-height: .85 !important;
}

.header > .logo strong {
    display: block !important;
    color: #ef233c !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    font-style: italic !important;
    line-height: .9 !important;
}


/* ==========================================================
   HOMEPAGE RGC HEADER LOGO - FINAL SIZE FIX
   ========================================================== */

.header .logo.rgc-image-logo,
header .logo.rgc-image-logo,
.logo.rgc-image-logo {

    position: relative !important;

    display: block !important;

    width: 190px !important;
    height: 58px !important;

    min-width: 190px !important;
    max-width: 190px !important;

    min-height: 58px !important;
    max-height: 58px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    flex: 0 0 190px !important;
}


/*
   websitelogo.jpg is square with lots of black space.

   Instead of displaying the entire square, make it larger
   inside a small clipped header box.
*/

.header .logo.rgc-image-logo img,
header .logo.rgc-image-logo img,
.logo.rgc-image-logo img {

    position: absolute !important;

    width: 190px !important;
    height: 190px !important;

    max-width: none !important;
    max-height: none !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
}


/* Make absolutely sure the logo cannot cover the page */

.header,
header.header {
    overflow: visible !important;
}

.header .logo.rgc-image-logo,
header.header .logo.rgc-image-logo {
    overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 800px) {

    .header .logo.rgc-image-logo,
    header .logo.rgc-image-logo,
    .logo.rgc-image-logo {

        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        flex-basis: 150px !important;
    }

    .header .logo.rgc-image-logo img,
    header .logo.rgc-image-logo img,
    .logo.rgc-image-logo img {

        width: 150px !important;
        height: 150px !important;

        left: 0 !important;
        top: 50% !important;

        transform: translateY(-50%) !important;
    }
}

/* =========================================================
   RAMPAGE GLOBAL LOGO SIZE FIX
   Header logo remains compact.
   Prevents oversized logos in page/footer content.
========================================================= */

.header .rgc-image-logo {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}

.header .rgc-image-logo img {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
}


/* Any logo appearing in footer/content */
footer img[src*="websitelogo"],
.footer img[src*="websitelogo"],
.site-footer img[src*="websitelogo"],
main img[src*="websitelogo"] {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 90px !important;
    object-fit: contain !important;
}


/* Never allow the raw logo image to fill the page */
body > img[src*="websitelogo"] {
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
}


/* Mobile */
@media (max-width: 700px) {

    .header .rgc-image-logo img {
        width: 125px !important;
        max-width: 125px !important;
        height: 48px !important;
        max-height: 48px !important;
    }

    footer img[src*="websitelogo"],
    .footer img[src*="websitelogo"],
    .site-footer img[src*="websitelogo"],
    main img[src*="websitelogo"],
    body > img[src*="websitelogo"] {
        width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
    }
}