/* look and feel of christianemoser.at / cux.christianemoser.at (ported) */
/* fonts (local, font/) */
@font-face{font-family:"Work Sans";src:url("font/Work_Sans/WorkSans-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("font/Barlow/Barlow-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("font/Barlow/Barlow-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("font/Barlow/Barlow-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("font/Barlow/Barlow-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("font/Barlow/Barlow-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

@media (min-width: 1200px) {
	.container {
		max-width: 1224px;
	}
}

/* SVG icons (img/icons), inlined so they take the text colour */
.icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
	fill: currentColor;
	flex-shrink: 0;
}

body {
	font-family: "Barlow", sans-serif;
	color: #4d4d4d;
	font-size: 16px;
	line-height: 1.6em;
	font-weight: 300;
}
/* body text: 16px on desktop, 14px on tablet and mobile */
@media (max-width: 1023.98px) {
	body {
		font-size: 14px;
	}
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static; /* bring into view */
  width: auto;
  height: auto;
  padding: 8px;
  background: #005fcc;
  color: white;
  font-weight: bold;
  z-index: 1000; /* on top */
}

/* Show outline when elements are focused (keyboard navigation).
   Solid outline meets 3:1 contrast and survives forced-colors mode; glow is decorative. */
:focus-visible {
  outline: 2px solid #67267a;
  outline-offset: 2px;
  box-shadow: 0 0 6px 3px rgba(255, 143, 66, 0.7);
}
/* links: three solid rings, white / orange / purple from the inside out.
   Transparent outline turns into a visible system-colour ring in forced-colors mode,
   where box-shadow is dropped. Low specificity so pill buttons keep their radius */
a:focus-visible {
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff8f42, 0 0 0 6px #67267a;
}

a {
	color: #67267a;
	text-decoration: none;
}

a:hover {
	color: #ff8f42;
	text-decoration: none;
}

/* links inside running text stay underlined so they don't rely on colour alone (WCAG 1.4.1) */
.card-text a, h2 a, #about .tl-sub a, #about .tl-item li a, .accordion-body a, a.text-link {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6, p, .card-subtitle, .smallsubtitle {
	font-family: "Barlow", sans-serif;
	font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Work Sans", sans-serif;
}
h1, h2, h3, .h3, h4, .h4 {
	text-align: left;
}
h1, h2, h1.h2 {
	font-size: 32px;
	line-height: 1.45em;
}
/* section headings, as in the new design */
h2 {
	color: #4d4d4d;
	font-weight: 400;
	margin-bottom: 16px;
}
h1 {
	color: #3f3f3f;
	font-weight: 500;
	margin-bottom: 24px;
}
/* heading level set for the outline, look kept from the old tag (.h2/.h3/.h4/.h5) */
h1.h2 {
	color: #4d4d4d;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 16px;
}
h3, .h3, h4, .h4 {
	color: #67267a;
	line-height: 1.2em;
	font-weight: 400;
}
h3, .h3 {
	margin-bottom: 12px;
}
h3, .h3 {
	font-size: 24px;
}
.smallsubtitle {
	font-size: 20px;
}
h4, .h4 {
	font-size: 20px;
	margin-bottom: 4px;
}
.h4.card-title {
	margin-bottom: .5rem;
}
h2.h5 {
	font-weight: 300;
	text-align: start;
}
/* heading scale: desktop / 1024 / 428 */
@media (max-width: 1024px) {
	h1 {
		font-size: 28px;
	}
	h2, h1.h2 {
		font-size: 24px;
	}
	h3, .h3 {
		font-size: 20px;
	}
	h4, .h4, .smallsubtitle {
		font-size: 16px;
	}
}
@media (max-width: 428px) {
	h1 {
		font-size: 24px;
		margin-top: 12px;
		margin-bottom: 12px;
	}
	h2, h1.h2 {
		font-size: 20px;
	}
}
p {
	hyphens: auto;
	hyphenate-limit-chars: 10 3 4;
}
.smallsubtitle {
  font-family: "Noto Sans", sans-serif;
  color: #67267a;
  line-height: 1.2em;
  text-align: left;
  margin-bottom: 8px;
  font-weight: 400;
}
strong {
	font-weight: 500;
}

/* line breaks per screen size */
@media (min-width: 429px) {
	.phone-br {
		display: none;
	}
}
@media (min-width: 745px) {
	.mobile-br {
		display: none;
	}
}
@media (min-width: 1000px) {
	.tablet-br {
		display: none;
	}
}
@media (max-width: 428px) {
	.desktop-br {
		display: none;
	}
	body {
		font-size: 14px;
		line-height: 1.5em;
	}
}

/* top bar */
#topbar {
	font-size: 14px;
	background: linear-gradient(180deg, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
	padding: 6px 0;
}
#topbar .container{
	display: flex;
	justify-content: space-between;
}
#topbar .contact {
  	flex: 1 1 0;
  	min-width: 0;
  	display: flex;
  	align-items: center;  
}
#topbar .contact-left {
  	justify-content: flex-start;  
}
#topbar .contact-center {
  	justify-content: center;      
}
#topbar .contact-right {
  	justify-content: flex-end;  
}
#topbar .contact-left {
	gap: 24px;
}
#topbar .contact a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #4d4d4d;
	line-height: 1;
	transition: 0.3s;
}
#topbar .contact a:hover {
	color: #ff8f42;
}
#topbar .icon {
	width: 24px;
	height: 24px;
	color: #67267a;
	vertical-align: middle;
}
#topbar .socialmedia {
	display: flex;
	gap: 24px;
}
#topbar .socialmedia a:hover .icon {
	color: #ff8f42;
}

