@import url('fa.css');


@font-face {
   	font-family: "Montserrat";
    font-style: normal;
    src: url("../fonts/Montserrat.ttf");
}

:root {
	--c1: #333333;	/* text-color 	*/
	--c2: #606060;	/* gray 		*/
	--c3: #ab733a;	/* lightbrown 	*/
	--container: 1280px;
	--gap: 20px;
	--mtop: 280px;
	--grid-template: 
		[full-width-start] 
		minmax(var(--gap), 1fr) 
			[picture-start]
			var(--gap) 
				[content-start] 
				min((50% - calc(var(--gap) * 1)), calc(var(--container) / 2)) 
					[center-start] 
					0px 
					[center-end] 
				min((50% - calc(var(--gap) * 1)), calc(var(--container) / 2)) 
				[content-end] 
			var(--gap)  
			[picture-end]
		minmax(var(--gap), 1fr) 
		[full-width-end];
}

.container {
	width: calc(100% - calc(var(--gap) * 2));
	padding: 0 var(--gap);
	max-width: var(--container);
	margin: auto;
}

html {
  scroll-behavior: smooth;
}

body,
body * {
	margin: 0;
	padding: 0;
	z-index: 1;
	position: relative;
	font-family: "Montserrat";
	font-weight: 400;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	color: var(--c1);
	fill: var(--c1);
	text-decoration: none;
	font-size: clamp(16px, 1vw, 20px);
}

header,
main,
footer {
	display: grid;
	grid-template-columns: var(--grid-template);
}

header > *,
main > *,
footer > * {
	grid-column: content;
}

*:not([id='']) {
	scroll-padding-top: calc(var(--mtop) / 2);
}
*:not([id='']):target {
	margin-top: var(--mtop);
}

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	display: block;
	font-weight: 700;
	letter-spacing: 1px;
}

h1, .h1, h1 a, .h1 a {
	font-size: clamp(2rem, 3vw, 3rem);
}
h2, .h2, h2 a, .h2 a {
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}
h3, .h3 {
	font-size: clamp(1.5rem, 2vw, 2rem);
}
h4, .h4 {
	font-size: clamp(1rem, 1.5vw, 1.5rem);
}
h5, .h5 {
	font-size: clamp(1rem, 1.25vw, 1.25rem);
}

strong, strong * {
	font-weight: 600;
}

main ul,
main ol:not(#breadcrumb) {
	margin-left: 1.5em;
}

.totop {
	aspect-ratio: 1;
	height: clamp(10px, 3vh, calc(var(--gap) * 3));
	background: var(--c3);
	color: var(--c1);
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	display: none;
}
.totop.active {
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}


/*****************************************************************************************************

Header

*****************************************************************************************************/

header {
	padding-top: var(--mtop);
	z-index: 2;
}

header > nav {
	position: fixed;
	top: 0;
	left: calc(calc(100% - var(--container)) / 2);
	right: calc(calc(100% - var(--container)) / 2);
	width: var(--container);
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap) 0;
	background: white;
	border-bottom: calc(var(--gap) / 10) solid var(--c1);
	z-index: 10;
	transition: all .5s ease;
}
@media (max-width:1280px) {
	header > nav {
		left: 0;
		right: 0;
	}
}

header > nav > .logo {
	flex: 1 1 100%;
	margin: var(--gap);
	text-align: center;
}
header > nav > .logo img {
	width: 50%;
	height: 100%;
	object-fit: contain;
}
header > nav > nav {
	flex: calc(60% - calc(var(--gap) / 3));
}
header > nav > nav > ul {
	display: flex;
	list-style: none;
	height: 100%;
}
header > nav > nav > ul > li {
	flex-grow: 0;
}
header > nav > nav > ul > li > a {
	display: block;
	padding: calc(var(--gap) * 1.25);
	text-align: center;
	white-space: nowrap;
}
header > nav > nav > ul > li > a.selected,
header > nav > nav > ul > li:hover > a {
	background: var(--c1);
	color: white;
}
header > nav > .social {
	flex: calc(calc(40% - calc(var(--gap) * 2)) - calc(var(--gap) / 3));
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: flex-end;
	gap: var(--gap);
}
header > nav > .social *:hover {
	color: var(--c3);
	fill: var(--c3);
}
header > nav > .flags {
	flex: calc(calc(var(--gap) * 3) - calc(var(--gap) / 3));
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
header > nav > .flags > * {
	position: absolute;
	display: none;
	width: 80%;
	aspect-ratio: 6 / 5;
	overflow: hidden;
}
header > nav > .flags > * img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
header > nav > .flags:hover > *,
header > nav > .flags > *.active {
	display: inline-block;
}

header > svg {
	display: block;
	width: 100%;
	max-width: var(--container);
	margin: auto;
	padding: 0;
}
@media(max-width:1280px) {
	header > svg {
		width: calc(100% - calc(var(--gap) * 2));
		max-width: calc(var(--container) - calc(var(--gap) * 2));
		padding: 0 var(--gap);
	}
}
header > #claim {
	color: var(--c3);
	text-align: center;
	padding: var(--gap);
}


