/* ************** CSS Variables ************** */

:root {
	/* Light mode colors */
	--bg-light: #e9e9e8;
	--text-light: #60666f;
	--text-dark: #000;
	--text-heading-light: #444;
	--yellow-light: #eeff41;
	--hover-bg-dark: #111;
	--hover-text-light: #53585f;
	--hover-text-highlight-light: #e9e9e8;
	--hr-light: #53585f;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Dark mode colors */
		--bg-dark: #1a1a1a;
		--text-dark-mode: #b0b5bc;
		--text-light-mode: #ffffff;
		--text-heading-dark: #bbbbbb;
		--yellow-dark: #535729; /* Muted yellow for dark mode */
		--hover-bg-light: #e9e9e8;
		--hover-text-dark: #1a1a1a;
		--hover-text-highlight-dark: #1a1a1a;
		--hr-dark: #b0b5bc;
	}
}

html {
	font-size: 94%;
	touch-action: manipulation;
	/* position: relative; */
	background-color: var(--bg-light);
	/*font-size: 74.07%;*/
}
html, body {
	/*min-height: 100vh;*/
	margin: 0;
	padding: 0;
	/* display: block; */
	color: var(--text-light);
}
body{
	-webkit-font-smoothing: antialiased;
	font-family: 'Open Sans', sans-serif;
	margin: 1.6rem;
	/*margin: 0;*/
}
a {
	background:
	linear-gradient(
	to right,
	var(--yellow-light) 0%,
	var(--yellow-light) 100%
	);
	background-repeat: repeat-y;
	background-size: 0%;
	color: var(--text-dark);
	text-decoration: none;
	transition: background-size 0.2s, color 0.2s;
}
a:hover {
	background-size: 100%;
	color: var(--text-dark); /* Keep text color the same, don't change it on hover */
}

/* Special hover effect for highlight links - when .highlight is on an <a> tag */
a.highlight {
	background:
	linear-gradient(
	to right,
	var(--hover-bg-dark) 0%,
	var(--hover-bg-dark) 100%
	),
	var(--yellow-light); /* Yellow background shows through when gradient is 0% */
	background-repeat: repeat-y;
	background-size: 0%, 100%; /* Gradient at 0%, yellow at 100% */
	color: var(--text-dark); /* Same text color as regular links - darker than regular text in light mode */
}
a.highlight:hover {
	background-size: 100%, 100%; /* Gradient expands to 100% */
	color: var(--hover-text-highlight-light); /* Change text color on hover for highlight links */
}

::selection {
	background: var(--yellow-light); /* WebKit/Blink Browsers */
	color: var(--text-light); /* Match highlight text color */
}
::-moz-selection {
	background: var(--yellow-light); /* Gecko Browsers */
	color: var(--text-light); /* Match highlight text color */
}
hr{
	/*background: rgba(0, 0, 0, 0.65);*/
	background: var(--hr-light);
	border: 0;
	height: 2px;
	display: block;
	margin-bottom: .6rem
}
h1 {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	padding: 0;
	margin: 0;
	/*font-size: 1.4rem;*/
	font-size: calc(1.4rem + 1.2vw);
	line-height: 1.5;
	/*color: rgba(0, 0, 0, 0.85);*/
	/*text-rendering: optimizeLegibility;*/
}
h3{
	font-weight: 400;
	font-size: 1.2rem;
	margin-top: 0 ;
}
.highlight{
	/*font-weight: 300;*/
	background: var(--yellow-light);
	color: var(--text-light);
}
b, strong {
	font-weight: 700;
}
ul, ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	line-height: 1.4;
	margin: .4rem 0;
}
li.heading{
	font-weight: 700;
	color: var(--text-heading-light);
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	font-size: 0.80rem;
}
small{
	line-height: 1.5;
	font-style: normal;
	/*color: rgba(0, 0, 0, 0.4);*/
}
.right{
	text-align: right;
}

/* ************** Struct ************** */