/* language switch: two pills, the active one filled */
#topbar .contact-right {
	gap: 8px;
}
#topbar .contact-right .language {
	display: inline-block;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 2px 9px;
	border: none;
	border-radius: 20px;
	background-color: #fff;
	font-weight: 400;
	line-height: 20px;
	color: #67267a;
	cursor: pointer;
}
#topbar .contact-right .language:hover {
	background-color: #ff8f42;
	color: #fff;
}
#topbar .contact-right .language[aria-current],
#topbar .contact-right .language[aria-current]:hover {
	background-color: #67267a;
	color: #fff;
	cursor: default;
}

/* header */
#header {
	transition: all 0.5s;
	z-index: 997;
	background: #FFFFFF;
	box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.1);
	padding: 8px 0 0 0;
}
#header .logo {
	align-content: center;
}
#header .heading1,
#header .heading2 {
	font-family: "Barlow", sans-serif;
}
#header .heading1 {
	font-size: 20px;
	margin: 12px 0px 4px 8px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0.5px;
}
/* logo, name and role are one link to the start page (one 2.5.8-sized target instead of two thin ones) */
#header .logo-link {
	display: flex; /* logo beside the two text lines, same geometry as the old float */
	align-items: flex-start;
	width: fit-content;
	text-decoration: none;
}
#header .heading1 {
	color: #67267a;
}
#header .heading2 {
	font-size: inherit;
	margin: 0px 0px 12px 8px;
	line-height: 1;
	font-weight: 300;
	color: #4d4d4d;
}
#header .logo img {
	margin-right: 0;
	max-height: 72px;
	width: auto; /* keeps the ratio now that the img has width/height attributes */
	float: left;
}
@media (max-width:700px){
	#header .heading1 {
		font-size: 14px;
		margin: 12px 0px 4px 8px;
		line-height: 1;
		font-weight: 400;
	}
	#header .heading2 {
		font-size: 12px;
		margin: 0px 0px 12px 8px;
		line-height: 1;
		font-weight: 400;
	}
	#header .logo img {
	margin-right: 0;
	max-height: 64px;
	float: left;
	}
}

/* desktop header per design: 97px high, 82px logo */
@media (min-width: 992px) {
	#header {
		padding: 10px 0 5px;
	}
	#header .logo img {
		max-height: 82px;
		margin-right: 0;
	}
	#header .heading1 {
		margin: 17px 0 4px 8px;
	}
	#header .heading2 {
		margin-left: 8px;
	}
}

