/*
=============================
    LIGHT THEME VARIABLES
=============================
*/
:root {
    --color-primary: #013BDB;
    --color-primary-dark: #002EA0;
    --color-primary-darker: #001F70;
    --color-primary-shadow: rgba(1, 59, 219, 0.18);
    --color-primary-shadow-hover: rgba(1, 59, 219, 0.22);
    --color-primary-border: rgba(1, 59, 219, 0.08);
    --color-primary-border-mid: rgba(1, 59, 219, 0.12);
    --color-bg: #F4F6FA;
    --color-bg-card: #FFFFFF;
    --color-bg-light: #E9F0FF;
    --color-bg-blue: #E5EBFF;
    --color-bg-blue-hover: #DCE5FF;
    --color-bg-section: #F1F4FF;
    --color-text: #2C3E50;
    --color-text-mid: #3B4A63;
    --color-text-dark: #1D2B50;
    --color-heading: #013BDB;
    --color-hero-grad-start: #FFFFFF;
    --color-hero-grad-end: #E9F0FF;
    --color-online-grad-end: #E6F0FF;
    --color-shadow-sm: rgba(2, 8, 23, 0.04);
    --color-shadow-md: rgba(2, 8, 23, 0.06);
    --color-overlay: rgba(15, 18, 70, 0.4);
    --color-flash-error: #F44336;
    --color-flash-success: #4CAF50;
    --color-flash-info: #2196F3;
    --color-white: #FFFFFF;
    --color-dot: #013BDB;
}

/*
============================
    DARK THEME VARIABLES
============================
*/
[data-theme="dark"] {
    --color-primary: #5B8AFF;
    --color-primary-dark: #3D6FE8;
    --color-primary-darker: #2855C8;
    --color-primary-shadow: rgba(91, 138, 255, 0.18);
    --color-primary-shadow-hover: rgba(91, 138, 255, 0.28);
    --color-primary-border: rgba(91, 138, 255, 0.12);
    --color-primary-border-mid: rgba(91, 138, 255, 0.2);
    --color-bg: #0D1117;
    --color-bg-card: #161B22;
    --color-bg-light: #1C2333;
    --color-bg-blue: #1A2340;
    --color-bg-blue-hover: #1F2B50;
    --color-bg-section: #1C2333;
    --color-text: #CDD9E5;
    --color-text-mid: #8BA1B7;
    --color-text-dark: #E6EDF3;
    --color-heading: #5B8AFF;
    --color-hero-grad-start: #161B22;
    --color-hero-grad-end: #1A2340;
    --color-online-grad-end: #1A2A40;
    --color-shadow-sm: rgba(0, 0, 0, 0.2);
    --color-shadow-md: rgba(0, 0, 0, 0.3);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-flash-error: #F44336;
    --color-flash-success: #4CAF50;
    --color-flash-info: #2196F3;
    --color-white: #FFFFFF;
    --color-dot: #5B8AFF;
}

/*
==============
    GLOBAL
==============
*/
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    color: var(--color-text);
}

h1 {
    font-size: 38px; margin-top: 16px; margin-bottom: 12px;
}

h2 {
    font-size: 36px; margin-top: 16px; margin-bottom: 12px;
}

h3 {
    font-size: 34px; margin-top: 14px; margin-bottom: 10px;
}

h4 {
    font-size: 30px; margin-top: 14px; margin-bottom: 10px;
}

h5 {
    font-size: 26px; margin-top: 12px; margin-bottom: 8px;
}

/*
============
    HOME
============
*/
.home-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 16px 80px;
    box-sizing: border-box;
}

.hero-container {
    position: relative;
    margin-top: 40px;
    padding: 28px;
    background: linear-gradient(180deg, var(--color-hero-grad-start) 0%, var(--color-hero-grad-end) 60%);
    border-radius: 12px;
    box-shadow: 0 6px 30px var(--color-shadow-md);
}

.hero-flex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.hero-content {
    flex: 1;
    min-width: 0;
}

.hero-content h2 {
    margin: 0 0 12px 0;
    color: var(--color-heading);
    line-height: 1.05;
}

.hero-content p {
    font-size: 20px;
    margin: 0 0 18px 0;
    color: var(--color-text);
    line-height: 1.5;
}

/*
===================
    CTA BUTTONS
===================
*/
.cta-btns {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 18px;
    gap: 12px;
    align-items: center;
    font-size: 18px;
}

.cta-btns .signup-btn,
.cta-btns .login-btn,
.btn {
    display: inline-block;
    padding: 10px 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
    cursor: pointer;
    border: 0;
}

.signup-btn {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: 0 6px 18px var(--color-primary-shadow);
}

.signup-btn:hover,
.signup-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--color-primary-shadow-hover);
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
}

