/* ==========================================================
   WINNING LINE AI - SHARED MEMBER SHELL
   Applies equally to Dashboard, Racing and History
   ========================================================== */

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.site-header {
    width: 100%;
}

.site-header-inner {
    max-width: 1220px;
    margin: 0 auto;

    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 24px;

    padding: 0 24px;
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 260px;

    text-decoration: none;
}

.wla-brand-badge {
    width: 46px;
    height: 46px;
    min-width: 46px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f3b62d,
            #d99b11
        );

    color: #102f4d;

    font-size: 16px;
    line-height: 1;
    font-weight: 900;

    letter-spacing: -.35px;
}

.brand-name {
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;

    white-space: nowrap;
}

.brand-tag {
    margin-top: 2px;

    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}


/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

.main-nav {
    display: flex;
    align-items: center;

    gap: 4px;
}

.main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none;
}

.main-nav a.active {
    font-weight: 900 !important;
}


/* ----------------------------------------------------------
   HEADER ACTIONS
   ---------------------------------------------------------- */

.header-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 12px !important;
}

.soft-pill {
    font-size: 12px !important;
    line-height: 1 !important;
}

.header-actions .button,
.header-actions button {
    min-height: 40px;

    padding: 0 16px;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}


/* ----------------------------------------------------------
   RESPONSIBLE GAMBLING STRIP
   ---------------------------------------------------------- */

.member-notice {
    min-height: 38px;

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

    gap: 7px;

    padding: 6px 18px;

    font-size: 12px !important;
    line-height: 1.3 !important;
}


/* ----------------------------------------------------------
   PAGE WIDTH
   ---------------------------------------------------------- */

.page {
    width: min(
        calc(100% - 40px),
        1180px
    );

    margin: 0 auto;
}


/* ----------------------------------------------------------
   COMMON PAGE HEADINGS
   ---------------------------------------------------------- */

.app-top h1,
.dashboard-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.app-top p,
.dashboard-hero p {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.eyebrow {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    letter-spacing: .12em;
}


/* ----------------------------------------------------------
   COMMON SECTION TYPOGRAPHY
   ---------------------------------------------------------- */

.section-title {
    font-size: 23px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

.section-copy {
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* ----------------------------------------------------------
   COMMON BUTTONS
   ---------------------------------------------------------- */

.button {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.table-wrap th {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.table-wrap td {
    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.product-footer {
    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .site-header-inner {
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand {
        min-width: 0;
    }

    .main-nav {
        order: 3;
        width: 100%;
    }

    .main-nav a {
        flex: 1;
    }
}


@media (max-width: 620px) {

    .site-header-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page {
        width: min(
            calc(100% - 24px),
            1180px
        );
    }

    .brand-name {
        font-size: 17px !important;
    }

    .brand-tag {
        font-size: 10px !important;
    }

    .app-top h1,
    .dashboard-hero h1 {
        font-size: 26px !important;
    }

    .section-title {
        font-size: 21px !important;
    }
}





/* ==========================================================
   WINNING LINE AI - FINAL STABLE NAV TYPOGRAPHY
   Same font size/weight active or inactive = zero movement
   ========================================================== */

.site-header .main-nav a,
.site-header .main-nav a.active {
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* ==========================================================
   WINNING LINE AI - EXACT DESKTOP NAV GEOMETRY
   Measured from stable member pages.
   Prevents Dashboard changing total navigation width.
   ========================================================== */

@media (min-width: 901px) {

    .site-header .main-nav {
        flex: 0 0 709px !important;
        width: 709px !important;

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

        gap: 4px !important;

        justify-content: flex-start !important;
    }

    .site-header .main-nav a {
        flex: 0 0 auto !important;

        box-sizing: border-box !important;

        font-size: 17px !important;
        font-weight: 900 !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        white-space: nowrap !important;
    }

    .site-header .main-nav a[href="home.html"] {
        width: 135px !important;
    }

    .site-header .main-nav a[href="racing.html"] {
        width: 146px !important;
    }

    .site-header .main-nav a[href="history.html"] {
        width: 106px !important;
    }

    .site-header .main-nav a[href="how-it-works.html"] {
        width: 144px !important;
    }

    .site-header .main-nav a[href="responsible.html"] {
        width: 162px !important;
    }
}

/* Return to flexible navigation on smaller screens */

@media (max-width: 900px) {

    .site-header .main-nav {
        width: 100% !important;
        flex: 1 0 100% !important;
    }

    .site-header .main-nav a {
        width: auto !important;
    }
}