/*
 * TundraNET – Grav/Quark theme overrides
 *
 * HOW TO INSTALL:
 *   1. Place this file at:
 *        user/themes/quark/css/custom.css
 *   2. Open user/themes/quark/quark.yaml and ensure:
 *        custom_css: true
 *      (Quark loads custom.css automatically when this is set.)
 *   3. If your active theme inherits from Quark, place the file at:
 *        user/themes/YOUR-THEME/css/custom.css
 *      and add the same custom_css: true to your theme's .yaml.
 *
 * FONT NOTE:
 *   Your metal font is served from your own server. Reference it here
 *   with the same relative path you use on your other pages.
 *   Adjust the url() path if Grav serves fonts from a different location.
 */

@font-face {
  font-family: "metal";
  src: url("../fonts/metal.ttf") format("truetype");
  font-display: swap;
}

/* ── Design tokens ── */
:root {
  --bg: #0e1012;
  --surface: #141618;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(127, 211, 255, 0.3);
  --text: #dde2e8;
  --muted: #7a8390;
  --accent: #7fd3ff;
  --accent-dim: rgba(127, 211, 255, 0.12);
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: "Courier New", Courier, monospace;
}

/* ── Base ── */
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--serif) !important;
  font-size: 17px;
  line-height: 1.65;
}

/* subtle grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(127, 211, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 211, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── Links ── */
a {
  color: var(--accent) !important;
  text-decoration: none;
}

a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* ── Navbar ── */
#header,
.navbar,
nav.navbar {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.navbar-brand,
.navbar-brand:hover {
  font-family: metal, Georgia, serif !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.08em !important;
  color: var(--text) !important;
}

.navbar-brand span,
.navbar-brand .accent {
  color: var(--accent) !important;
}

.navbar-item,
.nav-link,
.navbar a {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.navbar-item:hover,
.nav-link:hover,
.navbar a:hover {
  color: var(--accent) !important;
  background: transparent !important;
}

/* active nav item */
.navbar-item.active,
.nav-link.active {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
}

/* ── Page / content area ── */
#body,
.content-wrapper,
main,
.uk-section {
  background-color: var(--bg) !important;
}

.uk-container,
.container {
  position: relative;
  z-index: 1;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  line-height: 1.2;
}

h1 {
  font-family: metal, Georgia, serif !important;
  letter-spacing: 0.06em !important;
  color: var(--text) !important;
}

/* ── Body text ── */
p, li, td, th, blockquote {
  color: var(--text) !important;
}

.uk-text-muted,
.text-muted,
.subtitle,
time,
.post-meta {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* ── Section dividers / labels (blog listing etc.) ── */
.uk-heading-divider,
.section-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 8px !important;
}

/* ── Cards / panels ── */
.uk-card,
.uk-card-default,
.panel,
.blog-list-item {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.uk-card:hover,
.blog-list-item:hover {
  border-color: var(--border-hover) !important;
  background-color: var(--accent-dim) !important;
}

.uk-card-title {
  color: var(--text) !important;
  font-family: var(--serif) !important;
}

/* ── Buttons ── */
.uk-button,
.uk-button-default,
button,
input[type="submit"] {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.uk-button:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--accent-dim) !important;
  border-color: var(--border-hover) !important;
  color: var(--accent) !important;
}

.uk-button-primary {
  background-color: var(--accent-dim) !important;
  border-color: var(--border-hover) !important;
  color: var(--accent) !important;
}

/* ── Forms ── */
input, textarea, select {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--serif) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--border-hover) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}

/* ── Horizontal rules / dividers ── */
hr, .uk-divider-small::after, .uk-divider-icon::before, .uk-divider-icon::after {
  border-color: var(--border) !important;
  background-color: var(--border) !important;
}

/* ── Blockquotes ── */
blockquote {
  border-left: 2px solid var(--border-hover) !important;
  padding-left: 1rem !important;
  color: var(--muted) !important;
  font-style: italic !important;
}

/* ── Code ── */
code, pre, kbd {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  font-family: var(--mono) !important;
  font-size: 0.88em !important;
}

pre {
  padding: 1rem !important;
  overflow-x: auto;
}

/* ── Tables ── */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 12px !important;
}

td {
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 12px !important;
  color: var(--text) !important;
}

tr:hover td {
  background-color: var(--accent-dim) !important;
}

/* ── Footer ── */
#footer,
.footer,
.uk-section-muted {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

#footer a,
.footer a {
  color: var(--muted) !important;
}

#footer a:hover,
.footer a:hover {
  color: var(--accent) !important;
}

/* ── Sidebar ── */
.sidebar,
.uk-offcanvas-bar {
  background-color: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}

/* ── Pagination ── */
.uk-pagination a,
.page-link {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
}

.uk-pagination a:hover,
.page-link:hover {
  border-color: var(--border-hover) !important;
  color: var(--accent) !important;
  background-color: var(--accent-dim) !important;
}

.uk-pagination .uk-active a {
  color: var(--accent) !important;
  border-color: var(--border-hover) !important;
}

/* ── Notices / alerts ── */
.uk-alert {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.uk-alert-primary {
  border-color: var(--border-hover) !important;
  color: var(--accent) !important;
}

/* ── Quark center panel – stronger overrides ── */
.uk-section,
.uk-section-default,
.uk-section-muted,
.uk-section-primary,
section.uk-section,
#body-wrapper,
.body-wrapper,
#page,
.page,
#content,
.content,
.content-wrapper,
.block-hero,
.hero,
.uk-cover-container,
.section-hero {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

.uk-card-body,
.uk-card-default .uk-card-body,
.uk-card-default,
.uk-panel,
.uk-light,
.uk-dark,
[class*="uk-background-"] {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.uk-container > .uk-grid > *,
.uk-container > *,
.contentwrapper,
.blog,
.page-header,
.page-content {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* force any inline or element-level white backgrounds */
* {
  --uk-section-default-background: var(--bg);
}