/* Trasix Helix-style child of Cassiopeia.
   Recreates the former Helix Ultimate look using the colour preset that was
   actually active on the old site (Preset 2): red #D81B42 for links and menu,
   text #252525, topbar #333, footer #171717. */

:root {
	--trasix-red: #d81b42;
	--cassiopeia-color-primary: #d81b42;
	--cassiopeia-color-link: #d81b42;
	--cassiopeia-color-hover: #d81b42;
	--trasix-text: #252525;
	--trasix-topbar-bg: #333333;
	--trasix-topbar-text: #aaaaaa;
	--trasix-footer-bg: #171717;
	--trasix-footer-link: #a2a2a2;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	color: var(--trasix-text);
	background-color: #ffffff;
}

a { color: var(--trasix-red); }
a:hover, a:focus { color: var(--trasix-red); }

/* Thin dark strip above the header (the old Helix top bar showed even when empty) */
body::before {
	content: "";
	display: block;
	height: 12px;
	background-color: var(--trasix-topbar-bg);
}

/* Top bar */
.container-topbar {
	background-color: var(--trasix-topbar-bg);
	background-image: none;
	color: var(--trasix-topbar-text);
}
.container-topbar a { color: var(--trasix-topbar-text); }
.container-topbar a:hover { color: #ffffff; }

/* Header: white, 60px, sticky */
.container-header {
	background-color: #ffffff;
	background-image: none;
	color: var(--trasix-text);
	min-height: 60px;
	padding-top: 0;
	padding-bottom: 0;
	position: sticky;
	top: 0;
	z-index: 1030;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.container-header .navbar-brand a,
.container-header .site-description { color: var(--trasix-text); }
.container-header .brand-logo img { height: 36px; width: auto; }

/* Main menu */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > span,
.container-header .metismenu.mod-menu .mod-menu__heading {
	color: var(--trasix-red);
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > button,
.container-header .metismenu.mod-menu > li.active > a {
	color: var(--trasix-red);
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a { border-bottom-color: var(--trasix-red); }

/* Dropdowns */
.container-header .mod-menu ul.mod-menu__sub,
.container-header .metismenu.mod-menu .mm-collapse {
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.container-header .mod-menu ul.mod-menu__sub a,
.container-header .metismenu.mod-menu .mm-collapse a { color: var(--trasix-red); }
.container-header .mod-menu ul.mod-menu__sub a:hover,
.container-header .mod-menu ul.mod-menu__sub .active > a,
.container-header .metismenu.mod-menu .mm-collapse a:hover { color: var(--trasix-red); }

/* Mobile menu toggle */
.container-header .navbar-toggler { color: var(--trasix-text); border-color: rgba(0, 0, 0, .25); }

/* Search */
.container-header .container-search .form-control { background-color: #f5f6f8; border-color: #dcdfe4; }

/* Article images (from the old Helix custom CSS) */
.com-content-article__body img,
.com-content-article img.item-image,
.article-details img {
	max-width: 700px;
	height: auto;
	display: block;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	object-fit: cover;
}
@media (max-width: 767.98px) {
	.com-content-article__body img { max-width: 100%; }
}

/* Footer */
.container-footer {
	background-color: var(--trasix-footer-bg);
	background-image: none;
	color: #ffffff;
}
.container-footer a { color: var(--trasix-footer-link); }
.container-footer a:hover { color: #ffffff; }
.container-footer .trasix-copyright { text-align: center; padding: .75rem 0; font-size: .9rem; }

/* Back to top button */
.back-to-top-link { background-color: var(--trasix-red); }


/* Compact header: logo and menu on ONE row, no extra whitespace */
.container-header {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	min-height: 0;
	padding: 0 max(1rem, calc((100% - 1140px) / 2)) !important;
}
.container-header > .grid-child,
.container-header .grid-child {
	padding: .4rem 0 !important;
	margin: 0 !important;
	width: auto;
	flex: 0 1 auto;
}
.container-header .container-nav { margin-inline-start: auto; justify-content: flex-end; }
.container-header .navbar-brand { margin: 0; }
.container-header .mod-menu { margin: 0; }
.container-header .mod-menu > li > a { padding-top: .5rem; padding-bottom: .5rem; }

/* Footer always last on the page (it is appended after the grid by user.js) */
body > .container-footer { width: 100%; clear: both; }