/*
  Nostrage visual-theme overlay
  Load this stylesheet AFTER /static/css/style.css in src/pages/partials/head.ejs.
  This is optional: the native Appearance settings handle logo + hero gradient,
  while this source-level overlay brings the navigation, CTA, focus state,
  dropdown, and accent colour into the same system.
*/

:root {
  --nostrage-violet: #7C3AED;
  --nostrage-violet-strong: #6D28D9;
  --nostrage-violet-hover: #8B5CF6;
  --nostrage-amber: #F59E0B;
  --nostrage-ink: #1D1A27;
  --nostrage-midnight: #0F0B1C;
  --nostrage-plum: #2B1359;
  --nostrage-mist: #F6F2FF;
}

/* Navigation (nav.navbar: beats the inline <style> in navbar.ejs, which loads after this file) */
html[data-bs-theme="light"] nav.navbar {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(109, 40, 217, 0.12);
}

html[data-bs-theme="dark"] nav.navbar {
  background-color: rgba(15, 11, 28, 0.96) !important;
  border-bottom: 1px solid rgba(246, 242, 255, 0.10);
}

.navbar {
  backdrop-filter: blur(14px);
}

nav.navbar .navbar-nav .nav-link.active,
.dropdown-menu .nav-link.active {
  color: #FFFFFF !important;
  background-color: var(--nostrage-violet-strong) !important;
  border-radius: 6px;
}

nav.navbar .dropdown-menu, .dropdown-menu.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--nostrage-violet-strong);
  border-color: rgba(109, 40, 217, 0.16);
}

/* Calls to action */
html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="dark"] .btn-primary {
  color: #FFFFFF !important;
  background-color: var(--nostrage-violet-strong) !important;
  border-color: var(--nostrage-violet-strong) !important;
  box-shadow: 0 8px 22px rgba(109, 40, 217, 0.22);
}

html[data-bs-theme="light"] .btn-primary i,
html[data-bs-theme="dark"] .btn-primary i {
  filter: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #FFFFFF !important;
  background-color: var(--nostrage-violet-hover) !important;
  border-color: var(--nostrage-violet-hover) !important;
}

.btn-primary:active {
  background-color: #5B21B6 !important;
  border-color: #5B21B6 !important;
}

/* Form and brand accents */
.form-control:focus {
  border-color: var(--nostrage-violet) !important;
  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.24) !important;
}

.purple-text {
  color: var(--nostrage-violet) !important;
}

.gradient-text {
  background: linear-gradient(90deg, var(--nostrage-amber), var(--nostrage-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Keep the native upload constraint explicit in any future header revisions. */
#server-logo {
  width: 180px;
  height: 61px;
  object-fit: contain;
}

/* ---- Added 2026-10-09: match nostrage-home-preview (navbar type, home hero, footer) ---- */
nav.navbar .navbar-nav .nav-link {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  padding: 0.55rem 0.72rem;
  border-radius: 6px;
}
html[data-bs-theme="dark"] nav.navbar .navbar-nav .nav-link:not(.active) { color: rgba(246, 242, 255, 0.78); }
html[data-bs-theme="dark"] nav.navbar { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18) !important; }
html[data-bs-theme="dark"] body footer { background-color: rgba(15, 11, 28, 0.96) !important; color: rgba(246, 242, 255, 0.6); }

.nostrage-hero { position: relative; overflow: hidden; }
.nostrage-hero .relay-field { position: absolute; inset: 0; opacity: 0.44; pointer-events: none; }
.nostrage-hero .relay-field::before,
.nostrage-hero .relay-field::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; }
.nostrage-hero .relay-field::before { width: min(62vw, 740px); height: min(62vw, 740px); top: -39vw; left: -15vw; }
.nostrage-hero .relay-field::after { width: min(54vw, 620px); height: min(54vw, 620px); right: -19vw; bottom: -35vw; }
.nostrage-hero .signal { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--nostrage-amber);
  box-shadow: 0 0 0 6px rgba(245, 158, 11, .12), 0 0 24px rgba(245, 158, 11, .65); pointer-events: none; }
.nostrage-hero .signal.one { top: 25%; left: 17%; }
.nostrage-hero .signal.two { top: 37%; right: 20%; }
.nostrage-hero .signal.three { bottom: 27%; left: 28%; }
.nostrage-hero .hero-content { position: relative; max-width: 850px; color: var(--nostrage-mist); }
.nostrage-hero .eyebrow { margin: 0 0 18px; color: #FDE68A; font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.nostrage-hero .hero-title { max-width: 11.5em; margin: 0 auto; color: var(--nostrage-mist); font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.nostrage-hero .hero-subtitle { max-width: 620px; margin: 24px auto 16px; color: rgba(246, 242, 255, .79); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.55; }
.nostrage-hero .hero-contact { color: rgba(246, 242, 255, .66); font-size: .9rem; margin: 0 0 12px; }
.nostrage-hero .hero-contact a { color: inherit; text-decoration: none; }
.nostrage-hero .hero-tos { color: rgba(246, 242, 255, .68); font-size: .84rem; margin: 0 0 28px; }
.nostrage-hero .hero-tos a { color: var(--nostrage-mist); text-underline-offset: 3px; }
.nostrage-hero .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 0.86rem 1.15rem; border-radius: 7px; font-weight: 700;
  box-shadow: 0 12px 26px rgba(49, 19, 113, .34) !important; }
.nostrage-hero .footer-note { position: absolute; z-index: 1; bottom: 28px; left: 0; right: 0; text-align: center; color: rgba(246, 242, 255, .44); font-size: .75rem; }
@media (max-width: 994.98px) { .nostrage-hero .footer-note { bottom: 96px; } }

