/*
	Theme Name: Eidam
	Author: Daniel Schmitzer (daniel@maennchen1.de)
	Version: 1.0
	Text Domain: eidam
*/

@import url('./assets/css/variables.css');
@import url('./assets/css/404.css');
@import url('./assets/css/footer.css');
@import url('./assets/css/block-textblock.css');
@import url('./assets/css/block-address.css');
@import url('./assets/css/block-google-reviews.css');
@import url('./assets/css/block-appointment.css');
@import url('./assets/css/block-employee.css');
@import url('./assets/css/block-contact.css');
@import url('./assets/css/floating-contact.css'); 
@import url('./assets/css/twocolumngrid.css');
@import url('./assets/css/special.css');
@import url('./assets/css/icongrid.css');

/* Inter Font */
@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-100.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-200.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-300.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-500.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-600.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-800.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter-900.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
} 

* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family:var(--font-primary); font-size:16px; line-height:18px; }
html { scroll-padding-top:80px; }

body { padding-top:72px; }

h1, h2 { color:var(--color_bud); font-size:24px; line-height:30px; font-weight:var(--fontWeight_bold); margin-bottom:40px; }
h3 { color:var(--color_bud); font-size:20px; line-height:32px; font-weight:var(--fontWeight_bold); margin-bottom:12px; }
h4 { color:var(--color_bud); font-size:20px; line-height:32px; font-weight:var(--fontWeight_bold); margin-bottom:12px; }
p { margin-bottom:12px; font-size:18px; line-height:28px; color:var(--textColor); 
	&.has-medium-font-size { line-height:28px; }
	&:last-child { margin-bottom:0;}
}
hr { margin:32px 0; }
img { max-width:100%; height:auto; }

main {
	a { color:inherit; text-decoration:underline; }
	ul, ol{ font-size:22px; line-height:32px; color:var(--textColor); 
		li { list-style:none; position:relative; padding-left:20px; margin-bottom:24px;
			&:before { position:absolute; left:0; top:12px; content:' '; width:8px; height:8px; border-radius:50%; background-color:var(--color_vida-loca); }
			&:last-child { margin-bottom:0; }
		}
	}
}

.has-limedash-color {
	--textColor: var(--color_limedAsh);
} 

.alignwide { margin-left:auto; margin-right:auto; 
 --wp--style--global--wide-size: 1320px;
	&.xl_max_1400 > * { max-width:1400px !important; margin-left:auto; margin-right:auto; }
}

.has-bud-color strong { color:var(--color_clover); }

#page { padding:1rem 16px 16px 16px; }

#nach-dem-slider { scroll-margin-top:80px; }

@media screen and (min-width:1200px) { /* XL */

	#nach-dem-slider { scroll-margin-top:170px; }

}

a.button { background-color:var(--color_button); font-size:16px; line-height:24px; display:inline-block; padding:12px 24px; border-radius:24px; color:var(--color_white); text-decoration:none; font-weight:var(--fontWeight_semi_bold); }

