/* ====================== BASE STYLES ====================== */
body
    {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-feature-settings: "kern" 1, "liga" 1;
        margin: 0 auto;
        max-width: 1600px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 60px;
        color: #222;
        background-color: #fff;
    }

/* ====================== TYPOGRAPHY ====================== */
.navbar
    {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        letter-spacing: -0.025em;
        font-weight: 600;
        line-height: 1.05;
        color: #222;
    }

.results,
.article-body,
.reading-content
    {
        font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, Roboto, sans-serif;
        font-size: 1.15rem;
        line-height: 1.55;
        letter-spacing: -0.01em;
        font-weight: 500;
        color: #222;
    }

.summary
    {
        font-size: 1.4rem;
        text-align: justify;
        text-justify: inter-word;
        line-height: 1.4;
        padding: 20px;
    }

.title
    {
        font-size: 1.1em;
        line-height: 1.3;
        padding: 8px;
    }

.justify
    {
        text-align: justify;
        text-justify: inter-word;
    }

.has-text-centered
    {
        text-align: center;
    }

.highlight
    {
        background-color: yellow;
    }

/* ====================== FORM CONTROLS (Picnic override) ====================== */
input,
select,
textarea
    {
        background-color: #fff;
        color: #222;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 4px;
    }

input[type="checkbox"],
input[type="radio"]
    {
        width: 18px;
        height: 18px;
        accent-color: #0066ff;
    }

/* Dark mode form controls */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea
    {
        background-color: #1f1f1f;
        color: #f0f0f0;
        border: 1px solid #777;
    }

/* Dark mode checkboxes - forced bright #3388ff with visible checkmark */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"]
    {
        accent-color: #3388ff;
        background-color: #1f1f1f;
        border: 2px solid #888;
    }

body.dark-mode input[type="checkbox"]:checked
    {
        background-color: #3388ff;
        border-color: #3388ff;
    }

/* ====================== NAVBAR (Picnic override) ====================== */
.navbar
    {
        color: #222;
    }

body.dark-mode .navbar,
body.dark-mode nav
    {
        color: #f0f0f0 !important;
        background-color: #1a1a1a !important;
    }

body.dark-mode .navbar a,
body.dark-mode nav a,
body.dark-mode .navbar a:link,
body.dark-mode .navbar a:visited
    {
        color: #f0f0f0 !important;
    }

body.dark-mode .navbar a:hover,
body.dark-mode nav a:hover
    {
        color: #6699ff !important;
    }

/* ====================== BUTTONS (Picnic override) ====================== */
button,
.button,
.search-btn
    {
        /* your custom search button stays */
    }

body.dark-mode button,
body.dark-mode .button
    {
        background-color: #3388ff;
        color: #fff;
    }

/* ====================== MODAL ====================== */
.modal
    {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        animation: fadeIn 0.3s;
    }

.modal-content
    {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 12px;
        width: 95%;
        max-width: 435px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        position: relative;
        animation: slideUp 0.4s;
    }

.close-x
    {
        position: absolute;
        top: 12px;
        right: 18px;
        font-size: 28px;
        font-weight: bold;
        color: #888;
        cursor: pointer;
    }

.close-x:hover
    {
        color: #000;
    }

.modal-image
    {
        width: 100%;
        border-radius: 8px;
    }

.modal-body
    {
        text-align: center;
    }

.modal-body h2
    {
        color: #00008B;
        font-weight: bold;
    }

.modal-body p
    {
        color: #555;
        line-height: 1.15;
    }

.modal-footer
    {
        text-align: center;
        margin-top: 20px;
    }

.btn
    {
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        margin: 0 8px;
    }

.donate-btn
    {
        background-color: #28a745;
        color: white;
    }

.donate-btn:hover
    {
        background-color: #218838;
    }

.no-thanks-btn
    {
        background-color: #6c757d;
        color: white;
    }

.no-thanks-btn:hover
    {
        background-color: #5a6268;
    }

/* ====================== DARK MODE GENERAL ====================== */
body.dark-mode
    {
        background-color: #0a0a0a;
        color: #f0f0f0;
    }

body.dark-mode .results,
body.dark-mode .article-body,
body.dark-mode .reading-content,
body.dark-mode .summary,
body.dark-mode .title
    {
        color: #f0f0f0;
    }

body.dark-mode .highlight
    {
        background-color: #ffd700;
        color: #000;
    }

body.dark-mode #go_to_top_button,
body.dark-mode #go_to_bottom_button
    {
        background-color: #e63946;
    }

body.dark-mode #go_to_top_button:hover,
body.dark-mode #go_to_bottom_button:hover
    {
        background-color: #c1121f;
    }

