/*
 Theme Name:   Telte Theme
 Description:  Twenty Twenty Child Theme for Telte.nu
 Author:       Malthe Kusk Lauritsen
 Template:     twentytwenty
 Version:      1.0.3
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;500;600;700&display=swap');

/*:root {
	--logo-font: 'Courier New', monospace;
	--primary-font: 'Lexend', sans-serif;
	--content-width: 120rem;
	--body-color: #cbd5de;
	--strong-color: #B7C5D4;
	--footer-color: #232323;
	--accent-color: #232323;
	--link-color: #144C94;
	--button-hover-color: #0E3E7B;
	--placeholder-accent-color: #E5E7EB;
	--rounding: 0;
	--product-page-spacing: 2rem;
}*/

:root {
	--logo-font: 'Courier New', monospace;
	--primary-font: 'Lexend', sans-serif;
	--content-width: 120rem;
	--body-color: #FFFFFF;
	--font-color: #232323;
	--strong-color: #F2F2F2;
	--footer-color: #070B14;
	--accent-color: #144C94;
	--link-color: #144C94;
	--button-hover-color: #0E3E7B;
	--placeholder-accent-color: #A5A8AD;
	--rounding: 6px;
	--product-page-spacing: 2rem;
}

* {
	font-family: var(--primary-font);
}

body {
	background-color: var(--body-color) !important;
	color: var(--font-color);
}

#site-content {
	padding-top: 0;
}

#site-content > section, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	padding: 0 1rem;
	width: 100%;
	max-width: var(--content-width);
	margin: 4rem auto;
}

#site-content > section {
	margin-top: 12rem;
}

header.entry-header {
	background-color: transparent !important;
	text-align: left;
	padding: 4rem 0 0 !important;
	max-width: var(--content-width);
	margin-inline: auto;
	display: none;
}

.entry-header-inner {
	margin-inline: 0;
	padding-inline: 1rem;
}

.site-title a, .site-description, .footer-title > a, .page-id-235 .splash-background-container h1 {
	font-family: var(--logo-font);
}

.button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], button[name="wpforms[submit]"] {
	font-family: var(--primary-font);
	background-color: var(--accent-color) !important;
	color: white !important;
	width: 35rem;
	max-width: 100%;
	padding: 1.5rem;
	border: none;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 300ms;
	text-transform: uppercase;
	border-radius: var(--rounding);
}

.button:hover, .faux-button:hover, .wp-block-button__link:hover, .wp-block-file:hover .wp-block-file__button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button[name="wpforms[submit]"]:hover {
	text-decoration: none !important;
	background-color: var(--button-hover-color) !important;
}

.post-inner {
	padding: 0 !important;
}

[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none;
	margin-inline: 0;
}

.page-id-235 header.entry-header {
  display: none;
}

h2 {
	margin: 1rem 0 !important;
}

p {
	font-size: 1.5rem;
	max-width: 70rem !important;
	margin: 0 0 1rem;
}

@media (min-width:700px) {
	p {
		font-size: 1.8rem;
	}
}

p a {
	color: var(--link-color);
	text-decoration: none;
	font-weight: 500;
	background-image: linear-gradient(var(--link-color), var(--link-color));
	background-size: 100% 2px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(.58,.3,.005,1);
}

p a:hover, p a:focus, p a:active {
	background-size: 0% 2px;
}

strong {
	font-weight: 500;
}

#site-content li {
	font-size: 1.8rem;
	max-width: 70rem !important;
}

@media (min-width: 700px) {
	h1, .heading-size-1 {
		font-size: 5rem;
	}
}

@media (min-width: 1220px) {
	h1, .heading-size-1 {
		font-size: 6rem;
	}
}

.splash-background-container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.splash-background-container > div:first-child {
	display: grid;
}

.splash-background-container > div:first-child > * {
	grid-column: 1;
	grid-row: 1;
}

/*.splash-text-box {
	background-color: var(--strong-color);
	border-radius: var(--rounding);
	width: calc(100% - 2rem) !important;
	height: max-content;
	margin: auto 1rem 0 !important;
	padding: 2rem;
	box-shadow: 0 0 10px black;
	filter: brightness(1);
}*/

.splash-text-box {
	filter: brightness(1);
	color: var(--strong-color);
	height: max-content;
	margin: auto !important;
	text-align: center;
	padding: 2rem;
}

.splash-text-box h1 {
	font-family: var(--logo-font) !important;
}

.splash-text-box h1, .splash-text-box p, .splash-text-box .wp-block-button {
	margin: 1rem auto !important;
}

