/*
 * kittmaster.com — Cassiopeia user.css
 * Theme: "Knight" — dark frosted glass, K.I.T.T. scanner-RED accent on
 * Trans Am black, with a touch of dashboard amber. Sister theme to
 * ni.kittmaster.com's "Carbon" (same Cassiopeia architecture, red palette).
 * Upload to: /media/templates/site/cassiopeia/css/user.css
 *
 * Design system note: every color routes through the design tokens in :root
 * below. To re-skin the whole site, edit the tokens — not the rules.
 */

/* =============================================
   DESIGN TOKENS
   One accent, one set of surfaces. Change here, propagates everywhere.
   ============================================= */
:root {
  /* Accent — K.I.T.T.'s sweeping scanner red */
  --accent:        #ff3b3b;   /* bright scanner red — links, focus, highlights */
  --accent-strong: #e10600;   /* solid pill / button fill (Cylon red) */
  --accent-deep:   #7f0d0d;   /* deep blood-red — borders, active state */
  --accent-rgb:    255, 59, 59;

  /* Secondary — dashboard / voice-modulator amber (used sparingly) */
  --amber:         #ffb454;

  /* Surfaces (dark glass — jet-black cabin) */
  --page-scrim:   rgba(6, 6, 8, 0.38);     /* light scrim — let more of the dimmed schematic show */
  --glass-bg:     rgba(21, 19, 24, 0.88);  /* main content card — opaque enough to lift off the bg */
  --glass-bg-2:   rgba(30, 27, 31, 0.64);  /* nested wells / cards / rows */
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-accent: rgba(var(--accent-rgb), 0.40);

  /* Text */
  --text:        #d6d2d6;   /* warm light gray — body copy */
  --text-strong: #f3eef1;   /* near-white — headings */
  --text-muted:  #978f96;   /* muted — captions, meta */

  /* Depth & shape */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 54px -14px rgba(0, 0, 0, 0.9);
  --radius: 12px;

  /* Scanner sweep duration — overridden per-visitor by the scanner control
     widget (localStorage). Lower = faster sweep. */
  --scan-duration: 2.4s;

  /* Map Cassiopeia's built-in link variables onto the accent token */
  --cassiopeia-color-link: var(--accent);
  --cassiopeia-color-hover: var(--accent-strong);
  --link-color: var(--accent);
  --link-color-rgb: var(--accent-rgb);
  --link-hover-color: var(--accent-strong);
  --link-hover-color-rgb: 225, 6, 0;
  --template-special-color: var(--accent-deep);
}

/* =============================================
   BODY & PAGE BACKGROUND
   Jet-black backdrop with a faint red scanner glow up top, echoing KITT's
   front-end sweep. Self-contained (no external image) so nothing 404s.
   ============================================= */
body.site {
  /* top scanner bar is drawn by the animated ::before/::after below */
  padding: 20px;
  background-color: #08070a;
  background-image:
    radial-gradient(70% 42% at 50% -4%, rgba(var(--accent-rgb), 0.15), transparent 62%),
    linear-gradient(var(--page-scrim), var(--page-scrim)),
    url('http://kittmaster.com/images/kitt-background-dim.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* =============================================
   K.I.T.T. SCANNER — animated top bar
   Replaces the static red border-top. A dim red "housing" strip (::before)
   fixed across the very top of the viewport, with a bright red "eye" (::after)
   sweeping left↔right and a trailing glow. ease-in-out makes it pause at each
   end, just like the show. Fixed position = always visible while scrolling.
   ============================================= */
body.site::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 9998;
  background: #2a0606;                 /* the scanner "housing" — dim red */
  pointer-events: none;
}
body.site::after {
  content: "";
  position: fixed;
  top: 0;
  left: -24%;
  width: 24%;
  height: 4px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--accent-rgb), 0.35) 30%,
    #ff2a2a 50%,
    rgba(var(--accent-rgb), 0.35) 70%,
    transparent
  );
  box-shadow: 0 0 14px 2px rgba(var(--accent-rgb), 0.75);
  animation: kitt-scan var(--scan-duration, 2.4s) ease-in-out infinite alternate;
}
@keyframes kitt-scan {
  from { left: -24%; }
  to   { left: 100%; }
}
/* Accessibility: hold the light steady for anyone who prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.site::after {
    animation: none;
    left: 0;
    width: 100%;
    background: var(--accent-strong);
    box-shadow: none;
    opacity: 0.9;
  }
}
/* Visitor turned the scanner off (set by the scanner control widget) — remove
   the whole bar, housing and all, for a clean top edge. */
