/* =============================================================
   FONT FACES
   No dark-mode variants needed — untouched from original.
   ============================================================= */

/* archivo-black latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/archivo-black-v17-latin/archivo-black-v17-latin-regular.svg#Aclonica') format('svg'); /* Legacy iOS */
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZJhiI2B.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZthiI2B.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZNhiI2B.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZxhiI2B.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZBhiI2B.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZFhiI2B.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiA.woff2) format('woff2');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =============================================================
   COLOUR TOKENS — light mode defaults
   These override Cassiopeia/Bootstrap's :root variables where
   needed, and define custom variables for site-specific components.
   ============================================================= */

:root {
  /* Cassiopeia/Bootstrap body-level overrides */
  --body-bg:               #ffffff;
  --body-color:            #22262a;
  --link-color-rgb:        34, 79, 170;
  --link-hover-color-rgb:  66, 64, 119;
  --secondary-bg:          #eaedf0;
  --tertiary-bg:           #f9fafb;
  --border-color:          #dfe3e7;
  --heading-color:         inherit;

  /* Header & footer */
  --header-bg:             #112855;
  --header-gradient:       none;
  --footer-bg:             #112855;
  --footer-gradient:       none;
  --footer-color:          #ffffff;

  /* Cards */
  --card-bg:               #ffffff;
  --card-border:           #dfe3e7;
  --card-header-bg:        #112855;
  --card-header-color:     #ffffff;
  --card-header-border:    #dfe3e7;
  --card-body-bg:          #ffffff;
  --card-body-color:       #22262a;
  --card-body-border:      #30638d;

  /* Buttons */
  --btn-primary-bg:        #010156;
  --btn-primary-border:    #010156;
  --btn-primary-color:     #ffffff;
  --btn-secondary-bg:      #ffffff;
  --btn-secondary-border:  #010156;
  --btn-secondary-color:   #010156;
  --btn-info-bg:           #30638d;
  --btn-info-border:       #22262a;
  --btn-info-color:        #ffffff;

  /* Nav dropdown */
  --nav-dropdown-bg:       #ffffff;
  --nav-dropdown-border:   #dfe3e7;
  --nav-dropdown-color:    #22262a;

  /* Forms */
  --form-control-bg:       #ffffff;
  --form-control-border:   #dfe3e7;
  --form-control-color:    #22262a;

  /* Article info */
  --article-info-color:    #22262a;

  /* Text selection */
  --selection-bg:          #30638d;
  --selection-color:       #ffffff;

  /* Site-specific component tokens */
  --site-accent:           #a51f18;
  --site-accent-text:      #ffffff;

  --blockquote-bg:         #f9f9f9;
  --blockquote-border:     #cccccc;
  --blockquote-color:      inherit;

  --dropcap-color:         #903;

  --tag-bg:                #30638d;
  --tag-bg-hover:          #295478;
  --tag-text:              #ffffff;
  --tag-border-light:      #cccccc;
  --tag-border-dark:       #333333;

  --payblock-border:       #008CBA;
  --paybtn-bg:             #008CBA;
  --paybtn-text:           #ffffff;

  --collapsible-bg:        #777777;
  --collapsible-bg-hover:  #555555;
  --collapsible-text:      #ffffff;

  /* Image dimming — off in light mode */
  --img-filter:            brightness(100%) grayscale(0%);
  --img-filter-hover:      brightness(100%) grayscale(0%);
}


