/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://www.webdesign-burgdorf.ch/
Template: twentytwentytwo
Author: Webdesign Burgdorf
Author URI: https://www.webdesign-burgdorf.ch/
Description: Twenty Twenty Two Child Theme
Version: 0.5
Updated: 2022-03-02
*/

/* Table of contents

* Fonts
* Variables
* Language switcher
* Block modifications
* Plugins
* Optional styling
*** Media queries

*/
/* Break points */
/*
782px -
880px - Hamburger
1160px - Menu moving below logo
*/
/* Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;1,300;1,400&display=swap');*/
@font-face {
	font-family: 'Merriweather Sans';
	src: local('Merriweather Sans Light Italic'), local('MerriweatherSans-LightItalic'),
	url('./fonts/MerriweatherSans-LightItalic.woff2') format('woff2'),
	url('./fonts/MerriweatherSans-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Merriweather Sans';
	src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'),
	url('./fonts/MerriweatherSans-Light.woff2') format('woff2'),
	url('./fonts/MerriweatherSans-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Merriweather Sans';
	src: local('Merriweather Sans Regular'), local('MerriweatherSans-Regular'),
	url('./fonts/MerriweatherSans-Regular.woff2') format('woff2'),
	url('./fonts/MerriweatherSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Merriweather Sans';
	src: local('Merriweather Sans Italic'), local('MerriweatherSans-Italic'),
	url('./fonts/MerriweatherSans-Italic.woff2') format('woff2'),
	url('./fonts/MerriweatherSans-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

h1 { margin: 2em 0 1em !important; }
h2 { margin: 22.7px 0 8px !important; }
h3 { margin: 21.3px 0 8px !important; }
h4 { margin: 18.7px 0 8px !important; }



/* Variables */
:root {
	--mypattern-img-width: 25%;
	--mypattern-text-width: 75%;
	--wp--preset--color--primary-opacity-low: rgb(174 204 83 / 50%);
}
.has-primary-background-color.opacity-low {
	background-color: var(--wp--preset--color--primary-opacity-low) !important;
}

/* Block modifications */
.wp-site-blocks { padding: 0; }
.wp-block-columns { /* Gaps by font hierarchy, not blocks */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.responsive-block-editor-addons-gallery--item figure {
	margin: 0;
	padding: 0;
}
.nogap-top { margin-top: calc(-1 * var(--wp--style--block-gap)); }

body {
	background-image: url("https://pharma-center.ch/wp-content/uploads/2021/07/ss_1476501209_Farbton_Saettigung90.png");
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-blend-mode: overlay;
	background-color: #d1e4dd;
}

/*** Header ***/
/* Navigation */
.wp-block-navigation { align-self: flex-end; }
.home-icon {
	bottom: -1px;
}
/* Language switcher */
.wdb-header { position: relative; }
.switcher-position {
	position: absolute;
	top: 2rem;
	right: 2rem;
}

/*** Plugins ***/
.portrait-heading { margin-top: 0; }
img.trp-flag-image { height: 18px !important; }

/*** Optional styling ***/
.wdb-margin-tb-4 {
	margin-top: clamp( 3rem, 3.3vw, 6rem ) !important;
	margin-bottom: clamp( 3rem, 3.3vw, 6rem ) !important;
}
.wdb-padding-tb-4 {
	padding-top: clamp( 3rem, 3.3vw, 6rem ) !important;
	padding-bottom: clamp( 3rem, 3.3vw, 6rem ) !important;
}

/*** Blocks ***/
/* Slider */
.home main {
	margin-top: -24px;
}
.responsive-block-editor-addons-block-image-slider {
	width: 100%;
	max-width: 1240px !important;	/* same as alignwide */
	margin-top: calc(-1 * var(--wp--style--block-gap)); /* should be .nogap-top, but block class does not appear - bug */
}
.flickity-page-dots {	bottom: 42px; }

/* Job offers */
.wp-block-columns.home-content.is-layout-flex.wp-container-11 {
	position: relative;
}
.job-offers { hyphens: auto; }
.job-offers > * {
	background-color: #186635;
	background-color: var(--wp--preset--color--primary);
	padding: 10.5px 14px 10px;
}
.job-offers .wp-block-query {
	font-size: 95%;
	margin-top: 4px;
}
.job-offers .wp-block-query .wp-block-post-title {
	margin-top: 4px !important;
	font-size: 120%;
}
.job-offers h2.wp-block-heading, .job-offers h2.wp-block-heading a {
	color: #fff;
	font-size: var(--wp--custom--typography--font-size--huge);
	font-weight: 400;
	margin: 74px 0 0 !important;
	text-decoration: none;
}
.job-offers .wp-block-post-excerpt {
	margin-bottom: 8px;
}
ul.wp-block-post-template {

}
ul.wp-block-post-template time {
	font-size: 95%;
}


/* wdb-portrait */
.wdb-portrait {	margin-top: 3em !important; }
h3.portrait-heading {	margin-top: 0 !important; }

/* Contact form */
input, textarea {
	/* =body */
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--system-font);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: var(--wp--custom--typography--line-height--normal);
	/* extra */
	padding: 0.1em 0.4em;
	width: 94%;
	border: 1px solid #666;
}
input[type="submit"] {
	cursor: pointer;
	padding: 0.1em 0.6em;
	width: auto;
}
.wpcf7 form .wpcf7-response-output {
	margin: 2em 0 1em;
	padding: 1em 1em;
	border: 2px solid #00a0d2;
	width: 90%;
}
span.wpcf7-spinner { top: 6px; }

/* Footer */
footer { margin-block-start: 6em !important; }
.footer-padding > div {	padding: 30px; }
.footer-padding > div:first-child {	padding-left: 0; padding-bottom: 0; }
.footer-padding > div:last-child { padding-right: 0; }
footer .wp-container-28.wp-block-columns,
footer .wp-container-17.wp-block-columns,
footer > div.wp-block-columns,
footer .wp-container-33.wp-block-group {
	max-width: calc(1028px + 0px);
	margin-left: auto !important;
	margin-right: auto !important;
}
footer .adressblock span { }
footer .wp-block-navigation ul { width: 100%; }
footer .wp-block-navigation .wp-block-navigation-item {	margin: 0 0 0 auto; }

/* Custom formats */
.bg-green { background-color: var(--wp--preset--color--primary); }
.single-post main .alignwide {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}
.hidden { display: none; }
.label {
	display: inline-block;
	width: 5em;
}
.margin-top-0 {	margin-top: 0 !important; }
.padding-rl-30/*, .copyright-block*/ {
	padding-left: 30px;
	padding-right: 30px;
}
.max-height-320 > * {
	max-height: 320px;
	width: auto !important;
}

iframe#illow-banner-widget[style*="max-width"], iframe#illow-banner-widget[style*="width: 100%"] {
	left: 0;
	width: auto !important;
	max-width: 100% !important;
}

/*** Media queries ***/
@media only screen and (max-width: 1140px) {
	footer .wp-container-28.wp-block-columns,
	footer .wp-container-33.wp-block-group {
		max-width: none;
	}
	.footer-padding {
		padding-left: var(--wp--custom--spacing--outer);
		padding-right: var(--wp--custom--spacing--outer);
	}
}
@media only screen and (max-width: 1140px) {
	.padding-rl-30, .copyright-block {
		padding-left: 0;
		padding-right: 0;
	}
}
@media only screen and (min-width: 782px) {
	.adressblock { padding-bottom: 30px !important; }
	.label { width: 9em; }
	.wdb-portrait .wp-block-column.image {
		flex-basis: var(--mypattern-img-width) !important;
	}
	.wdb-portrait .wp-block-column.text {
		flex-basis: var(--mypattern-text-width) !important;
	}
}

body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}
@media (min-width: 880px) {
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
}
@media (min-width: 1090px) {
	.job-offers {
		max-width: 300px;
		right: 0;
		left: auto;
		position: absolute;
	}
}

@media (min-width: 880px) and (max-width: 1160px) {
	.wdb-header { display: block; }
	.wp-block-navigation {
		top: 24px;
		margin: 0 auto;
	}
}
/*@media (max-width: 880px) {
	.wp-site-blocks {
		padding: 0 !important;
		margin: 0 !important;
	}
	main {
		padding-left: var(--wp--custom--spacing--outer);
		padding-right: var(--wp--custom--spacing--outer);
	}
	header, body main .responsive-block-editor-addons-block-image-slider {
		margin-left: calc( -1 * var(--wp--custom--spacing--outer)) !important;
		margin-right: calc( -1 * var(--wp--custom--spacing--outer)) !important;
		width: auto !important;
	}
}*/

@media (max-width: 410px) {
	footer { font-size: 80%; }
	.copyright-block {
		width: 100%;
		text-align: center;
	}
	.wp-container-33, .wp-container-22 { gap: 8px !important;	} /* Copyright */
}