.scrolled-offset {
	margin-top: 70px;
}

/* desktop nav bar */
.navbar {
	padding: 0;
	align-items: center;
}
.navbar ul {
	margin: 0;
	padding: 0;
	display: flex;
	list-style: none;
	align-items: center;
}
.navbar li {
	position: relative;
	font-size: medium;
	font-weight: normal;
	line-height: 1.2em;
}
.navbar a, .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-right: 0;
    padding-left: 13px;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #4d4d4d;
    white-space: nowrap;
    transition: 0.3s;
}
.navbar a .icon, .navbar a:focus .icon {
	width: 24px;
	height: 24px;
}
.navbar .active, .navbar .active:focus {
	color: #67267a;
}
.navbar a:hover, .navbar li:hover > a {
	color: #ff8f42;
}
/* current page: purple + bold, as in the design */
.navbar .active, .navbar .active:focus {
	font-weight: 600;
}
.navbar .getstarted, .navbar .getstarted:focus {
	background: #67267a;
	padding: 8px 20px;
	margin-left: 32px;
	border-radius: 4px;
	color: #fff;
}
.navbar .getstarted:hover, .navbar .getstarted:focus:hover {
	color: #fff;
	background: #67267a;
}
.navbar .dropdown ul {
	display: block;
	position: absolute;
	left: 24px;
	top: calc(100% + 30px);
	margin: 0;
	padding: 12px 0;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	background: #fff;
	box-shadow: 0px 0px 32px rgba(127, 137, 161, 0.25);
	transition: 0.3s;
}
.navbar .dropdown ul li {
	min-width: 200px;
}
.navbar .dropdown ul a {
	padding: 12px 20px;
	font-size: 15px;
	text-transform: none;
	color: #4d4d4d;
}
.navbar .dropdown ul a i {
	font-size: 15px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
	color: #67267a;
}
.navbar .dropdown:hover > ul {
	opacity: 1;
	top: 100%;
	visibility: visible;
}
.navbar .dropdown .dropdown ul {
	top: 0;
	left: calc(100% - 30px);
	visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
	opacity: 1;
	top: 0;
	left: 100%;
	visibility: visible;
}
@media (max-width: 1366px) {
  	.navbar .dropdown .dropdown ul {
    	left: -90%;
  	}
  	.navbar .dropdown .dropdown:hover > ul {
    	left: -100%;
  	}
}
/* mobile nav bar */
.mobile-nav-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: #4d4d4d;
	font-size: 28px;
	cursor: pointer;
	display: none;
	line-height: 0;
	transition: 0.5s;
}
.mobile-nav-toggle.is-open {
	color: #fff;
}
.mobile-nav-toggle .icon-close,
.mobile-nav-toggle.is-open .icon-menu {
	display: none;
}
.mobile-nav-toggle.is-open .icon-close {
	display: inline-block;
}

@media (max-width: 991px) {
	.mobile-nav-toggle {
   		display: block;
		color: #67267a;
	}

	.navbar ul {
    	display: none;
	}
}
/* the "Home" text is only shown in the open mobile menu */
.navbar .nav-label {
	display: none;
}
.navbar-mobile {
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(59, 59, 59, 0.75);
	transition: 0.3s;
	z-index: 999;
}
/* close button sits exactly where the burger was; --nav-toggle-top / --nav-toggle-right / --nav-top are set in main.js */
.navbar-mobile .mobile-nav-toggle {
	position: absolute;
	top: var(--nav-toggle-top, 20px);
	right: var(--nav-toggle-right, 16px);
	margin: 0;
}
/* white panel directly below the header, only as tall as the menu */
.navbar-mobile ul {
	display: block;
	position: absolute;
	top: var(--nav-top, 72px);
	right: 8px;
	left: 8px;
	max-height: calc(100% - var(--nav-top, 72px) - 8px);
	padding: 4px 0;
	background-color: #fff;
	overflow-y: auto;
	transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 13px;
	font-size: 16px;
	line-height: 20px;
	color: #4d4d4d;
}
.navbar-mobile .nav-label {
	display: inline;
}
.navbar-mobile a .icon {
	width: 20px;
	height: 20px;
}
.navbar-mobile .active, .navbar-mobile a:hover, .navbar-mobile li:hover > a {
	color: #67267a;
}
.navbar-mobile a:hover, .navbar-mobile li:hover > a {
	color: #ff8f42;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
	margin: 16px;
}
.navbar-mobile .dropdown ul {
	position: static;
	display: none;
	margin: 12px 20px;
	padding: 12px 0;
	z-index: 99;
	opacity: 1;
	visibility: visible;
	background: #fff;
	box-shadow: 0px 0px 32px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
	min-width: 200px;
}
.navbar-mobile .dropdown ul a {
	padding: 12px 20px;
}
.navbar-mobile .dropdown ul a i {
	font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
	color: #67267a;
}
.navbar-mobile .dropdown > .dropdown-active {
	display: block;
}