.header{
	width: 100%;
	min-height: 50vh;
	overflow: hidden;
	position: relative; 
	padding-bottom: 2.2rem;
	margin-bottom: 2.2rem;
	/* vertically center content:; */
	display: flex;
	justify-content: center;
	align-items: center;
}
.content{
	display: grid;
	grid-gap: 2rem;
	max-width: 800px;
	margin: auto;		
	/* https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) ); 
	/*grid-template-columns: repeat(auto-fit, minmax(Min(20em, 100%), 1fr));*/
	grid-template-rows: masonry;
	justify-content: center;
	/*> * { align-self: start }*/
}
.content div{
	align-self: start; /* very important */
}

.footer {
	display: grid;
	grid-gap: 1rem;
	max-width: 800px;
	margin: auto;
	grid-template-columns: 1fr 1fr;
	margin-top: 100px;
}

/* ************** Fonts ************** */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

/* ************** Hero video ************** */

.header__video{
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.2;
}
.header__content{
	position: relative;
	z-index: 1;
	padding: 1.6rem;

	max-width: 800px;
	margin: auto;
}
.header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.6rem;
	width: 100%;
}
.header__content svg{
	width: 64px;
}
.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	opacity: 0.7;
	transition: opacity 0.2s;
}
.theme-toggle:hover {
	opacity: 1;
}
.theme-toggle__icon {
	width: 20px;
	height: 20px;
	display: block;
}
.theme-toggle__icon--sun {
	display: none;
}
.theme-toggle__icon--moon {
	display: block;
}
@media (prefers-color-scheme: dark) {
	.theme-toggle__icon--sun {
		display: block;
	}
	.theme-toggle__icon--moon {
		display: none;
	}
}
/* When dark mode is forced via class */
html[data-theme="dark"] .theme-toggle__icon--sun {
	display: block;
}
html[data-theme="dark"] .theme-toggle__icon--moon {
	display: none;
}
html[data-theme="light"] .theme-toggle__icon--sun {
	display: none;
}
html[data-theme="light"] .theme-toggle__icon--moon {
	display: block;
}
.header__content h1{
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
}
.header__video-overlay { 
	position: absolute;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 0;

}

/* ************** Dark Mode ************** */

/* Support for data-theme attribute (manual toggle) */
html[data-theme="light"] {
	background-color: var(--bg-light);
}
html[data-theme="light"] body {
	color: var(--text-light);
}
html[data-theme="light"] a {
	background:
	linear-gradient(
	to right,
	var(--yellow-light) 0%,
	var(--yellow-light) 100%
	);
	background-repeat: repeat-y;
	background-size: 0%;
	color: var(--text-dark);
	transition: background-size 0.2s, color 0.2s;
}
html[data-theme="light"] a:hover {
	background-size: 100%;
	color: var(--text-dark);
}
html[data-theme="light"] h1 {
	color: var(--text-light);
}
html[data-theme="light"] hr {
	background: var(--hr-light);
}
html[data-theme="light"] li.heading {
	color: var(--text-heading-light);
}
html[data-theme="light"] .highlight {
	background: var(--yellow-light);
	color: var(--text-light);
}
html[data-theme="light"] ::selection {
	background: var(--yellow-light);
	color: var(--text-light);
}
html[data-theme="light"] ::-moz-selection {
	background: var(--yellow-light);
	color: var(--text-light);
}
html[data-theme="light"] .header__content svg path {
	fill: var(--text-dark);
}
html[data-theme="light"] .theme-toggle {
	color: var(--text-dark);
}
html[data-theme="light"] a.highlight {
	background:
	linear-gradient(
	to right,
	var(--hover-bg-dark) 0%,
	var(--hover-bg-dark) 100%
	),
	var(--yellow-light);
	background-repeat: repeat-y;
	background-size: 0%, 100%;
	color: var(--text-dark);
}
html[data-theme="light"] a.highlight:hover {
	background-size: 100%, 100%;
	color: var(--hover-text-highlight-light);
}