html.scanner-off body.site::before,
html.scanner-off body.site::after {
  display: none !important;
}

/* SCANNER CONTROL WIDGET — styles for the Custom HTML module (#kitt-scan-ctrl).
   Lives here in user.css (not in the module) because Joomla's WYSIWYG editor
   strips <style>/<script> from custom modules on save. The module carries only
   the markup + a small script (edited with the editor set to None). */
#kitt-scan-ctrl {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 10001;
  font-family: var(--cassiopeia-font-family-body, "Noto Sans", sans-serif);
}
#ksc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 17, 20, 0.92);
  border: 1px solid var(--glass-border-accent);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#ksc-btn:hover {
  border-color: var(--accent);
  color: var(--text-strong);
}
.ksc-eye {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff2a2a;
  box-shadow: 0 0 8px 1px rgba(var(--accent-rgb), 0.85);
  animation: ksc-pulse 1.4s ease-in-out infinite;
}
@keyframes ksc-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
#ksc-panel {
  margin-top: 8px;
  background: rgba(18, 17, 20, 0.96);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  min-width: 172px;
}
.ksc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 0;
}
.ksc-line input[type="range"] { width: 92px; accent-color: var(--accent-strong); }
.ksc-line input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) {
  .ksc-eye { animation: none; }
}

/* =============================================
   LINK COLORS
   ============================================= */
a {
  color: var(--accent);
}
a:hover,
a:focus {
  color: var(--accent-strong);
}

/* =============================================
   LOGO / BRAND
   ============================================= */
/* Center the header banner (the KITT car logo) horizontally */
header.container-header .navbar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
}
header.container-header .navbar-brand .brand-logo {
  margin-left: auto;
  margin-right: auto;
}
.navbar-brand .brand-logo {
  color: var(--text-strong);
  transition: color .4s ease;
}
.navbar-brand .brand-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

/* =============================================
   CONTAINER WIDTH
   ============================================= */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1140px;
}

/* =============================================
   MAIN CONTENT BOX — dark frosted glass
   ============================================= */
.container-component {
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  color: var(--text);
}
.container-component a {
  color: var(--accent);
}
.container-component a:hover,
.container-component a:focus {
  color: var(--accent-strong);
}

/* =============================================
   HEADINGS
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  margin: 14px 0;
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.01em;
  word-wrap: break-word;
}
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 23px; line-height: 1.25; }
h3 { font-size: 19px; line-height: 1.3; }
h4 { font-size: 16px; line-height: 1.35; }
h5 { font-size: 14px; line-height: 1.4; }
h6 { font-size: 13px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

.container-component h1,
.container-component h2,
.container-component h3,
.container-component h4,
.container-component h5 {
  color: var(--text-strong);
}
/* Article title — near-white for hierarchy (red is reserved for links/accents,
   so the title leads instead of competing with every red link on the page).
   A red scanner underline on the page-header carries the KITT accent. */
.container-component .article-title,
.container-component .page-header h1 {
  color: var(--text-strong);
}
.container-component .page-header {
  border-bottom: 2px solid var(--glass-border-accent);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* BLOCKQUOTE / TABLE CAPTION — readable on dark.
   With the legacy inline cyan stripped from the content, quotes like the
   "--= Two amazing friends… =--" line under the Tom/Joe photos fell back to a
   dark default and nearly vanished. Force readable text + a red scanner stripe
   on blockquotes; captions sit above their table in muted tone. */
.container-component blockquote {
  color: var(--text-strong);
  border-left: 3px solid var(--accent-strong);
  padding: 4px 0 4px 14px;
  margin: 12px 0;
}
.container-component blockquote *,
.container-component caption blockquote {
  color: var(--text-strong);
}
.container-component caption {
  color: var(--text);
  caption-side: top;
}

/* CHANGE-LOG date anchors (Site Updates page, menu item 300). Each entry's
   date is its only <strong>, so tint those bold dates a muted GARNET — warmer
   and calmer than the blazing scanner red, just enough to anchor the eye and
   let you skim date-to-date. Scoped to the page so bold text elsewhere is
   untouched. Dial: deeper/beet = #a8443f, brighter = var(--accent). */
body.itemid-300 .com-content-article__body p strong {
  color: #c75d57;
  font-weight: 600;
}

/* =============================================
   MODULE HEADER
   ============================================= */
.module-header,
.module-title {
  padding-bottom: 14px;
  margin: 20px 0 18px 0;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-strong);
}

