/*
Theme Name: BBSTerm
Theme URI: https://github.com/aipokalyptik/BBSTerm
Author: BBSTerm
Description: A keyboard-friendly WordPress theme modeled after the BBSTerm Digital Phone Book and its BBSTerm Blue palette.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bbsterm
Tags: blog, one-column, custom-menu, featured-images, threaded-comments, accessibility-ready
*/

@font-face {
    font-family: "BBSTerm IBM BIOS";
    src: url("assets/fonts/WebPlus_IBM_BIOS.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BBSTerm IBM CGA";
    src: url("assets/fonts/WebPlus_IBM_CGA.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BBSTerm IBM CGA Thin";
    src: url("assets/fonts/WebPlus_IBM_CGAthin.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BBSTerm IBM MDA";
    src: url("assets/fonts/WebPlus_IBM_MDA.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BBSTerm IBM EGA 9x14";
    src: url("assets/fonts/WebPlus_IBM_EGA_9x14.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BBSTerm IBM VGA 9x16";
    src: url("assets/fonts/WebPlus_IBM_VGA_9x16.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bbsterm-canvas: #010e22;
    --bbsterm-dimmed-canvas: #01060e;
    --bbsterm-text: #e8e6db;
    --bbsterm-emphasis: #00ebf2;
    --bbsterm-inactive: #576673;
    --bbsterm-rule: #00c7d1;
    --bbsterm-selection: #14abc2;
    --bbsterm-dialog: #00e0e8;
    --bbsterm-field: #000509;
    --bbsterm-hotkey: #00c9de;
    --bbsterm-hotkey-text: #001429;
    --bbsterm-focus: #00c2d9;
    --bbsterm-white: #ffffff;
    --bbsterm-cell: 0.62rem;
    --bbsterm-font-ibm-bios: "BBSTerm IBM BIOS", "Courier New", monospace;
    --bbsterm-font-ibm-cga: "BBSTerm IBM CGA", "Courier New", monospace;
    --bbsterm-font-ibm-cga-thin: "BBSTerm IBM CGA Thin", "Courier New", monospace;
    --bbsterm-font-ibm-mda: "BBSTerm IBM MDA", "Courier New", monospace;
    --bbsterm-font-ibm-ega-9x14: "BBSTerm IBM EGA 9x14", "Courier New", monospace;
    --bbsterm-font-ibm-vga-9x16: "BBSTerm IBM VGA 9x16", "Courier New", monospace;
    --bbsterm-font: var(--bbsterm-font-ibm-cga);
}

.bbsterm-font-ibm-bios {
    font-family: var(--bbsterm-font-ibm-bios);
}

.bbsterm-font-ibm-cga {
    font-family: var(--bbsterm-font-ibm-cga);
}

.bbsterm-font-ibm-cga-thin {
    font-family: var(--bbsterm-font-ibm-cga-thin);
}

.bbsterm-font-ibm-mda {
    font-family: var(--bbsterm-font-ibm-mda);
}

.bbsterm-font-ibm-ega-9x14 {
    font-family: var(--bbsterm-font-ibm-ega-9x14);
}

.bbsterm-font-ibm-vga-9x16 {
    font-family: var(--bbsterm-font-ibm-vga-9x16);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    background: #000509;
}

body {
    min-width: 20rem;
    margin: 0;
    color: var(--bbsterm-text);
    background:
        radial-gradient(circle at 50% 10%, rgba(0, 235, 242, 0.08), transparent 38rem),
        var(--bbsterm-dimmed-canvas);
    font-family: var(--bbsterm-font);
    font-size: clamp(0.9rem, 0.82rem + 0.2vw, 1.05rem);
    line-height: 1.55;
}

body::before {
    position: fixed;
    z-index: 10;
    inset: 0;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
    mix-blend-mode: multiply;
}

a {
    color: var(--bbsterm-emphasis);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--bbsterm-white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--bbsterm-emphasis);
    outline-offset: 3px;
}

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

.screen-reader-text {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.screen-reader-text:focus {
    z-index: 100000;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    padding: 0.65rem 0.9rem;
    clip: auto;
    color: var(--bbsterm-hotkey-text);
    background: var(--bbsterm-hotkey);
}

.bbsterm-shell {
    width: min(92rem, calc(100% - 2rem));
    min-height: calc(100vh - 2rem);
    margin: 1rem auto;
    padding: clamp(1rem, 2.8vw, 2.5rem);
    border: 1px solid rgba(0, 224, 232, 0.55);
    border-radius: 0.35rem;
    background:
        linear-gradient(rgba(1, 14, 34, 0.94), rgba(1, 14, 34, 0.98)),
        var(--bbsterm-canvas);
    box-shadow:
        0 0 0 0.35rem #000509,
        0 0 2.5rem rgba(0, 224, 232, 0.16),
        inset 0 0 3rem rgba(0, 0, 0, 0.28);
}

.bbsterm-masthead,
.bbsterm-status,
.bbsterm-directory-head,
.bbsterm-entry,
.bbsterm-command-line {
    display: grid;
    align-items: baseline;
    gap: 1rem;
}

.bbsterm-masthead {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bbsterm-site-title,
.bbsterm-screen-title {
    margin: 0;
    color: var(--bbsterm-emphasis);
    font: inherit;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.bbsterm-site-title a {
    color: inherit;
    text-decoration: none;
}

.bbsterm-tagline,
.bbsterm-count,
.bbsterm-meta,
.bbsterm-empty-copy {
    color: var(--bbsterm-inactive);
}

.bbsterm-tagline {
    margin: 0.25rem 0 0;
}

.bbsterm-rule {
    height: 1px;
    margin: 0.65rem 0 1.15rem;
    border: 0;
    background: var(--bbsterm-rule);
    box-shadow: 0 0 0.4rem rgba(0, 199, 209, 0.3);
}

.bbsterm-nav {
    margin-bottom: 1.4rem;
}

.bbsterm-nav ul,
.bbsterm-footer-menu,
.bbsterm-post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbsterm-nav a,
.bbsterm-command,
.bbsterm-post-actions a,
.page-numbers,
button,
input[type="submit"] {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--bbsterm-text);
    text-decoration: none;
}

.bbsterm-nav a::first-letter,
.bbsterm-command-key {
    padding: 0 0.28rem;
    color: var(--bbsterm-hotkey-text);
    background: var(--bbsterm-hotkey);
    font-weight: 700;
}

.bbsterm-status {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.5rem;
}

.bbsterm-directory {
    min-width: 0;
}

.bbsterm-directory-head,
.bbsterm-entry {
    grid-template-columns: 3ch minmax(12rem, 1fr) minmax(12rem, 1.2fr) 18ch;
}

.bbsterm-directory-head {
    padding: 0 0.65rem 0.35rem;
    color: var(--bbsterm-text);
}

.bbsterm-entry-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bbsterm-rule);
    border-bottom: 1px solid var(--bbsterm-rule);
    list-style: none;
}

.bbsterm-entry {
    position: relative;
    padding: 0.48rem 0.65rem;
    border-bottom: 1px solid rgba(0, 199, 209, 0.1);
}

.bbsterm-entry:last-child {
    border-bottom: 0;
}

.bbsterm-entry:hover,
.bbsterm-entry:focus-within {
    color: var(--bbsterm-white);
    background: var(--bbsterm-selection);
}

.bbsterm-entry:hover *,
.bbsterm-entry:focus-within * {
    color: var(--bbsterm-white);
}

.bbsterm-entry-title {
    overflow: hidden;
    color: var(--bbsterm-text);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbsterm-entry-title::after {
    position: absolute;
    inset: 0;
    content: "";
}

.bbsterm-entry-section,
.bbsterm-entry-date {
    overflow: hidden;
    color: var(--bbsterm-inactive);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbsterm-detail-line {
    min-height: 1.6em;
    margin: 0.75rem 0 0;
    overflow: hidden;
    color: var(--bbsterm-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbsterm-empty {
    padding: clamp(4rem, 13vw, 9rem) 1rem;
    text-align: center;
}

.bbsterm-empty h2 {
    color: var(--bbsterm-emphasis);
    font: inherit;
    font-weight: 700;
}

.bbsterm-command-line {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--bbsterm-rule);
}

.bbsterm-command-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.bbsterm-panel {
    margin-top: 0.35rem;
    padding: clamp(1rem, 3vw, 2.2rem);
    border: 1px solid var(--bbsterm-dialog);
    background: var(--bbsterm-dimmed-canvas);
    box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, 0.35);
}

.bbsterm-panel-header {
    margin-bottom: 1.5rem;
}

.bbsterm-panel h1,
.bbsterm-panel h2,
.bbsterm-panel h3,
.bbsterm-panel h4,
.bbsterm-panel h5,
.bbsterm-panel h6 {
    color: var(--bbsterm-emphasis);
    font-family: inherit;
    line-height: 1.25;
}

.bbsterm-panel h1 {
    margin-top: 0;
    font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.25rem);
}

.bbsterm-content {
    overflow-wrap: anywhere;
}

.bbsterm-content > :first-child {
    margin-top: 0;
}

.bbsterm-content > :last-child {
    margin-bottom: 0;
}

.bbsterm-content blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 0.3rem solid var(--bbsterm-rule);
    color: var(--bbsterm-text);
}

.bbsterm-content code,
.bbsterm-content pre {
    color: var(--bbsterm-emphasis);
    background: var(--bbsterm-field);
}

.bbsterm-content code {
    padding: 0.12rem 0.3rem;
}

.bbsterm-content pre {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--bbsterm-inactive);
}

.bbsterm-content table {
    width: 100%;
    border-collapse: collapse;
}

.bbsterm-content th,
.bbsterm-content td {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--bbsterm-rule);
    text-align: left;
}

.bbsterm-content figure {
    margin-right: 0;
    margin-left: 0;
}

.bbsterm-featured-image {
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--bbsterm-rule);
    filter: saturate(0.85) contrast(1.05);
}

.bbsterm-pagination .nav-links,
.comment-navigation .nav-links,
.posts-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.page-numbers,
.nav-previous a,
.nav-next a {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--bbsterm-inactive);
}

.page-numbers.current,
.page-numbers:hover,
.nav-previous a:hover,
.nav-next a:hover {
    color: var(--bbsterm-hotkey-text);
    background: var(--bbsterm-hotkey);
    border-color: var(--bbsterm-hotkey);
}

label {
    color: var(--bbsterm-text);
}

input,
textarea,
select,
button {
    max-width: 100%;
    border: 1px solid var(--bbsterm-dialog);
    border-radius: 0;
    color: var(--bbsterm-text);
    background: var(--bbsterm-field);
    font: inherit;
}

input,
textarea,
select {
    padding: 0.55rem 0.65rem;
}

button,
input[type="submit"] {
    padding: 0.5rem 0.75rem;
    color: var(--bbsterm-hotkey-text);
    background: var(--bbsterm-hotkey);
    cursor: pointer;
    font-weight: 700;
}

.search-form {
    display: flex;
    gap: 0.6rem;
}

.search-form label {
    flex: 1;
}

.search-field {
    width: 100%;
}

.bbsterm-comments {
    margin-top: 1.5rem;
}

.comment-list {
    padding-left: 1.5rem;
}

.comment-body {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--bbsterm-inactive);
    background: var(--bbsterm-field);
}

