/*
 * eeme.gr — Cassiopeia child, Stage 4 (docs/joomla-upgrade-j_eeme.md §7η).
 *
 * Carries the branding of protostar_eeme onto Cassiopeia without touching its index.php:
 * template colour #0088cc (links, active menu pill), the light-cyan page background with the
 * ISME-coloured image (templates/protostar_eeme/images_init/main_bg_isme_color.png), the white
 * centred panel (#main_container, 40px padding), the 200px logo, Helvetica 15px body text.
 *
 * Cassiopeia's index.php writes its own `:root { --hue … --template-link-color }` as an INLINE
 * style, which comes after this file — so the overrides here sit on `body`, not on `:root`:
 * a custom property set on body wins over the inherited :root value for everything inside it.
 *
 * Transitional: replaced by the Stage 14 design (§11α). Keep it small.
 */

/* ---------- tokens ---------- */

body {
	--eeme-brand: #0088cc;
	--eeme-brand-dark: #005580;
	--eeme-text: #333333;
	--eeme-page-bg: #d5f1f1;
	--eeme-panel-max: 1200px;
	--eeme-panel-pad: 40px;

	/* Only the properties Cassiopeia 4.4 actually reads: --cassiopeia-color-link has no var()
	   reference in its CSS at all, and --template-link-color is read by Atum (administrator). */
	--link-color: var(--eeme-brand);
	--link-color-rgb: 0, 136, 204;
	--cassiopeia-color-hover: var(--eeme-brand-dark);
	--link-hover-color: var(--eeme-brand-dark);
	--link-hover-color-rgb: 0, 85, 128;
	/* .btn-primary, .nav-tabs, pagination, back-to-top — the J3 template painted all of these #0088cc. */
	--cassiopeia-color-primary: var(--eeme-brand);
	--primary: var(--eeme-brand);
	--primary-rgb: 0, 136, 204;
}

.pagination {
	--pagination-active-bg: var(--eeme-brand);
	--pagination-active-border-color: var(--eeme-brand);
}

/* ---------- page ---------- */

/* The 15px base of protostar_eeme, as a percentage of whatever the reader set in the browser
   (16px → 15px by default): a px value here would override that setting outright. */
html {
	font-size: 93.75%;
}

body.site {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.35;
	color: var(--eeme-text);
	background: var(--eeme-page-bg) url(../images/main_bg_isme_color.png) no-repeat 0 0;
}

/* The white panel of protostar_eeme: header, grid and footer share one centred column. */
.container-header,
.site-grid,
.container-footer {
	width: 100%;
	max-width: var(--eeme-panel-max);
	margin-left: auto;
	margin-right: auto;
	background: #fff;
}

/* Cassiopeia pins the footer to the viewport bottom (body min-height 100vh, site-grid margin-bottom
   auto); on a short page that opens a cyan gap inside the panel. Push the space below the footer. */
.site-grid {
	margin-bottom: 0;
}

.container-footer {
	margin-bottom: auto;
}

.container-header {
	background-image: none;
	box-shadow: none;
	padding: var(--eeme-panel-pad) var(--eeme-panel-pad) 0;
}

.site-grid {
	padding: 0 var(--eeme-panel-pad);
}

.container-footer {
	margin-top: 0;
	padding: 0 var(--eeme-panel-pad) var(--eeme-panel-pad);
}

/* ---------- header ---------- */

.container-header .grid-child {
	padding-left: 0;
	padding-right: 0;
}

/* protostar_eeme header row: logo left, the ISME/social block right, the menu row under both.
   Cassiopeia stacks topbar → brand → nav; a grid on the header puts them side by side instead. */