/* =============================================
   WELL / CARD — nested glass sub-surface
   ============================================= */
.well,
.card {
  background-color: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--text);
}
.well {
  padding: 18px 20px;
}
.card-header,
.card-footer {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border);
  color: var(--text-strong);
}

/* =============================================
   LIST GROUPS (footer stats, latest-updates, etc.)
   Bootstrap .list-group-item hardcodes white; clear it to dark glass.
   ============================================= */
.container-component .list-group,
.t3-footer .list-group,
.mod-list.list-group {
  background-color: transparent;
}
.container-component .list-group-item,
.list-group-item {
  background-color: transparent;
  border-color: var(--glass-border);
  color: var(--text);
}
.list-group-item a {
  color: var(--accent);
}
.list-group-item a:hover,
.list-group-item a:focus {
  color: var(--accent-strong);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(var(--accent-rgb), 0.10);
  color: var(--text-strong);
}

/* =============================================
   IMAGES
   ============================================= */
img {
  border-radius: 4px;
}

/* =============================================
   PARAGRAPH & LIST TEXT
   ============================================= */
p, li {
  word-wrap: break-word;
}
.container-component p,
.container-component li,
.container-component dd,
.container-component dt,
.container-component td {
  color: var(--text);
}

/* =============================================
   HEADER / NAVIGATION AREA
   Clear Cassiopeia's dark primary fill so the body backdrop shows through.
   ============================================= */
header.container-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  margin-bottom: 12px;
}

/* =============================================
   NAV BAR BACKING STRIP — dark glass, red hairline
   ============================================= */
header.container-header .container-nav {
  background: rgba(10, 8, 10, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border-accent);
  border-radius: 10px;
  padding: 6px 14px !important;
}

/* =============================================
   NAV PILL BUTTONS — scanner red
   ============================================= */
header.container-header .mod-menu > li::after,
header.container-header .mod-menu > li > a::after {
  display: none !important;
}

/* Base pill — light text on dark glass */
header.container-header .mod-menu > li.nav-item > a,
header.container-header .mod-menu > li.nav-item > span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  color: #ece6e8;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  background-color: transparent;
}

/* Hover — solid red pill with light text + red glow */
header.container-header .mod-menu > li.nav-item > a:hover,
header.container-header .mod-menu > li.nav-item > a:focus {
  color: #fff;
  text-shadow: none;
  text-decoration: none;
  background-color: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.6), 0 4px 16px -2px rgba(var(--accent-rgb), 0.55);
}

/* Active / current page — solid red pill always on */
header.container-header .mod-menu > li.nav-item.active > a,
header.container-header .mod-menu > li.nav-item.current > a,
header.container-header .mod-menu > li.nav-item.default.current > a {
  color: #fff;
  text-shadow: none;
  background-color: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.6);
}

/* Mobile hamburger toggle */
header.container-header .navbar-toggler {
  color: #ece6e8;
  border-color: rgba(255, 255, 255, 0.25);
}

/* =============================================
   LOGO / BANNER IMAGE TREATMENT
   Rounded corners + horizontal edge fade so the header banner blends in.
   ============================================= */
/* Frame the header banner as a deliberate "KITT viewscreen" — rounded, hairline
   red scanner border + a soft red glow. (A feather-mask works for ni's text
   banner but looks odd ghosting the grass/sky edges of a real photograph, so we
   frame instead of fade.) */
.navbar-brand .brand-logo img {
  border-radius: 12px;
  display: block;
  border: 1px solid var(--glass-border-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45),
              0 10px 34px -10px rgba(var(--accent-rgb), 0.40);
}

