/* PacketRadio.ca — overrides on top of Solid State main.css
   Palette: wavelength teal #0E3A47, brass #B58A3A, bone #F4EFE4, charcoal #1F2730 */

:root {
    --teal: #0E3A47;
    --teal-deep: #082833;
    --teal-mid: #1A5566;
    --brass: #B58A3A;
    --brass-bright: #D7A752;
    --bone: #F4EFE4;
    --bone-warm: #EAE3D2;
    --charcoal: #1F2730;
    --ink: #2A2F35;
    --rule: rgba(15, 58, 71, 0.18);
}

/* Body / typography
   Vollkorn is purpose-designed for on-screen body text and reads cleanly at 16-18px.
   Force weight 400 so Solid State's font-weight: 300 doesn't fake-thin the serif. */
html, body, input, select, textarea {
    font-family: "Vollkorn", Georgia, "Times New Roman", serif !important;
    color: var(--bone) !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, input, select, textarea {
    font-size: 13pt !important;
    line-height: 1.6 !important;
}
@media screen and (max-width: 1280px) {
    body, input, select, textarea { font-size: 12pt !important; }
}
@media screen and (max-width: 736px) {
    body, input, select, textarea { font-size: 11.5pt !important; }
}

/* Let Solid State's dark default body background remain. */

p, li, dd, blockquote { font-weight: 400 !important; color: var(--bone) !important; }
strong, b { font-weight: 600 !important; color: #fff !important; }

body.is-preload * { animation: none !important; transition: none !important; }

/* Editorial headings in Vollkorn so long titles stay readable.
   Chrome elements (.major section labels, .topic kickers, .special CTAs, buttons,
   site-name logo) use JetBrains Mono for the radio-bulletin texture. */
h1, h2, h4, h5, h6 {
    font-family: "Vollkorn", Georgia, serif !important;
    color: var(--bone) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
header h1 a, header h1 a span,
.major, .button, .special, .topic,
input[type="submit"], input[type="reset"], input[type="button"], button {
    font-family: "JetBrains Mono", "Menlo", "Consolas", monospace !important;
    color: var(--brass-bright) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
h3.major { color: var(--brass-bright) !important; }

/* Page-title h2 in the wrapper header is the LONG article title. */
#wrapper > header h2 {
    font-family: "Vollkorn", Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 2.2em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Footer "Get in touch" / column titles can stay monospace (.major class catches them). */

/* Links: brass-bright on the dark Solid State background. */
a {
    color: var(--brass-bright) !important;
    border-bottom-color: rgba(215, 167, 82, 0.55) !important;
}
a:hover { color: #fff !important; }

/* Header */
#header {
    background: var(--teal) !important;
    border-bottom: 4px double var(--brass);
}
#header h1 a {
    color: var(--bone) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
#header h1 a .dot {
    color: var(--brass-bright) !important;
}
#header.alt {
    background: transparent !important;
    border-bottom: none;
}
#header.alt h1 a { color: var(--bone) !important; }
#header nav a[href="#menu"] {
    color: var(--bone) !important;
    border-color: rgba(244, 239, 228, 0.4) !important;
}
#header nav a[href="#menu"]:hover {
    background: var(--brass) !important;
    color: var(--teal-deep) !important;
}

/* Menu drawer */
#menu {
    background: var(--charcoal) !important;
    border-left: 4px solid var(--brass);
}
#menu .inner h2,
#menu .inner ul.links a,
#menu .inner .close {
    color: var(--bone) !important;
}
#menu .inner ul.links a {
    border-top-color: rgba(244, 239, 228, 0.12) !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.95em;
    letter-spacing: 0.03em;
}
#menu .inner ul.links a:hover {
    color: var(--brass-bright) !important;
}

