/* ======================================================
   ROOT VARIABLES
====================================================== */

:root {

    /* ---------- Brand Colors ---------- */

    --primary: #1E5A88;
    --primary-dark: #15456A;

    --accent: #F58220;
    --accent-hover: #FF9A3D;

    /* ---------- Backgrounds ---------- */

    --background: #F7F9FC;
    --surface: #FFFFFF;

    /* ---------- Text ---------- */

    --text: #2C3E50;
    --text-light: #6C757D;

    /* ---------- Borders ---------- */

    --border: #E3E7EC;

    /* ---------- Status Colors ---------- */

    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;

    /* ---------- Effects ---------- */

    --radius: 12px;

    --shadow:
        0 4px 12px rgba(0,0,0,.08);

    --shadow-hover:
        0 8px 24px rgba(0,0,0,.12);

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Poppins",sans-serif;

    background:var(--background);

    color:var(--text);

}

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

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

    font-weight:600;

    color:var(--text);

}

h1{

    font-size:3rem;

}

h2{

    font-size:2.25rem;

}

h3{

    font-size:1.75rem;

}

p{

    color:var(--text-light);

    line-height:1.7;

}

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

a{

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--accent);

}

/* ======================================================
   NAVBAR
====================================================== */

.navbar{

    background:var(--surface);

    box-shadow:var(--shadow);

}

.navbar-brand{

    font-size:1.5rem;

    font-weight:700;

}

.nav-link{

    font-weight:500;

}

.nav-link:hover{

    color:var(--accent) !important;

}

/* ======================================
   BRAND
====================================== */

.text-brand{

    color:var(--primary);

}

.text-accent{

    color:var(--accent);

}

.navbar-brand img{

    transition:.25s;

}

.navbar-brand:hover img{

    transform:scale(1.05);

}

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

.hero{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    padding:0;

}

.hero .carousel-item{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    padding:100px 0 104px;

}

.hero #classroom-pirates-hero{

    background:
        linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.58)),
        url('/static/images/games/classroom_pirates/backgrounds/into_background.png') center / cover no-repeat;

}

.hero #battleship-hero{

    background:
        linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.58)),
        url('/static/images/games/battleship/backgrounds/battleship_background.png') center / cover no-repeat;

}

.hero #pokemon-hunters-hero{

    background:
        linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.58)),
        url('/static/images/games/pokemon_hunters/backgrounds/intro_background.jpg') center / cover no-repeat;

}

.hero-carousel-controls{

    position:absolute;
    right:0;
    bottom:24px;
    left:0;
    z-index:2;

}

.hero h1{

    color:white;

}

.hero p{

    color:rgba(255,255,255,.85);

}

.hero-image{

    max-height:380px;

    transition:.4s;

}

.hero-image:hover{

    transform:translateY(-8px);

}

.hero .badge{

    font-size:.95rem;

    padding:.6rem .9rem;

}

/* ======================================================
   BUTTONS
====================================================== */

.btn{

    border-radius:var(--radius);

}

.btn-brand{

    background:var(--accent);

    color:white;

    border:none;

}

.btn-brand:hover{

    background:var(--accent-hover);

    color:white;

}

.btn-outline-brand{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline-brand:hover{

    background:var(--primary);

    color:white;

}

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

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-hover);

}

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

img{

    max-width:100%;

    height:auto;

}

.rounded-image{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/* ======================================================
   FORMS
====================================================== */

.form-control,
.form-select{

    border-radius:var(--radius);

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(30,90,136,.15);

}

/* ======================================================
   SECTIONS
====================================================== */

.section{

    padding:80px 0;

}

/* ======================================================
   ICONS
====================================================== */

.bi{

    vertical-align:middle;

}

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

footer{

    background:var(--primary-dark);

    color:white;

}

footer h4,
footer h5{

    color:white;

}

footer p{

    color:#D6D6D6;

}

footer a{

    color:#D6D6D6;

    transition:.25s;

}

footer a:hover{

    color:var(--accent) !important;

}

.logo-img{
    height:50px;
}

/* ======================================================
   UTILITIES
====================================================== */

.shadow-custom{

    box-shadow:var(--shadow);

}

.rounded-custom{

    border-radius:var(--radius);

}

.text-brand{

    color:var(--primary);

}

.text-accent{

    color:var(--accent);

}

.bg-brand{

    background:var(--primary);

}

.bg-accent{

    background:var(--accent);

}

/* ======================================
   FEATURE CARDS
====================================== */

.feature-icon{

    font-size:3.5rem;

    color:var(--primary);

    margin-bottom:1rem;

}

/* ======================================
   CALL TO ACTION
====================================== */

.bg-brand{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}

.bg-brand h2{

    color:white;

}

.bg-brand p{

    color:rgba(255,255,255,.9);

}

.account-menu-trigger {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
}

.account-avatar,
.account-avatar-large {
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.account-avatar {
    width: 36px;
    height: 36px;
}

.account-avatar-large {
    width: 56px;
    height: 56px;
    margin-inline: auto;
}