/*
Theme Name: Pingst Ung - WP Core by Johan
Author: Johan Öhrvall
Description: Specialbyggt för Pingst Ung
Text Domain: wp-core-by-johan
*/

:root {
	--font-family-1: "Inter", helvetica, arial, sans-serif;
	
	--size-base: 18px;
	--size-xxs: calc( var(--size-base) / 1.62 / 1.62 / 1.62 );
	--size-xs: calc( var(--size-base) / 1.62 / 1.62 );
	--size-s: calc( var(--size-base) / 1.62 );
	--size-m: calc( var(--size-base) );
	--size-l: calc( var(--size-base) * 1.62 );
	--size-xl: calc( var(--size-base) * 1.62 * 1.62 );
	--size-xxl: calc( var(--size-base) * 1.62 * 1.62 * 1.62 );
	--size-xxxl: calc( var(--size-xxl) + var(--size-s) );
	
	--color-dark: #1A1A1A;
	--color-light: #fff;
	
	--color-lightgrey: #f2f2f2;
	--color-midgrey: #E5E5E5;
	--color-darkgrey: #3C3C3C;
	
	--color-blue: #007D8A;
	--color-terra: #E07A5F;
	--color-yellow: #FFD700;
	
	--inner-wide: 820px;
	--inner-narrow: 700px; /* 625px */
	--inner-slim: 500px;
}


/* General body styling */
body {
	font-family: var(--font-family-1);
	font-size: var(--size-m);
	color: var(--color-dark);
	margin: 0;
	padding: 0;
	background-color: var(--color-light);
	/*
	background: url('images/gradients/08.jpg') no-repeat center center;
	background-size: cover;
	*/
}
*{
	font-family: var(--font-family-1);
	font-size: var(--size-m);
}

h1{
	font-size: var(--size-xxl);
}
h2{
	font-size: var(--size-xl);
}
h3, h4{
	font-size: var(--size-l);
}

a{
	color: var(--color-blue);
	text-decoration: none;
}
a:visited{
	color: var(--color-blue);
	text-decoration: none;
}

.center{
	text-align: center;
}

.btn{
	border: 2px solid var(--color-dark);
	border-radius: 100px;
	color: var(--color-light) !important;
	background: var(--color-dark);
	display: inline-block;
	padding: var(--size-xs) var(--size-m);
	font-weight: 500;
	font-size: calc( var(--size-m) - 2px );
}
.btn:hover{
	background: transparent;
	color: var(--color-dark) !important;
}
hr{
	border: none;
	border-top: 1px solid var(--color-midgrey);
	margin: var(--size-m) 0;	
}
hr.dashed{
	border: none;
	border-top: 1px dashed var(--color-midgrey);
	margin: var(--size-m) 0;
}
.red{
	color: var(--color-terra);
}
.hard-warning{
	background: var(--color-terra);
	color: var(--color-light);
	width: 100%;
	padding: var(--size-s) 0;
	text-align: center;
	font-weight: bold;
}
.hard-message{
	background: var(--color-blue);
	color: var(--color-light);
	width: 100%;
	padding: var(--size-s) 0;
	text-align: center;
	font-weight: bold;
}

/* Container */
.container {
	width: 90%;
	max-width: var(--inner-wide);
	margin: var(--size-xl) auto;
	position: relative;
}
.inner{
	width: 90%;
	max-width: var(--inner-wide);
	margin: 0 auto;
}
.inner-slim{
	max-width: var(--inner-slim);	
}

.container h2{
	max-width: 100%;
	margin: 0 auto;	
}

/* Header and navigation */
header {
	background-color: var(--color-light);
	padding: var(--size-l) 0;
	border-bottom: 1px solid var(--color-midgrey);
	border-bottom: none;
}
header .inner{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
header .inner > *{
	
}


#logo{
	display: block;
	height: var(--size-l);
}

#logo img{
	height: 100%;
	width: auto;
}

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

.main-navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.main-navigation ul li {
	display: inline-block;
	margin: 0 calc(var(--size-m) / 2);
	position: relative;
}

.main-navigation ul li a {
	text-decoration: none;
	color: var(--color-dark);
	font-weight: 500;
}

.main-navigation ul li a:hover {
	color: var(--color-blue);
}

