/* ==========================================================================
   MySubcamp — EIJ 2028 brand tokens and base styles
   Colours from the EIJ 2028 full-colour logo.
   ========================================================================== */

:root {
	/* Brand */
	--eij-purple: #622F8C;
	--eij-purple-deep: #4A2169;
	--eij-purple-night: #341649;
	--eij-blue: #7596CC;
	--eij-blue-soft: #E6ECF6;
	--eij-sun: #FFCA10;
	--eij-sun-soft: #FFF4CC;
	--eij-grey: #716F70;

	/* Surfaces & text */
	--ink: #2A1838;
	--ink-soft: #5E5468;
	--canvas: #F5F3F8;
	--paper: #FFFFFF;
	--line: #E4DEEC;
	--line-strong: #CFC5DC;
	--danger: #B3261E;
	--danger-soft: #FCE8E6;
	--ok: #1E6B45;
	--ok-soft: #E3F2EA;

	/* Subcamp accent (overridden per subcamp in the app) */
	--msc-subcamp: var(--eij-purple);

	/* Type */
	--font-body: 'Asap', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-display: 'Romy', 'Asap', 'Segoe UI', system-ui, sans-serif;
	--step--1: 0.875rem;
	--step-0: 1rem;
	--step-1: 1.125rem;
	--step-2: 1.375rem;
	--step-3: 1.75rem;
	--step-4: 2.25rem;
	--step-5: clamp(2.5rem, 4vw + 1rem, 3.75rem);

	/* Shape */
	--radius-sm: 8px;
	--radius: 14px;
	--radius-pill: 999px;
	--focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--eij-purple);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--ink);
	background: var(--canvas);
	font-stretch: 100%;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--eij-purple); text-underline-offset: 0.18em; }
a:hover { color: var(--eij-purple-deep); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: none;
	box-shadow: var(--focus);
	border-radius: var(--radius-sm);
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.msct-skip {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: var(--eij-sun);
	color: var(--ink);
	font-weight: 700;
	border-radius: var(--radius-sm);
}
.msct-skip:focus { top: 1rem; }

/* Buttons shared by site and login */
.msct-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font: 700 var(--step-0)/1.2 var(--font-body);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
}
.msct-btn--sun { background: var(--eij-sun); color: var(--ink); }
.msct-btn--sun:hover { background: #FFD84A; color: var(--ink); }
.msct-btn--lg { padding: 0.85rem 1.75rem; font-size: var(--step-1); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- "Platform developed by Trakto Software", bottom right of every page (0.4.24) ---------- */
.msct-credit { margin: 0; font-size: var(--step--1, 0.875rem); color: var(--ink-soft, #5E5468); }
.msct-credit a { color: inherit; text-decoration: none; }
.msct-credit a:hover, .msct-credit a:focus-visible { color: var(--eij-purple, #622F8C); text-decoration: underline; }
.msct-credit strong { font-weight: 700; color: var(--ink, #2A1838); }
.msct-credit a:hover strong { color: inherit; }
.msct-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 1.5rem; }
.msct-footer .msct-credit { margin-left: auto; text-align: right; }
.msct-site-footer .msct-credit { justify-self: end; text-align: right; }
.msct-credit--login { position: fixed; right: 1rem; bottom: 0.75rem; text-align: right; }
@media (max-width: 40rem) {
	.msct-credit--login { position: static; margin: 1.5rem auto 1rem; text-align: center; }
}
/* On the purple sign-in screen: light text. */
.msct-credit--login { color: rgba(255, 255, 255, 0.78); }
.msct-credit--login strong { color: #fff; }
.msct-credit--login a:hover, .msct-credit--login a:focus-visible { color: #fff; }