/* =============================================
   CONTENT TOP SPACING
   ============================================= */
.container-component > main {
  margin-top: 0 !important;
}

/* =============================================
   FORM CONTROLS — dark-glass inputs
   ============================================= */
.container-component input[type="text"],
.container-component input[type="email"],
.container-component input[type="password"],
.container-component input[type="search"],
.container-component input[type="url"],
.container-component input[type="tel"],
.container-component input[type="number"],
.container-component select,
.container-component textarea,
.container-component .form-control,
.container-component .form-select,
.t3-footer input.form-control,
.mod-login input.form-control,
#login-form input.form-control {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-strong);
  border-radius: 8px;
}
.container-component input::placeholder,
.container-component textarea::placeholder,
#login-form input::placeholder {
  color: var(--text-muted);
}
.container-component input:focus,
.container-component select:focus,
.container-component textarea:focus,
.container-component .form-control:focus,
.container-component .form-select:focus,
#login-form input:focus {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
  color: var(--text-strong);
  outline: none;
}
.container-component label,
.container-component legend {
  color: var(--text);
}
.container-component legend {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  border-color: var(--glass-border);
}

/* Buttons */
.container-component .btn-primary,
.container-component button[type="submit"].btn,
#login-form .btn-primary,
.btn-primary {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  font-weight: 600;
}
.container-component .btn-primary:hover,
.container-component button[type="submit"].btn:hover,
#login-form .btn-primary:hover,
.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.container-component .btn-secondary,
.container-component .btn-outline-primary,
.btn-secondary {
  background-color: var(--glass-bg-2);
  border-color: var(--glass-border);
  color: var(--text-strong);
}
.container-component .btn-secondary:hover,
.container-component .btn-outline-primary:hover,
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Input-group addons (login form user/lock icons) */
.input-group-text,
.input-group-addon {
  background-color: var(--glass-bg-2);
  border-color: var(--glass-border);
  color: var(--text);
}

/* Badges (footer stats counts) — red pill */
.badge.bg-secondary,
.badge.bg-primary {
  background-color: var(--accent-strong) !important;
  color: #fff;
}

/* Native <select> — offset glass + our own chevron */
.container-component select,
.container-component .form-select {
  background-color: var(--glass-bg-2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.container-component select.form-select,
.container-component select.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d6d2d6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}
.container-component select option,
.container-component select optgroup {
  background-color: #141216;
  color: var(--text);
}

/* =============================================
   PAGINATION — dark glass with red active page
   ============================================= */
.container-component .pagination .page-link,
.pagination .page-link {
  background-color: var(--glass-bg-2);
  border-color: var(--glass-border);
  color: var(--accent);
}
.container-component .pagination .page-link:hover,
.pagination .page-link:hover {
  background-color: rgba(var(--accent-rgb), 0.14);
  border-color: var(--glass-border-accent);
  color: var(--text-strong);
}
.container-component .pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}
.container-component .pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--glass-border);
  color: var(--text-muted);
}

/* =============================================
   ALERTS — dark tints that keep semantic color
   ============================================= */
.container-component .alert {
  background-color: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  color: var(--text);
}
.container-component .alert-info {
  background-color: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: #ffc7c7;
}
.container-component .alert-success {
  background-color: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  color: #a7f3c8;
}
.container-component .alert-warning {
  background-color: rgba(255, 180, 84, 0.12);
  border-color: rgba(255, 180, 84, 0.40);
  color: #ffd9a8;
}
.container-component .alert-danger {
  background-color: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fcc4c4;
}
.container-component .alert a {
  color: inherit;
  text-decoration: underline;
}

/* Joomla SYSTEM MESSAGES (<joomla-alert> custom element) — dark glass,
   semantic accent border (see ni/Carbon notes for the why). */
#system-message-container joomla-alert {
  background-color: var(--glass-bg-2) !important;
  border-color: var(--alert-accent-color, var(--glass-border)) !important;
  color: var(--text) !important;
}
#system-message-container joomla-alert .alert-heading,
#system-message-container joomla-alert .alert-message {
  color: var(--text-strong) !important;
}
#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close {
  color: var(--text-strong) !important;
  opacity: 0.8;
  padding: .6rem .8rem !important;
}