.nav_layer { position:fixed; left:0; height:calc(100dvh - 72px); top:72px; width:100dvw; background-color:#FFFFFF; scale:0; z-index:10; opacity:0; pointer-events:none; transition:all 0.2s; padding:24px; overflow:auto;
	nav {
		ul { display:flex; gap:0.5rem; flex-direction:column;
			li { list-style:none; 
				& > a { text-decoration:none; padding:12px 16px; font-size:18px; line-height:28px; color:var(--color_clover); border-radius:24px; transition:all 0.2s; position:relative; 
					display:flex; flex-direction: column;
					span { color:var(--color_gray_chateau); font-size:0.75em; font-weight:normal; margin-top:-5px; }
				}
				& > ul { display:none; background-color:#F3F4F0FF; border-bottom-left-radius:24px; border-bottom-right-radius:24px;
					& > li.current-menu-item > a { font-weight:bold; }
				}
				&.menu-item-has-children > a { 
					&:after { content:' '; width:16px; height:16px; position:absolute; right:12px; top:50%; margin-top:-8px; transform:rotate(-90deg); 
						background-size:contain; background-position:center center; background-repeat:no-repeat; background-image:url('/wp-content/themes/eidam/assets/gfx/arrow_down.svg'); transition:transform 0.2s;
					}
				}
				a:active,
				a:hover { background-color:#F3F4F0FF; 
					&:after { transform:rotate(180deg); }
				}
				&.current_page_parent.menu-item-has-children > a { background-color:#F3F4F0FF;  }
				&.current_page_parent:not(.menu-item-has-children)  > a,
				&.current_page_item:not(.menu-item-has-children) > a { background-color:var(--color_header_nav_hover); text-shadow: 0 0 0.5px currentColor; }
				&.current_page_parent,
				&.menu-item-has-children:hover,
				&.menu-item-has-children:active, &.menu-item-has-children:focus-within {
					& > a { border-bottom-left-radius:0; border-bottom-right-radius:0; }
					& > ul { display:block; padding-right:16px; 
						& > li { padding-left:16px; }
					}
				}
				& > ul { padding:0.5rem 0; }
			}
		}
	}
	& > a.button { width:100%; text-align:center; margin-top:24px; font-size:16px; line-height:24px; }
}

header.sm { justify-content:space-between; align-items:center; position:fixed; z-index:10; background-color:#FFFFFF; left:0; top:0; width:100dvw; padding:16px 32px 16px 16px;
	.logo { line-height:0;
		img { width:auto; height:40px; }
	} 
	.menutoggle { display:block; width:40px; height:34px; position:relative;
		& > span { width:24px; height:2px; left:50%; margin-left:-12px; background-color:var(--color_clover); position:absolute; top:50%; margin-top:-1px; transition:all 0.4s;
			&:first-child { margin-top:-9px; }
			&:last-child { margin-top:7px; }
		}
	}
}

.header_wrap { position:fixed; width:100%; left:0; top:0; z-index:10; background-color: rgb(255 255 255 / 0.95); }

header.xl {
	max-width:1400px; justify-content:space-between; align-items:center; min-height:150px; margin:0 auto 36px; 
	& > .button { margin-top:-8px; 
		&:hover { background-color:rgb(74, 111, 146); }
	}
	nav {
		a:focus-visible { outline:2px solid var(--color_button); outline-offset:2px; border-radius:24px; }
		ul { display:flex; gap:0.25rem;
			li { list-style:none; position:relative; padding-bottom:8px; 
				& > a { text-decoration:none; display:inline-block; padding:12px 24px; font-size:16px; font-weight:500; line-height:24px; color:var(--color_clover); border-radius:24px; transition:all 0.3s; position:relative; }
				&.current_page_parent > a,
				a:hover { background-color:rgb(243, 244, 240); text-shadow: 0 0 0.5px currentColor; }
				&.current_page_item > a { background-color:rgb(214 234 188 / 0.35); }
				& > ul { display:none; position:absolute; top:100%; left:0; background:var(--color_white); min-width:220px; box-shadow:0 4px 16px rgba(0,0,0,0.12); border-radius:12px; overflow:hidden; z-index:100;
					padding:0.75rem; border:1px solid rgb(208, 210, 201);
					li { width:100%; padding:0; 
						& > a { display:block; white-space:nowrap; border-radius:0; padding:10px 24px; }
					}
				}
				& > ul > li { 
					& > a {  display:flex; flex-direction:column; font-weight:600; color:rgb(46, 74, 15); border-radius:16px;
						.title { color:rgb(145, 148, 132); font-size:1rem; font-weight:400; }
					}
				}				
				&:hover > ul,
				&:focus-within > ul { display:block; }
				&.menu-item-has-children > a { padding-right:32px; 
					&:after { content:' '; width:16px; height:16px; position:absolute; right:12px; top:50%; margin-top:-8px; 
						background-size:contain; background-position:center center; background-repeat:no-repeat; background-image:url('/wp-content/themes/eidam/assets/gfx/arrow_down.svg'); transition:transform 0.2s;
					}
				}
				&:hover > a:after,
				&:focus-within > a:after { transform:rotate(180deg); }
			}
		}
	}	
}

body.nav_open { overflow:hidden;
	header.sm {
		.menutoggle {
			& > span:first-child, & > :last-child { opacity:0; }
			& > span:nth-child(2) { transform:rotate(-45deg); }
			& > span:nth-child(3) { transform:rotate(45deg); }
		}
	}
	.nav_layer { opacity:1; pointer-events:all; scale:1; }
}

#kicker { gap:40px; display:flex; width:100%; flex-direction:column; margin:40px 0;
	& > .inner { font-size:20px; line-height:28px; font-weight:bold; color:var(--color_bud); }
	& > .bottom { display:grid; grid-template-columns:1fr 1fr; width:100%; row-gap:12px; column-gap:12px; overflow:hidden; 
		& > * { border-radius:12px; border:1px solid var(--color_celeste); display:flex; justify-content:flex-start; width:100%; gap:16px; align-items:center; padding:16px;
			font-size:14px; line-height:18px; color:var(--color_clover); font-weight:bold;
			& > img { width:36px; height:auto; display:block; max-height:36px; }
		}
	}
}
 
@media screen and (max-width:1199px) {
	
	body .is-layout-grid { grid-template-columns:1fr !important; }
	
}

@media screen and (min-width:782px) { /* MD */
	
	:root {
		--wp--preset--font-size--medium:22px;
	}
	
	h1, h2 { font-size:40px; line-height:50px; }
	h3 { font-size:23px; line-height:32px; }
	p {
		&.has-medium-font-size { line-height:32px; }
	}
	
	#kicker {
		& > .inner { max-width:911px; font-size:28px; line-height:38px;  }
		& > .bottom { grid-template-columns:repeat(4, 1fr); }
	}
	
	body.home {
		#kicker {
			& > .inner { font-size:40px; line-height:50px; }
		}
	}
	
}

@media screen and (min-width:1200px) { /* XL */

	html { scroll-padding-top:200px; }

	body { padding-top:186px; }
	
	--wp--style--global--content-size: 1080px;
	
	.xl\:block { display:block; }
	.xl\:flex { display:flex; }
	.xl\:hidden { display:none; }
	
	#page { padding:0 24px 24px 24px; }
	 
	#kicker { max-width:1152px; margin:96px auto; gap:72px;
		& > .bottom { grid-template-columns:repeat(4, 1fr); column-gap:24px; 
			& > * { padding:24px; gap:24px; }
		}
	}
	
}