/* =========================================
   PHOENIX CORE V2
   MODERN ENGINE LOADER
========================================= */

@import url('./core/fonts.css');
@import url('./core/typography-v2.css');
@import url('./core/media-v2.css');

@import url('./themes/themes-v2.css');

@import url('./layout/containers-v2.css');
@import url('./layout/spacing-v2.css');
@import url('./layout/responsive-v2.css');
@import url('./layout/large-screen-v2.css');

@import url('./components/navbar-v2.css');
@import url('./components/footer-v2.css');
@import url('./components/buttons-v2.css');
@import url('./components/cards-v2.css');
@import url('./components/why-phoenix-v2.css');
@import url('./components/core-hero-v2.css');

@import url('./pages/portal-v2.css');
@import url('./pages/game-page-v2.css');
@import url('./events/event-overlays-v2.css');

@import url('./layout/mobile-v2.css');

/* =========================================
   CORE VARIABLES
========================================= */

:root {

    /* =====================================
       COLORS
    ===================================== */

    --bg-primary:
        #050505;

    --bg-secondary:
        #101010;

    --bg-tertiary:
        #181818;

    --text-primary:
        #ffffff;

    --text-secondary:
        rgba(255,255,255,0.72);

    --text-muted:
        rgba(255,255,255,0.45);

    /* =====================================
       RADII
    ===================================== */

    --radius-sm:
        10px;

    --radius-md:
        18px;

    --radius-lg:
        28px;

    --radius-xl:
        42px;

    /* =====================================
       TRANSITIONS
    ===================================== */

    --transition:
        all 0.35s ease;

    /* =====================================
       CONTAINERS
    ===================================== */

    --container-width:
        min(1440px, 92%);

}



/* =========================================
   RESET
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* =========================================
   HTML/BODY
========================================= */

html {

    scroll-behavior: smooth;

}

body {

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,0.03),
            transparent 40%
        ),
        var(--bg-primary);

    color:
        var(--text-primary);

    font-family:
        'Inter',
        sans-serif;

    overflow-x: hidden;

}



/* =========================================
   GLOBAL TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    line-height: 1.1;

    font-weight: 800;

}

p {

    color:
        var(--text-secondary);

    line-height: 1.8;

}



/* =========================================
   GLOBAL LINKS
========================================= */

a {

    color: inherit;

    text-decoration: none;

}



/* =========================================
   GLOBAL IMAGES
========================================= */

img {

    max-width: 100%;

    display: block;

}



/* =========================================
   MAIN APP WRAPPER
========================================= */

main {

    position: relative;

    z-index: 1;

}



/* =========================================
   GLOBAL CONTAINER
========================================= */

.pxr-container {

    width:
        var(--container-width);

    margin:
        0 auto;

}



/* =========================================
   GLOBAL SECTION
========================================= */

.pxr-section {

    position: relative;

    padding:
        clamp(80px, 10vw, 140px) 0;

}



/* =========================================
   SECTION HEADER SYSTEM
========================================= */

.pxr-section-header {

    text-align: center;

    max-width: 860px;

    margin:
        0 auto 70px;

}

.pxr-section-header span {

    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--theme-accent);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size:
        0.85rem;

    font-weight: 700;

}

.pxr-section-header h2 {

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    margin-bottom: 24px;

}

.pxr-section-header p {

    font-size:
        clamp(1rem, 1.5vw, 1.15rem);

}



/* =========================================
   GLOBAL PAGE WRAPPERS
========================================= */

.page-wrapper,
.pxr-page,
.pxr-game-page {

    background:
        transparent;

    color:
        var(--text-primary);

}



/* =========================================
   SMOOTH TRANSITIONS
========================================= */

body,
section,
article,
div,
a,
button {

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

}

/* TEMP FINAL OVERRIDE - HOMEPAGE WHY PHOENIX */
.pxr-home-page .pxr-why-phoenix-section .why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1200px !important;
    margin: 48px auto 0 !important;
    gap: 28px !important;
}

@media (max-width: 980px) {
    .pxr-home-page .pxr-why-phoenix-section .why-grid {
        grid-template-columns: 1fr !important;
    }
}