/* COLORS */

:root {
	--wp-primary: #A64646;
	--wp-secondary: #A66658;
	--wp-tertiary: #BF8A6B;
	--wp-quaternary: #D9BBA0;
	--wp-light: #FDFBF3;
    --headingsfontfamily: 'BornReadySlanted', Arial, Helvetica, sans-serif;
}

/* FONTS */

@font-face {
    font-family: 'BornReadySlanted';
    src: url('fonts/BornReadySlanted.woff2') format('woff2');
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

.wp-block-buttons ~ p {
	 margin-top: 0;
	 font-size: .9em
}
.section-head {
	align-items: flex-end;
}

strong {
    font-weight: 700;
}

main {
    padding-top: 4rem;
    p {
        margin: 0 0 .5em; 
        text-wrap: balance;
        max-width: 60rem;
        &.has-text-align-center {
            margin-left: auto;
            margin-right: auto; 
        }
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 1em 0 .125em; 
        text-wrap: balance;
        max-width: 60rem;
        &.has-text-align-center {
            margin-left: auto;
            margin-right: auto; 
        }
    }
    .nv-content-wrap p + ul {
        margin-top: 0;
    }
}

a {
    transition: all 0.3s ease;
    opacity: 1 !important;
}
.hfg_header.site-header {
    box-shadow: none !important;
}
header {
    margin: 0;
    position: fixed; 
    width: 100%;
    top: 0;
    z-index: 99;
    transition: all 0.3s ease;
    .container {
        width: 90%;
        flex-basis: 90%;
        max-width: 75rem;
    }
    .left .builder-item,
    .right .builder-item {
        margin: 0;
        padding: 3.5em 0 1.5em;
        transition: all 0.3s ease;
        @media screen and (max-width: 960px) {
            padding: 2em 0 .5em;
        }
    }
    .center .builder-item {
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        .item--inner {
            padding: 0;
        }
        .brand {        
            padding: 1em 0.5em;
            position: relative;
            &:after {
                content: '';
                display: block;
                position: absolute;
                bottom: -.5em;
                left: calc(50% - 4.5em);
                width: 9em;
                height: 4.5em;
                background-color: var(--wp-light);
                border-radius: 0 0 6em 6em;
                z-index: -1;
                transition: all 0.3s ease;
            }
        }
    }
    &.scrolled {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        .center .builder-item .brand{
            padding: .5em .5em 1em;
            &:after {      
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                bottom: 0em;
            }
        }
        .left .builder-item,
        .right .builder-item {
            margin: 0;
            padding: 3em 0 1em;       
            @media screen and (max-width: 960px) {
                padding: 1.5em 0 .5em;
            }
        }
    }
}


.builder-item:has(.builder-item--secondary-menu) {
    display: none;
}

body.page-id-100 {
    .builder-item:has(.builder-item--secondary-menu) {
        display: flex;
    }
    .builder-item:has(.builder-item--primary-menu) {
        display: none;
    }
}

.admin-bar header {
    top: 32px;
    @media screen and (max-width: 782px) {
        top: 46px;
    }
}

header .nav-ul {
    li > .wrap > a.active {
        color: black !important;
    }
    li.nv-active > .wrap > a {
        color: var(--wp-primary);
    }
    li > .wrap:hover {
        a {
            color: black !important;
            &:after {
                width: 100%;
            }
        }  
    }
}

/* MOBILE BUTTON */

.navbar-toggle {
  background-color: transparent;
  border: none !important;
  .icon-bar {
    width: 2em;
    height: 0.125em;
    border-radius: .125em;
    &:nth-child(2) {
        margin: 0.5em 0;
        }
    }
    &:hover,
    &:focus-visible,
    &:focus {
        border: none !important;
        outline: none !important;
        .icon-bar {
            background-color: var(--wp-primary) !important;
        }
    }
}
.is-menu-sidebar {
  .navbar-toggle {
    .icon-bar:nth-child(1) {
      top: 0.6em !important; 
    }
    .icon-bar:nth-child(3) {
      bottom: 0.6em !important;
    }
  }
  .nav-ul {
    flex-direction: column;
    align-items: center;
    li {
        width: max-content !important;
        a {
            padding: 1rem 0 !important;
        }
    }
  }
}

/* BUTTONS */

.wp-block-buttons {
    margin: 1rem 0 .5rem;
    .wp-block-button {
        a:hover {
            opacity: 1;
            border-color: var(--wp-primary);
            background-color: var(--wp-primary);
            color: white;
        }
    }
}

/* SECTIONS */

.neve-main {
    padding-top: 0 !important;
}

.wp-block-cover.alignfull {
	margin-top: 0;
	min-height: 0;
	padding-top: 4rem;
	padding-bottom: 4rem;
    .wp-block-cover__inner-container{
        width: 90%;
        > :first-child {
            margin-top: 0;
        }
        > :last-child {
            margin-bottom: 0;
        }
    }
}

body:not(:has(.wp-block-cover)) .single-page-container {
    width: 93%;
    max-width: 1000px;
    margin: 5rem auto 2rem;
}

.section-ueber {
    .wp-block-columns {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center !important;
    }
    .wp-block-image {
        display: flex;
        justify-content: center;
    }
    img {
        border-radius: 50rem;
        max-width: 18rem;
        margin: 0 auto;
    }
}

.section-together {
    img {
        margin: 1.5rem auto 0;
    }
    @media screen and (max-width: 781px) {
        .wp-block-columns {
            flex-direction: column-reverse !important;
        }
        img {            
            display: block;
            margin: 0 auto;
            max-width: 10rem;
        }
    }
}

/* FOOTER */

footer {
    .footer-main-inner .row {
        grid-template-columns: auto auto auto;
        padding: 1rem 0;
    }
    .container {
        width: 90%;
        flex-basis: 90%;
        max-width: 75rem;
    }
    .widget-area {
        display: flex;
        flex-flow: row wrap;
        gap: 1.5rem;
        &:has(.widget_media_image) {
            justify-content: center;
        }
        @media screen and (max-width: 960px) {
            justify-content: center;
        }
    }
    .widget {
        margin-bottom: 0;
        img {
            max-width: 15rem;
        }
        &.widget.text {
            font-size: 1rem;
        }
    }
    a {
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: 1px solid transparent;
        &:hover {
            border-bottom-color: white;
            color: var(--wp-light) !important;
        }
    }
    .footer-main {
        .builder-item {
            padding: .75rem 0;
        }
    }
    .builder-item--footer-menu {
        @media screen and (max-width: 960px) {
            justify-content: center;
        }
    }
    .footer-bottom {
        display: none;
    }
}

/* DETAILS */

summary {
  position: relative;
  anchor-name: --summary;
  padding-left: 1.5rem;
  color: var(--wp-primary);
  font-weight: 500;
  margin: 1rem 0 0;
  &::marker {
    content: "";
  }
  
  &::before,
  &::after {
    content: "";
    border-block-start: 2px solid var(--wp-primary);
    height: 0;
    width: 1rem;
    inset-block-start: 50%;
    inset-inline-end: 0;
    position: absolute;
    position-anchor: --summary;
    position-area: top end;
    left: 0;
  }
    &::after {
    transform: rotate(90deg);
    transform-origin: 50%;
  }
}

/* Rotate the line when open */
details[open] {
    margin-bottom: 2rem;
    summary::after {
    transform: rotate(0deg);
    }
}

/* GALLERY */

.wp-block-gallery {
    margin: .5rem 0;
}

/* BLOCKQUOTE */
blockquote {
  border: none !important;
  padding: 0;
  p {
    position: relative;
    text-wrap: auto;
    font-size: 1.25em;
    margin: 0 auto;
    padding: 0 3rem;
    &:first-child {
      &::before,
      &::after {
        content: "“";
        font-size: 5em;
        line-height: 0.5em;
        position: absolute;
        font-family: var(--headingsfontfamily) !important;
      }
      &::before {
        left: -0.125em;
        bottom: -0.5em;
      }
      &::after {
        right: -0.125em;
        top: 0.125em;
      }
    }
    &:not(:first-child) {
      font-size: 1.1rem;
      font-style: normal;
      margin-top: 1rem;
    }
  }
}