/* === GLOBAL === */
body {
    margin: 0; /*reset*/
    padding: 0; /*reset*/
    font-family: sans-serif; /*base*/
    background: #f5f8fc; /*soft-bg*/
}

/* === HEADER === */
.main-header {
    background: #e6eff7; /*light-blue*/
    border-bottom: 1px solid #c5d3e0; /*line*/
    padding: 12px 0; /*space*/
}

.header-inner {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    /* ADD THIS */
    gap: 20px;
}

/* logo placeholder */
.logo {
    width: 120px;
    height: 40px;
    background: #bdd7ef; /*temp*/
    border-radius: 6px;
    margin: 0 auto;
}

/* nav */
.nav {
    display: flex;
    gap: 24px;
}

.nav-item {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 500;
}

.nav-item:hover {
    text-decoration: underline;
}

/* dark mode switch */
.toggle {
    display: flex;
    gap: 6px;
    align-items: center;
}

#darkModeSwitch {
    accent-color: #1a1a1a;
}

/* === MAIN BODY === */
.page-body {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* === FOOTER === */
.footer {
    background: #1b1b1b;
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 80px;
}

.foot-text {
    max-width: 500px;
    margin: auto;
    margin-bottom: 16px;
    line-height: 1.4;
}

.foot-btn {
    background: #00aaff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.foot-btn:hover {
    background: #0088cc;
}

/* === SHARED CLASSNAME SUPPORT === */

/* test labels */
.test-label,
.label {
    font-family: sans-serif;
}

/* radio labels */
.radio-label,
input[type="radio"] + label {
    font-weight: 300;
}

/* recent tests • bold numbers */
.number,
.recent-tests strong {
    font-weight: bold;
}