/* =============================================================
   DARK MODE TOKEN OVERRIDES
   Two routes to dark:
     1. System preference via prefers-color-scheme
     2. Manual selection via [data-theme="dark"] on <html>
   The :not([data-theme="light"]) guard on the media query ensures
   a user on a dark-OS who manually picks light gets their choice.
   ============================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Cassiopeia/Bootstrap body-level overrides */
    --body-bg:               #0e1b21;
    --body-color:            #9fb9cb;
    --link-color-rgb:        159, 185, 203;
    --link-hover-color-rgb:  255, 255, 255;
    --link-hover-color:      #ffffff;
    --secondary-bg:          #2d404e;
    --tertiary-bg:           #2d404e;
    --border-color:          #2d404e;
    --heading-color:         #d0e3f9;

    /* Header & footer */
    --header-bg:             #2d404e;
    --header-gradient:       linear-gradient(180deg, #0e1b21, #2d404e);
    --footer-bg:             #2d404e;
    --footer-gradient:       linear-gradient(180deg, #2d404e, #0e1b21);
    --footer-color:          #9fb9cb;

    /* Cards */
    --card-bg:               #2d404e;
    --card-border:           #2d404e;
    --card-header-bg:        #2d404e;
    --card-header-color:     #9fb9cb;
    --card-header-border:    #2d404e;
    --card-body-bg:          #2d404e;
    --card-body-color:       #9fb9cb;
    --card-body-border:      #9fb9cb;

    /* Buttons */
    --btn-primary-bg:        #2d404e;
    --btn-primary-border:    #2d404e;
    --btn-primary-color:     #9fb9cb;
    --btn-secondary-bg:      #2d404e;
    --btn-secondary-border:  #9fb9cb;
    --btn-secondary-color:   #9fb9cb;
    --btn-info-bg:           #2d404e;
    --btn-info-border:       #0e1b21;
    --btn-info-color:        #9fb9cb;

    /* Nav dropdown */
    --nav-dropdown-bg:       #2d404e;
    --nav-dropdown-border:   #2d404e;
    --nav-dropdown-color:    #9fb9cb;

    /* Forms */
    --form-control-bg:       #0e1b21;
    --form-control-border:   #9fb9cb;
    --form-control-color:    #9fb9cb;

    /* Article info */
    --article-info-color:    #9fb9cb;

    /* Text selection */
    --selection-bg:          #9fb9cb;
    --selection-color:       #d0e3f9;

    /* Site-specific component tokens */
    --site-accent:           #7a1712;
    --blockquote-bg:         #2d404e;
    --blockquote-border:     #9fb9cb;
    --blockquote-color:      #9fb9cb;
    --dropcap-color:         #cc6666;
    --tag-bg:                #1e4d6b;
    --tag-bg-hover:          #163a52;
    --tag-border-light:      #444444;
    --tag-border-dark:       #222222;
    --collapsible-bg:        #444444;
    --collapsible-bg-hover:  #333333;

    /* Image dimming — on in dark mode */
    --img-filter:            brightness(80%) grayscale(10%);
    --img-filter-hover:      brightness(100%) grayscale(0%);
  }
}

