/*
Theme Name: HANKA
Author: KGL - Web + Design
Version: 2025.10
*/

:root{
  font-size:20px;
  color:var(--color-prime);
  --color-prime:#0B2A63;/* Dunkelblau */
  --color-sec:#793299; /* Pflaume */
  --color-sec-light:#f8ecff; /* Lavendel */
  --color-highlight:#E370D1; /* Pink */
  --color-highlight-light:#fceff6; /* Rosa */
  --color-third:#f0f4ff; /* lightblue */
  --color-gray:silver;

  --con-max:1360px;
  --px:2rem; /* Aussenabstand Container */
  --gx:1rem; /* Gap zwischen Col */
}

@media (max-width:991px){
  :root{--px:1rem}
}

@media (max-width:600px){
  :root{font-size:18px}
}

body{
  font-family: helvetica-neue-lt-pro,"Helvetica Neue",Arial,sans-serif;
  background-color:#fff;
  background-image:url('inc/assets/page-bg-1.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  background-attachment:fixed;
}

@media (max-width:991px){
  body{background-size:140%}
}

@media (max-width:600px){

body.is-touch{background:#fff;}
html:has(.is-touch)::before {
    content: ' ';
    display: block;
    background-image:url('inc/assets/page-bg-1.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 150%;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10;
}
}

.wrapper{
  overflow:hidden;
  overflow:clip;
}

/* Helper classes */

::selection{background-color:#E7CDEC;}
::-moz-selection{background-color:#E7CDEC;}

/* --- Typo --- */

a{color:currentColor;}
.is-touch a:hover{text-decoration: none !important}

ol + *, p + *, ul + *{margin-top:1.2em}

/* --- Buttons --- */

.btn:hover{text-decoration:none}

.btn{
  display:table;
  color:#fff;
  font-size:1rem;
  line-height:1;
  font-weight: bold;
  background-color:var(--color-sec);
  border:3px solid var(--color-sec);
  padding:1em 1.5em;
  border-radius:10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:background-color .2s,color .2s,border-color .2s;
}

.no-touch .btn:hover{
  --color-sec:var(--color-highlight);
}

.btn.ghost{
  color:var(--color-sec);
  background-color:transparent;
}

.no-touch .btn.ghost:hover{
  color:#fff;
  background-color:var(--color-sec);
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap:2rem;
  align-items: center;
}


/* --- Header Bar ---- */

.nav-header{padding:2.5rem 0}

@media (max-width:600px){
  .nav-header{padding:2rem 0}
}

  .logo{
    font-size:2.1rem;
    line-height:1;
    letter-spacing:.01em;
    font-weight:bold;
  }

  @media (max-width:600px){
    .logo{font-size:1.85rem}
  }

  .no-touch .logo a:hover{
    text-decoration:none;
    color:var(--color-highlight);
  }


/* --- Page: Main Section ---- */

  .page-main-sec{--gx:2rem}


/* -- Hero Image --- */

  .page-main-img{
    position:sticky;
    top:2rem;
  }

  @media (min-width:1200px){
    .page-main-img img{translate:-2.5rem 0;}
    .page-template-buch .page-main-img img{translate:-1rem 0;}

    .page-template-service .page-main-img img{
      translate:-3rem 0;
      scale:.825;
      transform-origin:top right;
    }

    .page-template-frontpage .page-main-img img{
      scale:.975;
      transform-origin: top center;
      translate:-.75rem -.5rem;
    }

    .page-template-expertise .page-main-img img{
      scale:.95;
      transform-origin: top center;
      translate:0rem -1rem;
    }

    /* Sprechstunde Temp */
    .page-id-39 .page-main-img img{
      translate: -1rem -.75rem;
      scale: 1;
      transform-origin: top right;
    }

  }

      @media (max-width:600px){
        .page-template-service .page-main-img img{
          translate:0 .5rem;
        }
      }

    @media (max-width:991px){
      .page-main-img img{
        max-width: 60ch;
        margin:0 auto;
      }
    }


/* Text Content */

  .page-main-content{
    max-width:50ch;
    margin:1.5rem auto 3rem auto;
  }

  @media (min-width:1200px){
    .page-main-content{margin:2rem auto 3rem 0;}
  }

  @media (max-width:600px){
    .page-main-content{margin:1.5rem auto 2rem auto;}
  }

 .page-main-content h1{
   font-size:2.55rem
 }

 .page-main-content h1.large,
 .page-template-frontpage .page-main-content h1{
    font-size:3.1rem;
    font-size:clamp(2.5rem,6vw,3.1rem);
    hanging-punctuation: first;
 }

 @media (max-width:600px){
   .page-main-content h1{
     font-size:2rem !important
   }
 }

 .page-main-content h1 span{
   display:block;
   font-size:1rem;
   color:var(--color-sec);
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   margin-bottom:1.2em;
 }

@media (min-width:601px){
.page-main-content h1 span,
.page-main-content div{
  font-size:1.1rem
}
}


/* -- Listen --- */

.page-main-content .list{
  margin-top:4rem;
}

.page-main-content .list h2{
  font-size:1.3rem;
  margin-bottom:1.75em;
  text-decoration: underline;
  color:var(--color-sec);
}

.page-main-content .list ul{
  margin:0;
  padding:0;
  list-style: none;
  gap:1em
}

.page-main-content .list li{
  font-weight:bold;
  max-width:40ch;
  position: relative;
  padding-left:2.15em;
}

.page-main-content .list li::before{
  content:'';
  position: absolute;
  width:1.1em;
  height:1.1em;
  left:.2em;
  top:.2em;
  background-color:var(--color-highlight);
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('inc/assets/icon-arr.svg');
}

/* ----- Frontpage: Service Section ----- */

.fp-service-sec{
  --gx:2rem;
  padding:5rem 0;
  background-image:linear-gradient(transparent,#fff 25%);
}

@media (max-width:991px){
  .fp-service-sec{padding:2.5rem 0;}
}

.fp-service-head h2{
  font-size:2rem;
  text-decoration:underline;
  text-decoration-color: var(--color-highlight);
  text-underline-offset:.1em;
  margin-bottom:3.5rem
}

@media (max-width:600px){
  .fp-service-head h2{
    font-size:1.75rem;
    margin-bottom:2rem;
  }
}

.fp-service-items{
  --gy:4rem;
}

.fp-service-item + .fp-service-item::before{
  content:'';
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  width:1px;
  background-color:var(--color-gray);
}

@media (max-width:991px){
  .fp-service-item + .fp-service-item::before{
    width: auto;
    height:1px;
    top:calc(var(--gy) / -2);
    left:var(--px,0);
    right:var(--px,0);
  }
}

.fp-service-item-inner{
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  padding:1rem 0;
  gap:var(--_gap_y) var(--_gap_x);
  --_gap_y:1.25rem;
  --_gap_x:1rem;
}

@media (min-width:992px){
.fp-service-item-inner{
  max-width:32ch;
  padding-top:0;
}
}

@media (max-width:600px){
.fp-service-item .fp-service-item-inner{padding-top:0}
.fp-service-item:first-child .fp-service-item-inner{padding-top:.5rem}
}

.fp-service-item-inner > *{
  width:100%;
}

@media (max-width:991px) and (min-width:768px){
  .fp-service-item-inner{
    flex-direction: row;
  }
  .fp-service-item:nth-child(2) .fp-service-item-inner{
    flex-direction: row-reverse;
    margin-left:calc(var(--_gap_x,0) * -1);
  }
  .fp-service-item-inner > *{
    max-width:calc(50% - var(--_gap_x,0));
    flex:0 0 calc(50% - var(--_gap_x,0));
  }
  .fp-service-item-content{
    padding-top:1.5rem
  }
}


.fp-service-item-img img{
  aspect-ratio:1.45;
  object-fit:contain;
  object-position:top center;
}

@media (max-width:600px){
  .fp-service-item-img img{
    aspect-ratio:1.35;
    object-position:center;
    margin-bottom: .5rem;
  }
}

.fp-service-item-content h3,
.fp-service-item-content p{
  margin-bottom:var(--_gap_y,1rem);
}

.fp-service-item-content h3{
  font-size:1.55rem;
}

.fp-service-item-content a{
  text-decoration: underline;
  text-decoration-color: var(--color-highlight);
  text-underline-offset:.1em;
  font-weight:bold;
}

.no-touch .fp-service-item-content a:hover{
  color:var(--color-highlight);
}


/* ---- CTA Section ---- */

.cta-section .row{
  padding:6rem 0;
  align-items: center;
}

@media (max-width:600px){
  .is-touch .cta-section .row{
    min-height:100vh;
    min-height:100svh;
    padding:0;
  }
}

.cta-section-inner > *{
  text-align: center;
  margin:0 auto;
}

.cta-section-inner h2{
  font-size: 2.5rem;
  position: relative;
  margin-bottom: 1.2em;
}

.cta-section-inner h2::after{
  content:'';
  position: absolute;
  left:calc(50% - 2ch);
  bottom:-.65em;
  width:4ch;
  height:3px;
  background-color: var(--color-highlight)
}


@media (max-width:600px){
  .cta-section-inner h2{
    font-size: 2.2rem;
    margin-bottom: 1.4em;
  }
  .cta-section-inner h2::after{
    bottom:-.75em;
  }
}

.cta-section-inner p{
  max-width:48ch;
  font-size:1.1rem;
  font-weight: bold;
  margin:0 auto 3em;
}


/* ------- Expertise -------- */

/* --- CV Section --- */

.exp-cv-sec{
  background-color: var(--color-third);
  padding:5rem 0;
  margin-top:7rem;
}

@media (max-width:991px){
  .exp-cv-sec{margin-top:2.5rem}
}

.exp-sec h2{font-size: 2rem;}

@media (min-width:992px) {
.exp-sec{font-size: 1.1rem;}
.exp-sec h2{font-size: 2.5rem;}
}

.exp-cv-sec h2 + p{
  max-width: 34ch
}

.exp-cv-sec a{
  font-weight:bold;
  font-size: 1rem;
  line-height: 1;
  color:var(--color-sec);
  display: inline-block;
  margin-top:1.2em;
  position: relative;
  padding-left:1.5em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.exp-cv-sec a::before{
  content:'';
  position: absolute;
  left:0;
  width:1em;
  height:1em;
  background-color:currentColor;
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('inc/assets/icon-arr.svg');
}

.is-touch .exp-cv-sec a:hover{text-decoration: none;}
.no-touch .exp-cv-sec a:hover{color: var(--color-highlight)}

@media (max-width:991px) {
.cv-sec-head{
    max-width: 50ch;
    margin:0 auto;
  }
}

.cv-list-inner{
  display:grid;
  gap:2.5rem;
}
@media (min-width:992px) {
.cv-list-inner{
  padding-left:10%;
  border-left:1px solid var(--color-sec);
}
}

@media (max-width:991px) {
.cv-list-inner{
  padding-top:2rem;
  margin:2rem auto 0;
  border-top:1px solid var(--color-sec);
  max-width: 50ch;
}
}

.cv-list-head{
  text-transform:uppercase;
  text-decoration:underline;
  font-weight:bold;
  font-size:.95rem;
}

.exp-cv-sec ul{
  gap:1em;
  padding:1em 0 0 1.2em;
  font-size:1rem;
}

.exp-cv-sec li{
  line-height: 1.35;
  max-width:45ch;
  text-wrap:balance;
}

.exp-cv-sec li::marker{
  color:var(--color-sec)
}


/* -- Clients ---*/

.exp-clients-sec{
  padding:5rem 0;
  background-color: rgb(255,255,255,.5);
}

.exp-clients-sec + .cta-section{
  background-color:var(--color-sec-light)
}

.exp-clients-sec + .cta-section + footer{
  margin-top:0 !important;
  background-color:#fff;
}

@media (max-width:991px) {
  .clients-sec,.clients{
    max-width: 60ch;
    margin:0 auto;
  }
}

.exp-clients-sec .clients p{
  font-weight:bold
}


/* Logo Wall */

.clients-wall{
  --max-column-width:150px;
  gap:1rem;
  margin:2.5rem 0 0;
}

.clients-wall:not(.grid-auto){
  display:grid;
  grid-template-columns: repeat(2,1fr);
}

@media (min-width:992px){
  .clients-wall:not(.grid-auto){max-width:500px}
}

.clients-wall div{
  outline:1px solid var(--color-gray);
  padding:.75rem;
  background-color:#fff;
}

.clients-wall img{
  aspect-ratio:1.5;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
}

.no-touch .clients-wall img:hover{
  filter: grayscale(0)
}


/* ---- Publikation / Buch ----- */

.page-template-buch .testimonials{margin-top:5rem;}

@media (max-width:991px){
  .page-template-buch .testimonials{margin-top:2.5rem;}
}

.page-template-buch footer{
  margin-top:0 !important;
  background-color:#fff;
}

/* for layout without Quotes + Banner */
.book-main-sec + footer{
  margin-top:10rem !important;
}

.page-template-buch .page-main-img{
  position: static
}

.buch-desc{
  font-style: italic;
  max-width:30ch;
  margin:1rem auto;
}

.buch-desc hr{
  border-top: 2px solid var(--color-highlight);
  max-width:5ch;
  margin:1.2rem 0;
}

.book-main-sec h1{
  margin-bottom: .65em
}

.book-main-sec h1 em{
  font-family: "baskerville-bt", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size:3.85rem;
  line-height:.85;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-main-content .book-sub{
  font-style: italic;
  font-size:1.3rem;
}

@media (max-width:991px){
  .book-main-sec h1 em{font-size:3.5rem}
  .page-main-content .book-sub{font-size:1.2rem}
}

@media (max-width:600px){
  .book-main-sec h1 em{font-size:2.7rem}
  .page-main-content .book-sub{font-size:1.15rem}
}

.page-main-content .book-sub::after{
  content:'';
  display: block;
  width:7ch;
  height:2px;
  background-color: var(--color-highlight);
  margin:1.35em 0;
}

.book-main-sec .btn-row{
  margin-top:3rem
}

.btn-book{
  position: relative;
  padding-left:2.75em;
}

.btn-book::before{
  content:'';
  position: absolute;
  width:1.25em;
  height:1.25em;
  left:.9em;
  top:.9em;
  background-color:currentColor;
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('inc/assets/book.svg');
}

@media (max-width:600px){
  .book-main-sec .btn-row .btn{
    width:100%;
    text-align:center;
    padding:1em 1.5em
  }
}

/* --- Sprechstunde --- */

.page-main-content hr{
  border-top:2px solid var(--color-highlight);
  margin:2rem 0 !important;
}

.page-main-content span.info{
  position: relative
}

.page-main-content p span{
  padding-left:2.25em;
  display: block;
  font-style: italic;
}

.page-main-content span.info::before{
  content:'';
  position: absolute;
  width:1.3em;
  height:1.3em;
  top:0;
  left:0;
  background:var(--color-highlight);
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('inc/assets/info.svg');
}

.cta-section:has( + .promo-banner){
  background:linear-gradient(transparent,#fff);
}


/* --- Promo Banner ---- */

@media (min-width:1361px){
.page-template-frontpage .promo-banner{
  background-color:#fff;
  padding-bottom:3rem;
}
.page-template-buch .promo-banner{
  background-color:#fff;
  padding-top:2rem;
}
.page-template-buch .book-main-sec + .promo-banner{
  background-color: transparent;
}
}

.page-template-service .promo-banner + footer{
  background-color:#fff;
  margin-top:0;
}
.cta-section + .promo-banner{
  background-color:#fff
}

@media (min-width:1200px){
  .promo-banner{
      --pl:6rem;
    }
}

@media(min-width:601px){
  .promo-banner{font-size:1.1rem}
}

.promo-banner .container{
  background-color:var(--color-third);
  background-image:var(--bg-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  background-blend-mode: multiply;
  --bg-img:url('inc/assets/banner/banner-bg-1s.jpg')
}

.promo-banner.promo-banner-alt .container{
  background-color:var(--color-sec-light);
  --bg-img:url('inc/assets/banner/banner-bg-1a.jpg')
}

@media (max-width:991px){
  .promo-banner .container{
    --bg-img:url('inc/assets/banner/banner-bg-m-1b.jpg');
    background-position: center top;
  }
  .promo-banner.promo-banner-alt .container{
    --bg-img:url('inc/assets/banner/banner-bg-m-1.jpg')
  }
}

@media (max-width:600px){
  .promo-banner.promo-banner-alt .container{
    --bg-img:url('inc/assets/banner/banner-bg-m-2.jpg');
    background-position: center 1rem;
    padding-top: 1rem;
  }
}

@media (max-width:420px){
  .promo-banner:not(.promo-banner-alt) .container{
    --bg-img:url('inc/assets/banner/banner-bg-m-2s.jpg')
  }
}


/* -- Text Col  -- */

.promo-banner-desc{
  max-width: 50ch;
  margin:1.75rem auto 3rem auto;
}

@media(min-width:992px){
  .promo-banner-desc{margin:4rem auto}
}


.promo-banner-desc .dz{
  font-weight: bold;
  color:var(--color-sec);
  margin-bottom: .75em;
}

.promo-banner-desc .head{
  font-size:2.7rem;
  margin-bottom: 0;
  max-width:18ch;
}

.promo-banner-alt .promo-banner-desc .head{
  font-family: "baskerville-bt", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size:3.4rem;
  line-height:.9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@media (max-width:600px){
  .promo-banner-desc .head{font-size:2.2rem}
  .promo-banner-alt .promo-banner-desc .head{font-size:2.7rem}
}

.promo-banner-desc .sub{
  font-style: italic;
  font-size:110%;
  margin-top:1.2em;
}

.promo-banner-desc .desc{
  font-weight:bold;
  max-width: 47ch;
  margin:2.8em 0 1.75em 0;
  position: relative;
}

.promo-banner-desc .desc::before{
  content:'';
  position: absolute;
  top:-1.4em;
  height:2px;
  width:7ch;
  background-color:var(--color-sec);
}


@media (max-width:600px){
  .promo-banner-desc .btn{
    margin:0 auto;
  }
}

/* -- Image Col -- */

.promo-banner-img{
  max-width:50ch;
  margin:0 auto;
}

@media(min-width:601px){
.promo-banner:not(.promo-banner-alt) .promo-banner-img{scale:.9}
}

@media(max-width:991px){
  .promo-banner-alt .promo-banner-img{margin-top:1.5rem}
}

@media(min-width:992px){
  .promo-banner-img{
    margin:.5rem auto 1rem auto;
    translate:-1rem 0;
  }
}

@media(min-width:1200px){
  .promo-banner-alt .promo-banner-img{
    scale:.95
  }
}

/* --------------------------- */
/* ---- FOOTER ---- */

footer{
  padding:1.5rem 0;
  font-size:.8rem;
  margin-top:7vh;
}

@media (max-width:600px){
  .is-touch footer{margin-top:0}
}

footer .row{gap:1.5rem 0}

.ft-menue ul{
  list-style: none;
  margin:0;
  padding:0;
  display: flex;
  flex-wrap: wrap;
  gap:.75em 1.5em;
}

footer .current-menu-item a,
.no-touch footer a{
  text-decoration-color: var(--color-highlight);
  text-decoration-thickness:.1em;
}
footer .current-menu-item a{text-decoration: underline}
footer a{text-underline-offset:.1em}

@media (max-width:767px){
  .ft-menue ul{
    font-weight: bold;
    gap:.75em 2em;
    justify-content: center;
  }
}

@media (max-width:600px){
  .ft-menue ul{
    gap:.75em 1em;
    /* justify-content: space-around; */
  }
  .ft-menue ul li{
    max-width:calc(33.333% - 1em);
    flex:1 1 calc(33.333% - 1em);
    text-align: center;
  }
}

/* ---- *** Mobile Menu *** ----- */

.mm-active{overflow:hidden}

/* Mobile Menu Trigger Element */

.mm-menu-trigger{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  z-index: 10001;
  top:-10px;
  right:0;
  padding:30px;
  text-align:center;
  color:var(--color-prime);
  transition:color .5s ease-in-out .25s;
  --t:.5s;
}

.no-touch .mm-menu-trigger:hover{
  color:var(--color-highlight);
  transition:color .25s ease-in-out;
}

.mm-menu-trigger.active{color:#fff}

@media (max-width:767px){
  .mm-menu-trigger{--t:.4s}
}

@media (max-width:600px){
  .mm-menu-trigger{
    top:-14px;
    scale:.8;
    transform-origin: right center;
  }
}

.mm-menu-trigger span,
.mm-menu-trigger span::before,
.mm-menu-trigger span::after{
  position: absolute;
  left:0;
  right:0;
  top:0;
  margin-left:10px;
  width:40px;
  height:4px;
  background-color:currentColor;
  border-radius:4px;
  transform-origin: center;
  transition: top var(--t) ease-in-out var(--top-delay), width var(--t) ease-in-out var(--width-delay), transform var(--t) ease-in-out var(--trans-delay), opacity 0s linear var(--t);
  --top-delay:var(--t);
  --width-delay:var(--t);
  --trans-delay:0s;
}

.mm-menu-trigger.active span,
.mm-menu-trigger.active span::before,
.mm-menu-trigger.active span::after{
  --top-delay:0s;
  --width-delay:0s;
  --trans-delay:var(--t);
}

.mm-menu-trigger span::before,
.mm-menu-trigger span::after{
  content:'';
  margin:auto 0;
}

.mm-menu-trigger span{top:14px;}
.mm-menu-trigger span::before{top:14px; width:30px;}
.mm-menu-trigger span::after{top:28px; width:20px;}

.mm-menu-trigger.active span{
  top:28px;
  transform: rotate(-45deg);
}

.mm-menu-trigger.active span::before{
  top:0;
  width:40px;
  opacity: 0;
}

.mm-menu-trigger.active span::after{
  top:0;
  width:40px;
  transform: rotate(90deg);
}

/* Mobile Menu Main Container */
.mm-menu{
  position: fixed;
  isolation: isolate;
  height:var(--_h,100vh);
  /* height:100dvh; */
  left:0;
  right:0;
  top:0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: none;
  z-index: 10000;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  visibility: hidden;
  transition: visibility calc(var(--t) * .75) ease-in-out;
  transition-delay: calc(var(--t) * .25);
  --t:1s;
}

/* Set a slower Animation Speed on Mobile */
@media (max-width:767px){.mm-menu{--t:.8s;}}

.mm-menu::after{
content:'';
position: fixed;
height:var(--_h,100vh);
top:0;
bottom:0;
left:0;
right:0;
z-index: -1;
visibility: hidden;
background-image:linear-gradient(135deg,var(--color-prime),var(--color-sec),var(--color-highlight));
transform:translate(0,-100%);
transition: visibility 0s ease-in-out var(--t),
            transform calc(var(--t) * .75) ease-in-out calc(var(--t) * .25),
            opacity calc(var(--t) * .5) ease-in-out calc(var(--t) * .5);
}

/* .is-touch .mm-menu::after{
  bottom:-10vh
} */

/* Modifier Attributes: Change Direction of Animation */
.mm-menu[mm-from-bottom]::after{transform:translate(0,100%);}
.mm-menu[mm-from-bottom] .mm-menu-inner{transform: translateY(-30%);}
.mm-menu[mm-from-left]::after{transform:translate(-100%,0);}
.mm-menu[mm-from-right]::after{transform:translate(100%,0);}
.mm-menu[mm-from-top-left]::after{opacity:0; transform:translate(-100%,-100%);}
.mm-menu[mm-from-top-right]::after{opacity:0; transform:translate(100%,-100%);}
.mm-menu[mm-from-bottom-left]::after{opacity:0; transform:translate(-100%,100%);}
.mm-menu[mm-from-bottom-left] .mm-menu-inner{transform: translateY(-30%);}
.mm-menu[mm-from-bottom-right]::after{opacity:0; transform:translate(100%,100%);}
.mm-menu[mm-from-bottom-right] .mm-menu-inner{transform: translateY(-30%);}

/* Animation In */

.mm-menu.active,
.mm-menu.active::after{
  visibility: visible;
  transition-delay: 0s;
}

.mm-menu.active::after{
  transform:translate(0,0);
  opacity:1;
}

/* Mobile Menu Inner */

.mm-menu-inner{
  opacity:0;
  transform: translateY(50%);
  transition: opacity calc(var(--t) * .5) ease-in-out, transform calc(var(--t) * .5) ease-in-out;
  transition-delay: 0s;
  color:#fff;
  font-size:2.25rem;
  line-height: 1.1;
  font-weight:bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:3rem;
  position: relative;
  display:flex;
  flex-wrap: wrap;
  gap:2.5rem 0;
}

/* Animation In: Inner Content */
.mm-menu.active .mm-menu-inner{
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--t) * .5);
}


@media (min-width:801px) {
.mm-menu-inner{
  display: grid;
  grid-template-areas: 'a' 'b';
  grid-template-columns: repeat(2, 1fr);
  gap:5rem 10rem;
  max-width: 1200px;
  font-size:2.25rem;
}

.mm-menu-inner::after{
  content:'';
  position: absolute;
  top:2rem;
  bottom:2rem;
  left:22rem;
  width:1px;
  background-color: currentColor;
}

.mm-block-2{grid-area:b}

.mm-block-2,.mm-block-4{align-content:end}

}

@media (min-width:801px) and (max-width:1024px){
  .mm-menu-inner{
    font-size:2rem;
    padding:3rem 1.5rem;
    gap:4rem 8rem;
  }
  .mm-menu-inner::after{
    left:18rem
  }
}

@media (max-width:800px){
  .mm-menu-inner{padding:5rem 1.5rem}
  .mm-block-2{order:1}
  .mm-block{width:100%}
  .mm-block + .mm-block{
    padding-top:2.5rem;
    border-top:1px solid var(--color-gray)
  }

}

.mm-block-head{
  font-size:1.1rem;
  text-decoration: underline;
  text-underline-offset:.1em;
  margin-bottom: 1.5em;
}


/* Styling of Nav-List */
.mm-menu-inner ul{
  margin:0;
  padding:0;
  gap:.4em 0;
}

.mm-menu-inner li{list-style: none}

.mm-menu-inner a{text-underline-offset:.1em}

.mm-menu-inner .current-menu-item a{text-decoration: underline}

.mm-menu-inner .current-menu-item a,
.no-touch .mm-menu-inner a:hover{
  text-decoration-color: var(--color-highlight)
}
.is-touch .mm-menu-inner a:hover,
.mm-linkedin a:hover,
.mm-insta a:hover{
  text-decoration: none
}

.mm-linkedin a,.mm-insta a{color:transparent}

.mm-linkedin a::before,
.mm-insta a::before{
  content:'';
  height:.9em;
  width:.9em;
  translate:0 12.5%;
  background-color:#fff;
  display: inline-block;
  -webkit-mask:var(--icon) no-repeat center/contain;
  mask:var(--icon) no-repeat center/contain;
  --icon:url('inc/assets/in.png');
}

.mm-insta a::before{
  --icon:url('inc/assets/insta.png');
}

@media (max-width:800px){
  .mm-linkedin a::before,
  .mm-insta a::before{
    height:1.1em;
    width:1.1em;
    translate:0 40%;
  }
}

.no-touch .mm-linkedin a:hover::before,
.no-touch .mm-insta a:hover::before{
  background-color: var(--color-highlight);
}

.mm-social-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
}

.mm-social-wrap *{
  max-width:max-content;
}