:root {
      --bg: #f7f8fa;
      --card: #ffffff;
      --muted: #6c6c7a;
      --text: #1a1a1f;
      --accent: #ff4c00;
      --secondary: #0078d4;
      --border: #d9d9dd;
      --win: #2a7f4f;
      --lose: #8a1a1a;
    }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

ul {
    list-style-type: disc;
    padding: 0;
    margin: 0;

    li {
        margin-left: 1.5rem;
        line-height: 1.5rem;
    }
}

header {
    background-image:  url('assets/max.png'), url('assets/f1-hero.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: 90% top, left bottom;
    background-size: contain, cover;
    height: 60vh;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    color: white;
    padding: 0 5%;
    font-weight: bold;

    h1 {
        font-size: 4.5rem;
        text-transform: capitalize;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        margin-bottom: 1rem;

        .highlight {
            display: block;
            color: #D40C0C;
        }
    }

    .tagline {
        font-size: 1.5rem;
    }

}

#app { 
    margin: 2rem 5% 0;
    display: flex;
    column-gap: 2rem;
    justify-content: space-between;
    position: relative;
    top: -100px;

    #main {
        display: flex;
        flex-direction: column;
    }

    #sidebar {
        width: 30%;
    }
}

section {
    border-radius: 8px;
    background-color: white;
    color: #000;
    border-radius: 8px 8px 0 0;
    border: solid 2px #f2f2f2;
    margin-bottom: 2rem;

    .header {
        background: linear-gradient(90deg,rgba(252, 233, 231, 1) 0%, rgba(231, 231, 231, 1) 90%);
        padding: 1rem 2rem;
        border-radius: 8px 8px 0 0;
        line-height: 2rem;

        h2 {
            color: #000;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .subtitle {
            color: #737373;
        }
    }

    .content {
        padding: 1rem 2rem;
    }
    
}

#max-o-meter {
    flex-grow: 2;
}

#answer {
    color: darkgreen;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}

#max-stats {
    display: flex;
    justify-content: space-around;

    > div {
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-label {
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.5rem;
        }

        .stat-value {
            font-size: 2rem;
            line-height: 2.5rem;
        }

    }
}

.recipe {
    .content {
        > div {
            margin-bottom: 1rem;
        }
        p {
            font-size: 1.3rem;
            margin-bottom: 0.7rem;
            text-transform: capitalize;
        }
        .note {
            font-style: italic;
            color: #888;
        }
        
        .examples {
            display: flex;
            justify-content: space-between;

            > div {
                flex-grow: 1;
            }

            p {
                text-transform: uppercase;
                font-size: 1rem;
            }
        }
    }

}

.rival-watch {
    .figure {
        margin-bottom: 1rem;
        text-align: center;

        img {
            max-width: 50%;
            border-radius: 8px;
        }

        .caption {
            margin-top: 0.5rem;
            font-weight: bold;
        }
    }
}

.team {
    .color-swatch {

        .mclaren {
            background-color: #FF8700;
        }

        .redbull {
            background-color: #1E41FF;
        }

        .ferrari {
            background-color: #DC0000;
        }

        .mercedes {
            background-color: #00D2BE;
        }

        .haas {
            background-color: #B6BABD;
        }

        .kick-sauber {
            background-color: #9B0000;
        }

        .alpine {
            background-color: #0090FF;
        }

        .vcarb {
            background-color: #2B4562;
        }

        .aston-martin {
            background-color: #006F62;
        }

        .williams {
            background-color: #005AFF;
        }

    }
}

footer {
    text-align: center;
    margin-bottom: 2rem;
}


/* calc */
.sub { color: var(--muted); font-size: 12px; }
.wrap { max-width: 1100px; margin: 22px auto 48px; padding: 0 16px; }

    .grid { display: grid; gap: 16px; grid-template-columns: 1.2fr; }
    @media (max-width: 980px){ .grid { grid-template-columns: 1fr; } }

    .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
    .card h2 { margin: 0; font-size: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .card .body { padding: 14px 16px; }

    .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .controls .field { display: grid; gap: 6px; }
    .controls label { font-size: 12px; color: var(--muted); }
    input[type="number"] { width: 110px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }

    .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; }
    button.primary { background: var(--accent); border-color: #e64800; color: #fff; }
    button.ghost { background: transparent; }

    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
    th { font-weight: 600; font-size: 12px; color: var(--muted); }
    .type { font-size: 11px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
    select { width: 100%; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }

    .scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    @media (max-width: 520px){ .scoreboard { grid-template-columns: 1fr; } }
    .pill { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fafafa; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
    .pill strong { font-size: 14px; }
    .pill .pts { font-variant-numeric: tabular-nums; }

    .leader { outline: 2px solid var(--secondary); box-shadow: 0 0 0 4px rgba(0,120,212,.15) inset; }
    .is-max-wdc { border: 1px solid rgba(0,120,212,.6); background: rgba(0,120,212,.08); }
    .is-not-wdc { border: 1px solid rgba(255,76,0,.4); background: rgba(255,76,0,.06); }

    .help-text {
        margin-top: 12px;
        text-align: right;
        display: flex;
        color: var(--muted);
        justify-content: end;
        column-gap: 2rem;
    }
    details { margin-top: 10px; }
    summary { cursor: pointer; }


@media (max-width: 768px) {
    header {
        background-image: linear-gradient(
          rgba(0, 0, 0, 0.1), 
          rgba(0, 0, 0, 0.4)
        ), url('assets/max.png'), url('assets/f1-hero.jpg');
        background-repeat: no-repeat, no-repeat;
        background-position: left top, right top, right bottom;
        background-size: cover, cover;
    }
    #app {
        flex-direction: column;
        top: 0;

        #sidebar {
            width: 100%;
        }
    }

    #calculator .controls {
        display: none;
    }

    section {
        .content {
            padding: 1rem;
        }
    }
}