/* Banner — only on home */
#banner {
    background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 55%, var(--teal-mid) 100%) !important;
    background-image:
        repeating-linear-gradient(90deg, rgba(181, 138, 58, 0.08) 0 1px, transparent 1px 80px),
        linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 55%, var(--teal-mid) 100%) !important;
    color: var(--bone) !important;
    border-bottom: 6px double var(--brass);
}
#banner h2,
#banner .logo,
#banner p {
    color: var(--bone) !important;
}
#banner .logo {
    background: var(--brass) !important;
    color: var(--teal-deep) !important;
    border-color: var(--brass-bright) !important;
}
#banner .inner::before {
    content: "EST. 1995  /  SOPRA LEGACY";
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75em;
    letter-spacing: 0.4em;
    color: var(--brass-bright);
    margin-bottom: 1.5em;
    opacity: 0.85;
}

/* Section wrappers */
#wrapper > header {
    background: var(--teal-deep) !important;
    background-image:
        repeating-linear-gradient(0deg, rgba(181, 138, 58, 0.06) 0 1px, transparent 1px 6px) !important;
    color: var(--bone) !important;
    padding: 4em 2em 3.5em !important;
    border-bottom: 1px solid var(--brass);
}
#wrapper > header h2,
#wrapper > header p {
    color: var(--bone) !important;
}
#wrapper > header .topic {
    font-family: "JetBrains Mono", monospace !important;
    color: var(--brass-bright) !important;
    font-size: 0.78em;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}

/* Keep Solid State's dark wrapper background. Just make the text light enough to read on it. */
.wrapper, #wrapper .inner,
.wrapper p, .wrapper li, .wrapper dd, .wrapper blockquote {
    color: var(--bone) !important;
}
.wrapper.spotlight.style2 {
    background: var(--bone-warm) !important;
}
.wrapper.spotlight.style3 {
    background: var(--charcoal) !important;
    color: var(--bone) !important;
}
.wrapper.spotlight.style3 h2,
.wrapper.spotlight.style3 h3,
.wrapper.spotlight.style3 p {
    color: var(--bone) !important;
}
.wrapper.spotlight.style3 .special {
    color: var(--brass-bright) !important;
    border-bottom-color: var(--brass) !important;
}

/* Article body — light text on Solid State's dark wrapper background. */
.article p {
    line-height: 1.7;
    color: var(--bone) !important;
}
.article h3.major,
.article h3 {
    margin-top: 2em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid rgba(215, 167, 82, 0.25);
    color: var(--brass-bright) !important;
    font-size: 1.45em !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}
.article h3.major::before {
    content: "// ";
    color: var(--brass);
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
}
.article a {
    color: var(--brass-bright) !important;
    border-bottom: 1px solid rgba(215, 167, 82, 0.6);
    text-decoration: none;
}
.article a:hover {
    color: #fff !important;
    background: rgba(215, 167, 82, 0.12);
}
.article blockquote {
    border-left: 4px solid var(--brass) !important;
    background: rgba(215, 167, 82, 0.08);
    color: var(--bone) !important;
    padding: 1.2em 1.5em;
    font-style: italic;
}
.article ul, .article ol { line-height: 1.7; color: var(--bone) !important; }

/* Code / pre — give the BBS feel */
code, pre, .article pre code {
    font-family: "JetBrains Mono", monospace !important;
    background: var(--charcoal) !important;
    color: var(--bone) !important;
    border-radius: 2px;
    border: 1px solid var(--teal-deep);
}
pre {
    padding: 1em 1.2em;
    overflow-x: auto;
    line-height: 1.55;
    font-size: 0.92em;
}
.article p code {
    padding: 1px 6px;
    font-size: 0.92em;
}

/* Tables (used for the node archive) */
table {
    background: #fff;
    border: 1px solid var(--rule);
    width: 100%;
    margin: 1.5em 0;
}
table thead {
    background: var(--teal) !important;
    color: var(--bone) !important;
}
table thead th {
    color: var(--bone) !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.82em;
    letter-spacing: 0.06em;
    padding: 0.75em 1em !important;
    border-color: var(--teal-deep) !important;
}
table tbody td {
    padding: 0.65em 1em !important;
    border-color: var(--rule) !important;
}
table tbody tr:nth-child(even) td { background: var(--bone-warm); }
table tbody td code,
table .freq {
    font-family: "JetBrains Mono", monospace;
    color: var(--teal-deep);
    background: transparent !important;
    border: none;
    padding: 0;
}

