/* ============================================================
   GLOBAL BASE STYLES
   ============================================================ */

body {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12pt;
    margin: 0.5in;
    max-width: 100%;
}

p {
    margin-top: 0.4em;
    line-height: 1.5;
}

a { color: #467886; }
a:visited { color: #96607D; }

hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 2em 0;
}

/* ============================================================
   HEADINGS
   ============================================================ */

h1 {
    font-family: "Aptos Display", Calibri, sans-serif;
    font-size: 20pt;
    color: #0F4761;
    font-weight: normal;
}

h2 {
    font-family: "Aptos Display", Calibri, sans-serif;
    font-size: 16pt;
    color: #0F4761;
    font-weight: normal;
    margin-top: 1.4em;
    margin-bottom: 0.3em;
}

h3 {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 10pt;
    color: #0F4761;
    margin-top: 1em;
    margin-bottom: 0.2em;
}

/* ============================================================
   SPECIAL TITLES
   ============================================================ */

.big-title {
    font-size: 2rem;
    font-weight: bold;
    color: #0F4761;
    text-align: center;
    margin-bottom: 0.5em;
}

/* ============================================================
   SUBTITLE + BADGES + BACK LINKS
   ============================================================ */

.subtitle {
    font-size: 11pt;
    color: #467886;
    margin-top: 0;
    margin-bottom: 1.2em;
}

.badge {
    display: inline-block;
    background: #0F4761;
    color: white;
    font-size: 8pt;
    padding: 2px 8px;
    margin-right: 6px;
    margin-bottom: 4px;
}

.back-link {
    font-size: 9pt;
    margin-bottom: 1.5em;
    display: block;
}

/* ============================================================
   PRE / CODE BLOCKS
   ============================================================ */

/* KOContour data block */
pre.data {
    background: #f0f6f9;
    border: 1px solid #ccc;
    color: #1e1e1e;
    font-family: "Cascadia Code", Consolas, Courier, monospace;
    font-size: 9.5pt;
    padding: 0.8em 1em;
    line-height: 1.5;
    overflow-x: auto;
}

/* Console blocks */
pre.console {
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: Courier, monospace;
    font-size: 9.5pt;
    padding: 0.8em 1em;
    line-height: 1.5;
    overflow-x: auto;
}

pre.console .prompt { color: #569cd6; }
pre.console .cmd    { color: #9cdcfe; }
pre.console .label  { color: #4ec9b0; }
pre.console .value  { color: #ce9178; }
pre.console .ok     { color: #6a9955; }
pre.console .dg     { color: #808080; }
pre.console .dr     { color: #f44747; }

/* BBC BASIC blocks */
pre.bbc, pre.bbc7 {
    background: black;
    color: limegreen;
    font-family: Courier, monospace;
    padding: 0.5em;
    line-height: normal;
    overflow-x: auto;
}

pre.bbc  { font-size: 13.5pt; }
pre.bbc7 { font-size: 12pt; }

/* Syntax colours */
.kw  { color: aqua; }
.str { color: fuchsia; }
.num { color: limegreen; }
.wh  { color: white; }
.yl  { color: yellow; }
.dg  { color: #808080; }
.dr  { color: darkred; }
.blue { color: #0B76A0; }

/* CLI block (BeebRFSMakerCL) */
.cli-block {
    background: #f4f4f4;
    border-left: 3px solid #467886;
    font-family: Courier, monospace;
    font-size: 12pt;
    padding: 0.5em 0.8em;
    margin: 0.5em 0;
    white-space: pre;
    overflow-x: auto;
}

/* Indented code (BBC Micro Utilities) */
.indent {
    margin-left: 0.5in;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 10pt;
    line-height: 1.6;
}

/* Note block (BeebRFSMakerCL) */
.note {
    background: #f8f4e8;
    border-left: 3px solid #c8a84b;
    padding: 0.5em 0.8em;
    margin: 0.8em 0;
    font-size: 9.5pt;
}

/* ============================================================
   IMAGES / SCREENSHOTS
   ============================================================ */

.screenshot {
    margin: 1em 0;
    border: 1px solid #ccc;
    max-width: 95%;
    display: block;
}

.screenshot-caption {
    font-size: 9pt;
    color: #666;
    margin-top: 0.2em;
    margin-bottom: 1em;
}

/* Screenshot % widths */
body.index-page .screenshot,
body.beeb-page .screenshot {
    max-width: 95%;
}

/* ============================================================
   LAYOUT COMPONENTS
   ============================================================ */

.download-box {
    border: 1px solid #0F4761;
    padding: 0.8em 1em;
    margin: 1.2em 0;
    background: #f0f6f9;
}

.download-box h3 {
    margin-top: 0;
    color: #0F4761;
    font-size: 11pt;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin: 0.8em 0;
}

.feature-item {
    border-left: 3px solid #0F4761;
    padding-left: 0.7em;
}

.software-entry {
    border-left: 3px solid #0F4761;
    padding-left: 0.8em;
    margin: 1em 0 1.5em 0;
}

/* ============================================================
   Dynamically adjust to smaller resolution devices
   ============================================================ */

@media (max-width: 600px) {

    body {
        font-size: 13pt;
        margin: 0.4in;
    }

    h1 { font-size: 18pt; }
    h2 { font-size: 13pt; }

    /* Code blocks */
    pre.bbc,
    pre.bbc7,
    pre.console,
    pre.data,
    .cli-block {
        font-size: 10pt;
        white-space: pre;
        /* preserve formatting */
        overflow-x: auto;
        /* restore horizontal scroll */
    }

    pre {
        -webkit-overflow-scrolling: touch;
    }

    /* Feature grid collapses to one column */
    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Screenshots scale properly */
    .screenshot {
        max-width: 100%;
        height: auto;
    }

    /* Floated images behave better */
    img[style*="float"] {
        float: none !important;
        display: block;
        margin: 1em auto;
        max-width: 90%;
    }
}

/* ============================================================
   FLOATING THEME TOGGLE ICON
   ============================================================ */

#theme-toggle-icon {
    position: fixed;
    top: 12px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
    background: #f0f6f9;
    border: 1px solid #0F4761;
    border-radius: 6px;
    padding: 6px 8px;
    z-index: 9999;
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    #theme-toggle-icon {
        background: #161b22;
        border-color: #30363d;
        color: #e6edf3;
    }
}

/* ============================================================
   EXPLICIT THEME-LIGHT OVERRIDES
   Beats OS dark mode when Light button is clicked.
   ============================================================ */

body.theme-light {
    color-scheme: light;
    background: #ffffff;
    color: #1e1e1e;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light .big-title         { color: #0F4761; }

body.theme-light a                  { color: #467886; }
body.theme-light a:visited          { color: #96607D; }
body.theme-light hr                 { border-top: 1px solid #ccc; }
body.theme-light .badge             { background: #0F4761; color: white; }
body.theme-light .subtitle          { color: #467886; }

body.theme-light .download-box,
body.theme-light .note              { background: #f0f6f9; border-color: #0F4761; color: #1e1e1e; }
body.theme-light .note              { background: #f8f4e8; border-color: #c8a84b; }

body.theme-light .feature-item      { border-left-color: #0F4761; }
body.theme-light .software-entry    { border-left-color: #0F4761; }
body.theme-light .screenshot        { border-color: #ccc; }

body.theme-light pre.data           { background: #f0f6f9; border-color: #ccc; color: #1e1e1e; }
body.theme-light pre.console        { background: #1e1e1e; color: #d4d4d4; }
body.theme-light pre.bbc,
body.theme-light pre.bbc7           { background: #000; color: limegreen; }

body.theme-light .cli-block         { background: #f4f4f4; border-left-color: #467886; color: #1e1e1e; }
body.theme-light .indent            { color: #1e1e1e; }

body.theme-light .kw                { color: aqua; }
body.theme-light .str               { color: fuchsia; }
body.theme-light .num               { color: limegreen; }
body.theme-light .wh                { color: white; }
body.theme-light .yl                { color: yellow; }
body.theme-light .dg                { color: #808080; }
body.theme-light .dr                { color: darkred; }
body.theme-light .blue              { color: #0B76A0; }

/* ============================================================
   EXPLICIT THEME-DARK OVERRIDES
   Beats OS light mode when Dark button is clicked.
   ============================================================ */

body.theme-dark {
    color-scheme: dark;
    background: #0d1117;
    color: #e6edf3;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark .big-title          { color: #9cc9ff; }

body.theme-dark a                   { color: #79c0ff; }
body.theme-dark a:visited           { color: #c58cff; }
body.theme-dark hr                  { border-top: 1px solid #30363d; }
body.theme-dark .badge              { background: #1f6feb; color: white; }
body.theme-dark .subtitle           { color: #9cc9ff; }

body.theme-dark .download-box,
body.theme-dark .note               { background: #161b22; border-color: #30363d; color: #e6edf3; }

body.theme-dark .feature-item       { border-left-color: #1f6feb; }
body.theme-dark .software-entry     { border-left-color: #1f6feb; }
body.theme-dark .screenshot         { border-color: #30363d; }

body.theme-dark pre.data            { background: #161b22; border-color: #30363d; color: #e6edf3; }
body.theme-dark pre.console         { background: #161b22; color: #e6edf3; }
body.theme-dark pre.bbc,
body.theme-dark pre.bbc7            { background: #000; color: #00ff66; }

body.theme-dark .cli-block          { background: #161b22; border-left-color: #1f6feb; color: #e6edf3; }
body.theme-dark .indent             { color: #e6edf3; }

body.theme-dark .kw                 { color: #00eaff; }
body.theme-dark .str                { color: #ff79c6; }
body.theme-dark .num                { color: #7ee787; }
body.theme-dark .wh                 { color: #ffffff; }
body.theme-dark .yl                 { color: #f1fa8c; }
body.theme-dark .dg                 { color: #8b949e; }
body.theme-dark .dr                 { color: #ff6e6e; }
body.theme-dark .blue               { color: #79c0ff; }

body.theme-dark #theme-toggle button {
    background: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

/* ============================================================
   DARK MODE (automatic via OS/browser preference)
   Only applies when no manual theme class is set on body.
   ============================================================ */

@media (prefers-color-scheme: dark) {

    body:not(.theme-light):not(.theme-dark) {
        background: #0d1117;
        color: #e6edf3;
    }

    body:not(.theme-light):not(.theme-dark) h1,
    body:not(.theme-light):not(.theme-dark) h2,
    body:not(.theme-light):not(.theme-dark) h3,
    body:not(.theme-light):not(.theme-dark) .big-title { color: #9cc9ff; }

    body:not(.theme-light):not(.theme-dark) a          { color: #79c0ff; }
    body:not(.theme-light):not(.theme-dark) a:visited  { color: #c58cff; }
    body:not(.theme-light):not(.theme-dark) hr         { border-top: 1px solid #30363d; }
    body:not(.theme-light):not(.theme-dark) .badge     { background: #1f6feb; color: white; }
    body:not(.theme-light):not(.theme-dark) .subtitle  { color: #9cc9ff; }

    body:not(.theme-light):not(.theme-dark) .download-box,
    body:not(.theme-light):not(.theme-dark) .note      { background: #161b22; border-color: #30363d; color: #e6edf3; }

    body:not(.theme-light):not(.theme-dark) .feature-item   { border-left-color: #1f6feb; }
    body:not(.theme-light):not(.theme-dark) .software-entry { border-left-color: #1f6feb; }
    body:not(.theme-light):not(.theme-dark) .screenshot     { border-color: #30363d; }

    body:not(.theme-light):not(.theme-dark) pre.data   { background: #161b22; border-color: #30363d; color: #e6edf3; }
    body:not(.theme-light):not(.theme-dark) pre.console { background: #161b22; color: #e6edf3; }
    body:not(.theme-light):not(.theme-dark) pre.bbc,
    body:not(.theme-light):not(.theme-dark) pre.bbc7   { background: #000; color: #00ff66; }

    body:not(.theme-light):not(.theme-dark) .cli-block { background: #161b22; border-left-color: #1f6feb; color: #e6edf3; }
    body:not(.theme-light):not(.theme-dark) .indent    { color: #e6edf3; }

    body:not(.theme-light):not(.theme-dark) .kw   { color: #00eaff; }
    body:not(.theme-light):not(.theme-dark) .str  { color: #ff79c6; }
    body:not(.theme-light):not(.theme-dark) .num  { color: #7ee787; }
    body:not(.theme-light):not(.theme-dark) .wh   { color: #ffffff; }
    body:not(.theme-light):not(.theme-dark) .yl   { color: #f1fa8c; }
    body:not(.theme-light):not(.theme-dark) .dg   { color: #8b949e; }
    body:not(.theme-light):not(.theme-dark) .dr   { color: #ff6e6e; }
    body:not(.theme-light):not(.theme-dark) .blue { color: #79c0ff; }
}