/*
 Theme Name:   AWO BVH Intranet
 Theme URI:    https://awo-bv-hannover.de
 Description:  AWO BVH Child theme for GeneratePress. Developed by runbot.co
 Author:       runbot.co
 Author URI:   https://runbot.co
 Template:     generatepress
 Version:      1.0
*/

/* -------------------------------------------------------------------------------
   Variables
---------------------------------------------------------------------------------- */
:root{
	--radius: 0.5rem;
	--button-radius: 0.25rem;
	--input-radius: 0.25rem;
	--shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04); /* Just a basic general shadow */
	
	
	--site-width: var(--gb-container-width);
	--site-wrapper: 2400px;
	
	/* Gutter */
	--gutter: clamp(1rem, 0.466rem + 2.034vi, 2.5rem);
	
	/* Gap (between columns) */
	--gap-l: 3rem;
	--gap-m: 2rem;
	--gap-s: 1.5rem;
	--gap-xs: 1rem;
	
	--gap: var(--gap-m);
	
	/* @link https://utopia.fyi/space/calculator?c=360,24,1.2,1240,80,1.25,5,2,&s=0.5,1.5|2|3,s-l&g=s,l,xl,12 */
	--space-xs: 1rem;
	--space-s: clamp(1.5rem, 1.144rem + 1.356vi, 2.5rem);
	--space-m: clamp(3rem, 2.288rem + 2.712vi, 5rem); /* Default, was 4rem */
	--space-l: clamp(4.5rem, 3.432rem + 4.068vi, 7.5rem);
	--space-xl: clamp(6rem, 4.576rem + 5.424vi, 10rem);
	
	/* Font sizes responsive */
	/* https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=18&size-max=28&viewport-min=420&viewport-max=1280&relative-units=vi */
	--fontsize-5xl: clamp(3.3667rem, 2.8333rem + 3.3333vw, 5.5rem); /* h1 */
	--fontsize-4xl: clamp(3rem, 2.1573rem + 3.3709vw, 4.854rem); /* h1 alternative, use either */
	--fontsize-3xl: clamp(2.25rem, 1.618rem + 2.5282vw, 3.6405rem);
	--fontsize-2xl: clamp(1.875rem, 1.3483rem + 2.1068vw, 3.0338rem);
	--fontsize-xl: clamp(1.5rem, 1.0786rem + 1.6855vw, 2.427rem);
	--fontsize-l: clamp(1.25rem, 1.006rem + 0.93vw, 1.75rem);
	/*--fontsize-m: clamp(1.125rem, 0.809rem + 1.2641vw, 1.7203rem);
	--fontsize-m: clamp(1.125rem, 0.881rem + 0.93vi, 1.625rem);*/
	--fontsize-m: clamp(1.125rem, 0.942rem + 0.698vw, 1.5rem);
	--fontsize-s: clamp(1.063rem, 0.94rem + 0.465vi, 1.313rem);
	--fontsize-xs: clamp(0.938rem, 0.846rem + 0.349vi, 1.125rem);	
}

/* CSS Easings */
:root {
    --elastic-ease-out: linear(
		0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 
		1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 
		1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 
		1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 
		1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 
		0.9842 58.77%, 1.0011 81.26%, 1 
	);
    --back-out: linear(
    0 0%, 0.1935 4.37%, 0.3671 8.83%,
    0.521 13.38%, 0.6557 18.04%,
    0.7716 22.82%, 0.869 27.73%,
    0.9488 32.81%, 1.0111 38.08%,
    1.0512 42.81%, 1.0792 47.75%,
    1.0953 52.97%, 1.1 58.55%,
    1.0956 63.36%, 1.0838 68.73%,
    1.0119 90.98%, 1.0029 95.69%, 1 100%
    );
	--smooth: cubic-bezier(0.625, 0.05, 0, 1);
	--smooth-ease: cubic-bezier(.32, .72, 0, 1);
	--bounce: cubic-bezier(0.35, 1.75, 0.6, 1);
	--expo: cubic-bezier(0.87, 0, 0.13, 1);
}