.login-btn {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary-border-mid);
}

.login-btn:hover,
.login-btn:focus {
    background: var(--color-bg-blue);
}

/*
==================
    LOGIN FORM
==================
*/
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form .form-links {
    margin-top: 10px;
    text-align: right;
}

.login-form .form-links a {
    font-size: 14px;
    text-decoration: none;
    color: var(--color-primary);
    margin-left: 12px;
    transition: color 0.2s ease;
}

.login-form .form-links a:hover {
    color: var(--color-primary-darker);
    text-decoration: underline;
}

/*
================
    HERO FAQ
================
*/
.hero-faq {
    margin-top: 20px;
    background: var(--color-bg-blue);
    border-radius: 10px;
    padding: 16px;
    max-width: 680px;
    border: 1px solid var(--color-primary-border-mid);
}

.hero-faq h2 {
    margin: 0 0 12px 0;
    color: var(--color-heading);
}

.faq-item {
    margin-top: 12px;
    transition: background .2s ease;
    border-radius: 6px;
    padding: 6px 10px;
}

.faq-item:hover {
    background: var(--color-bg-blue-hover);
}

.faq-item h3 {
    font-size: 16px;
    margin: 0 0 6px 0;
    color: var(--color-text-dark);
}

.faq-item p {
    margin: 0;
    color: var(--color-text-mid);
    font-size: 15px;
}

/*
=======================
    MEMBER CAROUSEL
=======================
*/
.hero-sidebox {
    position: absolute;
    top: -80px;
    right: 40px;
    width: 300px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.member-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
    border-radius: 10px;
    padding: 6px 5px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-primary-border);
    background: transparent;
}

.carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: max-content;
    animation: scrollCarousel 12s linear infinite;
}

.carousel-item {
    flex: 0 0 auto;
    width: 180px;
    aspect-ratio: 1 / 1;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    border-radius: 6px;
}

.carousel-item img:hover,
.carousel-item img:focus {
    transform: scale(1.04);
}

@keyframes scrollCarousel {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/*
========================
    WHY AUSSIE FLAME
========================
*/
.why-aussie-flame {
    margin-top: 40px;
    padding: 28px;
    background: var(--color-bg-card);
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--color-shadow-sm);
    border: 1px solid var(--color-primary-border);
}

.why-aussie-flame h2 {
    margin: 0 0 12px 0;
    color: var(--color-heading);
}

.why-aussie-flame ul {
    margin: 12px 0 16px 20px;
    padding: 0;
}

.why-aussie-flame li {
    margin-bottom: 10px;
    line-height: 1.6;
    transition: color .2s ease;
}

.why-aussie-flame li:hover {
    color: var(--color-primary);
}

.why-aussie-flame a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

/*
======================
    ONLINE MEMBERS
======================
*/
.online-container {
    margin-top: 28px;
    padding: 22px;
    background: linear-gradient(180deg, var(--color-bg-card), var(--color-online-grad-end));
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--color-shadow-sm);
    min-height: 120px;
    border: 1px solid var(--color-primary-border);
}

.online-container h2 {
    margin: 0 0 12px 0;
    color: var(--color-heading);
}

.online-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.online-item {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--color-bg-section);
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 6px var(--color-shadow-sm);
    transition: background .2s ease;
}

.online-item:hover {
    background: var(--color-bg-blue-hover);
}

/*
================
    HEATWAVE
================
*/
.heatwave-container {
    margin-top: 28px;
    padding: 22px;
    background: var(--color-bg-card);
    border-radius: 10px;
    box-shadow: 0 6px 20px var(--color-shadow-sm);
    min-height: 140px;
    border: 1px solid var(--color-primary-border);
}

.heatwave-container h2 {
    margin: 0 0 12px 0;
    color: var(--color-heading);
}

.heatwave-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.heatwave-card {
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}

.heatwave-card:hover {
    background: var(--color-bg-blue-hover);
    transform: translateY(-2px);
}

/*
====================
    LOGOUT MODAL
====================
*/
.logout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.logout-modal-content {
    background-color: var(--color-bg-card);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--color-shadow-md);
    text-align: center;
    position: relative;
    width: 300px;
    max-width: 90%;
}

/*
======================
    NOT FOUND PAGE
======================
*/
.not-found-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 32px 16px;
}

.not-found-container {
    text-align: center;
    max-width: 480px;
}

.not-found-flame {
    margin-bottom: 16px;
}

.not-found-logo {
    width: 120px;
    height: auto;
}

.not-found-title {
    color: var(--color-heading);
    font-size: 28px;
    margin-bottom: 12px;
}

