/* Project-owned additions for Web Studio by Lana.
   Loaded after the template CSS; reuses template variables and components. */

/* Self-hosted fonts (latin subset, WOFF2; SIL Open Font License).
   Replaces the Google Fonts @import that used to sit in style.css. */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/open-sans/open-sans-latin-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/open-sans/open-sans-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bebas-neue/bebas-neue-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hero: brand line keeps the template h1 look via .h1, the semantic H1 is the service statement */
.hero-slogan {
	margin-bottom: 20px;
}
.hero-title {
	font-size: 30px;
	line-height: 36px;
	letter-spacing: 0;
	margin-bottom: 15px;
}
.hero-actions {
	margin-top: 25px;
}
.hero-actions .btn-custom {
	margin: 0 10px 10px 0;
}
a.btn-custom.btn-outline,
a.btn-custom.btn-outline:visited {
	background: transparent;
	color: var(--primary-color);
	box-shadow: inset 0 0 0 2px var(--primary-color);
}
a.btn-custom.btn-outline:hover {
	background: var(--primary-color);
	color: #fff;
}
a.btn-custom:focus-visible,
.project-card a:focus-visible,
.lang-switch a:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}

/* Language switch in sidebar and mobile menu */
#menuside li.lang-switch,
#mainmenu li.lang-switch {
	font-size: 22px;
	padding-top: 15px;
}
.lang-switch a,
.lang-switch .lang-current,
.lang-switch .lang-sep {
	display: inline-block;
}
.lang-switch .lang-current {
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	line-height: 1.1em;
	font-weight: normal;
}
.lang-switch .lang-sep {
	font-size: inherit;
	margin: 0 6px;
	color: var(--base-color-2);
}
#mainmenu li.lang-switch a,
#mainmenu li.lang-switch .lang-current,
#mainmenu li.lang-switch .lang-sep {
	display: inline-block;
	width: auto;
	padding-right: 0;
}

/* Section headings and intro text */
.section-intro {
	max-width: 760px;
	margin-bottom: 40px;
}
.f-box h3 {
	font-size: 24px;
	margin-bottom: 10px;
}

/* Project cards: small variant of the template's .pf-image image card */
.project-card {
	margin-bottom: 50px;
}
.project-card .pf-image.sm h3 {
	position: absolute;
	z-index: 1;
	bottom: 60px;
	left: -20px;
	display: table;
	margin: 0;
	padding: 4px 10px 0 10px;
	font-size: 26px;
	line-height: 1.2em;
	background: var(--primary-color);
	color: #fff;
}
.project-card .pf-image.sm h3 a {
	color: inherit;
	text-decoration: none;
}
.project-card .pf-image img {
	width: 100%;
	height: auto;
}
.project-card .project-meta {
	margin-top: 20px;
	margin-bottom: 8px;
	font-weight: bold;
	color: var(--primary-color);
}
.project-card .project-link {
	font-family: var(--title-font);
	font-size: 18px;
	letter-spacing: 1px;
}

/* Projects page entries */
.project-entry {
	padding-bottom: 60px;
}
.project-entry h2 {
	margin-bottom: 5px;
}
.project-entry .project-meta {
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 20px;
}
.project-entry .pf-image {
	margin-bottom: 20px;
}
.project-entry .pf-image img {
	width: 100%;
	height: auto;
}
.project-note {
	border-left: 3px solid var(--primary-color);
	padding-left: 15px;
}

/* Contact block on the German homepage */
.contact-card {
	background: #fff;
	padding: 10px 40px;
	box-shadow: 5px 5px 30px 0 rgba(20, 20, 20, 0.08);
}
@media only screen and (min-width: 992px) {
	/* match the template's right inset used on feature-box rows (margin-right: 15px) */
	.contact-section .row {
		margin-right: 15px;
	}
	.contact-card {
		margin-right: 15px;
	}
}
.contact-item {
	display: flex;
	align-items: center;
	padding: 25px 0;
}
.contact-item + .contact-item {
	border-top: solid 1px #e6e6e0;
}
.contact-item i {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	margin-right: 25px;
	border-radius: 50%;
	text-align: center;
	font-size: 26px;
}
.contact-item .contact-label {
	font-size: 20px;
	letter-spacing: 1px;
	margin-bottom: 2px;
	color: var(--base-color-2);
}
.contact-item a {
	font-size: 18px;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.contact-item p {
	margin: 0;
}

/* Footer: the template styles footer links white for dark footers; this site's footer is light */
footer.footer a,
footer.footer a:visited {
	color: var(--title-font-color);
}
footer.footer a:hover,
footer.footer a:focus-visible {
	color: var(--primary-color);
}

@media only screen and (max-width: 767px) {
	.hero-title {
		font-size: 26px;
		line-height: 32px;
	}
	.project-card .pf-image.sm h3 {
		font-size: 22px;
		bottom: 40px;
	}
	.project-card .pf-image.sm .d-shadow {
		bottom: 30px;
	}
	.contact-card {
		padding: 5px 20px;
	}
	.contact-item i {
		flex-basis: 50px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 22px;
		margin-right: 15px;
	}
	.contact-item a {
		font-size: 15px;
	}
}

/* Project names on the Projects pages link to the project site */
.project-entry h2 a {
	color: inherit;
	text-decoration: none;
}
.project-entry h2 a:hover,
.project-entry h2 a:focus-visible {
	color: var(--primary-color);
}
.project-entry h2 a:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}