/*
Theme Name:   IMSIS
Theme URI:    https://msimaging.org
Description:  Child theme of Hello Elementor for the International Mass Spectrometry Imaging Society network (global and regional sites). Holds the brand tokens, self-hosted fonts and logo assets. Layouts live in Elementor templates.
Author:       IMSIS
Template:     hello-elementor
Version:      1.1.0
Requires at least: 6.5
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  imsis
*/

/* ---------- Brand tokens ---------- */
:root {
	/* Colours (WCAG notes: turquoise is never used for text on white; steel on white = 4.7:1) */
	--imsis-navy: #112a4c;          /* brand dark: header, hero, H1 */
	--imsis-navy-deep: #0d2240;     /* footer */
	--imsis-navy-strip: #0a1a33;    /* top network strip */
	--imsis-steel: #137bab;         /* primary action, links */
	--imsis-steel-hover: #2459a1;   /* hover */
	--imsis-turquoise: #6cd3c2;     /* accent on navy only */
	--imsis-teal-text: #407e74;     /* small labels on white */
	--imsis-body: #2a394c;          /* paragraph text */
	--imsis-on-navy: #dbe7ec;       /* body text on navy */
	--imsis-tint: #f1f8f7;          /* alternating section background */
	--imsis-tag: #dff2ef;           /* tag/chip background */
	--imsis-border: #dbe7ec;        /* card borders */
	--imsis-white: #ffffff;

	/* Type */
	--imsis-font-heading: 'Quicksand', system-ui, sans-serif;
	--imsis-font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	--imsis-font-script: 'Courgette', cursive; /* region names and one short hero line only */

	/* Shape and rhythm */
	--imsis-radius: 8px;
	--imsis-radius-lg: 12px;
	--imsis-container: 1200px;
	--imsis-header-container: 1320px;
	--imsis-section-space: 88px;
}

@media (max-width: 767px) {
	:root { --imsis-section-space: 64px; }
}

/* ---------- Base (Elementor's Site Settings override these where set) ---------- */
body {
	font-family: var(--imsis-font-body);
	color: var(--imsis-body);
	font-size: 18px;
	line-height: 1.6;
	background: var(--imsis-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--imsis-font-heading);
	font-weight: 700;
	color: var(--imsis-navy);
	line-height: 1.2;
}

a { color: var(--imsis-steel); }
a:hover, a:focus { color: var(--imsis-steel-hover); }

/* Visible keyboard focus everywhere (accessibility) */
:focus-visible {
	outline: 3px solid var(--imsis-turquoise);
	outline-offset: 2px;
}

/* ---------- Utility classes for Elementor (add under Advanced > CSS Classes) ---------- */

/* Courgette accent, e.g. the region name under a logo */
.imsis-script,
.imsis-script .elementor-heading-title {
	font-family: var(--imsis-font-script) !important;
	font-weight: 400 !important;
	color: var(--imsis-turquoise);
}

/* Small uppercase label above a heading */
.imsis-eyebrow,
.imsis-eyebrow .elementor-heading-title {
	font-family: var(--imsis-font-body) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Mass-spectrum line pattern along the bottom of a navy section */
.imsis-spectrum-navy {
	background-image: url(assets/img/spectrum-on-navy.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto 190px;
}
.imsis-spectrum-light {
	background-image: url(assets/img/spectrum-on-light.svg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto 160px;
}

/* Small 9-peak marker above section headings */
.imsis-peaks::before {
	content: "";
	display: block;
	width: 72px;
	height: 36px;
	margin-bottom: 12px;
	background: url(assets/img/peaks-divider.svg) no-repeat left bottom / contain;
}

/* Card used for events, news, committee members */
.imsis-card {
	border: 1px solid var(--imsis-border);
	border-radius: var(--imsis-radius);
	background: var(--imsis-white);
}

/* Tag / chip */
.imsis-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--imsis-tag);
	color: var(--imsis-navy);
	font-size: 13px;
	font-weight: 700;
}

/* Lock icon helper for members-only menu items (add class to the menu item) */
.imsis-locked > a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cd3c2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Event cards ([events_list] via events-manager/formats) ---------- */
.imsis-events-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1024px) { .imsis-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .imsis-events-grid { grid-template-columns: 1fr; } }

.imsis-event-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}
.imsis-event-date {
	font-family: var(--imsis-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--imsis-steel);
}
.imsis-event-title {
	margin: 0;
	font-size: 21px;
	line-height: 1.3;
}
.imsis-event-title a { color: var(--imsis-navy); text-decoration: none; }
.imsis-event-title a:hover { color: var(--imsis-steel); }
.imsis-event-place { margin: 0; font-size: 16px; }
.imsis-event-more {
	margin-top: auto;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
.imsis-no-events {
	padding: 24px;
	border: 1px dashed var(--imsis-border);
	border-radius: var(--imsis-radius);
	color: var(--imsis-body);
}

/* ---------- Header details ---------- */
/* Keep the Join button and menu on one line on desktop */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item { white-space: nowrap; }
/* Lock icon also inside the mobile dropdown */
.elementor-nav-menu--dropdown .imsis-locked > a::before { margin-right: 8px; }