/* ---- Added 2026-10-09: site-wide Nostrage theme (all pages, both modes) ---- */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.1.0/files/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.1.0/files/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bs-body-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }

/* Palette mapped onto Bootstrap's variables so every component follows it */
html[data-bs-theme="dark"] {
  --bs-body-bg: #0F0B1C;              --bs-body-bg-rgb: 15, 11, 28;
  --bs-body-color: #E9E4F7;           --bs-body-color-rgb: 233, 228, 247;
  --bs-emphasis-color: #F6F2FF;       --bs-emphasis-color-rgb: 246, 242, 255;
  --bs-heading-color: #F6F2FF;
  --bs-secondary-color: rgba(233, 228, 247, 0.68);
  --bs-tertiary-color: rgba(233, 228, 247, 0.45);
  --bs-secondary-bg: #1E1636;         --bs-secondary-bg-rgb: 30, 22, 54;
  --bs-tertiary-bg: #171129;          --bs-tertiary-bg-rgb: 23, 17, 41;
  --bs-border-color: rgba(246, 242, 255, 0.12);
  --bs-border-color-translucent: rgba(246, 242, 255, 0.10);
  --bs-link-color: #A78BFA;           --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: #C4B5FD;     --bs-link-hover-color-rgb: 196, 181, 253;
  --bs-primary: #7C3AED;              --bs-primary-rgb: 124, 58, 237;
  --bs-primary-text-emphasis: #C4B5FD; --bs-primary-bg-subtle: #22124A; --bs-primary-border-subtle: #4C1D95;
}
html[data-bs-theme="light"] {
  --bs-body-bg: #FBF9FF;              --bs-body-bg-rgb: 251, 249, 255;
  --bs-body-color: #1D1A27;           --bs-body-color-rgb: 29, 26, 39;
  --bs-emphasis-color: #0F0B1C;       --bs-heading-color: #1D1A27;
  --bs-secondary-color: rgba(29, 26, 39, 0.66);
  --bs-secondary-bg: #EFE8FF;         --bs-secondary-bg-rgb: 239, 232, 255;
  --bs-tertiary-bg: #F6F2FF;          --bs-tertiary-bg-rgb: 246, 242, 255;
  --bs-border-color: rgba(29, 26, 39, 0.12);
  --bs-link-color: #6D28D9;           --bs-link-color-rgb: 109, 40, 217;
  --bs-link-hover-color: #7C3AED;     --bs-link-hover-color-rgb: 124, 58, 237;
  --bs-primary: #6D28D9;              --bs-primary-rgb: 109, 40, 217;
}

/* Page backdrop: soft relay-violet glow behind content pages (the home hero paints over it) */
html[data-bs-theme="dark"] body {
  background-color: #0F0B1C;
  background-image: radial-gradient(1200px 620px at 50% -14%, rgba(124, 58, 237, 0.30), transparent 64%),
                    radial-gradient(1000px 640px at 108% 108%, rgba(124, 58, 237, 0.34), transparent 62%),
                    linear-gradient(to bottom right, #0F0B1C 0%, #1A0F36 55%, #24124D 100%);
  background-attachment: fixed;
}
html[data-bs-theme="light"] body {
  background-image: radial-gradient(1100px 560px at 50% -12%, rgba(124, 58, 237, 0.10), transparent 62%);
  background-attachment: fixed;
}

/* Typography to match the hero */
h1, .h1, .display-1, .display-2, .display-3, .display-4 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
h2, .h2, h3, .h3 { font-weight: 700; letter-spacing: -0.02em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 650; letter-spacing: -0.01em; }
.display-5, .display-6 { font-weight: 500; letter-spacing: -0.02em; }

/* Surfaces */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .list-group-item {
  --bs-card-bg: rgba(30, 22, 54, 0.72);
  background-color: rgba(30, 22, 54, 0.72);
  border-color: rgba(246, 242, 255, 0.10);
}
html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .dropdown-menu { background-color: #171129; }
html[data-bs-theme="light"] .card { --bs-card-bg: #FFFFFF; background-color: #FFFFFF; border-color: rgba(109, 40, 217, 0.12); }
.card { border-radius: 12px; }

/* Forms */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select { background-color: rgba(15, 11, 28, 0.72); border-color: rgba(246, 242, 255, 0.14); color: #F6F2FF; }
html[data-bs-theme="dark"] .input-group-text { background-color: #1E1636; border-color: rgba(246, 242, 255, 0.14); color: rgba(246, 242, 255, 0.82); }
html[data-bs-theme="dark"] .form-control::placeholder { color: rgba(233, 228, 247, 0.45); }
.form-check-input:checked { background-color: var(--nostrage-violet-strong); border-color: var(--nostrage-violet-strong); }
.form-select:focus, .form-check-input:focus { border-color: var(--nostrage-violet) !important; box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.24) !important; }

/* Tabs, pagination, misc accents */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: #FFFFFF; background-color: var(--nostrage-violet-strong); border-color: var(--nostrage-violet-strong); }
.page-link { color: var(--bs-link-color); }
.active > .page-link, .page-link.active { background-color: var(--nostrage-violet-strong); border-color: var(--nostrage-violet-strong); }
.spinner-border, .text-primary { color: var(--nostrage-violet) !important; }
html .btn-dark { background-color: #2B1359 !important; border-color: #2B1359 !important; color: #F6F2FF !important; }
html .btn-dark:hover { background-color: #3B1C78 !important; border-color: #3B1C78 !important; }
html[data-bs-theme="dark"] .btn-secondary, html[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-border-color: rgba(246, 242, 255, 0.2); }
::selection { background: rgba(124, 58, 237, 0.45); color: #FFFFFF; }