/*
Theme Name: Frihetsverket Child
Theme URI: https://frihetsverket.se/
Description: Child theme for Frihetsverket based on GeneratePress.
Author: Frihetsverket
Template: generatepress
Version: 1.0.0
Text Domain: frihetsverket-child
*/

:root {
	--fv-primary: #145b77;
	--fv-accent: #f5a223;
	--fv-footer-highlight: #bee6f5;
	--fv-text: #313131;
	--fv-bg: #ffffff;
	--fv-content-max: 960px;
	--fv-reading-max: 640px;
	--fv-hero-logo-max: 400px;
	--fv-bar-height: 12px;
	--fv-ease-squint-out: cubic-bezier(0.16, 1, 0.3, 1);
	--fv-font-body: "minion-pro", "Georgia", serif;
	--fv-font-ui: "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--fv-bg);
	color: var(--fv-text);
	font-family: var(--fv-font-body);
}

a {
	color: var(--fv-accent);
	text-decoration: none;

	&:hover,
	&:focus-visible {
		color: var(--fv-primary);
	}
}

.fv-hero {
	align-items: center;
	background: var(--fv-primary) url("assets/img/cover-bg.jpg") center / cover no-repeat;
	display: flex;
	justify-content: center;
	height: 80svh;
	min-height: 180px;
	overflow: hidden;
	padding: 1.5rem 1rem;
	position: relative;
	transition: height 700ms var(--fv-ease-squint-out);
	will-change: height;
	width: 100%;

	&.is-inner {
		height: 30svh;
	}

	.fv-logo-link {
		display: inline-block;
		max-width: var(--fv-hero-logo-max);
		width: min(70vw, var(--fv-hero-logo-max));
	}

	.fv-logo {
		display: block;
		width: 100%;
	}

	.fv-logo-mobile {
		display: none;
	}

	.fv-logo-link::after {
		background-color: var(--fv-primary);
		content: "";
		display: block;
		height: var(--fv-bar-height);
		margin: 0.75rem auto 0;
		max-width: var(--fv-hero-logo-max);
		width: 100%;
	}
}

.fv-navbar {
	margin: 2rem auto;
	max-width: var(--fv-content-max);
	padding-inline: 20px;

	.fv-menu {
		display: flex;
		flex-wrap: wrap;
		font: 700 1.25rem/1.2 var(--fv-font-ui);
		justify-content: center;
		list-style: none;
		margin: 0;
		padding: 0;
		row-gap: 0.4rem;
	}

	li {
		margin: 0;
	}

	a {
		color: var(--fv-accent);
		display: inline-block;
		padding: 0.75rem 1rem;
		position: relative;

		&::after {
			background: var(--fv-accent);
			bottom: 0.45rem;
			content: "";
			height: 3px;
			inset-inline: 1rem;
			opacity: 0.2;
			position: absolute;
			transform: scaleX(0);
			transition: transform 120ms ease-out;
		}

		&:hover::after,
		&:focus-visible::after {
			transform: scaleX(1);
		}
	}

	.current-menu-item > a::after,
	.current-page-ancestor > a::after {
		opacity: 1;
		transform: scaleX(1);
	}
}

.site.grid-container {
	max-width: 100%;
	padding: 0;
}

.inside-article {
	margin-inline: auto;
	max-width: var(--fv-content-max);
	padding: 0 20px 3rem;
}

.entry-content {
	&::before,
	&::after {
		background-color: var(--fv-primary);
		content: "";
		display: block;
		height: var(--fv-bar-height);
		margin-inline: auto;
		max-width: 400px;
		width: 100%;
	}

	&::before {
		margin-bottom: 0.75rem;
	}

	&::after {
		margin-top: 3rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--fv-primary);
		font-family: var(--fv-font-ui);
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1.2;
		margin: 0.4em 0;
	}

	h1 {
		font-size: clamp(2rem, 3vw, 3rem);
		margin-block: 1rem;
		text-align: center;
	}

	h2,
	h3 {
		font-size: clamp(1.6rem, 2.3vw, 2.25rem);
		text-align: center;
	}

	h4 {
		font-size: clamp(1.25rem, 2vw, 1.5rem);
	}

	p,
	ul,
	ol {
		font-size: clamp(1.05rem, 1.8vw, 1.25rem);
		line-height: 1.5;
		margin: 0.5em auto 1em;
		max-width: var(--fv-reading-max);
	}

	img {
		height: auto;
		max-width: 100%;
	}
}

.fv-home-badge {
	align-items: center;
	background: var(--fv-primary);
	border-radius: 50%;
	color: #fff;
	display: flex;
	float: right;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	height: 320px;
	justify-content: center;
	margin: 0 0 0.25rem 0.5rem;
	padding: 0 20px;
	text-align: center;
	width: 320px;
}

form,
.fluentform {
	label,
	.ff-el-input--label {
		color: var(--fv-primary);
		font-family: var(--fv-font-ui);
		font-weight: 700;
	}

	input,
	textarea {
		border: 0;
		border-bottom: 2px solid var(--fv-primary);
		font: 400 1.2rem/1.4 var(--fv-font-body);
		padding: 0.6em 0;
		width: 100%;

		&:focus {
			border-bottom-color: var(--fv-accent);
			outline: 0;
		}
	}

	button,
	.ff-btn-submit {
		background: var(--fv-primary);
		border: 0;
		color: #fff;
		cursor: pointer;
		font: 700 1.15rem/1.1 var(--fv-font-ui);
		margin-top: 1rem;
		padding: 0.8em 2em;

		&:hover,
		&:focus-visible {
			background: var(--fv-accent);
		}
	}
}

.fv-footer {
	background: var(--fv-primary);
	color: #fff;
	margin-top: 6rem;
	padding: 2rem 20px 1.25rem;

	.fv-footer-content {
		align-items: start;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		max-width: var(--fv-content-max);
	}

	.widget {
		max-width: 360px;
		padding: 10px;
	}

	h4,
	.widget-title {
		color: var(--fv-footer-highlight);
		font: 700 1.5rem/1.2 var(--fv-font-ui);
		margin: 0 0 0.4rem;
	}

	p {
		font-size: 1.1rem;
		line-height: 1.5;
		margin: 0.5rem 0;
	}

	a:hover {
		color: var(--fv-footer-highlight);
	}

	.fv-footer-logo {
		display: block;
		margin: 1rem auto 0;
		max-width: 120px;
	}
}

.transition-fade {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 220ms ease, transform 220ms ease;
}

html.is-animating .transition-fade {
	opacity: 0;
	transform: translateY(8px);
}

html.is-animating .transition-fade a {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.transition-fade {
		transition: none;
	}

	html.is-animating .transition-fade {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 767px) {
	.fv-hero {
		height: 70svh;

		&.is-inner {
			height: 180px;
		}

		.fv-logo-desktop {
			display: none;
		}

		.fv-logo-mobile {
			display: block;
		}
	}

	.fv-navbar {
		margin: 1rem auto;

		.fv-menu a {
			padding: 0.3rem 0.45rem;
		}
	}
	.fv-home-badge {
		float: none;
		font-family: var(--fv-font-body);
		height: 280px;
		margin: 1rem auto;
		width: 280px;
	}

	.entry-content {
		&::before,
		&::after {
			max-width: 100%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-hero {
		transition: none;
	}
}


.wp-block-heading{
    text-align: center;
}