/* =========================================================
   JOOMLA 5.4.3 - THE ULTRA "ONE-CLICK" VARIABLE VERSION
   ========================================================= */

:root {
  --cassiopeia-color-primary: black;
  
  /* --- THE ONLY THREE LINES YOU EVER NEED TO EDIT --- */
  --main-orange: #F04A00;    /* Your signature brand color */
  /* --global-hover: #E52B50;      /* Your global hover color */
  --global-hover: red;      /* Your global hover color */
  --site-bg-image: url(/images/pattern/bg-lochmaske-2.gif);
  /* -------------------------------------------------- */
  
  --cassiopeia-color-link: var(--main-orange);
  --template-link-color: var(--main-orange);
  --template-link-color-hover: var(--global-hover);
}

/* Global Link Color (Events, Articles, etc.) */
a {
  color: var(--main-orange) !important;
  text-decoration: none;
}

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

body {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background-image: var(--site-bg-image); /* Applied Variable */
  background-position: left top;
  background-repeat: repeat;
  background-attachment: fixed;
  color: #eeeeee;
}

/* Headings */
h1, h2, h3 { font-family: 'Orbitron', sans-serif; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.6; }
h2 { font-size: 20px; font-weight: 500; line-height: 1.8; }
h2.logotypo { font-size: 15px; font-weight: 400; line-height: 1.6; }
h3 { font-size: 15px; font-weight: 400; }
h5 { color: var(--main-orange); font-family: Arial, Helvetica, sans-serif; }
h6 { color: var(--main-orange); font-family: Arial, Helvetica, sans-serif; }

.logo { height: 160px; }

/* =================== MENU (STRICT UNIFORM) ================== */

.container-header {
  background-image: var(--site-bg-image); /* Applied Variable */
  background-position: left top;
  background-repeat: repeat;
  background-attachment: fixed;
}

/* Target Links AND the "Archives" Button (Grey by default) */
.container-header .mod-menu a,
.container-header .navigation a,
.container-header .nav-link,
.container-header .dropdown-toggle,
.container-header .mod-menu__heading,
.container-header .mm-toggler,
.container-header .nav-link.active,
.container-header .nav-link.show {
  color: grey !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Icons & Caret Arrows (Grey by default) */
.container-header .nav-link::after,
.container-header .dropdown-toggle::after,
.container-header .mod-menu [class^="fa"], 
.container-header .mod-menu [class*=" fa-"],
.container-header .mod-menu__heading span {
  color: grey !important;
}

/* GLOBAL MENU HOVER (Turns Gold/Global Hover) */
.container-header .nav-link:hover,
.container-header .mod-menu a:hover,
.container-header .mod-menu__heading:hover,
.container-header .nav-link:hover::after,
.container-header .mod-menu__heading:hover span,
.container-header .mod-menu a:hover span {
  color: var(--global-hover) !important;
}

/* Dropdown Menu Popup (Internal sub-items stay Orange) */
.metismenu.mod-menu .mm-collapse { background: black; }
.metismenu.mod-menu .mm-collapse .metismenu-item a { color: var(--main-orange) !important; }

/* =================== JEM EVENTS FIX ================== */

.jem-mod-date, .jem-mod-time, .jem-event-date, div[class*="jem"] { 
  color: #cccccc !important; 
}

.jem-icon, .icon-calendar, [class^="icon-"], [class*=" icon-"] {
  color: var(--main-orange) !important; 
  display: inline-block !important;
  margin-right: 5px;
}

/* =================== PAGINATION FIX (MOBILE SECURE) ================== */

.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}

.pagination a, .pagination .page-link, .page-navigation a {
  color: #aaaaaa !important; 
  background-color: transparent !important;
  border: 1px solid #333 !important;
  margin: 2px;
}

/* GLOBAL PAGINATION HOVER */
.pagination a:hover, .pagination .page-link:hover {
  color: var(--global-hover) !important;
  background-color: #222 !important;
}

/* ACTIVE PAGE (Uses Your Main Orange) */
.pagination .active .page-link, .pagination .active span {
  color: white !important;
  background-color: var(--main-orange) !important;
  border-color: var(--main-orange) !important;
}

/* =================== UTILS ================== */

.back-to-top-link.visible {
  position: fixed;
  text-align: center;
  bottom: 30px;
  right: 160px;
  color: var(--main-orange);
  background-color: black;
  border: 1px solid var(--main-orange);
  border-radius: 50%;
  z-index: 999;
}

.back-to-top-link.visible:hover {
  color: var(--global-hover) !important;
  border-color: var(--global-hover) !important;
}

dd {
  display: block;
  margin-left: 10px;
  color: lightgrey;
  background-color: black;
  background-image: var(--site-bg-image); /* Applied Variable */
  background-position: left top;
  background-repeat: repeat;
  background-attachment: fixed;
}

.card-header {
  background-color: rgba(255,255,255,.05);
  border-bottom-color: rgba(233,236,239,.125);
  color: #aaaaaa;
}