/* hero */
#mentoring .button,
#contact .contact-mentoring .button {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 12px 24px;
	border-radius: 50px;
	line-height: 1;
	color: #fff;
	background-color: #67267a;
	transition: 0.5s;
}
#mentoring .button:hover,
#contact .contact-mentoring .button:hover {
	background-color: #ff8f42;
	color: #fff;
}
#sub-page .card-icon .background,
#contact .card-icon .background {
	width: 64px;
	height: 64px;
	background-color: #f6f6f6;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #67267a;
}
#sub-page .card-icon .icon,
#contact .card-icon .icon {
	width: 28px;
	height: 28px;
}
#about .about-row + .about-row {
	margin-top: 80px;
}
#about .about-row > [class*="col"] > :last-child,
#about .timeline > .tl-item:last-child > :last-child,
#about .timeline > .tl-item:last-child li:last-child {
	margin-bottom: 0;
}
#about h1 {
	margin-bottom: 24px;
}
#about h2 {
	margin-bottom: 24px;
}
#about .about-photo {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 440px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 4px;
}

#about .section-note {
	margin: -12px 0 20px;
	font-style: italic;
	color: #4d4d4d;
}

/* timeline */
#about .timeline {
	position: relative;
	padding-left: 32px;
}
#about .timeline::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 12px;
	bottom: 0;
	border-left: 1px solid #4d4d4d;
}
#about .tl-item + .tl-item {
	margin-top: 16px;
}
#about .tl-title {
	position: relative;
	font-family: "Work Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: #67267a;
	margin: 0 0 12px;
}
@media (max-width: 1024px) {
	#about .tl-title {
		font-size: 16px;
	}
}
#about .tl-mark {
	position: absolute;
	left: -31px;
	top: 1px;
	width: 22px;
	height: 22px;
	color: #67267a;
	background: #fff;
	border-radius: 50%;
}
#about .tl-date {
	display: inline-block;
	min-width: 160px;
	margin: 0 0 8px -20px;
	padding: 4px 20px;
	background-color: #67267a;
	color: #fff;
	line-height: 1.4;
}
#about .tl-sub {
	margin: 0 0 8px;
	color: #4d4d4d;
}
#about .tl-sub a {
	color: #67267a;
}
#about .tl-sub a:hover {
	color: #ff8f42;
}
#about .tl-item ul {
	margin: 12px 0 0;
	padding-left: 44px;
}
#about .tl-item li {
	margin-bottom: 4px;
}

/* right column: stat boxes + chips, centred */
#about .about-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#about .about-side h2 {
	margin: 32px 0 20px;
	text-align: center;
}
#about .about-side h2:first-child {
	margin-top: 0;
}
#about .stat {
	display: flex;
	flex-direction: column;
	width: 278px;
	max-width: 100%;
	margin-bottom: 24px;
	border: 1px solid #67267a;
	border-radius: 16px;
	overflow: hidden;
}
#about .stat-value {
	padding: 16px;
	font-family: "Work Sans", sans-serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	color: #67267a;
	background: #fff;
}
#about .stat-label {
	padding: 16px 24px;
	font-family: "Work Sans", sans-serif;
	font-size: 18px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	background: #67267a;
}
#about .stat-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
/* tablet: stat boxes of one group side by side */
@media (min-width: 768px) and (max-width: 991.98px) {
	#about .stat-group {
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		gap: 24px;
		margin-bottom: 24px;
	}
	#about .stat-group .stat {
		flex: 1 1 0;
		margin-bottom: 0;
	}
	#about .stat-group .stat-label {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