.splash-background-container > div:first-child > h1 {
	font-family: var(--primary-font);
	font-weight: 400 !important;
	letter-spacing: normal;
	margin: auto !important;
	text-align: center;
	padding-top: 8rem;
	color: var(--strong-color);
	filter: brightness(1);
}


.splash-background {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.splash-background img {
	width: 100% !important;
	height: 30vh;
    object-fit: cover;
    object-position: center bottom;
	filter: brightness(0.6);
}

.page-id-235 .splash-background img {
	height: 60vh;
}

@media (min-width: 650px) {
	.splash-background img {
		height: 30rem;
	}
	
	.page-id-235 .splash-background img {
		height: 80rem;
	}
}

/*-----contact-----*/

.contact-info-container i {
	font-size: 2rem;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
}

.wpforms-container-full input:focus {
	border-color: var(--accent-color) !important;
	box-shadow: 0 0 0 1px var(--accent-color),0px 1px 2px rgba(0,0,0,0.15) !important;
}

/*-----header-----*/

header#site-header {
	position: fixed !important;
	top: 0 !important;
	width: 100% !important;
	background-color: var(--strong-color) !important;
	z-index: 100;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

header#site-header > .header-inner {
	padding-block: 2.8rem;
}

header a {
	color: var(--font-color) !important;
}

.site-title, .site-description, ul.primary-menu, .primary-menu > li {
	margin: 0 !important;
}

.site-title a:hover {
	text-decoration: none;
}

ul.primary-menu {
	gap: 1rem;
}

.modal-menu li > .ancestor-wrapper > a, .primary-menu a, footer a:not([target="_blank"]) {
	text-decoration: none !important;
	font-weight: 500;
	background-image: linear-gradient(var(--accent-color), var(--accent-color));
	background-size: 0% 2px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(.58,.3,.005,1);
}

footer a:not([target="_blank"]) {
	background-image: linear-gradient(white, white);
}

.modal-menu li > .ancestor-wrapper > a:hover, .primary-menu li.current-menu-item > a, .primary-menu li.current-menu-item > .link-icon-wrapper > a, .primary-menu a:hover, .primary-menu a:focus, .primary-menu .current_page_ancestor, 
.primary-menu li.current-menu-item > a:hover, footer a:not([target="_blank"]):hover {
	background-size: 100% 2px;
}

.header-titles-wrapper {
	justify-content: space-between;
	padding: 0;
}

.nav-toggle.toggle {
	position: static;
	width: auto;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.nav-toggle .toggle-inner {
	display: flex;
	padding: 0;
}

.nav-toggle .toggle-icon {
	height: 2rem;
	width: auto;
	font-size: 2rem;
	margin-block: auto;
	transition-duration: 250ms;
}

button.nav-toggle.active .toggle-icon {
	height: 1rem;
}

.menu-wrapper {
	position: static;
	padding-top: 9rem;
}

.menu-top button.close-nav-toggle {
	display: none;
}

.modal-menu {
	width: 100%;
	left: 0;
}

.mobile-menu ul li:first-of-type {
	border-top: none;
}

.modal-menu li > .ancestor-wrapper > a {
	padding: 2rem 0;
	color: black;
	font-weight: 400;
	text-underline-offset: 0.75rem;
}

.menu-modal-inner {
	background-color: var(--body-color) !important;
}

@media (min-width: 700px) {
	.header-titles {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0;
		gap: 1rem;
	}
}

@media (min-width: 999px) {
	.menu-modal.active {
		display: none;
	}
}

/*-----footer-----*/

.footer-nav-widgets-wrapper {
	/*-hide-widgets-*/
	display: none;
}

#site-footer {
	background-color: var(--footer-color) !important;
	margin-top: 5rem;
}

#site-footer * {
	color: white !important;
}

#site-footer .section-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 700px) {
	#site-footer .section-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr)
	}
}

#site-footer .footer-title {
	margin-inline: auto;
	text-align: center;
}

#site-footer .footer-title > a {
	font-size: 3.5rem;
}

#site-footer .social-media-links {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-block: 2rem;
}

#site-footer .social-media-links i {
	font-size: 4rem;
	color: white;
	transition-duration: 200ms;
}

#site-footer .social-media-links i:hover {
	opacity: 0.5;
}

#site-footer .section-inner > div p:first-child {
	font-size: 2.5rem;
	color: white;
	margin-bottom: 0.5rem;
}

#site-footer .footer-contacts > *, #site-footer .footer-nav > * {
	margin-bottom: 1rem;
}

#site-footer .footer-contacts i {
	font-size: 2rem;
	margin-right: 1rem;
}