/* Submenu styles */
.main-navigation ul li ul {
	display: none; /* Hide submenu by default */
	position: absolute;
	top: 100%;
	left: 0;
	list-style-type: none;
	padding: 0;
	margin: 0;
	background-color: var(--color-light);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 9999;
}

.main-navigation ul li ul li {
	display: block;
	margin: 0;
}

.main-navigation ul li ul li a {
	padding: var(--size-s) var(--size-m);
	white-space: nowrap;
	display: block;
}

.main-navigation ul li ul li a:hover {
	background-color: var(--color-blue);
	color: var(--color-light);
}

/* Show submenu on hover */
.main-navigation ul li:hover ul {
	display: block;
}

/* Triangle indicator for items with submenus */
.main-navigation ul li.has-submenu > a::after {
	content: '';
	display: inline-block;
	margin-left: 0.5em;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--color-dark); /* Triangle color */
	vertical-align: middle; /* Align the triangle vertically with text */
}

/* Change the triangle color when hovering */
.main-navigation ul li.has-submenu:hover > a::after {
	border-top-color: var(--color-blue); /* Change arrow color on hover */
}

/* Plugins */
.pu-form{
	width: calc(100% - var(--size-l) - var(--size-l));
	max-width: var(--inner-slim);
	margin: var(--size-xl) auto var(--size-xxxl) auto;
}
label{
	width: 100%;
	margin-top: var(--size-s);
	margin-bottom: var(--size-xxs);
	display: block;
}
input{
	width: calc(100% - (var(--size-xs) * 2));
	padding: var(--size-s) var(--size-xs);
	border: 1px solid var(--color-darkgrey);
	border-radius: var(--size-xxs);
	display: block;
}
input[type="submit"]{
	width: auto;
	border: none;
	padding: var(--size-s) var(--size-l);
	background: var(--color-blue);
	color: var(--color-light);
	margin: 0 auto;
	margin-top: var(--size-l);
	border-radius: 100px;
}

/* Archive */
body.archive{
	background: var(--color-lightgrey);
}
.archive-posts-list{
	display: flex;
	flex-direction: row;
	gap: var(--size-m);
	flex-wrap: wrap;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: var(--size-s);
}
.archive-posts-list.preview{
	background: var(--color-light);
	width: var(--inner-slim);
	margin: 0 0 var(--size-xl) 0;
	padding: var(--size-m) var(--size-l);
	border-radius: var(--size-s);
}
.archive-posts-list.preview > h4{
	margin-top: var(--size-s);
	margin-bottom: var(--size-l);
	width: 100%;
	text-align: center;
}
.material-article{
	display: inline-block;
	background: var(--color-light);
	max-width: 240px;
	box-sizing: border-box;
	color: var(--color-dark) !important;
	
	border-radius: var(--size-s);
	flex: 1 1 calc(33.3333% - var(--size-s) + (var(--size-s) / 3) );
	max-width: calc(33.3333% - var(--size-s) + (var(--size-s) / 3) );
	position: relative;
}
.archive-posts-list.preview .material-article{
	flex: 1 1 calc(50% - var(--size-s) + (var(--size-s) / 2) );
	max-width: calc(50% - var(--size-s) + (var(--size-s) / 2) );
	background: var(--color-lightgrey);
}
.material-article img{
	width: 100%;
	height: auto;
	border-radius: var(--size-s) var(--size-s) 0 0;
}

.material-article-content{
	padding: var(--size-l) var(--size-m) var(--size-xxl) var(--size-m);
	position: relative;
}
.material-article-content *{
	color: var(--color-dark);
}
.material-article-content > *:first-child{
	margin-top: 0;
}
.material-article button{
	cursor: pointer;
	margin-top: var(--size-s);
	  position: absolute;
	  bottom: var(--size-l);
	  left: var(--size-m);
}
.material-article h4{
	margin-bottom: 0;
}