/* =============================================
   BOOTSTRAP LIGHT UTILITIES — catch-all
   ============================================= */
.container-component .bg-light,
.container-component .bg-white,
.bg-light {
  background-color: var(--glass-bg-2) !important;
  color: var(--text) !important;
}
.container-component .text-dark,
.container-component .text-black {
  color: var(--text) !important;
}
/* Cassiopeia's .text-muted is `color: var(--secondary-color) !important` — a
   dark gray that disappears on the dark card (e.g. the Yendif Video Share
   byline: .yendif-video-share-meta.text-muted → author / date / views). Repoint
   it to our readable muted with matching specificity + !important to win. */
.container-component .text-muted {
  color: var(--text-muted) !important;
}

/* =============================================
   TABLES — dark-glass treatment
   ============================================= */
.container-component table,
.container-component .table {
  color: var(--text);
  border-color: var(--glass-border);
  --table-bg: transparent;
  --bs-table-bg: transparent;
  --table-accent-bg: transparent;
  --bs-table-accent-bg: transparent;
  --table-color: var(--text);
  --bs-table-color: var(--text);
  --table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --table-striped-color: var(--text);
  --bs-table-striped-color: var(--text);
  --table-hover-bg: rgba(var(--accent-rgb), 0.08);
  --bs-table-hover-bg: rgba(var(--accent-rgb), 0.08);
  --table-hover-color: var(--text-strong);
  --bs-table-hover-color: var(--text-strong);
  --table-border-color: var(--glass-border);
  --bs-table-border-color: var(--glass-border);
}
.container-component th,
.container-component .table > thead th {
  color: var(--text-strong);
  border-bottom: 1px solid var(--glass-border-accent);
}
.container-component td,
.container-component .table td,
.container-component .table th {
  border-color: var(--glass-border);
}
.container-component table tbody td,
.container-component table tbody th {
  border-bottom: 1px solid var(--glass-border);
}
.container-component table tbody tr:hover > td,
.container-component table tbody tr:hover > th {
  background-color: rgba(var(--accent-rgb), 0.07);
}
/* Content-authored tables often set their own ridge borders inline; soften.
   Scope to the Cassiopeia article body wrapper (com-content-article__body),
   NOT .article-content — that class isn't in this DOM. */
.container-component .com-content-article__body table {
  border-color: var(--glass-border) !important;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
}
.container-component .com-content-article__body table td,
.container-component .com-content-article__body table th {
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
}
.container-component .com-content-article__body table td:first-child,
.container-component .com-content-article__body table th:first-child {
  width: 200px;
  min-width: 200px;
}

/* Code / preformatted — dashboard amber on dark */
.container-component code,
.container-component pre,
.container-component kbd {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--amber);
}

/* =============================================
   INTERACTIVE DASHBOARD MAP  ("The Build" showstopper)
   Pure CSS hotspots — NO JavaScript, so it survives the Joomla
   editor (no <script> to strip) and needs no module. Drop the
   markup into an article via Editor-None.
   Desktop: hover a dot. Mobile: tap it (:focus). Coordinates are
   percentages (inline left/top on each .hotspot) so the whole map
   scales with the photo. Tune positions via the inspect-and-paste loop.
   ============================================= */
.container-component .kitt-dashmap {
  position: relative;
  display: block;
  max-width: 900px;
  margin: 1.75rem auto;
  /* NOTE: overflow is VISIBLE (not hidden) so callouts can pop outside the
     frame without being clipped. The image rounds its own corners instead. */
  overflow: visible;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-accent);
  box-shadow: var(--shadow), 0 0 22px -6px rgba(var(--accent-rgb), 0.35);
}
.container-component .kitt-dashmap > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Hotspot dot — positioned by inline left/top % (centered on the point) */
.container-component .kitt-dashmap .hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #ff6b6b;
  background: rgba(var(--accent-rgb), 0.45);
  cursor: pointer;
  animation: kitt-hotspot-pulse 1.8s ease-in-out infinite;
  transition: background 0.18s ease, transform 0.18s ease;
}
/* Hotter pulse — wider blooming glow + a white-hot inner core so the dots
   read as obviously clickable. The spread radius (3rd value) makes it bloom. */