body.dark-mode .search-btn
    {
        background-color: #3388ff;
    }

body.dark-mode .search-btn:hover
    {
        background-color: #1a70e0;
    }

body.dark-mode .modal
    {
        background-color: rgba(0, 0, 0, 0.85);
    }

body.dark-mode .modal-content
    {
        background-color: #1f1f1f;
        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }

body.dark-mode .close-x
    {
        color: #aaa;
    }

body.dark-mode .close-x:hover
    {
        color: #fff;
    }

body.dark-mode .modal-body h2
    {
        color: #6699ff;
    }

body.dark-mode .modal-body p
    {
        color: #ddd;
    }

body.dark-mode .donate-btn
    {
        background-color: #34c261;
        color: #000;
    }

body.dark-mode .donate-btn:hover
    {
        background-color: #2ba153;
    }

body.dark-mode .no-thanks-btn
    {
        background-color: #8a8d91;
        color: #000;
    }

body.dark-mode .no-thanks-btn:hover
    {
        background-color: #6e7175;
    }

body.dark-mode .search-spinner
    {
        border: 2px solid rgba(255,255,255,0.25);
        border-top-color: #fff;
    }

/* ====================== ANIMATIONS ====================== */
@keyframes fadeIn
    {
        from
            {
                opacity: 0;
            }
        to
            {
                opacity: 1;
            }
    }

@keyframes slideUp
    {
        from
            {
                transform: translateY(50px);
                opacity: 0;
            }
        to
            {
                transform: translateY(0);
                opacity: 1;
            }
    }

/* ====================== PRINT STYLES ====================== */
@media print
    {
        header, nav, footer, #search-form, #down-button
            {
                display: none;
            }
        .year, .author, .title, .ref
            {
                background-color: #000;
                color: #fff;
            }
        .summary
            {
                font-weight: bold;
            }
    }

/* ====================== MONOSPACE ====================== */
textarea
    {
        font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
    }


/* ** sadness */

/* ====================== QUICK DARK MODE OVERRIDE (Picnic fix) ====================== */
/* Put this at the BOTTOM of style.css */

body.dark-mode
    {
        background-color: #0a0a0a;
        color: #f0f0f0;
    }

/* Navbar / nav - force visible light text */
body.dark-mode nav,
body.dark-mode .navbar,
body.dark-mode .nav
    {
        background-color: #1a1a1a !important;
        color: #f0f0f0 !important;
    }

body.dark-mode nav a,
body.dark-mode .navbar a,
body.dark-mode nav * 
    {
        color: #f0f0f0 !important;
    }

body.dark-mode nav a:hover
    {
        color: #6699ff !important;
    }

/* Inputs, selects, textareas */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea
    {
        background-color: #1f1f1f !important;
        color: #f0f0f0 !important;
        border-color: #666 !important;
    }

/* Checkboxes - force bright blue with visible white check */
body.dark-mode input[type="checkbox"]
    {
        accent-color: #3388ff !important;
    }

body.dark-mode .checkable
    {
        background-color: #1f1f1f !important;
        border-color: #888 !important;
    }

body.dark-mode input[type="checkbox"]:checked + .checkable::after
    {
        color: #ffffff !important;        /* white checkmark */
        background-color: #3388ff !important;
    }

/* Buttons */
body.dark-mode button,
body.dark-mode .button
    {
        background-color: #3388ff !important;
        color: white !important;
    }

body.dark-mode .search-btn
    {
        background-color: #3388ff !important;
    }


/* ====================== SCROLL BUTTONS (Top & Bottom) ====================== */
/* Quick override to make them fixed on the far right again */

#go_to_top_button,
#go_to_bottom_button
    {
        display: none;
        position: fixed !important;
        z-index: 9999 !important;
        border: none;
        outline: none;
        background-color: #dc3545;
        color: white;
        cursor: pointer;
        padding: 15px 18px;
        border-radius: 6px;
        font-size: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: all 0.2s ease;
    }

#go_to_top_button
    {
        bottom: 90px;
        right: 30px;
    }

#go_to_bottom_button
    {
        bottom: 30px;
        right: 30px;
    }

#go_to_top_button:hover,
#go_to_bottom_button:hover
    {
        background-color: #c82333;
        transform: scale(1.05);
    }

/* Dark mode support for scroll buttons */
body.dark-mode #go_to_top_button,
body.dark-mode #go_to_bottom_button
    {
        background-color: #e63946;
    }

body.dark-mode #go_to_top_button:hover,
body.dark-mode #go_to_bottom_button:hover
    {
        background-color: #c1121f;
    }