#about .stat-label--hindex {
	text-transform: none; /* keep the lowercase "h" */
}
#about .chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#about .chips li {
	padding: 12px 18px;
	border: 1px solid #67267a;
	border-radius: 27px;
	line-height: 1.2;
	color: #4d4d4d;
}

@media (max-width: 991.98px) {
	#about .about-photo {
		height: auto;
		max-height: none;
		margin-top: 24px;
	}

	/* stacked: stat boxes + skills first, then the timeline */
	#about .about-side {
		order: -1;
		margin-bottom: 40px;
	}
}

/* footer: three columns (pages, address/contact, photo) + copyright + full-width map */
#footer {
	background: #fff;
	color: #4d4d4d;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
}
#footer .footer-top {
	padding: 40px 0 0;
}
#footer .footer-top h4,
#footer .footer-top .h4 {
	font-weight: 400;
	line-height: 1.2;
	color: #67267a;
	margin: 0 0 16px;
}
#footer .footer-top p {
	margin: 0 0 24px;
	color: #4d4d4d;
}
#footer a {
	color: #4d4d4d;
}
#footer a:hover {
	color: #ff8f42;
}

/* pages */
#footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#footer .footer-links li {
	margin-bottom: 9px;
}
#footer .footer-links a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* address + contact */
#footer .footer-top .footer-links :is(h4, .h4),
#footer .footer-top .footer-contact :is(h4, .h4) {
	margin-bottom: 12px;
}
#footer .footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
#footer .footer-contact-list li {
	margin-bottom: 4px;
}
#footer .footer-contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
#footer .footer-contact-list .icon {
	width: 24px;
	height: 24px;
	color: #67267a;
}

/* photo + tagline + social links */
#footer .footer-info {
	display: flex;
	gap: 12px;
	align-self: flex-start; /* as tall as the photo, so the social links end at its bottom edge */
}
#footer .footer-image {
	flex: 0 0 140px;
	width: 140px;
	height: auto;
	align-self: flex-start;
}
#footer .footer-info-text {
	display: flex;
	flex-direction: column;
}
/* keep the designed two-line tagline (explicit <br>, no extra wrapping) */
#footer .footer-info-text :is(h4, .h4) {
	white-space: nowrap;
}
@media (min-width: 992px) {
	#footer .footer-info {
		justify-content: flex-end;
	}
}
#footer .footer-info-text p {
	margin-bottom: 0;
}
#footer .footer-top .footer-info-text .footer-connect {
	margin-top: auto; /* push "Vernetzen wir uns über ..." + icons to the bottom of the photo */
	padding-top: 24px;
}
#footer .social-links {
	display: flex;
	gap: 24px;
	margin-top: 12px;
}
#footer .social-links a {
	color: #67267a;
	line-height: 0;
}
#footer .social-links a:hover {
	color: #ff8f42;
}
#footer .social-links .icon {
	width: 24px;
	height: 24px;
}

/* copyright */
#footer .copyright {
	text-align: center;
	font-size: 16px;
	padding: 16px 0 52px;
}
#footer .copyright a {
	color: #67267a;
	text-decoration: none;
}
#footer .copyright a:hover {
	color: #ff8f42;
}

/* interactive Google map, greyscale as in the design */
#footer .footer-map {
	height: 500px;
	line-height: 0;
}
#footer .footer-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1);
}

/* tablet: hide the pages column, address left / photo right */
@media (max-width: 991.98px) {
	#footer .footer-links {
		display: none;
	}
	#footer .footer-image {
		flex-basis: 120px;
		width: 120px;
	}
}
@media (max-width: 767.98px) {
	#footer .footer-image {
		flex-basis: 140px;
		width: 140px;
	}
}
/* mobile: stack everything */
@media (max-width: 767.98px) {
	#footer .footer-info {
		margin-top: 8px;
	}
	#footer .copyright {
		font-size: 14px;
	}
}