/* -------------------------------------------------------------------------------
   Setup
---------------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Stable scrollbars on windows */
html, body {
    scrollbar-gutter: stable;
}

.screen-reader-text:focus {
    background-color: var(--color-background);
    border-radius: 15em;
    box-shadow: none;
    clip: auto!important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    border: none;
    font-size: 64%;
    font-weight: 700;
    letter-spacing: -.02em;
    height: auto;
    left: 1em;
    line-height: normal;
    padding: .5em 1em;
    text-decoration: none;
    top: 1em;
    width: auto;
    z-index: 100000
}

body :focus-visible,
body .wsf-button:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-primary);
    outline-offset: 2px
}

body .wsf-button:focus-visible,
body .button-accent:focus-visible {
    outline-color: var(--color-primary)
}

body :not(.gb-button,.site-logo a,.wsf-button):focus-visible,
body .mobile-nav-items a:focus-visible,
body a.button-text:focus-visible {
    outline: thin dotted currentcolor;
    outline-color: currentcolor;
    outline-style: dotted;
    outline-width: thin
}

body, button, input, select, textarea {
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img, source, video {
    height: auto;
    max-width: 100%;
    width: 100%;
	vertical-align: top;
}

select::-ms-expand { display: none; }

body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
	font-feature-settings: 'ss02' 0;
}

/* Headline */
h1, h2, h3, h4, h5, h6, .is-h1, .is-h2, .is-h3, .is-h4, .is-h5, .is-h6 { margin: 0; letter-spacing: -0.02em; margin-bottom: 0.25em; }
/*h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .is-h1 a, .is-h2 a, .is-h3 a, .is-h4 a, .is-h5 a, .is-h6 a { font-weight: inherit; color:inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .is-h1 a:hover, .is-h2 a:hover, .is-h3 a:hover, .is-h4 a:hover, .is-h5 a:hover, .is-h6 a:hover { color:inherit; }*/

h1, .is-h1 { font-size: var(--fontsize-5xl); line-height: 1.05; letter-spacing: -0.04em; }
h2, .is-h2 { font-size: var(--fontsize-3xl); line-height: 1.22; letter-spacing: -0.04em;  }
h3, .is-h3 { font-size: var(--fontsize-2xl); line-height: 1.27; letter-spacing: -0.04em;  }
h4, .is-h4 { font-size: var(--fontsize-xl); line-height: 1.3; letter-spacing: -0.04em; }
h5, .is-h5 { font-size: var(--fontsize-l); line-height: 1.47; letter-spacing: -0.03em; }
h6, .is-h6 { font-size: var(--fontsize-m); line-height: 1.55; letter-spacing: -0.03em; }

.is-p{
	font-family: inherit; /* copy from the body */
	font-size: inherit; /* copy from the body */
	line-height: inherit;
	color: var(--color-text-muted);
	font-weight: 400; /* copy from the body */
	letter-spacing: 0; /* copy from the body */
	margin: 0;
	margin-bottom: 1.5em;
}

b,strong {
    font-weight: 700;
}

/* Button Reset
button, button:focus, button:hover {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
}  */

button{
	all: unset;
	cursor: pointer;
}

/* -------------------------------------------------------------------------------
   Theme Tweaks
---------------------------------------------------------------------------------- */
.site-header {
    padding-inline: var(--gap);
}

/* Constrain the width of the page if wanted */
.site-wrapper {
    width: 100%;
    max-width: var(--site-wrapper);
    margin-inline: auto;
    background: var(--color-background);
	overflow: hidden;
}

@media screen and (min-width: 2400px) {
	.site-wrapper::after {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2 + 0px);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        right: 0;
        top: 0;
		z-index: 1;
    }
	.site-wrapper::before {
        content: "";
        display: block;
        width: calc((100% - var(--site-wrapper)) / 2 + 0px);
        height: 100%;
        background: var(--color-outer-background);
        position: fixed;
        left: 0;
        top: 0;
		z-index: 1;
    }
}

