:root {
    --bg: #0b1220;
    --panel: #121b2e;
    --panel-2: #172340;
    --line: #26345a;
    --text: #e6ecf8;
    --muted: #9fb0d0;
    --amber: #ffb000;
    --green: #39e58c;
    --blue: #4da3ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Roboto, "Segoe UI", system-ui, sans-serif;
    line-height: 1.6;
}
a { color: var(--blue); }
a:hover { color: var(--amber); }
.mono, h1, h2, h3, .brand, .freq { font-family: Orbitron, "Consolas", monospace; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Image heroes on content pages */
.page-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 260px; display: flex; align-items: center;
    padding: 72px 0 56px; text-align: center;
}
.page-hero picture, .page-hero::before {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.page-hero picture { z-index: -2; }
.page-hero picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero::before {
    content: ""; z-index: -1;
    background: linear-gradient(180deg, rgba(11,18,32,.55), var(--bg));
}
.page-hero .wrap { width: 100%; }
.page-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 8px 0; }
.page-hero p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 1.1rem; text-align: center; }

/* Header */
.topbar {
    position: sticky; top: 0; z-index: 10;
    background: rgba(11, 18, 32, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; flex-wrap: wrap; }
.brand { color: var(--amber); font-size: 1.4rem; text-decoration: none; letter-spacing: 2px; }
.topnav a { color: var(--text); text-decoration: none; margin-left: 18px; font-size: .95rem; }
.topnav a:hover { color: var(--amber); }

.site-footer { border-top: 1px solid var(--line); padding: 24px 0; text-align: center; color: var(--muted); font-size: .85rem; }
.site-footer .vy { color: var(--green); font-family: Orbitron, monospace; }
.site-footer .footer-login { display: inline-block; border: 1px solid var(--amber); border-radius: 4px; padding: 4px 10px; color: var(--amber); text-decoration: none; }
.site-footer .footer-login:hover, .site-footer .footer-login:focus-visible { background: var(--amber); color: var(--bg); }


/* Overrides so legacy Materialize content pages match the dark theme */
body { background: var(--bg); color: var(--text); }
.container { color: var(--text); }
.container h1, .container h2, .container h3, .container h4, .container h5 { color: var(--amber); }
.container p, .container li { color: var(--text); }
hr { border: 0; border-top: 1px solid var(--line); }
.material-icons { color: var(--green); }
.section { padding-top: 1rem; padding-bottom: 1rem; }
.collapsible, .collapsible-header, .collapsible-body, .card, .card-panel { background: var(--panel); color: var(--text); border-color: var(--line); }
.collapsible-header { background: var(--panel-2); }
.card .card-content, .card .card-title { color: var(--text); }
.collection { border-color: var(--line); }
.collection .collection-item:not(.active) {
    background-color: var(--panel);
    border-color: var(--line);
    color: var(--text);
}
.collection a.collection-item:not(.active) {
    color: var(--text);
    text-decoration: underline;
}
.collection a.collection-item:not(.active):hover,
.collection a.collection-item:not(.active):focus-visible {
    background-color: var(--panel-2);
    color: var(--amber);
}
.collection a.collection-item:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: -2px;
}
table, table.striped > tbody > tr:nth-child(odd) { background: var(--panel); color: var(--text); }
table th { color: var(--amber); }
table td, table th { border-bottom: 1px solid var(--line); }
table.bordered > thead > tr, table.bordered > tbody > tr { border-bottom: 1px solid var(--line); }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select {
    color: var(--text); background: var(--panel); border-color: var(--line);
}
.btn, .btn-large { background-color: var(--amber); color: #111; }
.btn:hover, .btn-large:hover { background-color: var(--green); }
.parallax-container { margin-bottom: 0; }
.page-footer { display: none; }