/* back to top button */
/* icons inside the email / phone links turn orange together with the text */
#topbar .contact a:hover .icon,
#topbar .contact a:hover span,
#footer .footer-contact-list a:hover .icon {
	color: #ff8f42;
}

/* contact page: cards + mentoring box + map in one grid
   desktop: Email | Handy | Adresse (2 cols) / Mentoring (2 cols) | Map (2 cols)
   tablet:  cards stacked left, map right, mentoring below
   mobile:  everything stacked, no map */
#contact .contact-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"email mobile address address"
		"mentoring mentoring map map";
	gap: 24px;
	margin-top: 32px; /* room for the icon circles */
}
#contact .contact-email { grid-area: email; }
#contact .contact-mobile { grid-area: mobile; }
#contact .contact-address { grid-area: address; }
#contact .contact-mentoring { grid-area: mentoring; }
#contact .contact-map { grid-area: map; }

#contact .info-box {
	position: relative;
	margin: 0;
	padding: 32px 16px 24px;
	text-align: center;
	background-color: #f6f6f6;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#contact .info-box .card-icon {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
}
#contact .info-box :is(h3, .h3) {
	color: #67267a;
	font-weight: 400;
	margin: 0 0 12px;
	text-align: center;
}
#contact .info-box p {
	margin: 0;
	line-height: 24px;
	color: #4d4d4d;
}
#contact .info-box a {
	color: #4d4d4d;
}
#contact .info-box a:hover {
	color: #ff8f42;
}
#contact .address-br {
	display: none;
}

#contact .contact-mentoring {
	padding: 24px;
	background-color: #f6f6f6;
	border-radius: 4px;
}
#contact .contact-mentoring h2 {
	margin: 0 0 20px;
	padding: 0;
}
#contact .contact-mentoring p {
	text-align: left;
}
#contact .contact-mentoring .mentoring-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; /* side by side when they fit, otherwise below each other */
	align-items: flex-start;
	gap: 16px;
	margin: 24px 0 0;
}
#contact .contact-map {
	min-height: 300px;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}
#contact .contact-map iframe {
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
	filter: grayscale(1);
}
/* the page has its own map on desktop/tablet, so the footer map is not repeated there;
   on mobile the page map is hidden and the footer map is shown instead */
@media (min-width: 768px) {
	body:has(#contact .contact-map) #footer .footer-map {
		display: none;
	}
}

@media (max-width: 991.98px) {
	#contact .contact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"email map"
			"mobile map"
			"address map"
			"mentoring mentoring";
		row-gap: 56px; /* 24px + the icon circle that sticks out 32px */
	}
	#contact .contact-mentoring {
		margin-top: -32px; /* no icon circle here: keep the gap at 24px */
	}
	#contact .address-br {
		display: inline;
	}
}
@media (max-width: 767.98px) {
	#contact .contact-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"email"
			"mobile"
			"address"
			"mentoring";
	}
	#contact .contact-map {
		display: none;
	}
}
/* mobile: the footer skips address + contact (top bar, side buttons and contact page cover them)
   and leaves white space below the footer map, so at the end of the page the map scrolls up
   and the floating action buttons (16px + 48px from the bottom) sit on white */
@media (max-width: 767.98px) {
	#footer .footer-contact {
		display: none;
	}
	#footer {
		padding-bottom: 80px;
	}
}
/* tablet footer: photo as tall as the footer content next to it;
   address column narrower so photo + tagline fit */
@media (min-width: 768px) and (max-width: 991.98px) {
	#footer .footer-contact {
		flex: 0 0 40%;
		max-width: 40%;
	}
	#footer .footer-info {
		flex: 0 0 60%;
		max-width: 60%;
		align-self: stretch;
		justify-content: flex-end;
		margin-bottom: 8px; /* the phone link has 8px of tap area below its icon */
	}
	#footer .footer-contact-list {
		margin-bottom: 0;
	}
	#footer .footer-image {
		flex: 0 0 auto;
		width: auto;
		height: 100%;
		align-self: stretch;
		object-fit: contain;
		object-position: left bottom;
	}
}
/* desktop footer: photo as tall as the address/contact column, so the photo bottom and
   the social icons line up with the phone row */
