/*
 Theme Name:   akomo GeneratePress Child Theme
 Theme URI:    https://generatepress.com
 Description:  Custom GeneratePress child theme
 Author:       Gerrit Schuster
 Author URI:   https://gerritschuster.de
 Template:     generatepress
 Version:      1.1
*/


/* --------------------------------------------- */
/*  1.  V A R I A B L E S
/*  2.  G E N E R A L 
/*  3.  T Y P O G R A P H Y
/*  4.  B U T T O N S   &   L I N K S
/*  5.  I M A G E S   &   S V G
/*  6.  N A V I G A T I O N
/*  7.  F O R M S
/*  8.  F O N T S
/*  9.  - - - 
/* --------------------------------------------- */




/* --------------------------------------------- */
/*  1.  V A R I A B L E S
/* --------------------------------------------- */

:root {
	/* Sections */
	--section-inline-padding: clamp(1.5rem, 0rem + 7.5vw, 6rem); /* min320px max1280px */
	--section-vertical-padding: clamp(3rem, 3rem + 4vw, 8rem); /*min400px max2000px*/
	--section-inner-inline-padding: clamp(1rem, 0rem + 5vw, 2rem); /* min320px max640px */
	/* Typography */
	--font-size-h1: clamp(3rem, 2rem + 5vw, 5rem);
	--font-size-h2: clamp(1.75rem, 1.3rem + 2.25vw, 4rem);
	--font-size-h3: clamp(1.55rem, 1.2rem + 1.5vw, 3rem);
	--font-size-h4: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
	--font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	--font-size-subtext: 80%;
	/* Margins */
	--margin-bottom-s: 1rem;
	--margin-bottom-m: 2rem;
	--margin-bottom-l: 4rem;
	/* Border Radi*/
	--border-radius-s: 0.25rem;
	--border-radius-m: 0.50rem;
	--border-radius-l: 1.00rem;
	/* Shadows */
	--box-shadow-s: 2px 2px 4px 0px rgba(0,0,0,0.3), -2px -2px 4px 0px var(--color-light-a-030);
	--box-shadow-m: ;
	--box-shadow-l: ;
}


/* --------------------------------------------- */
/*  2.  G E N E R A L
/* --------------------------------------------- */

.site-wrapper {
	overflow:clip; /* clip everything outside the viewport */
	display: grid; /* grid ftw */
	grid-template-rows: auto 1fr auto; /* navi and footer are their elements' height and site content fills the rest of the space */
	min-height: 100svh;	/* small viewport height for smartphone screens */
}
.site.grid-container {
	width: 100%; /* set to 100% even though it is a gri item */
}


@view-transition {navigation: auto;} /* enables smooth*ish page transitions */


/* --------------------------------------------- */
/*  3.  T Y P O G R A P H Y
/* --------------------------------------------- */

/* fluid typography scale */
h1, .font-size-h1 {font-size: var(--font-size-h1)}
h2, .font-size-h2 {font-size: var(--font-size-h2)}
h3, .font-size-h3 {font-size: var(--font-size-h3)}
h4, .font-size-h4 {font-size: var(--font-size-h4)}
.font-size-subtext {font-size: var(--font-size-subtext)}

.font-hyphenate {
	hyphens:auto;
}

