/* Font setup */

@font-face {
	font-family: "kepler-std-condensed-display";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	src:
		url("fonts/kepler_std_condensed_display.5383ed9599d5.woff2") format("woff2"),
		url("fonts/kepler_std_condensed_display.49e1bf2fb0b5.woff") format("woff"),
		url("fonts/kepler_std_condensed_display.ada98d6e4bc2.otf") format("opentype");
}

@font-face {
	font-family: "krul";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	src:
		url("fonts/krull.f59523208a84.woff2") format("woff2"),
		url("fonts/krull.758ed6270721.woff") format("woff"),
		url("fonts/krull.553d2788e650.otf") format("opentype");
}

/* Global theme setup */

:root {
	--theme-color-beige: #fff5dc;
	--theme-color-purple: #543649;
	--theme-color-pink: #cc3a83;
	--theme-color-blue: #0a88c0;
	--theme-color-red: #bd3033;

	--pico-block-spacing-vertical: 1rem;
	--pico-line-height: 1.2;
	--pico-form-element-spacing-vertical: 0.5rem;

	--pico-font-family: "kepler-std-condensed-display", serif;
	font-family: "kepler-std-condensed-display", serif;

	--pico-font-size: 120%;
}

/* Override pico font size: increase by 20% */
@media (min-width: 576px) {
	:root,
	:host {
		--pico-font-size: 126.25%;
	}
}
@media (min-width: 768px) {
	:root,
	:host {
		--pico-font-size: 132.5%;
	}
}
@media (min-width: 1024px) {
	:root,
	:host {
		--pico-font-size: 138.75%;
	}
}
@media (min-width: 1280px) {
	:root,
	:host {
		--pico-font-size: 145%;
	}
}
@media (min-width: 1536px) {
	:root,
	:host {
		--pico-font-size: 151.25%;
	}
}

/* For light theme, only one used */
[data-theme="light"],
:root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
	background-color: var(--theme-color-beige);
	--pico-primary-background: var(--theme-color-purple);
	--pico-primary-hover-background: var(--theme-color-pink);
	--pico-primary-focus: var(--theme-color-pink);
}

/* Helpers */

.text-center {
	text-align: center;
}

/* Main nav */

.header-nav {
	justify-content: center;
}

.header-menu-item {
	flex-grow: 1;
	align-self: center;
	border-bottom: 0.2rem solid var(--theme-color-purple);
}

.header-menu-item-left {
	align-items: end;
	text-align: end;
	flex-flow: row-reverse;
}

.header-menu-item-right {
	align-items: start;
	text-align: start;
	flex-flow: row;
}

.header-menu-item > li {
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0.4rem;
}

a.header-menu-item-selected:not(:hover) {
	text-decoration: underline;
}

.wedding-logo {
	width: 4rem;
}