/* ==========================================================================
   SSB+RM design layer for Divi 5
   Concept: "scaffold". A biomaterial scaffold is a porous structure that
   cells grow into; the hero carries that porous pattern, everything else
   stays calm, white and legible so events, jobs and sponsors read fast.
   Brand colours come from the Customizer (inline :root vars).
   ========================================================================== */

/* ---------- Font (self-hosted, put the woff2 in /fonts) ---------- */
@font-face {
	font-family: "Instrument Sans";
	src: url("../../fonts/InstrumentSans-Variable.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	/* From the logo: "SSB RM" blue, Swiss-cross red, black text. Overridden by the Customizer. */
	--ssbrm-primary: #5f97ce;
	--ssbrm-accent:  #da3f05;
	--ssbrm-ink:     #000000;

	/* The logo blue is 3.1:1 on white, too light for text (needs 4.5:1).
	   It stays for shapes and pattern; text, links and the hero use a deeper shade of it. */
	--ssbrm-primary-strong: color-mix(in srgb, var(--ssbrm-primary) 65%, #000);  /* ≈ #3e6286, 6.4:1 */
	--ssbrm-accent-strong:  color-mix(in srgb, var(--ssbrm-accent) 88%, #000);   /* ≈ #c03804, 5.5:1 */

	--ssbrm-paper:   #ffffff;
	--ssbrm-mist:    color-mix(in srgb, var(--ssbrm-primary) 9%, #fff);
	--ssbrm-line:    color-mix(in srgb, var(--ssbrm-primary) 22%, #fff);
	--ssbrm-muted:   color-mix(in srgb, var(--ssbrm-ink) 64%, #fff);        /* ≈ #5c5c5c, 6.7:1 */
	--ssbrm-deep:    color-mix(in srgb, var(--ssbrm-primary) 42%, #000);
	--ssbrm-accent-tint: color-mix(in srgb, var(--ssbrm-accent) 10%, #fff);

	--ssbrm-font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	/* The logo sets the society name in an italic serif; we echo it for ledes and the four names. */
	--ssbrm-serif: Georgia, "Times New Roman", Times, serif;

	/* Type scale (perfect fourth, fluid at the top) */
	--ssbrm-step--1: 0.875rem;
	--ssbrm-step-0:  1.0625rem;
	--ssbrm-step-1:  1.3125rem;
	--ssbrm-step-2:  clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	--ssbrm-step-3:  clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
	--ssbrm-step-4:  clamp(2.25rem, 1.5rem + 3.4vw, 4rem);

	--ssbrm-radius-s: 4px;
	--ssbrm-radius-m: 10px;
	--ssbrm-max: 1200px;
}

/* ---------- Base ---------- */
body {
	font-family: var(--ssbrm-font);
	font-size: var(--ssbrm-step-0);
	line-height: 1.6;
	color: var(--ssbrm-ink);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ssbrm-font);
	color: var(--ssbrm-ink);
	line-height: 1.15;
	letter-spacing: -0.012em;
	font-weight: 600;
	text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--ssbrm-primary-strong); text-underline-offset: 0.18em; }
a:hover { color: var(--ssbrm-deep); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--ssbrm-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Buttons ---------- */
.ssbrm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.4em;
	border-radius: var(--ssbrm-radius-s);
	border: 2px solid transparent;
	font-weight: 600;
	font-size: var(--ssbrm-step-0);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.ssbrm-btn--light   { background: #fff; color: var(--ssbrm-primary-strong); }
.ssbrm-btn--light:hover { background: var(--ssbrm-accent-strong); color: #fff; }
.ssbrm-btn--ghost   { border-color: rgb(255 255 255 / .55); color: #fff; }
.ssbrm-btn--ghost:hover { border-color: #fff; background: rgb(255 255 255 / .1); color: #fff; }
.ssbrm-btn--outline { border-color: var(--ssbrm-primary-strong); color: var(--ssbrm-primary-strong); }
.ssbrm-btn--outline:hover { background: var(--ssbrm-primary-strong); color: #fff; }

/* ---------- Hero: the annual meeting ---------- */
.ssbrm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ssbrm-primary-strong);
	color: #fff;
	padding: clamp(3.5rem, 8vw, 7rem) 1.5rem;
}
/* Porous scaffold pattern, densest at the right edge, gone behind the text */
.ssbrm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%235f97ce' stroke-width='1.5'%3E%3Ccircle cx='24' cy='28' r='18'/%3E%3Ccircle cx='86' cy='18' r='11'/%3E%3Ccircle cx='132' cy='44' r='22'/%3E%3Ccircle cx='58' cy='78' r='26'/%3E%3Ccircle cx='118' cy='106' r='14'/%3E%3Ccircle cx='24' cy='130' r='15'/%3E%3Ccircle cx='80' cy='140' r='12'/%3E%3Ccircle cx='146' cy='146' r='9'/%3E%3Ccircle cx='100' cy='70' r='5'/%3E%3Ccircle cx='10' cy='80' r='6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 160px 160px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
	        mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
/* One accent stroke along the bottom edge ties the hero to the second logo colour */
.ssbrm-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 6px;
	background: var(--ssbrm-accent);
}
.ssbrm-hero__inner {
	max-width: var(--ssbrm-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 981px) {
	.ssbrm-hero__inner:has(.ssbrm-hero__media) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.ssbrm-hero__when {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: var(--ssbrm-step-1);
	font-weight: 500;
	color: #fff;
}
.ssbrm-hero__when time { font-weight: 700; }
.ssbrm-hero__when span { opacity: .85; }
.ssbrm-hero .ssbrm-hero__title {
	font-size: var(--ssbrm-step-4);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.04;
	color: #fff;
	margin: 0 0 1.25rem;
	padding: 0;
	max-width: 18ch;
}
.ssbrm-hero__lede {
	max-width: 56ch;
	font-size: var(--ssbrm-step-1);
	line-height: 1.5;
	font-family: var(--ssbrm-serif);
	font-style: italic;
	color: rgb(255 255 255 / .9);
	margin: 0 0 2rem;
	padding: 0;
}
.ssbrm-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; }
.ssbrm-hero__media { margin: 0; justify-self: center; }
.ssbrm-hero__media img {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	border-radius: var(--ssbrm-radius-s);
	box-shadow: 0 24px 48px -16px rgb(0 0 0 / .45);
}

/* ---------- Highlight cards (inside the hero, or standalone) ---------- */
.ssbrm-highlights {
	position: relative;
	max-width: var(--ssbrm-max);
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}
.ssbrm-highlights--standalone { margin: 0 auto; }
.ssbrm-highlights__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}
.ssbrm-highlight {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 1.5rem 1.5rem 1.375rem;
	border: 1px solid var(--ssbrm-line);
	border-radius: var(--ssbrm-radius-m);
	background: var(--ssbrm-paper);
	list-style: none;
}
.ssbrm-highlights--hero .ssbrm-highlight {
	border-color: var(--ssbrm-primary);                 /* logo blue outline */
	background: color-mix(in srgb, var(--ssbrm-primary-strong) 84%, #000);
	color: #fff;
}
.ssbrm-highlight:hover { border-color: var(--ssbrm-primary-strong); }
.ssbrm-highlights--hero .ssbrm-highlight:hover { border-color: #fff; }
.ssbrm-highlight__media { margin: -1.5rem -1.5rem 1.25rem; }
.ssbrm-highlight__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ssbrm-highlight__meta { margin: 0 0 .4rem; padding: 0; font-size: var(--ssbrm-step--1); font-weight: 600; color: var(--ssbrm-muted); }
.ssbrm-highlights--hero .ssbrm-highlight__meta { color: #fff; }
.ssbrm-highlight .ssbrm-highlight__title { font-size: var(--ssbrm-step-1); line-height: 1.25; margin: 0 0 .5rem; padding: 0; }
.ssbrm-highlights--hero .ssbrm-highlight__title { color: #fff; }
.ssbrm-highlight__text { margin: 0 0 1rem; padding: 0; font-size: var(--ssbrm-step--1); line-height: 1.5; }
.ssbrm-highlights--hero .ssbrm-highlight__text { color: rgb(255 255 255 / .9); }
.ssbrm-highlight__link { margin-top: auto; font-weight: 600; }
.ssbrm-highlights--hero .ssbrm-highlight__link { color: #fff; }
.ssbrm-highlight__link::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Shared list resets (Divi adds bullets/padding to ul) ---------- */
.ssbrm-events, .ssbrm-jobs, .ssbrm-logos {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ssbrm-events li, .ssbrm-jobs li, .ssbrm-logos li { list-style: none; }
.ssbrm-empty {
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--ssbrm-line);
	border-radius: var(--ssbrm-radius-m);
	color: var(--ssbrm-muted);
}

/* ---------- Events ---------- */
.ssbrm-event {
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--ssbrm-line);
}
.ssbrm-event:last-child { border-bottom: 1px solid var(--ssbrm-line); }
.ssbrm-event__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var(--ssbrm-radius-m);
	background: var(--ssbrm-mist);
	color: var(--ssbrm-primary-strong);
	line-height: 1;
}
.ssbrm-event--own .ssbrm-event__date { background: var(--ssbrm-primary-strong); color: #fff; }
.ssbrm-event__day   { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.ssbrm-event__month { font-size: .75rem; font-weight: 600; margin-top: .3rem; }
.ssbrm-event__title { font-size: var(--ssbrm-step-1); margin: 0 0 .3rem; padding: 0; }
.ssbrm-event__title a { color: var(--ssbrm-ink); text-decoration: none; }
.ssbrm-event__title a:hover { color: var(--ssbrm-primary-strong); text-decoration: underline; }
.ssbrm-event__meta { margin: 0; padding: 0; font-size: var(--ssbrm-step--1); color: var(--ssbrm-muted); line-height: 1.5; }
.ssbrm-tag {
	display: inline-block;
	margin-top: .55rem;
	padding: .2em .6em;
	border-radius: var(--ssbrm-radius-s);
	background: var(--ssbrm-accent-tint);
	color: var(--ssbrm-accent-strong);
	font-size: .8125rem;
	font-weight: 600;
}

/* ---------- Jobs ---------- */
.ssbrm-jobs { display: grid; gap: 1rem; }
@media (min-width: 768px) {
	.ssbrm-jobs { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
.ssbrm-job {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.375rem;
	background: var(--ssbrm-paper);
	border: 1px solid var(--ssbrm-line);
	border-radius: var(--ssbrm-radius-m);
}
.ssbrm-job__type {
	align-self: flex-start;
	margin-bottom: .6rem;
	padding: .15em .55em;
	border-radius: var(--ssbrm-radius-s);
	background: var(--ssbrm-mist);
	color: var(--ssbrm-primary-strong);
	font-size: .8125rem;
	font-weight: 600;
}
.ssbrm-job__title { font-size: var(--ssbrm-step-0); line-height: 1.35; margin: 0 0 .35rem; padding: 0; }
.ssbrm-job__title a { color: var(--ssbrm-ink); text-decoration: none; }
/* whole card is clickable, keyboard focus stays on the real link */
.ssbrm-job__title a::after { content: ""; position: absolute; inset: 0; }
.ssbrm-job:hover { border-color: var(--ssbrm-primary-strong); }
.ssbrm-job:hover .ssbrm-job__title a { color: var(--ssbrm-primary-strong); }
.ssbrm-job__org  { margin: 0 0 .75rem; padding: 0; font-size: var(--ssbrm-step--1); }
.ssbrm-job__meta { margin: auto 0 0; padding: 0; font-size: .8125rem; color: var(--ssbrm-muted); line-height: 1.5; }
.ssbrm-job__links { position: relative; z-index: 1; margin: .5rem 0 0; padding: 0; font-size: var(--ssbrm-step--1); }

/* ---------- Sponsors ---------- */
.ssbrm-tier + .ssbrm-tier { margin-top: 2.5rem; }
.ssbrm-tier__title {
	font-size: var(--ssbrm-step-0);
	font-weight: 600;
	color: var(--ssbrm-muted);
	margin: 0 0 1rem;
	padding: 0;
}
.ssbrm-logos {
	--logo-h: 48px;
	--tile: 180px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
	gap: .75rem;
}
.ssbrm-tier--platinum .ssbrm-logos { --logo-h: 84px; --tile: 280px; }
.ssbrm-tier--sponsor  .ssbrm-logos { --logo-h: 60px; --tile: 220px; }
.ssbrm-logos li > a, .ssbrm-logos li > img, .ssbrm-logos__name {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--logo-h) + 2.5rem);
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--ssbrm-line);
	border-radius: var(--ssbrm-radius-m);
	transition: border-color .15s;
}
.ssbrm-logos li > a:hover { border-color: var(--ssbrm-primary-strong); }
.ssbrm-logos img {
	max-height: var(--logo-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.ssbrm-logos__name { font-weight: 600; color: var(--ssbrm-ink); text-align: center; }
.ssbrm-sponsors__more { margin: 2rem 0 0; padding: 0; }

/* ---------- Helper classes for Divi sections (add in Advanced → CSS class) ---------- */
.ssbrm-band-mist  { background-color: var(--ssbrm-mist) !important; }
.ssbrm-band-deep  { background-color: var(--ssbrm-deep) !important; color: #fff; }
.ssbrm-band-deep :is(h1, h2, h3, h4, p, a) { color: #fff; }
.ssbrm-section-title { font-size: var(--ssbrm-step-3) !important; margin-bottom: 1.5rem !important; }
/* The society's name in the four national languages, set like the logo (footer, About page) */
.ssbrm-society-names { font-family: var(--ssbrm-serif); font-style: italic; line-height: 1.45; margin: 0; padding: 0; }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.ssbrm-hero { background: none; color: #000; }
	.ssbrm-hero::before, .ssbrm-hero::after { display: none; }
	.ssbrm-hero .ssbrm-hero__title, .ssbrm-hero__when, .ssbrm-hero__lede { color: #000; }
}