@media (width >= 992px) {
	.container-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 2em;
		align-items: start;
	}

	.container-header > .container-topbar {
		grid-column: 2;
		grid-row: 1;
	}

	/* The brand is the only .grid-child of the header in the logo row; below-top, if a module is
	   ever published there, gets its own row instead of landing on top of the logo. */
	.container-header > .grid-child:not(.container-nav):not(.container-below-top) {
		grid-column: 1;
		grid-row: 1;
	}

	.container-header > .container-below-top {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.container-header > .container-nav {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* ISME partner logo, social icons, conference link (modules 60/161, protostar position-0). */
.container-topbar {
	display: flex;
	justify-content: flex-end;
	color: var(--eeme-text);
	padding: 0;
}

.container-topbar a:not(.btn) {
	color: var(--link-color);
}

.container-topbar a:not(.btn):hover,
.container-topbar a:not(.btn):focus {
	color: var(--link-hover-color);
}

.container-topbar img {
	max-width: 200px;
}

/* One compact column, as the block sat beside the logo in protostar_eeme (brand-secondary). */
.container-topbar .mod-custom {
	max-width: 280px;
}

.container-header .navbar-brand img {
	max-height: 200px;
}

/* Main menu: nav-pills of protostar on a white header, active item in the brand colour. */
.container-header .container-nav {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 1em;
	padding: .35em 0;
}

/* Modules 1/125 use Cassiopeia's collapse-metismenu layout (set by the `positions` step). Ten
   level-1 items: let the row wrap and tighten the item padding Cassiopeia sizes for four or five. */
.container-header .mod-menu {
	color: var(--eeme-brand);
}

.container-header .metismenu.menu-horizontal {
	flex-wrap: wrap;
}

.container-header .metismenu.mod-menu .metismenu-item {
	padding: .3em .6em;
	font-size: 1rem;
}

.container-header .metismenu.mod-menu .metismenu-item.level-1 {
	border-radius: 5px;
}

.container-header .metismenu.mod-menu .metismenu-item.level-1.active {
	color: #fff;
	background: var(--eeme-brand);
}

.container-header .metismenu.mod-menu .metismenu-item.level-1:not(.active):hover {
	background: #eee;
}

.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item.active > a,
.container-header .metismenu.mod-menu .metismenu-item.active > button {
	text-decoration: none;
}

.container-header .metismenu > li > a:after,
.container-header .metismenu > li > button:before,
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
	background: none;
}

/* Dropdown panel */
.container-header .metismenu.mod-menu .metismenu-item > ul {
	background: #fff;
	color: var(--eeme-text);
	font-size: 14px;
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item {
	color: var(--eeme-brand);
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item.active,
.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item:hover {
	background: #eee;
}

.container-header .navbar-toggler {
	color: var(--eeme-text);
	border-color: #ccc;
}

/* Search (mod_finder 163) sits on the right of the menu row. */
.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
	color: var(--eeme-text);
}

.container-header .container-search {
	margin-top: 0;
	align-self: center;
}

/* ---------- banner row: language switcher + council buttons (modules 126/137) ---------- */

.container-banner {
	margin-bottom: 1rem;
}

.container-banner .mod-languages {
	text-align: right;
}

.container-banner .mod-languages__list {
	display: flex;
	justify-content: flex-end;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Module 125 (en) still carries the Bootstrap 2 class_sfx "nav nav-tabs": no tab border here. */
.container-header .metismenu.nav-tabs {
	border-bottom: 0;
}

.container-header .metismenu.nav-tabs > li {
	margin-bottom: 0;
}

.container-header .container-search {
	max-width: 100%;
}

/* Council menu (module 137, tag_id gw_council_buttons): inline button group, as custom.js did. */
#gw_council_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

#gw_council_buttons > li > a {
	display: inline-block;
	padding: .5em 1em;
	color: #fff;
	background: #5bb75b;
	border: 1px solid #51a351;
	border-radius: 5px;
	text-decoration: none;
}

#gw_council_buttons > li > a:hover,
#gw_council_buttons > li > a:focus {
	background: #51a351;
}

/* ---------- content ---------- */

.com-content-article p img,
.blog-featured p img,
.blog p img {
	margin: 10px;
}

/* main-bottom / bottom-* modules render through the card chrome (class "<position> card");
   keep the protostar "well" look. */
.main-bottom.card,
.bottom-a.card,
.bottom-b.card {
	border: 1px solid #e3e3e3;
	background: #f5f5f5;
}

/* Bootstrap 2 `ul.inline` of the share buttons (module 136, lock/html_social_media_bottom.php). */
ul.inline {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- footer ---------- */

.container-footer {
	color: var(--eeme-text);
	background-image: none;
	border-top: 1px solid #e5e5e5;
}

.container-footer .grid-child {
	padding: 1em 0 0;
}

.container-footer a:not(.btn) {
	color: var(--link-color);
}

.container-footer a:not(.btn):hover,
.container-footer a:not(.btn):focus {
	color: var(--link-hover-color);
}

.back-to-top-link {
	color: var(--eeme-brand);
	border-color: var(--eeme-brand);
}

/* ---------- Font Awesome 4 names still used by site content ---------- */
/*
 * The J3 template loaded Font Awesome 4.4 from a CDN; Cassiopeia ships Font Awesome without the
 * v4 shims — 5.15 on J4, 6.7 on J5 (and J6). Only the names the site actually uses are aliased: the
 * share buttons of module 136 (lock/html_social_media_bottom.php) and the council menu icons of user.js.
 * The brands family is named after the major, so both are listed: J5+ matches the first, J4 the second.
 */
.fa.fa-facebook,
.fa.fa-twitter,
.fa.fa-pinterest,
.fa.fa-linkedin {
	font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands";
	font-weight: 400;
}

.fa.fa-envelope-o,
.fa.fa-newspaper-o {
	font-weight: 400;
}

.fa-envelope-o:before {
	content: "\f0e0";
}

.fa-newspaper-o:before {
	content: "\f1ea";
}

/* protostar_eeme/custom.css */
.text-bold {
	font-weight: bold;
}

@media print {
	.no-print,
	.no-print * {
		display: none !important;
	}
}

/* ---------- narrow screens ---------- */

@media (width <= 991.98px) {
	body.site {
		--eeme-panel-pad: 16px;
	}

	.container-topbar {
		justify-content: flex-start;
	}
}