[data-theme="dark"] {
  /* Cassiopeia/Bootstrap body-level overrides */
  --body-bg:               #0e1b21;
  --body-color:            #9fb9cb;
  --link-color-rgb:        159, 185, 203;
  --link-hover-color-rgb:  255, 255, 255;
  --link-hover-color:      #ffffff;
  --secondary-bg:          #2d404e;
  --tertiary-bg:           #2d404e;
  --border-color:          #2d404e;
  --heading-color:         #d0e3f9;

  /* Header & footer */
  --header-bg:             #2d404e;
  --header-gradient:       linear-gradient(180deg, #0e1b21, #2d404e);
  --footer-bg:             #2d404e;
  --footer-gradient:       linear-gradient(180deg, #2d404e, #0e1b21);
  --footer-color:          #9fb9cb;

  /* Cards */
  --card-bg:               #2d404e;
  --card-border:           #2d404e;
  --card-header-bg:        #2d404e;
  --card-header-color:     #9fb9cb;
  --card-header-border:    #2d404e;
  --card-body-bg:          #2d404e;
  --card-body-color:       #9fb9cb;
  --card-body-border:      #9fb9cb;

  /* Buttons */
  --btn-primary-bg:        #2d404e;
  --btn-primary-border:    #2d404e;
  --btn-primary-color:     #9fb9cb;
  --btn-secondary-bg:      #2d404e;
  --btn-secondary-border:  #9fb9cb;
  --btn-secondary-color:   #9fb9cb;
  --btn-info-bg:           #2d404e;
  --btn-info-border:       #0e1b21;
  --btn-info-color:        #9fb9cb;

  /* Nav dropdown */
  --nav-dropdown-bg:       #2d404e;
  --nav-dropdown-border:   #2d404e;
  --nav-dropdown-color:    #9fb9cb;

  /* Forms */
  --form-control-bg:       #0e1b21;
  --form-control-border:   #9fb9cb;
  --form-control-color:    #9fb9cb;
  --form-control::placeholder: #9fb9cb;

  /* Article info */
  --article-info-color:    #9fb9cb;

  /* Text selection */
  --selection-bg:          #9fb9cb;
  --selection-color:       #d0e3f9;

  /* Site-specific component tokens */
  --site-accent:           #7a1712;
  --blockquote-bg:         #2d404e;
  --blockquote-border:     #9fb9cb;
  --blockquote-color:      #9fb9cb;
  --dropcap-color:         #cc6666;
  --tag-bg:                #1e4d6b;
  --tag-bg-hover:          #163a52;
  --tag-border-light:      #444444;
  --tag-border-dark:       #222222;
  --collapsible-bg:        #444444;
  --collapsible-bg-hover:  #333333;

  /* Image dimming — on in dark mode */
  --img-filter:            brightness(80%) grayscale(10%);
  --img-filter-hover:      brightness(100%) grayscale(0%);
}


/* =============================================================
   NON-COLOUR LAYOUT & DISPLAY RULES
   No dark-mode variants needed — untouched from original.
   ============================================================= */

.brand-logo {
  font-family: Roboto;
  text-decoration: none;
  font-weight: 700;
}

.mod-footer {
  font-size: 0.6rem;
}

.dmlisting_floppy {
  display: none;
}

.container-topbar div {
  margin-left: 1rem;
  margin-right: 1rem;
}

blockquote {
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  content: no-close-quote;
}
blockquote p {
  display: block;
  font-size: larger;
  font-family: serif;
  font-style: italic;
}

table td {
  padding: 0.5rem;
  border: 1px solid;
}

p.dropcap {} /* Used by the Styles list to create an entry */

p.dropcap:first-child:first-letter {
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.com-content-article a[href^="http"]::after,
.com-content-article a[href^="https://"]::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.tagscloud .tag-name {
  text-decoration: none;
  padding: 2px 6px 2px 6px;
  border-radius: 0.25rem;
}

.payblock {
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0px 8px 0px;
}

a.paybutton {
  border: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  border-radius: 8px;
  margin: 3px;
}

.payblock a[href^="http"]::after,
.payblock a[href^="https://"]::after {
  content: "";
  width: 0px;
  height: 0px;
  margin-left: 0px;
  background-image: none !important;
  display: none !important;
}

figure {
  display: table;
}
figure img {
  display: table-row;
}
figure figcaption {
  display: table-caption;
  caption-side: bottom;
}

.sidebar-search, .stats-module {
  display: none;
}

.collapsible {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsequizcontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

/* Responsive heading sizes — from dark template, applied globally */
h1, .h1 { font-size: clamp(18px, 5vw, 28px); }
h2, .h2 { font-size: clamp(16px, 5vw, 26px); }
h3, .h3 { font-size: clamp(14px, 5vw, 24px); }
h4, .h4 { font-size: clamp(12px, 5vw, 22px); }

label {
  font-weight: bold;
}

.article-info {
  background-color: transparent;
  padding: 15px 20px;
}


/* =============================================================
   THEMED COMPONENT RULES
   All colour values come from variables defined above.
   .nirdsign is intentionally excluded — colours are hard-coded
   and will not change between themes.
   ============================================================= */

/* Sentimental. Do not touch. */
.nirdsign {
  font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
  margin: 10px auto 10px auto;
  width: 275px;
  font-weight: bold;
  text-align: left;
  padding: 8px;
  color: white;
  background-color: cornflowerblue;
  clear: both;
}

/* Body & links */
body {
  background: var(--body-bg);
  color: var(--body-color);
}

a {
  color: rgba(var(--link-color-rgb), 1);
}

/* Text selection */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-color);
}

/* Header */
.container-header {
  background-color: var(--header-bg);
  background-image: var(--header-gradient);
}

.container-header .navbar-brand a {
  color: var(--heading-color);
}

.container-topbar,
.container-below-top {
  color: var(--site-accent-text);
  background-color: var(--site-accent);
}

/* Footer */
.footer {
  background-color: var(--footer-bg);
  background-image: var(--footer-gradient);
  color: var(--footer-color);
}

/* Cards */
.card {
  border: 1px solid var(--card-border);
  border-radius: 0;
  background-color: var(--card-bg);
}

.card-header {
  background-color: var(--card-header-bg);
  border-bottom: 1px solid var(--card-header-border);
  color: var(--card-header-color);
}

.card-body {
  background-color: var(--card-body-bg);
  border-bottom: 3px solid var(--card-body-border);
  color: var(--card-body-color);
}

.card-body a {
  color: var(--card-body-color);
}

.card.secondary {
  border: 1px solid var(--card-border);
  border-radius: 0;
  background-color: var(--card-bg);
}

.card-header.secondary {
  background-color: var(--card-header-bg);
  border-bottom: 1px solid var(--card-header-border);
  color: var(--card-header-color);
}

.card-body.secondary {
  background-color: var(--card-body-bg);
  border-bottom: 3px solid var(--card-body-border);
  color: var(--card-body-color);
}

.card-body.secondary a {
  color: var(--card-body-color);
}

/* Boxed blog items */
.boxed .blog-item {
  background-color: var(--secondary-bg);
}

/* Article news / newsflash horizontal */
.mod-articlesnews-horizontal li,
.no-card .newsflash-horiz li {
  background-color: var(--secondary-bg);
  color: var(--body-color);
  border: 1px solid var(--secondary-bg);
}

.mod-articlesnews-horizontal li .btn.btn-secondary,
.no-card .newsflash-horiz li .btn.btn-secondary {
  background-color: var(--selection-bg);
  border-color: var(--selection-bg);
  color: var(--selection-color);
}

/* Buttons */
.btn.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
}

.btn.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}