.font-headline-marker {
	box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.card__description p:first-child {
	line-height: 1.5; /* Good for readability */
	max-height: 4.5em; /* Optional: 1.5 line-height * 3 lines = 4.5em */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__description :not(:first-child) {
	display: none;
}

/* --------------------------------------------- */
/*  4.  B U T T O N S   &   L I N K S
/* --------------------------------------------- */


/* textlinks */

.link-txt {
	text-decoration-color: var(--color-light-a-050);
	text-underline-offset: 6px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color .4s ease-in-out, text-underline-offset .1s ease-out, color .2s ease-out;
}
.link-txt:is(:hover,:focus) {
	text-decoration-color: var(--color-accent-100);
	text-underline-offset: 1px;
}


/* additional styles for: stretch the area of a single link inside of an element to the whole element */
.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

/* image highlight effekt for hovered links. gets added by JS element hook */
.image-highlight__image--hovered {
	opacity: .9 !important;
	transform: scale(1.01);
}

/* --------------------------------------------- */
/*  5.  I M A G E S   &   S V G
/* --------------------------------------------- */


img {
	display: block;
}

/* make background shapes non dragable and non selectable */
.bg-shape {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* SVG MASKS */

.mask-parallelogram {
  -webkit-mask-image: url(/wp-content/uploads/mask-parallelogram.svg);
  mask-image: url(/wp-content/uploads/mask-parallelogram.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


.mask-two-image-stroke {
  -webkit-mask-image: url(/wp-content/uploads/mask-two-image-stroke.svg);
  mask-image: url(/wp-content/uploads/mask-two-image-stroke.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* --------------------------------------------- */
/*  6.  N A V I G A T I O N
/* --------------------------------------------- */

/* large screen main nav styling */

nav.main-navigation.has-branding {
	padding-inline: var(--section-inline-padding);
}

nav.main-navigation.has-branding .inside-navigation.grid-container {
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: var(--gb-container-width);
}


/* logo alterations */
.navigation-branding .site-logo img {
	width:340px;
	height:auto;
	padding:0px;
	margin-left: 0px;
}

@media (max-width: 600px) {
	.navigation-branding .site-logo img {
	width:240px;
	}
}

nav#site-navigation .navigation-branding {
	margin-left: 0px;
}

.navigation-branding .site-logo img {
	opacity:1;
	transition: opacity .3s ease-in-out;
}

/* get rid of default bottom border */
.sticky-enabled nav.main-navigation.is_stuck {
	box-shadow: none;
}

nav.main-navigation .inside-navigation ul li a {
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center; 
  background-size: calc(100% - 1.5rem) 20px;
  transition: background-image 0.2s;
}

/* hide home menu item on homepage */
body.home nav.main-navigation .inside-navigation ul li.menu-home {
	display: none;
}

/* nav items background on hover focus */
nav.main-navigation .inside-navigation ul li a:is(:hover, :focus),
nav.main-navigation .inside-navigation ul li.current-menu-item a {
	background-image: linear-gradient(to bottom, var(--color-accent1-100) 0%, var(--color-accent1-100) 100%);
}
.home nav.main-navigation .inside-navigation ul li:is(.menu-cta) a:is(:hover, :focus),
.home nav.main-navigation .inside-navigation ul li.current-menu-item a {
	background-image: none;
}


/* MENU CTA BUTTON */
nav.main-navigation .inside-navigation ul > li.menu-cta a:is(:hover, :focus) {
	background-image: none;
    background-color: var(--color-accent1-900);
}

nav.main-navigation .inside-navigation ul > li.menu-cta a {
	color: var(--color-contrast-900);
    text-transform: uppercase;
	letter-spacing: .1em;
    border-radius: var(--border-radius-s);
    padding: 0rem 1rem;
    background-color: var(--color-accent1-900);
}

nav.main-navigation.auto-hide-sticky .main-nav > ul > li.menu-cta {
	margin-left:1rem;
}

nav .main-nav > ul > li.menu-cta a {
    background-color: var(--color-accent-090);
    border-radius: 3rem;
    padding-inline: 0;
	max-width: 320px;
	transition: background-color .2s ease-in-out;
}

.main-nav > ul > li.menu-cta a:is(:hover, :focus) {
	background-color: var(--color-accent-090);
	color: var(--color-dark-a-100) !important;
}



/* MOBILE NAVIGATION */
nav.main-navigation.mobile-header-navigation

nav.main-navigation.mobile-header-navigation {
	padding-inline: var(--section-inline-padding);
}

.site-logo.mobile-header-logo {
	margin:0
}
.site-logo.mobile-header-logo img {
	height: 4.25rem;
}

.main-navigation.has-branding button.menu-toggle, .main-navigation.has-sticky-branding.navigation-stick button.menu-toggle {
	padding:0;
	padding-right:0px;
	margin-right: -0.5rem;
	line-height:0;
	height:3rem;
	aspect-ratio: 1;
}

.main-navigation.mobile-header-navigation {
	padding-inline:2rem;
}
/* visually hide menu label*/
.menu-toggle .gp-icon + .mobile-menu {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.gp-icon.icon-menu-bars svg {
	height:1.5rem;
	width:1.5rem;
	top:0
}

/* SLIDEOUT MENU */

#generate-slideout-menu {
	overflow: clip;
}

body {
    --gp-slideout-width: 320px;
}

nav#generate-slideout-menu .slideout-menu li {
	width:auto;
}

nav#generate-slideout-menu ul li.menu-cta a {
	background-color: var(--color-accent1-900);
}

nav#generate-slideout-menu ul li.menu-cta {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-items: center;
}

nav#generate-slideout-menu ul  {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
}

/* --------------------------------------------- */
/*  7.  F O R M S
/* --------------------------------------------- */

/** SEARCH FORM IN TOP BAR **/

.top-bar__search form label {
	display: block;
	height: 0px;
	width: 0px;
	position: absolute;
	left: -9999px;
}

.top-bar__search form .wp-block-search__inside-wrapper {
	border: 2px solid var(--color-base-900);
	border-radius: 8px;
	padding: 2px;
}

.top-bar__search form .wp-block-search__inside-wrapper input {
	order: 1;
	border: none;
	padding: 2px;
	background-color: transparent;
	color: var(--color-base-900);
}

.top-bar__search form .wp-block-search__inside-wrapper button {
	order: -1;
	border: none;
	padding: 0px;
	margin-left:0px;
	background-color:transparent;
	color: var(--color-base-900);
}
/* ASTERISK */

.fluentform  form .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--color-accent2-900);
	margin-left: 0px;
}

/* --------------------------------------------- */
/*  8.  F O N T S 
/* --------------------------------------------- */



/* --------------------------------------------- */
/*  9.  A C C O R D I O N S 
/* --------------------------------------------- */

.accordion__item svg line {
	stroke-width: 30px;
}