html[data-theme="dark"] {
	background-color: var(--bg-dark);
}
html[data-theme="dark"] body {
	color: var(--text-dark-mode);
}
html[data-theme="dark"] a {
	background:
	linear-gradient(
	to right,
	var(--yellow-dark) 0%,
	var(--yellow-dark) 100%
	);
	background-repeat: repeat-y;
	background-size: 0%;
	color: var(--text-light-mode);
	transition: background-size 0.2s, color 0.2s;
}
html[data-theme="dark"] a:hover {
	background-size: 100%;
	color: var(--text-light-mode);
}
html[data-theme="dark"] h1 {
	color: var(--text-dark-mode);
}
html[data-theme="dark"] hr {
	background: var(--hr-dark);
}
html[data-theme="dark"] li.heading {
	color: var(--text-heading-dark);
}
html[data-theme="dark"] .highlight {
	background: var(--yellow-dark);
	color: var(--text-dark-mode);
}
html[data-theme="dark"] ::selection {
	background: var(--yellow-dark);
	color: var(--text-dark-mode);
}
html[data-theme="dark"] ::-moz-selection {
	background: var(--yellow-dark);
	color: var(--text-dark-mode);
}
html[data-theme="dark"] .header__content svg path {
	fill: var(--text-light-mode);
}
html[data-theme="dark"] .theme-toggle {
	color: var(--text-light-mode);
}
html[data-theme="dark"] a.highlight {
	background:
	linear-gradient(
	to right,
	var(--hover-bg-light) 0%,
	var(--hover-bg-light) 100%
	),
	var(--yellow-dark);
	background-repeat: repeat-y;
	background-size: 0%, 100%;
	color: var(--text-light-mode);
}
html[data-theme="dark"] a.highlight:hover {
	background-size: 100%, 100%;
	color: var(--hover-text-highlight-dark);
}

@media (prefers-color-scheme: dark) {
	html {
		background-color: var(--bg-dark);
	}
	body {
		color: var(--text-dark-mode);
	}
	a {
		background:
		linear-gradient(
		to right,
		var(--yellow-dark) 0%,
		var(--yellow-dark) 100%
		);
		background-repeat: repeat-y;
		background-size: 0%;
		color: var(--text-light-mode);
		transition: background-size 0.2s, color 0.2s;
	}
	a:hover {
		background-size: 100%;
		color: var(--text-light-mode); /* Keep text color the same, don't change it on hover */
	}
	h1 {
		color: var(--text-dark-mode);
	}
	hr {
		background: var(--hr-dark);
	}
	li.heading {
		color: var(--text-heading-dark);
	}
	.highlight {
		background: var(--yellow-dark);
		color: var(--text-dark-mode); /* Keep text color as regular text, don't change it */
	}
	::selection {
		background: var(--yellow-dark);
		color: var(--text-dark-mode); /* Keep text color as regular text, don't change it */
	}
	::-moz-selection {
		background: var(--yellow-dark);
		color: var(--text-dark-mode); /* Keep text color as regular text, don't change it */
	}
	.header__video {
		opacity: 0.1;
	}
	/* SVG color inversion */
	.header__content svg path {
		fill: var(--text-light-mode);
	}
	.theme-toggle {
		color: var(--text-light-mode);
	}
	/* Header h1 highlight uses var(--yellow-dark) from a.highlight gradient background */
	/* Inverted hover effect for dark mode */
	a.highlight {
		background:
		linear-gradient(
		to right,
		var(--hover-bg-light) 0%,
		var(--hover-bg-light) 100%
		),
		var(--yellow-dark); /* Muted yellow background shows through when gradient is 0% */
		background-repeat: repeat-y;
		background-size: 0%, 100%; /* Gradient at 0%, yellow at 100% */
		color: var(--text-light-mode); /* Same text color as regular links - lighter than regular text in dark mode */
	}
	a.highlight:hover {
		background-size: 100%, 100%; /* Gradient expands to 100% */
		color: var(--hover-text-highlight-dark); /* Change text color on hover for highlight links */
	}
}

/* ************** Mobile ************** */

@media (max-width: 480px) { 
	body, .header {
		margin: 0;
	}
	.content, .footer {
		margin: 1.6rem;
	}
	.footer{
		margin-top: 80px;
	}

}