/* -------------------------------------------------------------------------------
   Comments (Leave it in even if you don't use comments)
---------------------------------------------------------------------------------- */
.comments-area{
	margin-left: auto;
    margin-right: auto;
    max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width));
    width: 100%;
	padding-bottom: var(--space-m);
}

#comments{
	max-width: 1040px;
	margin-left: auto;
    margin-right: auto;
}

.comment-meta .avatar{
	max-width: 64px;
	flex-shrink: 0;
	margin-right: 1em;
}

.comment-meta{
	display: flex;
	align-items: center;
}

.comment-content{
	padding: 0;
	border: none;
	margin-top: 1.5em;
}

.comment-form input, .comment-form-comment {
    margin-bottom: 1.5em;
}

/* -------------------------------------------------------------------------------
   Utilities
---------------------------------------------------------------------------------- */
/* Balance headings and elements with .balance class */
:is(h1, h2, h3, h4, h5, h6), .balance {
    text-wrap: balance;
	overflow-wrap: break-word;
}

/* Use pretty wrapping for body text elements */
p, blockquote, li, .pretty {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0;
}

/* Line Limit */
.line-limit-3, .line-limit-2{
	display: -webkit-box;
	box-orient: vertical;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-limit-3{
	line-clamp: 3;
	-webkit-line-clamp: 3;
}

.line-limit-2{
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

/* Icon without fill */
html .icon-nofill svg, html .gb-icon svg, .nofill, .nofill svg{
    fill: none!important;
}

/* No Underline */
.no-ul, .no-ul a{
    text-decoration: none;
}

/* Noselect */
.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

/* Horizontal Divider */
hr, hr.wp-block-separator {
    background-color: var(--grey-200);
    border: 0;
    height: 1px;
    margin-bottom: var(--space-m);
    margin-top: var(--space-m);
}

/* Vertical Text */
.vertical{
    white-space: nowrap;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Rotation */
.rotate{
	transform-origin: center;
    animation: rotate 28s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Remove Transitions (for example for the Infobox) */
.no-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease;
}

/* Stretch Link */
.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
	z-index: 10;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

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

/* -------------------------------------------------------------------------------
   Accordion
---------------------------------------------------------------------------------- */
body:not(.wp-admin) .gb-accordion__content {
    transition: color 0.3s ease, max-height .7s cubic-bezier(.2,1,.22,1)!important;
}

body:not(.wp-admin) .gb-accordion__content>div {
    will-change: opacity;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s cubic-bezier(.2,1,.22,1) , transform .7s cubic-bezier(.2,1,.22,1)
}

body:not(.wp-admin) .gb-accordion__item-open .gb-accordion__content>div {
    opacity: 1;
    transform: translateY(0)
}

body:not(.wp-admin) .gb-accordion__content {
    visibility: visible!important
}

/* -------------------------------------------------------------------------------
   Forms
------------------------------------------------------------------------------- */
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    display: block;
    border: 0;
    border-radius: var(--input-radius);
    padding: 1rem 1rem;
    height: auto;
    font-size: var(--fontsize-s);
    font-weight: 400;
    font-family: inherit;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--grey-400);
    transition: color 0.3s ease, border 0.3s ease, background-color 0.3s ease;
    outline: 0!important;
}

input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus{
    background-color: var(--color-white);
    border-color: var(--grey-700);
    outline: 0!important;
}

form button[type="submit"], .comment-form input[type="submit"]{
    align-items: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border:none;
    border-radius: var(--button-radius);
    display: inline-flex;
    font-family: inherit;
    font-size: var(--fontsize-m);
    justify-content: center;
    transition: transform 0.3s ease 0s;
    will-change: transform;
    column-gap: 0.5rem;
    display: inline-flex;
    font-weight: 400;
    justify-content: center;
    padding: 0.5rem 1rem;
    row-gap: 0.5rem;
    transition: all 0.3s ease 0s;
}

form button[type="submit"]:is(:hover,:focus) {
    background-color: var(--color-primary-alt);
    color: var(--color-white);
}

/* Placeholder */
::placeholder{color:var(--grey-400);}
:-ms-input-placeholder{color:var(--grey-400);}
::-ms-input-placeholder{color:var(--grey-400);}

/* Checkbox */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--grey-300);
    margin: 0;
    flex-shrink: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border-radius: var(--input-radius);
    transform: translateY(.25em);
    display: grid;
    place-content: center;
    transition: border 0.2s ease;
    cursor: pointer;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: transform 0.2s ease;
    background-color: var(--color-primary);
    transform-origin: center center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(0.8);
}

