/*
 Theme Name:   Brandwerk
 Theme URI:    https://www.brandwerk-digital.com
 Description:  Brandwerk Child Theme
 Author:       Dominik Summer
 Author URI:   https://www.brandwerk-digital.com
 Template:     generatepress
 Version:      0.2
*/

/* ***************** Fonts ****************** */


/* ***************** Allgemeines ****************** */
html, body {
  overflow-x: hidden;
}


.hyphens-auto{
  -moz-hyphens: auto;
  hyphens: auto;
}

h4{
  line-height: 1.3em;
}


/* Remove click areas on mobile */
input, select, textarea, button, a {  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; }


/* ***************** Header & Navigation ****************** */

#mobile-header{
  background-color: var(--base);
}

/* nav.main-navigation.is_stuck{
  background-color: var(--base);
} */

.sub-menu{
  box-shadow: none !important;
}

/* mobile */
.site-logo.mobile-header-logo{
  margin-left: 20px !important;
}

/* Burger Menu Icon größe und Position oben */
.gp-icon.icon-menu-bars svg{
  height: 22px;
  width: 22px;
  top: 5px; /* Ausgleich wenn größe reduziert wird */
}

/* wenn kein Text neben Burger Icon */
.mobile-menu{
  display: none;
}

#mobile-menu > ul.menu{
  padding-top: 20px;
}

@media screen and (max-width:768px) {
  /* Abstand Logo mobile links */
  .navigation-branding{
    margin-left: 20px !important;
  }
}


ul.sub-menu.toggled-on{
  border-bottom: 0px !important;
}


/* Sticky nav height */
.sticky-enabled .main-navigation.is_stuck .navigation-branding img {
  height: 80px;
}

@media screen and (max-width:768px){
  .site-logo img{
    width: 100px !important;
  }
  .sticky-enabled .main-navigation.is_stuck .navigation-branding img {
    width: 100px;
    height: auto;
  }
}


/* Slideout */
#generate-slideout-menu .inside-navigation{
  padding: 60px 10px 20px 10px;
}

ul.generate-slideout-menu > li{
  padding-bottom: 30px !important; 
}


/* ***************** Buttons ****************** */


.button-external-textlink .gb-icon{
  transform: rotate(0deg);  /* Ausgangszustand */
  transition: transform 0.9s;  /* Übergang für beide Richtungen */
}


.button-external-textlink:hover .gb-icon{
  transform: rotate(-45deg);
  transition: transform 0.3s;
}


/* ***************** Blog ****************** */

body.single-post #page, .blog #page, .archive #page{
  padding:40px 20px;
}
@media screen and (min-width:769px){
  body.single-post #page, .blog #page, .archive #page{
    padding:40px 40px;
  }
}

/* Sidebar */
.sidebar .wp-block-categories-list{
  list-style: none;
  margin-left: 0;

}

/* ***************** Formulare ****************** */

/* remove focus box */
div.wpforms-container input[type=submit]:focus:after, 
div.wpforms-container button[type=submit]:focus:after, 
div.wwpforms-containerl .wpforms-page-button:focus:after, 
.wp-core-ui div.wwpforms-container input[type=submit]:focus:after, 
.wp-core-ui div.wpforms-container button[type=submit]:focus:after, 
.wp-core-ui div.wwpforms-container .wpforms-page-button:focus:after {
    content: none !important;
    border: none !important;
}

/* confirmation message */
.wpforms-confirmation-container-full{
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  border-color: var(--color-primary-900) !important;
}

/* submit button hover */
div.wpforms-container-full button[type=submit]:hover{
  background: var(--color-secondary-900) !important;
  color: var(--color-white) !important;
}

/* Business Hours Section */
.business-hours-section {
    background: var(--color-secondary-900);
    width: 100%;
    display: block;
    position: relative;
    border: 0px solid var(--color-secondary-900);
    border-radius: 60px 60px 60px 0;
}

.business-hours-section h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-neutral-0);
	text-align: center;
    padding: 32px 0 0;
	margin: auto;
  margin-bottom: 2rem;
}

.business-hours-section p {
    color: var(--color-primary-500);
    margin-bottom: 1.5em;
	font-size: 80%;
}

.opening-hours-sub{
  color:white !important;
  margin-top: 16px;
  padding-bottom: 16px;
  font-size: 80%;
}


@media screen and (max-width:768px){
  .business-hours-section h2 {
    
  }
}


.business-hours {
    width: 100%;
    color: var(--color-neutral-0);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 40px;
    align-items: flex-start;
    font-weight: 700;
}

.business-hours .day {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 32px 32px 32px 0;
    align-items: flex-start;
    text-align: left;
}

.day.highlight {
    background: var(--color-primary-500);
    color: var(--color-secondary-900);
}

h3.day-name {
    font-size: 36px;
    font-weight: 700;
    line-height: 43px;
    margin-bottom: 10px;
}

.availability{
  display: flex;
  flex-wrap: wrap;
}
.availability span {
    display: block;
    width: 100%;
}

.closure-notice {
    background: var(--color-neutral-0);
    padding: 40px;
    border-radius: 0 0 56px;
}

.closure-notice h3 {
	font-weight: 700;
	margin: 0 auto 1em;
	text-align: center;
	display: block;
}

.notice-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .business-hours-section {
        border-width: 3px;
        border-radius: 40px 40px 40px 0;
    }

    .business-hours-section h2 {
        padding: 20px 0 0;
    }

    .business-hours .day {
        padding: 16px;
        border-radius: 24px 24px 24px 0;
    }

    .business-hours span {
        font-size: 16px;
        line-height: 1.3;
    }

    h3.day-name {
        font-size: 30px;
        line-height: 40px;
    }

    .closure-notice {
        padding: 24px;
        border-radius: 0 0 37px;
    }
}

@media (max-width: 767px) {
    .business-hours-section {
        border-width: 0;
        border-radius: 20px 20px 20px 0;
    }

    .business-hours {
        grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 1fr);
        padding: 0;
    }
	
	.business-hours .day {
        padding: 8px;
        border-radius: 16px 16px 16px 0;
		    display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
    }

  .business-hours {
    padding-bottom:8px;
}
	
	h3.day-name {
		margin: auto;
		text-align: center;
	}

  .availability{
    gap: 8px;
  }

    span.time-range {
        font-size: 16px;
    }

    .closure-notice {
        padding: 16px;
		border: 2px solid var(--color-secondary-900);
        border-radius: 0 0 18px;
    }
}




@media (min-width:1200px) {
  .main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items {
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

/*
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-bottom: 2px solid var(--color-secondary-900);
}
    */


.main-navigation .main-nav ul.menu > li:hover > a, .main-navigation .main-nav ul.menu li.current-menu-item a{
  border-bottom: 2px solid var(--color-secondary-900);
}

.main-navigation ul ul {
  border-radius: 0 0 16px 0;
}
}

/* Overlay Menu CSS */
button.slideout-exit.has-svg-icon {
  position: absolute !important;
  top: 0;
  right: 0;
}