/* All materials */
#all-materials{
	display: flex;
	flex-direction: row;
}
#all-materials .material-item{
	width: 100%;
	max-width: calc( var(--inner-wide) / 3 );
	margin-right: var(--size-m);
	margin-bottom: var(--size-m);
	background: var(--color-lightgrey);
	border-radius: var(--size-s);
}
.material-img{
	background: url('images/levalivet.jpg') no-repeat center center;
	background-size: cover;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	border-radius: var(--size-s) var(--size-s) 0 0;
}
.material-item .btn svg{
	color: var(--color-terra);
	fill: var(--color-terra);
	height: var(--size-m);
	width: auto;
	position: relative;
	top: 1px;
}
.material-item .btn + .btn{
	margin-top: var(--size-xs);
}
.material-content{
	padding: var(--size-m);
}

.material-message{
	background: var(--color-light);
	padding: var(--size-m) var(--size-l);
	border-radius: var(--size-s);
	max-width: 500px;
	margin-bottom: var(--size-l);
	color: var(--color-darkgrey);
	line-height: 1.6;
}
.material-message h4.warning{
	margin-top: var(--size-xs);
	margin-bottom: var(--size-m);
	line-height: 1.4;
	position: relative;
	padding-left: var(--size-xl);
}
.material-message h4.warning:before{
	content: "!";
	font-size: var(--size-xxl);
	font-weight: bold;
	color: var(--color-terra);
	padding-bottom: var(--size-m);
	position: absolute;
	top: -13px;
	left: 6px;
}
h1.archive-title{
	font-size: var(--size-xl);
}
.archive .category-title{
	border-top: 1px solid var(--color-midgrey);
	margin-left: 0;
	margin-bottom: var(--size-m);
	font-size: var(--size-l);
	padding-top: var(--size-m);
	width: 100%;
	max-width: 100%;
}
.archive-posts-list + .category-title{
	margin-top: var(--size-l);
}
/* Single */
.single .container{
	max-width: var(--inner-slim);
}
.single .material-message{
	background: var(--color-lightgrey);
}

/* Footer */
footer {
	text-align: center;
	padding: var(--size-m);
}

/* */
.pingst-ung-block h4{
	font-size: var(--size-m);
}
.extra-space{
	margin: var(--size-xxl) 0;
}
.block-materials{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: var(--size-s);
}
.block-materials-material{
	background: #f7f7f7;
	border-radius: var(--size-s);
	flex: 1 1 calc(33.3333% - var(--size-s) + (var(--size-s) / 3) );
	max-width: calc(33.3333% - var(--size-s) + (var(--size-s) / 3) );
	position: relative;
}
.block-materials-material-img{
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	background: no-repeat center center;
	background-size: cover;
	border-radius: var(--size-s) var(--size-s) 0 0;
}
.block-materials-material-content{
	padding: var(--size-l) var(--size-m) var(--size-xxl) var(--size-m);
	position: relative;
}
.block-materials-material-content *{
	color: var(--color-dark);
}
.block-materials-material-content > *:first-child{
	margin-top: 0;
}
.block-materials-material button{
	cursor: pointer;
	margin-top: var(--size-s);
	  position: absolute;
	  bottom: var(--size-l);
	  left: var(--size-m);
}
.block-materials-material h4{
	margin-bottom: 0;
}

.material-level{
	font-size: calc(var(--size-m) - 2px);
	opacity: 0.62;
}
.material-level em{
	font-size: calc(var(--size-m) - 2px);	
}

/* */
.subscribe-to-material-form label{
	max-width: calc(50% - var(--size-s) - 4px);
	display: inline-block;
	margin-right: var(--size-s);
}

/* */
#searchform{
	display: flex;
	flex-direction: row;
	max-width: 240px;
	position: absolute;
	top: -98px;
	right: 0;
}

#searchform input{
	margin-right: 0;
	border-radius: 100px 0 0 100px;
	padding: 0 var(--size-m);
}
#searchform button{
	border-radius: 0 100px 100px 0;
	padding: var(--size-xs) var(--size-s) var(--size-xs) var(--size-s);
}
#searchform button:hover{
	background: var(--color-dark);
}
#searchform button:hover svg{
	color: var(--color-yellow);
	fill: var(--color-yellow);	
}
#searchform svg{
	color: var(--color-light);
	fill: var(--color-light);
	height: var(--size-m);
	width: auto;
	position: relative;
	top: 2px;
	left: -2px;
}

/* Minimal responsiveness */
@media (max-width: 720px) {
	.main-navigation ul li {
		display: block;
		margin: var(--size-m) 0;
	}
}