/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

/*
 * Variables
 */

:root {
	/* Colors & branding */
	--clr-brand-gray: #323230;
	--clr-brand-red: #dd3700;
	--clr-brand-white: #eee;

	--clr-transparent-black: #0006;
	--clr-slightly-transparent-black: #0009;

	/* Layout - General */
	@media (prefers-color-scheme: dark) {
		--clr-text: #eee;
		--clr-bg: #22221c;
		--clr-border: #282824;
	}
	@media (prefers-color-scheme: light) {
		--clr-text: #000;
		--clr-bg: #eee;
		--clr-border: #ddd;
	}
	--clr-hex: #161613;

	/* Layout - Accents */
	--clr-accent: var(--clr-brand-red);
	--clr-accent-light: #ee3b24;
	--clr-shade: #0005;
	--clr-shadow: var(--clr-transparent-black);
	--shadow-spread: 3em;

	/* Layout - Wedges */
	--clr-wedge: #eee;
	--wedge-angle:  2deg;
	/* Set wedge height to prevent gaps */
	--wedge-height: 3.493vw; /* Computed with width * sin(angle) / sin(90 - angle) */
	/* Prevent wedge margin from getting too extreme with computed vw */
	--wedge-margin: clamp(2.6rem, 2.6rem, var(--wedge-height)); /* 2.6 computed via content width & wedge height */
	--wedge-text-size: 1.375rem;

	/* Navigation */
	--pad-block-nav: 1rem;
	--pad-inline-nav: 1rem;

	/* Alerts */
	--clr-banner: #d2d2d2;
	--clr-banner-border: #b0b0b0;
	--clr-banner-text: #222;
	--clr-banner-dark: #282824;
	--clr-banner-dark-border: #42423b;
	--clr-banner-dark-text: var(--clr-brand-white);
	--clr-banner-info: #55e1ff;
	--clr-banner-info-border: #00c7f2;
	--clr-banner-info-text: #222;
	--clr-banner-warning: #ffe33b;
	--clr-banner-warning-border: #ecca00;
	--clr-banner-warning-text: #222;

	--pad-block-banner: 0.25rem;
	--pad-inline-banner: 0.75rem;

	/* Content */
	--size-text: 1.1rem;
	--border-content: 0.0625rem solid var(--clr-border);
	--spacing-content-vertical: 2rem;	
	--width-content:  1250px;
	--clr-feature-text: #eee;
	--clr-faded-text: #888;
	--clr-quote: #888;

	/* Links & buttons */
	--clr-link: var(--clr-accent);
	--clr-link-active: #f65202;

	--clr-button: var(--clr-accent);
	--clr-button-hover: var(--clr-accent-light);
	--clr-button-text: var(--clr-brand-white);
	--clr-button-dark: #464643;
	--clr-button-dark-hover: #4d4d4a;
	--clr-button-coffee: #ffdd00;
	--clr-button-coffee-hover: #ffea00;

	/* Animations */
	--transition-curve-default: ease-in-out;
	--transition-curve: cubic-bezier(.18, .89, .32, 1.18);
	--transition-duration: 300ms;
	--transition-duration-btn: 100ms;
	--transition-duration-link: 300ms;
}

/*
 * Global styling
 */

/* Page layout */
* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100dvh;
}

body {
	background: var(--clr-hex) url('/assets/img/hex-bg.svg') repeat center / 168px 96.99px;
	height: 100%;
	font-family: "Fira Sans", sans-serif;
	font-size: var(--size-text);
}

#wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

/* General styling */
h1, h2, h3, h4, h5, h6 {
	font-family: "Oswald", sans-serif;
	font-variant: small-caps;
	font-weight: 500;
}

p + div,
p + p,
p + section,
section + section,
section + p {
	margin-top: 1em;
}

blockquote {
	color: var(--clr-quote);
	text-align: left;
	border-left: 0.2em solid var(--clr-accent);
	padding: 0.5em 1.25em;
	margin-block: 1em;

	em {
		color: var(--clr-text);
		font-weight: 500;
	}
}

/* Navbar */
nav {
	position: sticky;
	top: 0;
	z-index: 10;

	.navbar {
		font-size: 1rem;
		font-weight: 500;
		padding: var(--pad-block-nav) var(--pad-inline-nav);
		background: var(--clr-bg);
		color: var(--clr-text);
		border-bottom: 1px solid var(--clr-border);

		display: flex;
		flex-direction: row;
		gap: 1.5rem;
		align-items: center;

		img.logo {
			height: 1.75em;
		}
	}

	> :last-child {
		box-shadow: 0 0 0.5rem var(--clr-shadow);
		clip-path: inset(0 -0.5rem -0.5rem -0.5rem);
	}
}

/* Alerts */
.banner {
	font-size: 1rem;
	font-weight: 500;
	padding: var(--pad-block-banner) var(--pad-inline-banner);
	text-align: center;
	background: var(--clr-banner);
	border-bottom-width: 0.0625rem;
	border-bottom-style: solid;
	border-bottom-color: var(--clr-banner-border);
	color: var(--clr-banner-text);

	&.dark {
		background: var(--clr-banner-dark);
		border-bottom-color: var(--clr-banner-dark-border);
		color: var(--clr-banner-dark-text);
	}
	&.info {
		background: var(--clr-banner-info);
		border-bottom-color: var(--clr-banner-info-border);
		color: var(--clr-banner-info-text);
	}
	&.warning {
		background: var(--clr-banner-warning);
		border-bottom-color: var(--clr-banner-warning-border);
		color: var(--clr-banner-warning-text);
	}
}