input[type="checkbox"]:checked{
    border-color: var(--primary);
}

input[type="checkbox"] + label{
    cursor: pointer;
}

/* Radio button */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--grey-300);
    margin: 0;
    flex-shrink: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border-radius: 50%; /* Changed to 50% for circular shape */
    transform: translateY(.25em);
    display: grid;
    place-content: center;
    transition: border 0.2s ease;
    cursor: pointer;
}

input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: transform 0.2s ease;
    background-color: var(--color-primary);
    transform-origin: center center;
    border-radius: 50%; /* Made the dot circular */
}

input[type="radio"]:checked::before {
    transform: scale(0.8);
}

input[type="radio"]:checked {
    border-color: var(--primary);
}

input[type="radio"] + label{
    cursor: pointer;
}

/* Select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z'/%3E%3C/svg%3E");
    background-size: .6em;
    background-position: calc(100% - 0.5em) center;
    background-repeat: no-repeat;
    padding-right: 2em;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

/* Search */
input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-position: 0.75em calc(50% - 0.01em);
    background-repeat: no-repeat;
    background-size: 1.2em;
    padding-left: 3rem;
}

/* -------------------------------------------------------------------------------
   Custom CSS for AWO
------------------------------------------------------------------------------- */
/* Overlay */
.overlay {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
    will-change: opacity;
}

body[data-gb-menu-open="full-overlay"] .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile menu toggle button position */
:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone{
    top: var(--space-s);
    right: var(--space-s);
}

/* Megamenu mobile width limit */
.menu-item-has-gb-mega-menu .gb-overlay--anchored{
    width: 100%;
}

/* More space below opened submenu items on mobile */
.gb-sub-menu--open{
    margin-bottom: 1.5rem!important;
}

.gb-menu-container--mobile .mega-menu {
	grid-template-columns: 1fr;
	width: 100%;
}

/* Remove strange offset */
:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone+.gb-menu {
    margin-top: 0 !important;
}

/* Navigation Text Decoration */
.gb-navigation .gb-menu-container .menu-item a{
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: auto;
	text-decoration-color: transparent;
	transition: text-decoration-color .1s ease-in-out;
}

.gb-navigation .gb-menu-container .menu-item a:hover{
	text-decoration-color: currentColor;
}

/* Text Decoration */
a, .underline {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: auto;
	text-decoration-color: color-mix(in srgb, currentColor 20%, transparent);;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, text-decoration 0.25s ease;
}

a:hover, .underline:hover{
	text-decoration-color: currentcolor;
}

/* Overwrite standard GP site containers to match the .section-m class */
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
    padding: var(--space-m) 0px var(--space-m) 0px;
}

body:not(.full-width-content) .site{
	max-width: min(calc(100vw - var(--gutter) * 2), var(--site-width));
}


/* Stick footer to bottom */
.site-wrapper{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.container.grid-container {
  flex-grow: 1;
    align-self: stretch;
    width: 100%;
}

/* Infobox - Standardzustand = die box ist ZU  */
.infobox {
    transform: translateX(calc(100% + 2em));
    transition: all 0.4s var(--smooth-ease);
}

.infobox.is-visible {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.infobox.is-visible .infobox-label{
	transform: rotate(-90deg) translate3d(-100%, 0, 0px);
    opacity: 0;
    visibility: hidden;
}