@keyframes kitt-hotspot-pulse {
  0%, 100% {
    box-shadow: 0 0 12px 2px rgba(var(--accent-rgb), 0.7),
                inset 0 0 6px rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 28px 7px rgba(var(--accent-rgb), 1),
                inset 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
.container-component .kitt-dashmap .hotspot:hover,
.container-component .kitt-dashmap .hotspot:focus {
  background: rgba(var(--accent-rgb), 0.7);
  transform: scale(1.12);
  outline: none;
}

/* Callout bubble — hidden until hover/focus */
.container-component .kitt-dashmap .hotspot .callout {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: max-content;
  max-width: 240px;
  padding: 0.6rem 0.8rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-accent);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.container-component .kitt-dashmap .hotspot .callout strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--accent);
}
.container-component .kitt-dashmap .hotspot .callout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--glass-border-accent);
}
.container-component .kitt-dashmap .hotspot:hover .callout,
.container-component .kitt-dashmap .hotspot:focus .callout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --- Edge-aware callout variants (add class to the .hotspot button) ---
   .below  → callout drops BELOW the dot (use for top-row dots)
   .left   → callout anchors to the dot's left edge, extends right (use near left edge)
   .right  → callout anchors to the dot's right edge, extends left (use near right edge) */

/* .below — flip under the dot, arrow points up */
.container-component .kitt-dashmap .hotspot.below .callout {
  bottom: auto;
  top: 150%;
  transform: translateX(-50%) translateY(-6px);
}
.container-component .kitt-dashmap .hotspot.below .callout::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--glass-border-accent);
}
.container-component .kitt-dashmap .hotspot.below:hover .callout,
.container-component .kitt-dashmap .hotspot.below:focus .callout {
  transform: translateX(-50%) translateY(0);
}

/* .left — anchor left, extend right; arrow near left end */
.container-component .kitt-dashmap .hotspot.left .callout {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(6px);
}
.container-component .kitt-dashmap .hotspot.left .callout::after {
  left: 10px;
  right: auto;
  transform: none;
}
.container-component .kitt-dashmap .hotspot.left:hover .callout,
.container-component .kitt-dashmap .hotspot.left:focus .callout {
  transform: translateX(0) translateY(0);
}

/* .right — anchor right, extend left; arrow near right end */
.container-component .kitt-dashmap .hotspot.right .callout {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(6px);
}
.container-component .kitt-dashmap .hotspot.right .callout::after {
  left: auto;
  right: 10px;
  transform: none;
}
.container-component .kitt-dashmap .hotspot.right:hover .callout,
.container-component .kitt-dashmap .hotspot.right:focus .callout {
  transform: translateX(0) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .container-component .kitt-dashmap .hotspot { animation: none; }
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  margin: 12px 0;
}
.breadcrumb > li,
.breadcrumb > .active,
.breadcrumb-item.active {
  color: var(--text-muted);
}
.breadcrumb a {
  color: var(--accent);
}

/* =============================================
   ARTICLE / CONTENT ITEM SPACING + INFO
   ============================================= */
.item-title     { margin-bottom: 9px; }
.item-content   { margin: 18px 0; }
.article-info,
.article-info.muted {
  color: var(--text-muted);
}
.article-info dd,
.article-info dt {
  color: var(--text-muted);
}
.article-info a {
  color: var(--accent);
}
/* Meta icons — Cassiopeia renders these as icomoon spans (.icon-user,
   .icon-folder-open, .icon-calendar, .icon-eye, .icon-fw), NOT .fa. Tint the
   whole set red so the Details block reads as one accented unit. */
.article-info [class^="icon-"],
.article-info [class*=" icon-"] {
  color: var(--accent);
}

.pull-right.item-image { margin: 0 0 18px 20px; }
.pull-left.item-image  { margin: 0 20px 18px 0; }

/* =============================================
   HORIZONTAL RULE
   ============================================= */
.container-component hr,
hr.divider-vertical {
  border: none;
  border-top: 1px solid var(--glass-border);
  opacity: 1;
}

