/** WOC Light Theme (default) */
:root {
--o: .2;
--primary: #1E74D1;
--primary-hsl: hsl(211, 75%, 47%);
--primary-hue: 211;
--primary-a: color(from var(--primary-200) srgb r g b / 0.65);
--primary-500: var(--primary);
--primary-100: #04111F;
--primary-200: #09233F;
--primary-300: #0F3A68;
--primary-400: #185DA8;
--primary-600: #4A8FDA;
--primary-700: #8FBAE8;
--primary-800: #BBD5F1;
--primary-900: #DDEAF8;

--secondary: #29A1A3;
--secondary-hsl: hsl(181, 60%, 40%);
--secondary-hue: 181;
--secondary-a: color(from var(--secondary-200) srgb r g b / 0.65);
--secondary-500: var(--secondary);
--secondary-100: #082121;
--secondary-200: #0B2A2B;
--secondary-300: #13494A;
--secondary-400: #1E7577;
--secondary-600: #5CB7B9;
--secondary-700: #94D0D1;
--secondary-800: #BBE1E2;
--secondary-900: #D4ECED;

--accent: #5BE876;
--accent-hsl: hsl(131, 75%, 63%);
--accent-hue: 131;
--accent-a: color(from var(--accent-200) srgb r g b / 0.65);
--accent-500: var(--accent);
--accent-100: #132F18;
--accent-200: #183D1F;
--accent-300: #296A36;
--accent-400: #42A956;
--accent-600: #82EE97;
--accent-700: #ADF3BA;
--accent-800: #CBF8D3;
--accent-900: #DEFAE4;

--tertiary: #0F486F;
--tertiary-hsl: hsl(204, 76%, 25%);
--tertiary-hue: 204;
--tertiary-500: var(--tertiary);
--tertiary-100: #030F17;
--tertiary-200: #04131D;
--tertiary-300: #072132;
--tertiary-400: #0B3551;
--tertiary-600: #487491;
--tertiary-700: #87A3B7;
--tertiary-800: #B3C5D1;
--tertiary-900: #CFDAE2;

--quart: #10404B;
--quart-hsl: hsl(191, 65%, 18%);
--quart-hue: 191;
--quart-500: var(--quart);
--quart-100: #030D0F;
--quart-200: #041114;
--quart-300: #041114;
--quart-400: #0C2F37;
--quart-600: #496E76;
--quart-700: #879FA5;
--quart-800: #B3C2C6;
--quart-900: #CFD9DB;

--compl: #6F3987;
--compl-hsl: hsl(282, 41%, 38%);
--compl-hue: 282;
--compl-500: var(--compl);
--compl-100: #110814;
--compl-200: #221129;
--compl-300: #371C43;
--compl-400: #592E6D;
--compl-600: #8B609E;
--compl-700: #B79CC3;
--compl-800: #D4C3DB;
--compl-900: #EAE1ED;

--compl-acc: #ffdd00;
--compl-acc-hsl: hsl(52, 100%, 50%);
--compl-acc-hue: 52;
--compl-acc-500: var(--compl-acc);
--compl-acc-100: #262100;
--compl-acc-200: #4D4200;
--compl-acc-300: #7F6D00;
--compl-acc-400: #CDB000;
--compl-acc-600: #FFE232;
--compl-acc-700: #FFED80;
--compl-acc-800: #FFF4B2;
--compl-acc-900: #FFFAD9;

--color-0: #000;
--color-1: var(--quart-100);
--color-2: var(--quart-200);
--color-3: var(--quart-300);
--color-4: var(--quart-400);
--color-5: var(--quart-500);
--color-6: var(--quart-600);
--color-7: var(--quart-700);
--color-8: var(--quart-800);
--color-9: var(--quart-900);
--color-10: #fff;

--surface-0: hsl(0, 0%, 0%);
--surface-1: var(--primary-100);
--surface-2: var(--primary-200);
--surface-3: var(--primary-300);
--surface-4: var(--primary-400);
--surface-5: var(--primary-500);
--surface-6: var(--primary-600);
--surface-7: var(--primary-700);
--surface-8: var(--primary-800);
--surface-9: var(--primary-900);
--surface-10: #fff;

--form-element-color: var(--color-1);
--form-element-bg: var(--surface-9);
--form-element-focus-bg: var(--surface-10);
--form-element-placeholder-color: var(--color-6);

--shadow-shade: var(--primary-a);
--panel-text-glow: 1ex 0 1em var(--color-10), -1ex 0 2em var(--color-10), 0 0 2px var(--color-1), 0 0 12px var(--primary-100);
--title-mask: linear-gradient(to bottom, #000, transparent 5%, #000 20%, #000 80%, transparent 95%, #000);

--grad-p1-t: linear-gradient(0turn   in oklab, var(--primary-100), var(--primary-300));
--grad-p3-t: linear-gradient(0turn   in oklab, var(--primary-300), var(--primary-500));
--grad-p5-t: linear-gradient(0turn   in oklab, var(--primary-500), var(--primary-700));
--grad-p7-t: linear-gradient(0turn   in oklab, var(--primary-700), var(--primary-900));
--grad-p1-b: linear-gradient(0.5turn in oklab, var(--primary-100), var(--primary-300));
--grad-p3-b: linear-gradient(0.5turn in oklab, var(--primary-300), var(--primary-500));
--grad-p5-b: linear-gradient(0.5turn in oklab, var(--primary-500), var(--primary-700));
--grad-p7-b: linear-gradient(0.5turn in oklab, var(--primary-700), var(--primary-900));

--all-colours: var(--primary-700), var(--secondary-700) 65%, var(--accent-700);
--grad-t:		linear-gradient(0turn 			in oklab, var(--all-colours) );
--grad-tr: 	linear-gradient(0.125turn 	in oklab, var(--all-colours) );
--grad-r:		linear-gradient(0.25turn 		in oklab, var(--all-colours) );
--grad-rb: 	linear-gradient(0.375turn 	in oklab, var(--all-colours) );
--grad-b:		linear-gradient(0.5turn 		in oklab, var(--all-colours) );
--grad-bl: 	linear-gradient(0.625turn 	in oklab, var(--all-colours) );
--grad-l:		linear-gradient(0.75turn 		in oklab, var(--all-colours) );
--grad-lt: 	linear-gradient(0.875turn 	in oklab, var(--all-colours) );
}

html {
	background-color: var(--primary-800);
	color: var(--color-1);
}

body {
	color: inherit;
	background-color: hsl(195, 70%, 45%);
	background-image: var(--grad-rb);
	background-attachment: fixed;
}

main {
	--main-background: var(--surface-9);
	background-color: var(--main-background);
	/* filter: drop-shadow(0 0 1ex oklch(0 0 0 / 20%)); */
}

u, ins, abbr {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: all;
}

caption,
[class*=-title] {
	color: var(--color-title, inherit);
}

.page-title,
figure.-hero .card-title {
	border-block: 3px solid currentColor;
	line-height: 1;
	user-select: none;
	span {
		display: inline-block;
		line-height: 1;
		/* padding-block: 0.5ex 0.4ex; */
		padding-inline: .625ex;
	}
}

.hero-image .page-title {
	--color-title: var(--color-10);
}

figure.-hero .card-title,
.hero-image .page-title .inverted {
	position: relative;
	text-shadow: 0 0 3px var(--color-1), 0 0 4px hsl(var(--title-hue) 20% 50%), 0 0 1ex var(--color-10), 0 0 1em var(--color-10), 0 0 1.5em var(--color-10), 0 0 2em var(--color-10);
	&::before {
		content: '';
		z-index: -1;
    position: absolute;
    inset: 2px 0;
	}
}

html[data-lacks="gecko"] .page-head.hero-image::before {
	backdrop-filter: blur(4px);
	filter: drop-shadow(var(--shadow-md));
}

.page-section {
	background-color: var(--surface-9);
}

.inset-box {
	backdrop-filter: blur(4px);
	padding: var(--size-2) var(--size-3);
	background-color: #fffc;
	text-shadow: 0 0 1em var(--color-10), 0 0 2px var(--color-1), 0 0 10px var(--primary-300);
	--o: 1;
	box-shadow: inset .2ex .2ex 1ex var(--primary-a);
}

.glassy {
	position: sticky;
	top: 0px;
	z-index: 42;
	isolation: isolate;
	&::before {
  	transition: background-color 150ms 2100ms ease-in-out;
		position: absolute;
		content: '';
		inset: 0;
		background-color: transparent;
	}
	&[data-offscreen]::before {
		background-color: #fff4;
    box-shadow: inset 0 -4px 0px #fff4;
		backdrop-filter: blur(5px) saturate(85%);
	}
}

.m_card {
	--card-footer: var(--surface-9);
	--card-background: hsl(var(--title-hue, var(--primary-hue)) 45% 85% / 95%);
	--card-border: var(--border-color) solid var(--shadow-shade);
	--card-shadow: var(--shadow-md);

	--color-title:     hsl(var(--title-hue, var(--primary-hue)) 50% 20%);
	--shadow-shade:    hsl(var(--title-hue, var(--primary-hue)) 50% 20%);
	--outline-color:   hsl(var(--title-hue, var(--primary-hue)) 50% 45% / 50%);
	--outline-focus: var(--outline-width) solid var(--outline-color, var(--form-element-focus-color));
	--outline-focus-offset: 3px;
	--outline-shadow: 
					0 0 0 var(--outline-width) var(--card-background),
					0 0 0 calc(var(--outline-focus-offset) + var(--outline-width)) var(--outline-color);
	contain: paint;
	box-shadow: var(--card-shadow);
	border-radius: 1ex;
	outline: var(--border-width) solid var(--outline-color);
	outline-offset: -3px;

	&:focus-within {
		outline: var(--outline-focus);
		outline-offset: var(--outline-focus-offset);
	}
}

@media (prefers-contrast: more) {
	.m_card:focus-within {
		outline-color: transparent;
	}
}

.m_card .card-title {
	color: var(--color-title, #2c90a8);
}

.m_card .card-body {
	outline: var(--size-2) solid #fff6;
	background-color: var(--card-background, transparent);
}

/* FAQ */
.faq-item {
	dt,
	summary {
		font-weight: bolder;
		color: var(--color-title, inherit);
	}
	summary {
		list-style-type: circle;
	}
	&.-ghost dt {
		background-color: var(--color-surface);
	}
}

/* Navigation --title-hue from hero image */
:any-link {
	color: var(--accent-300);
	&:focus,
	&:hover {
		color: var(--compl-400);
	}
}

:is(.menu-main, .menu-feature) .menu {
	--_c: hsl(var(--title-hue, var(--accent-hue)) 50% 50%);
	--menu-item-current: #fff;
	--menu-item-hilite: 
						color-mix(in lch, var(--_c), #000 80%);
	--menu-item-bg:            
						color-mix(in lch, var(--_c), #0004 40%);
	--menu-item-bg-hover:      
						color-mix(in lch, var(--_c), #fff4 40%);
	--menu-item-shadow:        
						color-mix(in lch, var(--_c), #0004 40%);
	--menu-label-current: #fff;
	--menu-label-hilite: #fff;
}

.menu-item {
	&[aria-current] {
		--menu-item-current: #000;
		--menu-item-hilite: #000;
		--menu-item-bg: hsl(var(--compl-acc-hue) 50% 60% / 70%);
		--menu-item-bg-hover: hsl(var(--compl-acc-hue) 60% 50% / 60%);
		.menu-label {
			color: color-mix(in lch, hsl(var(--title-hue, 0) 50% 10%), black 50%);
		}
		:any-link {
			pointer-events: none;
		}
	}
}
.menu-item.-about {}
.menu-item.-contact {}

.menu-item.-donate,
.menu-item[aria-current].-donate { 
	--menu-item-current: var(--compl-900);
	--menu-item-hilite: var(--compl-900);
	--menu-item-bg: var(--compl-500);
	--menu-item-bg-hover: var(--compl-600);
	outline-offset: 2px;
	.menu-label {
		color: inherit;
	}
}

.menu-item.-news {}
.menu-item.-archive {}
.menu-item.-tos {}

.page-foot :is(.menu-item,.menu-link,.menu-label) {
	background: none;
}

:is(.cols-2, .cols-4, .cols-4) .col-wrapper {
	--color-title: hsl(var(--title-hue) 40% 20%);
	background-color: hsl(var(--title-hue) 12% 86% / .9);
	box-shadow: inset 0 0 0.6ex hsl(var(--title-hue) 10% 20% / 1);
	border-radius: 5px;
}

/* Controls */
.fancy-border {
	border: 4px solid transparent; 
	background: linear-gradient(var(--primary-900) 0 0) padding-box, var(--grad-tr) border-box;
	padding: var(--space-inside);
}

/* Table */
table {
	border-color: inherit;
}
th,
td {
	background-color: var(--table-row-background-color);
	color: var(--color);
}

thead th {
	background-color: var(--table-head-background-color);
}

table[role=grid] tbody tr:nth-child(even) {
	background-color: var(--table-row-striped-background-color);
}
.table-data caption {
	z-index: 1;
	background-color: var(--surface-10);
}
.table-data thead,
.table-data tfoot {
	z-index: 2;
	background-color: var(--surface-10);
}

/* Text utils */
::selection {
	color: var(--color-9);
	background-color: var(--color-2);
	text-shadow: none !important;
}

.-primary {
	--color-title: var(--primary-300);
	--color-surface: var(--primary-800);
}
.text-primary {
	color: var(--primary-300);
}

.-secondary {
	--color-title: var(--secondary-300);
	--color-surface: var(--secondary-800);
}
.text-secondary {
	color: var(--secondary-300);
}

.-accent {
	--color-title: var(--accent-300);
	--color-surface: var(--accent-800);
}
.text-accent {
	color: var(--accent-300);
}

.-compl {
	--color-title: var(--compl-300);
	--color-surface: var(--compl-800);
}

.-compl-acc {
	--color-title: var(--compl-acc-300);
	--color-surface: var(--compl-acc-800);
}

.text-compl {
	color: var(--compl-300);
}

.text-dim {
	color: var(--color-6);
}

.note {
	color: firebrick;
}

.inverted {
	/* @todo color math for dark theme */
	background-color: var(--title-bg, hsl(var(--title-hue, 37) 15% 90% / var(--title-opac, 85%)));
}

/* background gradients */
.gradient {
	background-image: var(--_g);
	&.up{
		&.primary-1 {--_g:var(--grad-p1-t)}
		&.primary-3 {--_g:var(--grad-p3-t)}
		&.primary-5 {--_g:var(--grad-p5-t)}
		&.primary-7 {--_g:var(--grad-p7-t)}
	}
	&.down {
		&.primary-1 {--_g:var(--grad-p1-b)}
		&.primary-3 {--_g:var(--grad-p3-b)}
		&.primary-5 {--_g:var(--grad-p5-b)}
		&.primary-7 {--_g:var(--grad-p7-b)}
	}
	&.top {--_g: var(--grad-t)}
	&.top-right {--_g: var(--grad-tr)}
	&.right {--_g: var(--grad-r)}
	&.right-bottom {--_g: var(--grad-rb)}
	&.bottom {--_g: var(--grad-b)}
	&.bottom-left {--_g: var(--grad-bl)}
	&.left {--_g: var(--grad-l)}
	&.left-top {--_g: var(--grad-lt)}
}