/* ===============================
   GLOBAL USER PREFERENCES
   =============================== */

/* Font size controls */
body.font-small {
    font-size: 90%;
}

body.font-normal {
    font-size: 100%;
}

body.font-large {
    font-size: 112%;
}

/* ===============================
   PREFERENCE BAR (LIGHT MODE)
   =============================== */
.pref-bar {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 14px;

    background-color: #f1f5f9; /* light grey background */
    border-bottom: 1px solid #e2e8f0;

    font-size: 16px;
}

.pref-bar button {
    background: none;
    border: none;
    cursor: pointer;

    font-size: 18px;
    color: #0f172a; /* dark visible icon color */
}

.pref-bar button:hover {
    opacity: 0.7;
}

/* ===============================
   DARK MODE OVERRIDES
   =============================== */
body.dark-mode .pref-bar {
    background-color: #020617; /* dark header strip */
    border-bottom: 1px solid #1e293b;
}

body.dark-mode .pref-bar button {
    color: #e5e7eb; /* light icons on dark */
}

/* ===============================
   DARK MODE BASE
   =============================== */
body.dark-mode {
    background-color: #0f172a;
    color: #e5e7eb;
}

body.dark-mode a {
    color: #93c5fd;
}



/* ===============================
   HERO BAND FONT SCALING FIX
   =============================== */

body.font-small .hero-inner h1 {
    font-size: 2.2rem;
}

body.font-normal .hero-inner h1 {
    font-size: 2.6rem;
}

body.font-large .hero-inner h1 {
    font-size: 3rem;
}

body.font-small .hero-inner p {
    font-size: 1rem;
}

body.font-normal .hero-inner p {
    font-size: 1.1rem;
}

body.font-large .hero-inner p {
    font-size: 1.25rem;
}