.comment-meta,
.comment-metadata {
    color: var(--bbsterm-inactive);
}

.bbsterm-footer {
    margin-top: 1.5rem;
    color: var(--bbsterm-inactive);
}

.bbsterm-footer a {
    color: var(--bbsterm-text);
}

.alignleft {
    float: left;
    margin: 0 1rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0 0 1rem 1rem;
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 52rem) {
    .bbsterm-shell {
        width: min(100% - 1rem, 52rem);
        min-height: calc(100vh - 1rem);
        margin: 0.5rem auto;
        padding: 1rem;
    }

    .bbsterm-directory-head {
        display: none;
    }

    .bbsterm-entry {
        grid-template-columns: 3ch minmax(0, 1fr) auto;
        gap: 0.35rem 0.75rem;
        padding: 0.65rem 0.4rem;
    }

    .bbsterm-entry-section {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .bbsterm-entry-date {
        grid-column: 3;
        grid-row: 1;
    }

    .bbsterm-status,
    .bbsterm-command-line {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 34rem) {
    .bbsterm-masthead {
        grid-template-columns: 1fr;
    }

    .bbsterm-count {
        display: none;
    }

    .bbsterm-entry-date {
        display: none;
    }

    .bbsterm-entry {
        grid-template-columns: 3ch minmax(0, 1fr);
    }

    .bbsterm-entry-section {
        grid-column: 2;
    }

    .bbsterm-panel {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body,
    .bbsterm-shell,
    .bbsterm-panel {
        color: #000000;
        background: #ffffff;
        box-shadow: none;
    }

    body::before,
    .bbsterm-nav,
    .bbsterm-command-line {
        display: none;
    }

    a {
        color: #000000;
    }
}