/* =============================================
   MONOCHROME OVERRIDE (Black & White only)
   Place this file LAST after all other template CSS.
   ============================================= */

/* Base palette */
:root {
  --mono-bg: #ffffff;
  --mono-text: #000000;
  --mono-muted: #111111;
  --mono-border: #cfcfcf;
  --mono-soft: #f2f2f2;
}

/* Reset colored text/backgrounds */
html, body {
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
  filter: none !important;
}

/* Remove colored backgrounds and gradients */
* {
  background-image: none !important;
  box-shadow: none !important;
}

/* Links */
a, a:visited {
  color: var(--mono-text) !important;
  text-decoration: underline;
}
a:hover, a:focus {
  color: var(--mono-muted) !important;
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--mono-text) !important;
}

/* Buttons */
.btn, button, input[type=button], input[type=submit], input.button {
  color: var(--mono-text) !important;
  background: var(--mono-bg) !important;
  border: 1px solid var(--mono-text) !important;
  text-shadow: none !important;
}
.btn:hover, button:hover, input[type=button]:hover, input[type=submit]:hover, input.button:hover {
  background: var(--mono-text) !important;
  color: var(--mono-bg) !important;
}

/* Forms */
input, select, textarea, .uneditable-input {
  color: var(--mono-text) !important;
  background: var(--mono-bg) !important;
  border: 1px solid var(--mono-border) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .uneditable-input:focus {
  outline: 2px solid var(--mono-text) !important;
  border-color: var(--mono-text) !important;
  box-shadow: none !important;
}

/* Tables */
table, .table {
  background: transparent !important;
  border-color: var(--mono-border) !important;
}
.table th, .table td,
.category-list table td, .category-list table th,
.tag-category table td {
  color: var(--mono-text) !important;
  border-color: var(--mono-border) !important;
}

/* Navigation / Toolbar */
#navigation, .navigation, #toolbar, #toolbar .menu a,
#toolbar .menu .nav-header, #toolbar .menu .separator {
  background: var(--mono-bg) !important;
  color: var(--mono-text) !important;
  border-color: var(--mono-border) !important;
}

/* Page headers and module headings */
.page-header h1, .item-page .page-header h2, .contact h1,
.columns h3.page-header, .upper h3.page-header, .user h3.page-header,
.inside h3.page-header, .bottom h3.page-header, .footer h3.page-header {
  color: var(--mono-text) !important;
  border-bottom: 3px solid var(--mono-border) !important;
  background: transparent !important;
}

/* Module menus */
.columns .menu a, .columns .nav-header, .columns .separator,
.user .menu a, .user .menu .nav-header, .user .menu .separator,
.bottom .menu a, .bottom .menu .nav-header, .bottom .menu .separator,
.footer .menu a, .footer .menu .nav-header, .footer .menu .separator {
  color: var(--mono-text) !important;
  border-color: var(--mono-border) !important;
  background: transparent !important;
}

/* Breadcrumbs, pagination, readmore buttons */
.breadcrumb,
.pagination .pagenav,
p.readmore a, a.readmore {
  color: var(--mono-text) !important;
  background: var(--mono-bg) !important;
  border: 1px solid var(--mono-border) !important;
  text-decoration: none !important;
}

/* Alerts / Popovers / Tooltips (neutral) */
.alert,
.popover,
.tooltip .tooltip-inner {
  color: var(--mono-text) !important;
  background: var(--mono-soft) !important;
  border: 1px solid var(--mono-border) !important;
}
.tooltip .tooltip-arrow,
.popover .arrow,
.popover .arrow:after {
  border-color: transparent !important;
}

/* Footer areas */
#footer, #copyright {
  background: var(--mono-soft) !important;
  color: var(--mono-text) !important;
  border-top: 1px solid var(--mono-border) !important;
}

/* Images & media to ensure full grayscale */
img, video, iframe, svg, .thumbnail, .item-image img {
  filter: grayscale(100%) contrast(1) !important;
}
/* If you need grayscale ONLY for images and not icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
  color: var(--mono-text) !important;
}

/* Thumbnails / wells / panels */
.thumbnail, .well, .moduletable {
  background: var(--mono-soft) !important;
  border: 1px solid var(--mono-border) !important;
}

/* Remove legacy gif background sprites defined in template/component CSS */
#toolbar .menu li.active a, #toolbar .menu li.active .nav-header, #toolbar .menu li.active .separator,
#topleft .menu li, #topright .menu li,
p.readmore a, .pagination .pagenav,
.columns .menu a, .columns .nav-header, .columns .separator {
  background: none !important;
}

/* Ensure IcoMoon icons stay visible */
[class^="icon-"], [class*=" icon-"] {
  color: var(--mono-text) !important;
}

/* Joomla collapses */
.collapse.in { background: transparent !important; }

/* Optional: Desaturate inline svgs or backgrounds if any slipped through */
svg * { fill: var(--mono-text) !important; stroke: var(--mono-text) !important; }


/* --- v2 header/nav fixes --- */

/* --- Strong header/nav overrides --- */
body #header,
body #navigation,
body #toolbar {
  background: #ffffff !important;
  border: none !important;
  background-image: none !important;
}

/* Kill specific blue variants defined in template.css */
#navigation, #toolbar {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#navigation *, #toolbar * {
  background-image: none !important;
  background: transparent !important;
  border-color: #cfcfcf !important;
}

/* Remove sprite toolbar-blue.gif and header-blue.gif completely */
#toolbar .menu li.active a,
#toolbar .menu li.active .nav-header,
#toolbar .menu li.active .separator,
#header {
  background-image: none !important;
}

/* Thin gray separators to replace blue borders */
#toolbar .menu li, #navigation {
  border-left: 1px solid #cfcfcf !important;
}

/* Tabs with pink highlight observed: normalize */
.nav-tabs > li > a,
ul.tabs li a,
ul.tabbernav li a {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #cfcfcf !important;
}
.nav-tabs > li.active > a,
ul.tabs li.active a,
ul.tabbernav li.tabberactive a {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}