header .fab,
header .hamburger {
	aspect-ratio: 1;
	font-size: calc(var(--gap) * 1.5);
}
header .hamburger {
	position: absolute;
	display: none;
}

@media (max-width:1000px) {
	header > nav > nav,
	header > nav > .social {
		display: none;
	}
	header .hamburger {
		display: block;
		top: var(--gap);
		right: var(--gap);
	}
	header .hamburger .fa {
		font-size: calc(var(--gap) * 2);
	}
}

/* Scroll */

header > nav.scrolled {
	left: 0;
	right: 0;
	width: 100%;
	gap: 0;
}
header > nav.scrolled > * {
	padding-inline: var(--gap);
}
header > nav.scrolled > .logo {
	flex: 1 1 calc(20% - calc(var(--gap) * 8));
	margin: 0;
	flex-grow: 1;
}
header > nav.scrolled > .logo img {
	width: 100%;
}
header > nav.scrolled > nav {
	flex: calc(50% - calc(var(--gap) * 8));
}
header > nav.scrolled > .social {
	flex: calc(calc(40% - calc(var(--gap) * 2)) - calc(var(--gap) * 8));
}
header > nav.scrolled > .flags {
	flex: calc(calc(var(--gap) * 2));
}
header > nav.scrolled > .flags > * {
	height: 50% !important;
	aspect-ratio: 1;
}
header > nav.scrolled > .flags:hover > * {
	height: 50% !important;
	aspect-ratio: 2 / 1;
}


/*****************************************************************************************************

Main

*****************************************************************************************************/

main {
	margin-top: calc(var(--gap) * 2);
	min-height: 100vh;
}

main > .container > *,
main > * {
	margin-bottom: var(--gap);
}

main #breadcrumb {
	display: flex;
	list-style: none;
	padding: calc(var(--gap) / 2) 0;
	border-top: 1px solid var(--c1);
	border-bottom: 1px solid var(--c1);
}
main #breadcrumb * {
	color: var(--c3);
}
main #breadcrumb > *:after {
	display: inline-block;
	content: '>';
	width: var(--gap);
	text-align: center;
}
main #breadcrumb > *:last-child:after {
	content: '';
}

.teaser {
	grid-column: full-width;
}

.teaser figure {
	width: 100%;
	max-height: 100dvh;
	min-height: 50dvh;
	overflow: hidden;
}
.teaser figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all .5s ease;
}
.teaser:hover figure img {
	transform: scale(calc(100% + .1vw));
}
.teaser figure figcaption {
	display: grid;
	grid-template-columns: var(--grid-template);
	position: absolute;
	left: 0;
	bottom: var(--gap);
}
.teaser figure figcaption > * {
	grid-column: content;
	background: rgba(255,255,255,.8);
	padding: var(--gap);
}
.teaser figure figcaption h1 {
	font-size: clamp(1rem,1.5vw,2rem);
	text-transform: uppercase;
}
.teaser figure figcaption p a {
	color: var(--c3);
}
@media(max-width:1000px) {
	.teaser figure {
		aspect-ratio: 1;
	}
	.teaser figure figcaption {
		width: calc(100% - var(--gap));
		right: 0;
		padding: 1em;
	}
}


/*****************************************************************************************************

Footer

*****************************************************************************************************/

footer {
	
}