.not-found-text {
    color: var(--color-text-mid);
    font-size: 16px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.not-found-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.not-found-btn {
    padding: 10px 24px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
}

.not-found-btn:hover {
    background: var(--color-primary-dark);
}

.not-found-btn-secondary {
    padding: 10px 24px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.not-found-btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/*
==================
    DOT LOADER
==================
*/
.loading-spinner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    margin: 20px auto 0;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-dot);
    border-radius: 50%;
    animation: dot-fade 1.2s infinite ease-in-out both;
}

.dot:nth-child(1) {
    animation-delay: -1.1s;
}

.dot:nth-child(2) {
    animation-delay: -1.0s;
}

.dot:nth-child(3) {
    animation-delay: -0.9s;
}

.dot:nth-child(4) {
    animation-delay: -0.8s;
}

.dot:nth-child(5) {
    animation-delay: -0.7s;
}

.dot:nth-child(6) {
    animation-delay: -0.6s;
}

@keyframes dot-fade {
    0%, 80%, 100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

/*
======================
    FLASH MESSAGES
======================
*/
.flash-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 10px var(--color-shadow-md);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
    color: var(--color-white);
    font-size: 15px;
    text-align: center;
}

.flash-message.error {
    background: var(--color-flash-error);
}

.flash-message.success {
    background: var(--color-flash-success);
}

.flash-message.info {
    background: var(--color-flash-info);
}


/*
======================================
    RESPONSIVE CODE (SMALL MOBILE)
======================================
*/
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }
 
    h1 {
        font-size: 24px;
    }
 
    h2 {
        font-size: 22px;
    }
 
    h3 {
        font-size: 20px;
    }
 
    h4 {
        font-size: 18px;
    }
 
    h5 {
        font-size: 16px;
    }
 
    .hero-container {
        flex-direction: column;
        align-items: stretch;
        margin-top: 100px;
        padding-left: 12px;
        padding-right: 12px;
        gap: 20px;
    }
 
    .hero-flex {
        flex-direction: column;
        gap: 20px;
    }
 
    .hero-content p {
        font-size: 15px;
        padding-right: 0;
    }
 
    .cta-btns {
        font-size: 15px;
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
 
    .cta-btns .signup-btn,
    .cta-btns .login-btn {
        width: 100%;
        text-align: center;
    }
 
    .hero-sidebox {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }
 
    .member-carousel {
        height: auto;
    }
 
    .carousel-track {
        gap: 4px;
    }
 
    .carousel-item {
        flex: 0 0 auto;
        width: 80px;
        aspect-ratio: 1 / 1;
    }
 
    .logout-modal-content {
        padding: 20px;
        width: 240px;
    }
}
 
/*
================================
    RESPONSIVE CODE (MOBILE)
================================
*/
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
 
    h1 {
        font-size: 28px;
    }
 
    h2 {
        font-size: 26px;
    }
 
    h3 {
        font-size: 24px;
    }
 
    h4 {
        font-size: 22px;
    }
 
    h5 {
        font-size: 20px;
    }
 
    .hero-container {
        flex-direction: column;
        align-items: stretch;
        margin-top: 120px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 24px;
    }
 
    .hero-flex {
        flex-direction: column;
        gap: 24px;
    }
 
    .hero-content p {
        font-size: 16px;
        padding-right: 0;
    }
 
    .cta-btns {
        font-size: 16px;
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
 
    .cta-btns .signup-btn,
    .cta-btns .login-btn {
        width: 100%;
        text-align: center;
    }
 
    .hero-sidebox {
        position: static;
        width: 100%;
        max-width: 320px;
        margin-top: 8px;
    }
 
    .member-carousel {
        height: auto;
    }
 
    .carousel-track {
        gap: 6px;
    }
 
    .carousel-item {
        flex: 0 0 auto;
        width: 100px;
        aspect-ratio: 1 / 1;
    }
 
    .logout-modal-content {
        padding: 24px;
        width: 260px;
    }
}
 
/*
================================
    RESPONSIVE CODE (TABLET)
================================
*/
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }
 
    h1 {
        font-size: 34px;
    }
 
    h2 {
        font-size: 32px;
    }
 
    h3 {
        font-size: 30px;
    }
 
    h4 {
        font-size: 26px;
    }
 
    h5 {
        font-size: 22px;
    }
 
    .hero-container {
        margin-top: 160px;
        padding-left: 24px;
        padding-right: 24px;
        gap: 24px;
    }
 
    .hero-flex {
        gap: 24px;
    }
 
    .hero-content p {
        font-size: 18px;
        padding-right: 80px;
    }
 
    .hero-sidebox {
        top: -70px;
        right: 24px;
        width: 240px;
    }
 
    .member-carousel {
        height: auto;
    }
 
    .carousel-track {
        gap: 6px;
    }
 
    .carousel-item {
        flex: 0 0 auto;
        width: 140px;
        aspect-ratio: 1 / 1;
    }
}