.btn.btn-info {
  background-color: var(--btn-info-bg);
  border: 1px solid var(--btn-info-border);
  color: var(--btn-info-color);
}

.btn-primary .icon-white:before {
  color: var(--btn-primary-color);
}

.btn-secondary .icon-white:before {
  color: var(--btn-secondary-color);
}

.bg-info {
  color: var(--selection-color);
  background-color: var(--selection-bg) !important;
}

/* Navigation dropdowns */
.metismenu.mod-menu .metismenu-item > ul {
  background-color: var(--nav-dropdown-bg);
  border: 1px solid var(--nav-dropdown-border);
  color: var(--nav-dropdown-color);
}

.metismenu.mod-menu .metismenu-item > ul a {
  color: var(--nav-dropdown-color);
}

/* Forms */
.form-control {
  background-color: var(--form-control-bg);
  border: 1px solid var(--form-control-border);
  color: var(--form-control-color);
  border-radius: 0;
}
.form-control::placeholder {
  color: var(--form-control-color);
}

/* Article info */
.article-info dd {
  color: var(--article-info-color);
}

/* Colorpicker module — uses body background, not card background */
.main-top.card.colorpicker-module {
  background-color: var(--body-bg);
  color: var(--heading-color);
  border: none;
}

.colorpicker-module .card-header,
.colorpicker-module .card-body {
  background-color: var(--body-bg);
  color: var(--heading-color);
}

/* WebAuthn button */
.plg_system_webauthn_login_button svg {
  fill: var(--body-color);
}

/* Pagination */
.pagination {
  --pagination-color:               var(--body-color);
  --pagination-bg:                  transparent;
  --pagination-border-color:        var(--border-color);
  --pagination-hover-color:         rgba(var(--link-hover-color-rgb), 1);
  --pagination-hover-bg:            var(--tertiary-bg);
  --pagination-hover-border-color:  var(--border-color);
  --pagination-focus-color:         rgba(var(--link-hover-color-rgb), 1);
  --pagination-focus-bg:            var(--secondary-bg);
  --pagination-active-color:        var(--btn-primary-color);
  --pagination-active-bg:           var(--secondary-bg);
  --pagination-active-border-color: var(--border-color);
  --pagination-disabled-color:      var(--body-color);
  --pagination-disabled-bg:         transparent;
  --pagination-disabled-border-color: var(--border-color);
}

/* Blockquote */
blockquote {
  background: var(--blockquote-bg);
  border-left: 10px solid var(--blockquote-border);
  color: var(--blockquote-color);
}

blockquote:before {
  color: var(--blockquote-border);
}

/* Dropcap */
p.dropcap:first-child:first-letter {
  color: var(--dropcap-color);
}

/* Tags cloud */
.tagscloud .tag-name {
  background-color: var(--tag-bg);
  color: var(--tag-text);
  border-top:    1px solid var(--tag-border-light);
  border-right:  1px solid var(--tag-border-dark);
  border-bottom: 1px solid var(--tag-border-dark);
  border-left:   1px solid var(--tag-border-light);
}

.tagscloud a.tag-name:link,
.tagscloud a.tag-name:visited,
.tagscloud a.tag-name:hover,
.tagscloud a.tag-name:active {
  color: var(--tag-text) !important;
}

.tagscloud a.tag-name:hover {
  background-color: var(--tag-bg-hover);
}

/* Pay block */
.payblock {
  border: 1px solid var(--payblock-border);
}

a.paybutton {
  background-color: var(--paybtn-bg);
  color: var(--paybtn-text);
}

/* Collapsible */
.collapsible {
  background-color: var(--collapsible-bg);
  color: var(--collapsible-text);
}

.collapseactive,
.collapsible:hover {
  background-color: var(--collapsible-bg-hover);
}

/* Image dimming — active in dark mode, inert in light mode */
img {
  filter: var(--img-filter);
  transition-property: filter;
  transition-duration: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: ease-out;
}

img:hover,
img:focus,
img:active {
  filter: var(--img-filter-hover);
  transition-duration: 0.1s;
  transition-delay: 0.01s;
  transition-timing-function: ease;
}