/* miranda.css - Styles for the Miranda section of huxley.net
   Replaces the inline <style> blocks duplicated across all miranda/ pages.
   Preserves the dark gray + red/maroon color scheme and 2-column table layout.
*/

body {
    margin: 0;
    padding: 0;
    background-color: #333333;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

iframe, textarea {
    max-width: 100%;
}

/* ---- Link styles ---- */
a:link { color: #660000; text-decoration: none; }
a:visited { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; color: #000066; }
a:active { text-decoration: none; }

/* ---- Header ---- */
.style2,
.style10 {
    font-size: xx-large;
    color: #999999;
    font-family: "Courier New", Courier, monospace;
}

.style3 {
    font-size: large;
    font-weight: bold;
    color: #660000;
}

.style11 {
    font-size: x-large;
}

/* ---- Navigation ---- */
.style4 {
    font-size: large;
    color: #000000;
    font-family: "Courier New", Courier, monospace;
}

.style7 { color: #000000; }

.style8 {
    font-size: large;
    color: #000000;
}

.style9 { font-size: x-large; }

.style13 { font-family: "Courier New", Courier, monospace; }

.style14 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.style15 { color: #999999; }

/* ---- Footer links (replaces <font color="#999999"> stripped from inside <a> tags) ---- */
.style12 a:link,
.style12 a:visited {
    color: #999999;
}

/* ---- Cell padding (replaces cellpadding="10" stripped during HTML5 conversion) ---- */
td {
    padding: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    /* Override inline width: 762px on table */
    table {
        width: 100% !important;
        height: auto !important;
    }

    /* Stack 2-column layout vertically */
    table,
    table tbody,
    table tr,
    table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Header: let it shrink */
    td[colspan="2"] {
        height: auto !important;
    }

    /* Nav sidebar: wrap links horizontally when stacked */
    td[style*="background-color: #666666"] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding: 8px;
    }

    td[style*="background-color: #666666"] p {
        margin: 2px 6px;
    }

    /* Prevent content overflow from long text or nested tables */
    td {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Reduce header font sizes */
    .style2, .style10 {
        font-size: x-large;
    }

    .style9 {
        font-size: large;
    }
}