/* Buttons / specials */
.button, input[type="submit"], input[type="reset"], input[type="button"], button {
    background: var(--teal) !important;
    color: var(--bone) !important;
    border: none !important;
    box-shadow: inset 0 -3px 0 var(--brass) !important;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}
.button:hover, button:hover {
    background: var(--brass) !important;
    color: var(--teal-deep) !important;
    box-shadow: inset 0 -3px 0 var(--teal-deep) !important;
}
.special {
    color: var(--brass) !important;
    border-bottom: 1px solid var(--brass) !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.78em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.special:hover {
    color: var(--teal) !important;
    border-bottom-color: var(--teal) !important;
}

/* Spotlight images */
.spotlight .image img {
    border-radius: 0;
    border: 1px solid var(--rule);
}

/* Features grid */
.features article {
    background: #fff !important;
    border: 1px solid var(--rule) !important;
    padding-bottom: 1em;
    transition: transform .15s, box-shadow .15s;
}
.features article:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 58, 71, 0.08);
}
.features article h3.major {
    padding: 0 1em;
    color: var(--teal-deep) !important;
}
.features article p { padding: 0 1em; }
.features article .special { margin-left: 1em; }

/* Footer */
#footer {
    background: var(--charcoal) !important;
    background-image:
        repeating-linear-gradient(90deg, rgba(181, 138, 58, 0.05) 0 1px, transparent 1px 4px) !important;
    color: var(--bone) !important;
    border-top: 4px double var(--brass);
}
#footer h2, #footer h2.major,
#footer p, #footer ul.contact li {
    color: var(--bone) !important;
}
#footer ul.contact li a { color: var(--brass-bright) !important; }
#footer ul.copyright { color: rgba(244, 239, 228, 0.55) !important; }

#footer ul.link-cols {
    list-style: none;
    padding: 0;
    margin: 2em 0 1.5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5em;
}
#footer ul.link-cols li {
    padding: 0;
    border: none;
}
#footer ul.link-cols strong {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78em;
    color: var(--brass-bright);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.6em;
    padding-bottom: 0.4em;
    border-bottom: 1px dotted rgba(181, 138, 58, 0.4);
}
#footer ul.link-cols a {
    display: block;
    color: var(--bone) !important;
    border: none;
    font-size: 0.92em;
    padding: 0.2em 0;
    line-height: 1.5;
    opacity: 0.85;
}
#footer ul.link-cols a:hover {
    color: var(--brass-bright) !important;
    opacity: 1;
}

/* Form fields on contact */
#footer form { display: none; } /* hide template's footer form — we have a dedicated contact page */

/* Article hero image */
.article .hero {
    width: 100%;
    height: auto;
    margin: 0 0 1.8em;
    border: 1px solid var(--rule);
}

/* Reading metadata at top of article */
.article .meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78em;
    color: var(--teal-mid);
    letter-spacing: 0.06em;
    margin-bottom: 1.4em;
    padding-bottom: 0.6em;
    border-bottom: 1px dotted var(--rule);
}

/* Inline definition list for technical terms */
.article dl.terms {
    margin: 1.5em 0;
    padding: 1em 1.4em;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--brass-bright);
}
.article dl.terms dt {
    font-family: "JetBrains Mono", monospace;
    color: var(--brass-bright) !important;
    font-weight: 700;
    margin-top: 0.6em;
}
.article dl.terms dt:first-child { margin-top: 0; }
.article dl.terms dd { margin: 0.3em 0 0.6em 0; color: var(--bone) !important; }

/* Make the home spotlight more publication-like */
body.home #banner h2 {
    font-size: 2.6em;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
}

/* Resources page formatting */
.resource-list {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}
.resource-list li {
    padding: 0.9em 1.2em;
    background: #fff;
    border: 1px solid var(--rule);
    margin-bottom: 0.5em;
    border-left: 3px solid var(--brass);
}
.resource-list strong {
    font-family: "JetBrains Mono", monospace;
    color: var(--teal-deep);
    display: block;
    margin-bottom: 0.2em;
}