.hero {
	background: no-repeat center 57% / auto 111dvh url('/assets/img/silhouette.jpg');
	color: var(--clr-feature-text);
	min-height: 65dvh;
  	display: flex;
  	flex-direction: row-reverse;

  	&.short {
  		height: 43dvh;
  		min-height: unset;
  		background-position: center 38.56%;
  	}

  	.description {
		background: var(--clr-shade);
		backdrop-filter: blur(0.25rem);
		width: 36%;
		padding: 2em;
		padding-bottom: calc(2em + var(--wedge-height));
		padding-right: max(2em, calc((100vw - var(--width-content)) / 2 + 2em));
		display: flex;
		flex-direction: column;
		justify-content: center;

		p {
			padding-left: 2em;
			text-indent: -2em;
		}
	}

	@media screen and (min-width: 82.58vh) {
  		position: relative;

  		&::before {
  			content: "";
  			position: absolute;
  			inset: 0;
			background: no-repeat center 57% / cover url('/assets/img/silhouette.jpg');
			filter: blur(0.5vw);
			z-index: -1;
  		}

  		.description {
  			width: calc((100vw - 108dvh) / 2 + 38.9dvh);
  			padding-right: calc((100vw - 108dvh) / 2 + 2em);
  		}
  	}

	@media screen and (max-width: 799px) {
  		flex-direction: column-reverse;

  		.description {
  			width: inherit;
  		}
  	}
}

.content {
	background: var(--clr-bg);
	color: var(--clr-text);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	z-index: 5;
	margin: 0 -50vw;
	padding: 0 max(2em, calc((100vw - var(--width-content)) / 2 + 2em)) 2em;
	flex: 1;

	&::before {
		content: '';
		display: block;
		position: relative;
		background: inherit;
		margin-inline: calc(-1 * max(2em, ((100vw - var(--width-content)) / 2 + 2em)));
		height: var(--wedge-height);
		z-index: -1;
		box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
		clip-path: inset(calc(-1 * var(--shadow-spread)) 0 0 0);
		border-top: var(--border-content);
	}
	&.left::before {
		transform-origin: bottom right;
		transform: skewY(var(--wedge-angle));
	}
	&.right::before {
		transform-origin: bottom left;
		transform: skewY(calc(-1 * var(--wedge-angle)));
	}
}

footer {
	text-align: center;
	font-size: 0.75em;
	color: var(--clr-faded-text);
	padding-top: 1em;
}

/* Links */
a:focus {
	outline: none;
}

/* Buttons */
a.btn {
	box-shadow: 0 0 0.5rem var(--clr-shadow);
	transition-property: background, filter, top, left, box-shadow;
	transition-duration: var(--transition-duration-btn);
	transition-timing-function: var(--transition-curve-default);
	position: relative;
	top: 0;
	left: 0;

	&:hover, &:focus {
		top: -0.1rem;
		left: -0.1rem;
		box-shadow: 0.2rem 0.2rem 0.5rem var(--clr-shadow);
	}

	&, &:hover, &:focus, &:active {
		text-decoration: none;
	}

	/* Standard buttons */
	&:not(.img) {
		display: inline-flex;
		padding: 0.45em 0.7em;
		align-items: center;
		background: var(--clr-button);
		color: var(--clr-button-text);
		border-radius: 0.25rem;
		font-size: 1.15em;
		font-weight: 550;
		font-family: "Montserrat", sans-serif;
		text-transform: uppercase;

		&:hover {
			background: var(--clr-button-hover);
		}

		&.dark {
			background: var(--clr-button-dark);

			&:hover {
				background: var(--clr-button-dark-hover);
			}
		}
		&.coffee {
			padding: 0.75em;
			background: var(--clr-button-coffee);

			&:hover {
				background: var(--clr-button-coffee-hover);
			}

			img {
				height: 1.5em;
			}
		}
	}

	&.img {
		--btn-size: 9em;

		display: flex;
		flex-direction: column;
		width: 9em;
		height: 9.5em;
		border: 1px solid var(--clr-brand-red);
		border-radius: 0.5em;
		position: relative;

		&:hover {
			div.img > img {
				filter: none;
			}
		}

		div.img {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 0;

			img {
				min-height: 0;
				object-fit: cover;
				filter: grayscale(20%) brightness(80%);
				transition: filter var(--transition-duration-btn) var(--transition-curve-default);
			}
		}

		div.title {
			background: var(--clr-shade);
			color: var(--clr-brand-white);
			font-size: 0.8em;
			padding: 0.25em 0.5em;
			text-align: center;
		}
	}
}

/* Image button container */
div.feature-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}

/* Text links */
a:not(.btn) {
	display: inline-block;
	position: relative;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration-link) var(--transition-curve-default);

	&:focus, &:hover {
		color: var(--clr-link-active);

		&::before {
			transform: scaleX(1);
			transform-origin: left;
		}
	}

	&::before {
		content: '';
		position: absolute;
		bottom: 0.15em;
		left: 0;
		width: 100%;
		height: 0.1em;
		background: var(--clr-link-active);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform var(--transition-duration-link) ease-in
	}
}