/* RESET & BASE LAYOUT */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #0f1111;
    font-size: 16px;
}

.page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

main {
    flex: 1;
    padding: 20px;
}

/* FOOTER */
.footer {
    border-top: solid#ccc 1px;
    margin-top: auto;
    width: 100%;
    text-align: left;
    padding: 1em;
    font-size: 14px;
}

.footer hr {
    border: 1px solid #ccc;
}

.footer a {
    text-decoration: none;
    color: #0066cc;
    font-style: italic;
}

/* TYPOGRAPHY */
h1 {
    color: #333;
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin: 0 0 1rem 0;
}

hr {
    width: 100%;
    border: none;
    border-top: 1px solid #ddd;
}

/* LIST STYLES */
ul {
    padding-left: clamp(20px, 10vw, 100px);
    margin-top: 0.5em;
    list-style: none;
}

li {
    list-style: none;
    background: url("../../css/icons/item.webp") no-repeat left center;
    background-size: 15px 20px;
    padding: 12px 0 12px 30px;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.5;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

li:hover {
    font-size: clamp(1.05rem, 2.6vw, 1.2rem);
    padding-left: 35px;
}

li a {
    display: block;
    width: 100%;
    word-break: break-word;
}

#available {
    padding-left: clamp(20px, 5vw, 40px);
    margin-bottom: 0.5em;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    display: flex;
    align-items: center;
}

#available img {
    margin-right: 8px;
}

#nojs {
    display: inline-flex;
    align-items: center;
    color: #333;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#nojs img {
    margin-right: 8px;
    width: clamp(35px, 8vw, 45px);
    height: clamp(35px, 8vw, 45px);
}

/* NOSCRIPT LIST */
#nonenormalul {
    list-style: disc inside;
    margin: 1em 0;
    padding-left: clamp(20px, 5vw, 40px);
}

#nonenormalul li {
    list-style: inherit;
    margin: 0.5em 0;
    padding: 8px 0;
    background: none;
    min-height: auto;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
}

#nonenormalul li:hover {
    font-size: clamp(0.95rem, 2.3vw, 1.05rem);
}

/* BUTTONS */
button {
    margin: 5px 5px 5px 0;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    border: 1px solid #adb1b8;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
    color: #0f1111;
    cursor: pointer;
    display: inline-block;
    font-family: "Amazon Ember", Arial, sans-serif;
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
    min-height: 44px;
    padding: 8px 16px;
    outline: 0;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    transition: all 0.2s ease;
}

button:active {
    border-color: #a2a6ac;
    transform: translateY(1px);
}

button:hover {
    border-color: #979aa1;
    background-image: linear-gradient(#e7e9ec, #d7d9dc);
}

button:focus {
    border-color: #e77600;
    box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
    outline: 0;
}

button:disabled,
button[disabled] {
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* INPUT STYLES */
input#searchbox {
    background-color: #fff;
    color: #0f1111;
    border: 1px solid #adb1b8;
    border-radius: 3px;
    padding: 10px 14px;
    font-size: clamp(0.9375rem, 2vw, 1rem);
    min-height: 44px;
    width: 100%;
    max-width: 400px;
    transition: all 0.2s ease;
}

input#searchbox:focus {
    border-color: #e77600;
    box-shadow: rgba(228, 121, 17, .3) 0 0 3px 2px;
    outline: 0;
}

/* ARTICLE STYLING */
article {
    max-width: 800px;
    margin: 1rem 0 1rem 4em;
    padding: 1rem;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    border: 1px solid #adb1b8;
    box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset, 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    line-height: 1.6;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    transition: background-color 0.3s ease, color 0.3s ease;
}

article h2 {
    font-size: clamp(1.15rem, 3.5vw, 1.5rem);
    margin: 0.5rem 0 0.75rem 0;
    color: #333;
}

article p {
    margin: 0.5rem 0;
}

article a {
    color: #1a73e8;
    text-decoration: underline;
    transition: color 0.2s ease;
}

article a:hover {
    color: #0f52ba;
}

article blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid #e77600;
    background-color: #fff9f2;
    font-style: italic;
    color: #555;
}

article code,
article pre {
    font-family: "Courier New", Courier, monospace;
    background-color: #f0f0f0;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    font-size: 0.9em;
    overflow-x: auto;
}

article pre {
    padding: 0.75rem;
    background-color: #f4f4f4;
}

article img {
    max-width: 100%;
    height: auto;
    margin: 0.5rem 0;
    border-radius: 4px;
}

/* DARK MODE */
body.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode h1 {
    color: #f0f0f0;
}

body.dark-mode hr {
    border-top-color: #444;
}

body.dark-mode #nojs {
    color: #f0f0f0;
}

body.dark-mode li {
    background-image: url("../../css/icons/item.webp");
}

body.dark-mode button {
    background-image: linear-gradient(#3a3a3a, #2a2a2a);
    color: #e0e0e0;
    border-color: #555;
    box-shadow: rgba(0, 0, 0, .6) 0 1px 0 inset;
}

body.dark-mode button:hover {
    background-image: linear-gradient(#454545, #353535);
    border-color: #666;
}

body.dark-mode input#searchbox {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode input#searchbox:focus {
    border-color: #e77600;
}

body.dark-mode a {
    color: #4ea1ff;
}

body.dark-mode a:visited {
    color: #9a7aff;
}

body.dark-mode article {
    background-image: none;
    background-color: #2e2e2e;
    color: #e0e0e0;
    border-color: #555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode article h1,
body.dark-mode article h2,
body.dark-mode article h3,
body.dark-mode article h4,
body.dark-mode article h5,
body.dark-mode article h6 {
    color: #f0f0f0;
}

body.dark-mode article a {
    color: #4ea1ff;
}

body.dark-mode article a:hover {
    color: #1e90ff;
}

body.dark-mode article blockquote {
    border-left-color: #e77600;
    background-color: #3a3a3a;
    color: #ccc;
}

body.dark-mode article code,
body.dark-mode article pre {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    main {
        padding: 15px;
    }

    li {
        padding: 14px 0 14px 35px;
        background-size: 18px 23px;
    }

    button {
        width: 100%;
        margin: 5px 0;
    }

    input#searchbox {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    main {
        padding: 10px;
    }

    ul {
        padding-left: 10px;
    }

    #available {
        padding-left: 10px;
    }

    article {
        margin-left: auto;
    }

    button {
        font-size: clamp(0.8rem, 2vw, 0.9rem);
        padding: 10px;
        min-height: auto;
        margin: 5px 0;
        white-space: normal;
    }

    button.page-number {
        display: none;
    }

    #pagination-controls {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
    }

    #pagination-controls button {
        width: auto;
        padding: 8px 12px;
        min-height: auto;
        white-space: nowrap;
        margin: 0;
    }
}

/* HIGH DPI DISPLAYS */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    li {
        background-size: 15px 20px;
    }
}