/* ---------- Global Styles ---------- */
body {
    background-color: #fff6e5; /* base color */
    background-image: radial-gradient(circle, rgba(255, 140, 0, 0.05) 1px, transparent 1px),
                      radial-gradient(circle, rgba(255, 140, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10;
    color: #4d2c00;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* ---------- Links ---------- */
a {
    color: #ff8c00;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}
a:hover {
    color: #ffa733;
    text-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
}

/* ---------- Containers & Cards ---------- */
div.boardlist,
div.thread,
div.post.op,
div.post.reply,
fieldset,
.mainBox,
div.pages,
div.ban {
    background: #fff8e6;
    border-radius: 8px;
    padding: 10px;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: none; /* remove all hover transitions */
}

/* Remove hover effects completely */
div.boardlist:hover,
div.thread:hover,
div.post.reply:hover,
.mainBox:hover,
div.ban:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transform: none;
}

/* ---------- Boardlist Links ---------- */
div.boardlist a {
    color: #cf7900;
    font-weight: bold;
    transition: color 0.3s, text-shadow 0.3s;
}
div.boardlist a:hover {
    color: #ff9e33;
    text-shadow: 0 0 5px rgba(255,140,0,0.4);
}

/* ---------- Posts ---------- */
div.post.reply div.body a {
    color: #ff7b00;
    text-decoration: underline;
}

/* Highlighted posts */
div.post.reply.highlighted {
    background: #ffe0b3;
    border: none;
}

/* ---------- Headers ---------- */
header h1 {
    color: #804600;
    text-align: center;
    text-shadow: 1px 1px 0 #ffd699;
}
header .subtitle {
    color: #9e4c16;
    text-align: center;
    font-style: italic;
}

/* ---------- Forms & Inputs ---------- */
input, textarea, select {
    border: 1px solid #cf7900;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 14px;
    background: #fff8e6;
    color: #4d2c00;
    transition: border 0.3s, box-shadow 0.3s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #ff9e33;
    box-shadow: 0 0 6px rgba(255,140,0,0.5);
}

/* ---------- Buttons ---------- */
button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(to bottom, #ff9e33, #cf7900);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: linear-gradient(to bottom, #ffaa33, #ff7b00);
    box-shadow: 0 4px 10px rgba(255,140,0,0.4);
}

/* ---------- File Previews ---------- */
div.files {
    margin: 10px 0;
}
div.file {
    background: rgba(255, 152, 0, 0.05);
    border: none;
    border-radius: 6px;
    padding: 8px;
    transition: none; /* remove hover transition */
}
div.file:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* static */
    transform: none;
}
div.file img.post-image {
    border: none;
    border-radius: 6px;
    transition: none; /* remove hover scaling */
}
div.file img.post-image:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- Misc ---------- */
hr {
    border: none;
    border-top: 1px solid #d9b67f;
    margin: 20px 0;
}

/* ---------- Poster Name ---------- */
div.post .name {
    color: #ff8c00;
    font-weight: bold;
}

/* ---------- Fix news/ban and stats background and text ---------- */
div.ban,
div.mainBox {
    background-color: #fff8e6 !important;
    color: #4d2c00 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

div.ban h2, div.ban span.unimportant,
div.mainBox h2, div.mainBox ul, div.mainBox li {
    color: #4d2c00 !important;
    background: transparent !important;
}

/* ---------- Board links styling ---------- */
li.boardlinksurl a {
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}
li.boardlinksurl a:hover {
    color: #ffa733;
    text-shadow: 0 0 6px rgba(255, 140, 0, 0.6);
}

/* Change background of the post form table headers */
form[name="post"] th {
    background: #fff8e6;
    color: #4d2c00;
    padding: 6px 8px;
    text-align: left;
}

/* Top Catalog link below board title */
.subtitle > a[href$="catalog.html"] {
    font-size: 1.2em;
    font-family: inherit;
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}
.subtitle > a[href$="catalog.html"]:hover {
    color: #ffa733;
    text-shadow: 0 0 6px rgba(255,140,0,0.5);
}
.subtitle br {
    display: none;
}

/* ---------- Checkboxes ---------- */
input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #cf7900;
    border-radius: 4px;
    background: #fff8e6;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    position: relative;
}
input[type="checkbox"]:checked {
    background: #ff9e33;
    border-color: #ff8c00;
    box-shadow: 0 0 4px rgba(255,140,0,0.6);
}
input[type="checkbox"]:checked::after {
    content: "✔";
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------- Volume/Range Slider ---------- */
input[type="range"] {
    -webkit-appearance: none;
    width: 120px;
    height: 4px;
    background: #fff8e6;
    border-radius: 4px;
    border: 1px solid #cf7900;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
input[type="range"]:hover {
    box-shadow: 0 0 4px rgba(255,140,0,0.5);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #ff9e33;
    border: 1px solid #ff8c00;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255,140,0,0.6);
    transition: all 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
    background: #ffaa33;
    box-shadow: 0 0 5px rgba(255,140,0,0.8);
}
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ff9e33;
    border: 1px solid #ff8c00;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255,140,0,0.6);
    transition: all 0.2s;
}

/* ---------- Threads Hover ---------- */
div.thread:hover,
div.mix:hover {
    background-color: #fff8e6 !important;
    box-shadow: 0 4px 10px rgba(255,140,0,0.2) !important;
}

/* ---------- Boardlist (locked layout, appearance only changes) ---------- */
div.boardlist {
    position: static !important;    /* fixed in normal flow */
    display: block !important;
    margin: 0 !important;           /* no unwanted vertical gaps */
    padding: 0 !important;          /* consistent spacing */
    width: auto !important;
    height: auto !important;

    background: transparent !important; /* appearance changes allowed */
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Prevent hover from altering layout */
div.boardlist:hover {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}



/* ---------- Remove unwanted top/bottom gaps ---------- */

/* Remove body default margin (in case browsers add one) */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure boardlist sits flush without pushing content */
div.boardlist {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* Optional: if there's still a gap above the first thread */
div.thread:first-of-type {
    margin-top: 0 !important;
}

/* Optional: if the whole content area is offset downward */
html, body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}