/*-----wp-forms-----*/

.wpforms-container .wpforms-field {
	padding: 0 0 1rem;
}

/*-----categories-----*/

#categories-container {
	display: grid;
	gap: 2rem;
}

.category-container {
	position: relative;
	overflow: hidden;
	border-radius: var(--rounding);
}

.category-container img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
}

.category-info {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 5rem;
	transition-duration: 0.5s;
	display: grid;
	place-items: center;
}

.category-container:hover .category-info {
	height: 100%;
}

.category-name-backdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 50%;
}

.category-info p {
	color: white;
	font-size: 2.5rem;
	font-weight: 600;
	margin: 0;
	z-index: 1;
}

@media (min-width: 600px) {
	#categories-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 800px) {
	#categories-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*-----product-container-----*/

.products-container {
	display: grid;
	grid-gap: 3rem;
	margin-block: 3rem;
}

@media (min-width: 600px) {
	.products-container {
		grid-template-columns: repeat(2, 1fr);
	}
	
	#landing-festpakker-container.products-container a:last-of-type {
		display: none;
	}
}

@media (min-width: 1000px) {
	.products-container {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#landing-festpakker-container.products-container a:last-of-type {
		display: block;
	}
}

/*-----product-card-----*/

.product-card-container {
	display: block;
	height: 100%;
	text-decoration: none;
}
	
.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--strong-color);
	box-shadow: 0 0 10px black;
	cursor: pointer;
	transition-duration: 300ms;
	border-radius: var(--rounding);
}

.product-card:hover {
	transform: scale(1.05);
}

.product-card p {
	font-size: 1.5rem;
	margin: 0;
	color: black;
}

.product-card img {
	height: 20rem;
	width: 100%;
	object-fit: cover;
	border-top-left-radius: var(--rounding);
	border-top-right-radius: var(--rounding);
}

.product-card .product-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
	flex-grow: 1;
}

.product-card .product-info p:first-child {
	font-size: 1.7rem;
	font-weight: 600;
}

.product-card .product-info p:last-child {
	font-weight: 600;
}

.product-card .product-info button {
	font-family: var(--primary-font);
	margin-top: 1rem;
	width: 100%;
}

.placeholder.product-card {
	position: relative;
	cursor: auto;
	pointer-events: none;
	overflow: hidden;
}

.placeholder.product-card > div > div:first-child {
	background-color: var(--placeholder-accent-color);
	height: 20rem;
	width: 100%;
	border-top-left-radius: var(--rounding);
	border-top-right-radius: var(--rounding);
}

.placeholder.product-card div div div p {
	background-color: var(--placeholder-accent-color);
	color: var(--placeholder-accent-color);
	margin-bottom: 1px;
	border-radius: var(--rounding);
}

.placeholder.product-card div div div p:first-child {
	width: 20rem;
}

.placeholder.product-card div div div p:nth-child(4) {
	width: 5rem;
}

.placeholder.product-card button {
	background-color: var(--placeholder-accent-color) !important;
	color: var(--placeholder-accent-color) !important;
}

.placeholder.product-card .load-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(242,242,242,1) 50%, rgba(255,255,255,0) 100%);
	animation: dash 500ms ease-in-out infinite;

}

@keyframes dash {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/*-----product-page-----*/

.product-page span:first-of-type {
	font-weight: 600;
}

.product-page .product-top {
	display: grid;
	gap: var(--product-page-spacing);
	margin-bottom: var(--product-page-spacing);
}

@media (min-width:650px) {
	.product-page .product-top {
		grid-template-columns: 1fr 1fr;
	}
}

.product-page .product-top img {
	display: block;
	width: 100%;
	aspect-ratio: 5/4;
	object-fit: cover;
	border-radius: var(--rounding);
}

.product-page .product-images-extra {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.product-page .product-images-extra img {
	cursor: pointer;
}

.product-page .product-images-extra img[data-current="true"] {
	border: 3px solid var(--accent-color);
}

.product-page .product-top .product-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--strong-color);
	padding: 2rem;
	border-radius: var(--rounding);
}

.product-page .product-top .product-name {
	font-weight: 500;
	margin: 0 0 1rem !important;
}

.product-page .product-top .product-info button {
	width: 100%;
}

.product-page .product-details {
	background-color: var(--strong-color);
	padding: 2rem;
	border-radius: var(--rounding);
}

.product-page .product-details p {
	margin: 0;
}

.product-page .product-details p:first-of-type {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.product-page h3 {
	font-size: 3rem;
	font-weight: 500;
}