/*
Styles for the EasyImgur page (index.php). It is loaded after /css/site.css of the main website, which provides the
layout, fonts and components. This file swaps the colors for EasyImgur's green and adds what only this page has.
stats_explorer.php still uses style0.css together with Bootstrap.
*/

:root
{
	--color-accent: #1bb76e;
	--color-link: light-dark(#0d8048, #2fd88a);	/* The green, adjusted to be readable at small text sizes. */
	--color-link-hover: light-dark(#0a6338, #6fe7ad);

	--gradient-colors: #1bb76e, #85bf25, #2fd88a, #19a7a0;
	--gradient: linear-gradient(90deg, var(--gradient-colors));
	--gradient-text: linear-gradient(90deg, #1bb76e, #85bf25);
	--gradient-button: linear-gradient(90deg, #0d8048, #128f52);	/* Dark enough for white text. */
}

/* The name of the application, with its 'e' and 'i' in green. */
.wordmark
{
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: lowercase;
}

.wordmark span
{
	color: var(--color-accent);
}

.brand
{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-transform: none;
}

.brand .wordmark
{
	font-size: 1.5rem;
}

/* With four items the navigation doesn't fit next to the name on phones, so it moves to its own row. */
@media (max-width: 42rem)
{
	:root
	{
		--header-height: 6rem;
	}

	.site-header-inner
	{
		flex-wrap: wrap;
		padding-top: 0.5rem;
	}

	.site-nav
	{
		order: 1;
		flex-basis: 100%;
	}

	.site-nav ul
	{
		justify-content: space-between;
	}

	.site-nav a
	{
		padding-inline: 0;
	}

	.site-nav a::after
	{
		inset-inline: 0;
	}
}

.hero::before
{
	background:
		radial-gradient(circle at 60% 110%, #1bb76e, transparent 40%),
		radial-gradient(circle at 95% 10%, #85bf25, transparent 40%),
		radial-gradient(circle at 100% 90%, #19a7a0, transparent 35%);
}

.hero h1.wordmark
{
	max-width: none;
	font-size: clamp(3rem, 12vw, 6rem);
}

.hero-role
{
	max-width: 36rem;
}

.hero-role a
{
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.hero-actions,
.actions
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
}

/* Buttons are as wide as their text here, instead of as wide as their container. */
.button
{
	width: auto;
}

.button:hover
{
	color: #ffffff;
	box-shadow: 0 6px 20px rgb(27 183 110 / 0.35);
}

.button-outline
{
	border: 2px solid var(--color-border-strong);
	background: none;
	color: var(--color-text);
}

.button-outline:hover
{
	border-color: var(--color-accent);
	box-shadow: none;
	color: var(--color-text);
	filter: none;
}

/* The three steps of using the application. */
.steps
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.steps li
{
	padding: 1.25rem;
	border-radius: var(--radius);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-card);
}

/*
The drawings are black lines on white. 'multiply' makes their white take on the color of the card behind them.
In the dark theme they are inverted to white lines on black, where 'screen' does the same for their black.
*/
.steps img
{
	display: block;
	width: 100%;
	mix-blend-mode: multiply;
}

:root[data-theme="dark"] .steps img
{
	filter: invert(1);
	mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="light"]) .steps img
	{
		filter: invert(1);
		mix-blend-mode: screen;
	}
}

.steps h3
{
	margin: 1rem 0 0.4rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
}

.steps p
{
	margin: 0;
	color: var(--color-text-muted);
}

.guides
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.guides a
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.15rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--color-surface) border-box;
	box-shadow: var(--shadow-card);
	color: var(--color-text);
	font-weight: 600;
}

.guides a:hover,
.guides a:focus-visible
{
	background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--gradient) border-box;
}

.guides .icon
{
	color: var(--color-link);
}