@import url('./variables.css');

/*Logo*/
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap');

/*Titles*/
/*Option 1*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/*Option 2*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

/*Subtitles*/
/*Option 1*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/*Option 2*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

/*Texts and legends*/
/*Option 1*/
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/*Option 2*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* Prevent horizontal scroll globally */
* {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

/* Responsive KPI row for mobile */
@media (max-width: 900px) {
    .totals {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .totals .kpi {
        min-width: 0;
        text-align: center;
        font-size: 0.98em;
    }

    .totals .kpi span {
        display: block;
        font-size: 0.92em;
    }

    /* Ensure no horizontal scroll on mobile */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}