/* =============================================
   SEARCH HIGHLIGHT
   ============================================= */
.search span.highlight {
  background-color: rgba(var(--accent-rgb), 0.22);
  color: var(--text-strong);
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
}

/* =============================================
   JOIMAGEGALLERY (the KITT photo galleries + Fancybox)
   The plugin writes INLINE styles on every tile: teal #1eccc9 backgrounds,
   teal borders, and a black hover overlay. Inline styles only yield to
   !important — retint the tiles to red glass and the hover sweep to scanner
   red so the gallery matches the Knight theme.
   ============================================= */
.joimagegallery .gallery-item {
  background-color: var(--glass-bg-2) !important;
  border: 1px solid var(--glass-border-accent) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* NOTE: thumbnail dimensions are controlled in the JO Image Gallery plugin
   (Appearance Settings → Image Width / Image Height), not here. */
.joimagegallery .gallery-item:hover {
  box-shadow: 0 0 0 1px var(--glass-border-accent),
              0 6px 20px -4px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}
/* Hover magnifier overlay — scanner-red wash instead of plain black */
.joimagegallery .gallery-overlay {
  background: rgba(var(--accent-rgb), 0.42) !important;
}
.joimagegallery .gallery-overlay i {
  color: #fff;
}
/* Fancybox lightbox chrome on dark */
.fancybox__container {
  --fancybox-bg: rgba(6, 6, 8, 0.92);
}
.fancybox__caption {
  color: var(--text);
}

/* =============================================
   FOOTER MODULES (login form, stats, latest updates)
   Cassiopeia renders these as plain modules; keep titles + dividers on theme.
   ============================================= */
.container-component .mod-stats .list-group-item,
.mod-stats .list-group-item,
.mod-articleslatest li {
  border-color: var(--glass-border);
  color: var(--text);
}
#login-form ul.unstyled a,
.mod-login a {
  color: var(--accent);
}

/* =============================================
   CASSIOPEIA FOOTER
   The default footer paints a bright blue→red gradient (driven by the template
   --hue) that clashes hard with the Knight theme. Kill it with a `background`
   SHORTHAND (resets the gradient image) + !important, then rebuild as a dark-
   glass strip with a red scanner hairline on top, muted text, scanner-red links.
   ============================================= */
footer.container-footer,
.container-footer,
.container-footer.full-width {
  background: rgba(10, 8, 10, 0.85) !important;
  border-top: 1px solid var(--glass-border-accent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
  box-shadow: none !important;
  text-align: center;
}
.container-footer,
.container-footer p,
.container-footer .footer,
.container-footer span {
  color: var(--text-muted);
}
/* Center the copyright: .grid-child is a flex container, so .mod-footer (the
   flex item) hugs the left and text-align alone does nothing visible. Center
   the flex item itself, then center its text. */
.container-footer .grid-child {
  justify-content: center;
}
.container-footer .mod-footer,
.container-footer .footer1,
.container-footer .footer2 {
  text-align: center;
}
.container-footer a {
  color: var(--accent);
}
.container-footer a:hover,
.container-footer a:focus {
  color: var(--accent-strong);
}

/* =============================================
   BACK-TO-TOP BUTTON
   ============================================= */
#back-top .icon-arrow-up,
.back-to-top .fa,
#back-to-top .btn {
  color: var(--accent);
}
#back-to-top .btn {
  background-color: var(--glass-bg-2);
  border-color: var(--glass-border-accent);
}

/* =============================================
   MOBILE RESPONSIVE
   ============================================= */
@media (max-width: 480px) {
  .item-info > span { display: block; }
  .blog-item .pull-right.item-image { margin: 0 0 18px 0; }
  .blog-item .pull-left.item-image  { margin: 0 0 18px 0; float: none; }
}
@media (max-width: 768px) {
  body.site { padding: 10px; }
  .container-component { padding: 14px; }
}

/* =============================================
   SIGPLUS gallery fix
   ============================================= */
.container-component #sigplus_1001 a.sigplus-image {
  display: block !important;
  line-height: 0 !important;
}
.container-component #sigplus_1001 a.sigplus-image > img {
  border-radius: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  vertical-align: top !important;
}