@media (min-width: 992px) {
	#footer .footer-info {
		align-self: stretch;
		margin-bottom: 28px; /* the phone row is followed by 4px li + 24px list margin */
	}
	#footer .footer-image {
		flex: 0 0 auto;
		width: auto;
		height: 100%;
		align-self: stretch;
		object-fit: contain;
		object-position: left bottom;
	}
}
/* footer tagline: extra break before "CUXpro" only on mobile; photo as tall as the text next to it */
#footer .footer-br-m {
	display: none;
}
@media (max-width: 767.98px) {
	#footer .footer-br-m {
		display: inline;
	}
	#footer .footer-info {
		align-items: stretch;
	}
	#footer .footer-image {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		max-width: 45%;
		align-self: stretch;
		object-fit: contain;
		object-position: left bottom;
	}
}

/* contact-page email/phone links get a 24px tap height without moving anything */
#contact .info-box p a {
	display: inline-block;
	padding: 4px 0;
	margin: -4px 0;
}

/* ===== blog adaptation layer (loaded after style.css / bootstrap.css) ===== */
html { scroll-behavior: smooth; }
body { margin: 0; padding-top: 0; background: #fff; color: #4d4d4d; font-family: "Barlow", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6em; }
body .container { box-sizing: border-box; width: 100%; max-width: none; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
@media (min-width: 1200px) { body .container { max-width: 1224px; } }
@media (max-width: 1199.98px) { body .container { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 428px) { body .container { padding-left: 16px; padding-right: 16px; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cux-flex { display: flex; justify-content: space-between; }

/* headings and links inside the blog content */
h1, h2, h3, h4, h5, h6 { font-family: "Work Sans", sans-serif; color: #67267a; font-weight: 400; }
a { color: #67267a; }
a:hover { color: #ff8f42; text-decoration: none; }
.about-left p a, .about-right p a, .small p a, #blog_text a, .article a { text-decoration: underline; }
.a-btn a, .about .a-btn a, input[type="submit"], .submit-btn input[type="submit"] {
	display: inline-block; cursor: pointer; border: 0; border-radius: 50px; padding: 12px 24px;
	font-family: "Barlow", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1px; line-height: 1;
	color: #fff; background: #67267a; transition: 0.5s; text-decoration: none;
}
.a-btn a:hover, input[type="submit"]:hover { background: #ff8f42; color: #fff; }
.blog-post { border-radius: 4px; overflow: hidden; }

/* top bar: search sits where the language switch is on the other sites */
#topbar .container { display: flex; justify-content: space-between; align-items: center; }
#topbar .contact-right { gap: 8px; }
/* the old blog .search-bar widths (120% and friends) would stretch the box and push the field off the right edge */
#topbar .search-bar { width: auto; float: none; }
#topbar .search-bar form { display: flex; align-items: center; margin: 0; }
#topbar .search-bar input[type="text"] {
	box-sizing: border-box; width: 160px; height: 28px; margin: 0; padding: 2px 12px; border: 0; border-radius: 20px;
	background: #fff; color: #4d4d4d; font: 300 14px "Barlow", sans-serif;
}
#topbar .search-bar button {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: 4px;
	border: 0; border-radius: 50%; background: #67267a; color: #fff; cursor: pointer; transition: 0.3s;
}
#topbar .search-bar button:hover { background: #ff8f42; }
#topbar .search-bar button svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 991.98px) { #topbar .search-bar input[type="text"] { width: 110px; } #topbar .search-bar button { width: 32px; height: 32px; } }
#header .logo-link:hover { color: inherit; }
#header .container { display: flex; justify-content: space-between; align-items: center; }
#header .logo { flex: 1 1 auto; }
#header .heading1 { margin-top: 12px; }
@media (min-width: 992px) { #header { position: sticky; top: 0; } #header .heading1 { margin-top: 12px; } }
#header .navbar { display: flex; position: static; float: none; min-height: 0; margin: 0; border: 0; background: none; }
#navbar-menu a { background: none; }
#navbar-menu li { float: none; }
.mobile-nav-toggle svg { width: 28px; height: 28px; fill: currentColor; }

/* about and contact pages */
.cux-page .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.cux-page .row::before, .cux-page .row::after { display: none; }
.cux-page [class*="col-"] { box-sizing: border-box; float: none; position: static; min-height: 0; width: 100%; padding-left: 12px; padding-right: 12px; }
@media (min-width: 992px) {
	.cux-page .col-lg-3 { width: 25%; } .cux-page .col-lg-4 { width: 33.3333%; } .cux-page .col-lg-5 { width: 41.6667%; }
	.cux-page .col-lg-6 { width: 50%; } .cux-page .col-lg-7 { width: 58.3333%; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .cux-page .col-md-6 { width: 50%; } }
#about, #contact, .blog-section { padding: 32px 0; }
#about .about-photo { max-width: 100%; height: auto; }
#about .stat-value { color: #67267a; }
#about .about-more { margin-top: 80px; }
#about .about-more .a-btn { margin: 16px 0; text-align: center; }
#about .about-more p { text-align: left; }
#about .about-more .a-btn a { cursor: pointer; }
#about .about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
#about .about-cards .blog-post { float: none; width: auto; margin: 0; }
#contact h1 { margin-top: 0; }
#contact .contact-grid { grid-template-areas: "email mobile address address" "form form form map"; }
#contact .contact-form { grid-area: form; padding: 24px; background: #f6f6f6; border-radius: 4px; grid-column: span 3; }
#contact .contact-form h2 { margin: 0 0 16px; }
#contact .contact-form input[type="text"], #contact .contact-form textarea {
	display: block; box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #ccc; border-radius: 4px;
	background: #fff; color: #4d4d4d; font: 300 16px "Barlow", sans-serif;
}
#contact .contact-form textarea { min-height: 140px; resize: vertical; }
#contact .contact-form .error { color: #b00020; margin-bottom: 8px; }
#contact .contact-map { grid-area: map; }
@media (max-width: 991.98px) {
	#contact .contact-grid { grid-template-areas: "email map" "mobile map" "address map" "form form"; }
}
@media (max-width: 767.98px) {
	#contact .contact-grid { grid-template-areas: "email" "mobile" "address" "form"; }
	#contact .contact-form { grid-column: auto; }
}
@media (min-width: 768px) { body:has(#contact .contact-map) #footer .footer-map { display: none; } }

/* footer (no map; address + contact + photo) */
#footer { clear: both; position: static; height: auto; padding: 0; }
#footer .footer-top .row { align-items: flex-start; }
#footer .footer-top { padding: 32px 0; }
#footer .copyright { padding: 16px 0; }
/* neutralise the old blog .contact rules (6em padding, form styling) inside the top bar */
#topbar .contact { padding: 0; margin: 0; }
#topbar .contact-right input[type="text"], #topbar .contact-right input[type="text"]:nth-child(2) { margin: 0; }
/* the old fixed header needed 170px of top padding; the header is now in the flow */
.about { padding-top: 32px; padding-bottom: 32px; }
html, body { font-size: 16px; }
@media (max-width: 1023.98px) { html, body { font-size: 14px; } }
/* contact page without form: cards on top, map below */
#contact .contact-grid { grid-template-areas: "email mobile address address" "map map map map"; }
#contact .contact-map { min-height: 360px; }
@media (max-width: 991.98px) { #contact .contact-grid { grid-template-areas: "email map" "mobile map" "address map"; } }
@media (max-width: 767.98px) { #contact .contact-grid { grid-template-areas: "email" "mobile" "address"; } }

/* navbar items start at the left edge of the container */
/* bootstrap's clearfix ::before/::after on .container count as flex items, so space-between centred the lone navbar */
#header .container::before, #header .container::after { display: none; }
#header .navbar {
	justify-content: flex-start;
	text-align: left;
}
#header .navbar ul {
	justify-content: flex-start;
}