/*
Theme Name: akssedu
Theme URI: https://www.kinetiqa.de
Description: akssedu
Author: Kinetiqa
Author URI: https://wwww.kinetiqa.de
Template: Total
Version: 1.2
*/

html.wpex-classic-style, html {
  --wpex-body-font-size: 14px;
  --wpex-hamburger-icon-width: 38px;
  --wpex-hamburger-icon-bar-height: 4px;
  --wpex-hamburger-icon-gutter: 7px;
}

strong {
  font-weight: 500 !important;
}


/**
 * HERO
 */
.hero-container {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  &.hero-container-big {
    margin-bottom:50px;
    min-height: 100lvh;
    & > .vc_column_container > .vc_column-inner {
      margin-bottom: 0;
    }
    @media (max-width: 781px) {
      align-content: flex-end;
      padding: 0;
      background-position: -270px;
      & > .vc_column_container > .vc_column-inner {
        padding: 0;
      }
    }
    @media (min-width: 782px) {
      min-height: calc(100lvh - 196px);
    }
  }
}

.request-callback {
  .theme-button {
    background-color: #fff;
    color: #3c3c3c;
    padding: 4px 25px 6px 5px;
    box-shadow: 5px 5px 15px #00000029;
    border: none;
    transition-property: color, background-color;
    transition-duration: .3s;
    .vcex-heading-icon-left {
      background-color: #3c3c3c;
      border-radius: 9999px;
      width: 1.666em;
      padding: 0;
      color: #fff;
      transition-property: color, background-color;
      transition-duration: .3s;
    }
  }
  .theme-button:hover {
    color: #fff;
    background-color: #3c3c3c;
    .vcex-heading-icon-left {
      background-color: #fff;
      color: #3c3c3c;
    }
  }
  .theme-button:focus-visible {
    outline: none;
    box-shadow: 5px 5px 15px #00000029,
                0 0 10px #3c3c3ccc;
  }
}

.hero-social-row .vcex-flex-container .vcex-module:last-of-type a {
  border-left: 1px solid black;
  padding: 0 0 0 20px;
  font-size: 26px;
  color: #3c3c3c;
}

.breadcrumbs {
  margin-top: 3.5rem;
}

/* common styles for all hero variants */
.hero {
  display: grid;
  @media (max-width: 781px) {
    margin-top: 250px;
    margin-inline: calc(-15px - var(--wpex-vc-full-width-padding-x));
    padding-inline: 15px;
    padding-bottom: 15px;
    background: #fff8;
    backdrop-filter: blur(2px);
    max-width: 100svw;
  }
  .request-callback {
    grid-area: 2 / 1 / 3 / 2;
    @media (max-width: 781px) {
      grid-area: 1 / 1 / 2 / 2;
      margin: -1.2em auto 0;
    }
  }
  .hero-social-row {
    grid-area: 1 / 2 / 2 / 3;
    @media (max-width: 781px) {
      grid-area: 3 / 1 / 4 / 2;
      justify-self: center;
    }
    @media (min-width: 782px) {
      margin-bottom: 41px;
      justify-self: end;
    }
  }
  .hero-shape-wrapper {
    grid-area: 2 / 2 / 3 / 3;
    @media (max-width: 781px) {
      grid-area: 2 / 1 / 3 / 2;
      text-align: center;
      max-width: calc(100svw - 30px);
    }
    @media (min-width: 782px) {
      text-align: right;
      align-self: start;
    }
  }
  .hero-title-wrapper {
    text-wrap: balance;
    hyphens: auto;
    @media (max-width: 781px) {
      line-height: 1.3;
      .wpex-text-xl {
        /* hide subtitle on mobile devices for more space */
        display: none;
      }
    }
  }
}

.hero-big {
  min-height: calc(100lvh - 350px);
  margin-top: 350px;
  @media (min-width: 782px) {
    margin-top: 150px;
    min-height: calc(100lvh - 346px);
    max-height: 560px;
    grid-template-rows: 136px 1fr 1fr;
  }
  .request-callback {
    @media (min-width: 782px) {
      grid-area: 3 / 1 / 4 / 3;
    }
  }
  .hero-shape-wrapper {
    display: grid;
    filter: drop-shadow(5px 5px 30px #00000029);
    @media (min-width: 782px) {
      place-content:end;
    }
  }
  .hero-title-wrapper {
    display: grid;
    padding-top: 1.25rem;
    padding-right: 1.875rem;
    text-wrap: balance;
    hyphens: auto;
    @media (min-width: 782px) {
      justify-items: end;
      place-content: end;
    }
    @media (max-width: 781px) {
      padding: 1.875rem 1.25rem 1.875rem 1.25rem;
      .wpex-text-5xl {
        line-height: 1.2;
        margin-bottom: 12px;
      }
      .wpex-text-xl {
        /* hide subtitle on mobile devices for more space */
        display: none;
      }
    }
  }
  .hero-title-shaper {
    @media (min-width: 782px) {
      width: 760px;
      height: 198px;
      background-color: white;
      clip-path: polygon(25% 0, 100% 0, 100% 70%, 90% 100%, 0 70%);
    }
    @media (min-width: 860px) {
      /* this is the original width. We restore it after having to reduce it
       * for smaller screens above. */
      width: 820px;
    }
  }
}

.hero-small {
  @media (min-width: 782px) {
    min-height: 425px;
  }
  .request-callback {
    @media (min-width: 782px) {
      margin-top: calc(var(--wpex-text-xl) * var(--wpex-heading-line-height));
    }
  }
  .hero-social-row {
    @media (min-width: 782px) {
      align-self: end;
    }
  }
  .hero-title-wrapper {
    @media (min-width: 782px) and (max-width: 1280px) {
      max-width: 75%;
      margin-inline-start: auto;
      .wpex-text-5xl {
        hyphens: auto;
        text-wrap: balance;
        font-size: var(--wpex-text-4xl);
      }
      .wpex-text-xl {
        hyphens: auto;
        text-wrap: balance;
        font-size: var(--wpex-text-base);
      }
    }
    @media (max-width: 781px) {
      .wpex-text-5xl {
        margin-block: 15px;
      }
    }
  }
}

.hero-minimal {
  padding-top: 60px;
}
#site-header-sticky-wrapper:has(+.overlay-header-template .hero-minimal) #site-header {
  background: #BDFFB8;
}

/**
 * SEARCH
 */
#wpex-searchform-overlay input[type="search"] {
  font-size: 18px;
}
/* remove search icon from navigation. We show another icon in the hero. */
.main-navigation-ul .search-toggle-li.menu-item {
  display:none;
}


/**
 * TIPP
 */
.tipp {
  display: flex;
  gap: 2em;
  align-items: center;
  padding: 1em;
  background: white;
  border-radius: 5px;
  &::before {
    content: "";
    background: url(tipp.png) no-repeat left center;
    background-size: 75px 65px;
    min-width: 75px;
    height: 65px;
    margin: -.5em;
    flex-grow: 1;
  }
}


/**
 * EXPANDING INFOBOXES
 */
.infobox-expanding {
  transition: all .5s;
  overflow: hidden;
  .collapsed & {
    height: 0 !important;
    padding-block: 0;
  }
  .request-callback .theme-button {
    background: #88FF7E;
    box-shadow: none;
    margin-top: 5px;
  }
  & > div + div {
    @media (max-width: 790px) {
      gap: 10px;
    }
    & > :has(.theme-button) {
      min-width: 18em;
    }
  }
  & > div:has(.call-back-link) {
    & > .vc_col-sm-6:first-child {
      @media (max-width: 1500px) {
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }
}
.infobox-root {
  transition: all .5s;
  &:not(.collapsed) {
    background: #eaeaea linear-gradient(180deg, #88FF7E 0, #EAEAEA 250px);
  }
  & > .vc_col-sm-9 > div > div > .vc_row:first-child .wpb_text_column.has-custom-color {
    padding-inline: .75em;
    @media (max-width: 767px) {
      margin-inline: -15px;
    }
  }
}


/**
 * Bildungsangebote: teaser cards
 */
.card-bildungsangebot {
  padding: 0 1em  1em;
  border-radius: 5px;
  background: url(card-bildungsangebot-bg.svg) center top no-repeat,
              linear-gradient(to bottom, #fff, #eaeaea);
  .vcex-image-inner {
    border-radius: 9999px;
    background: linear-gradient(to bottom, #fff, #eaeaea);
    box-shadow: 0px 3px 6px #00000029;
  }
  [data-virtual] {
    color: white;
  }
  .vcex-post-terms.textcenter span.theme-button {
    background: none;
    border: none;
    color: #fff;
  }
  .vcex-page-title {
    text-wrap: balance;
    margin-block: 10px 15px;
  }
  .vcex-post-terms + style + .vcex-page-title {
    /* cater for potentially missing icon */
    margin-top: 70px;
  }
  .vcex-post-excerpt {
    flex-grow: 1;
    margin-block: 0 25px;
  }
  .theme-button-wrap,
  .wpex-clr:has(> .theme-button-wrap > .card-bildungsangebot-more-button) {
    margin-block-start: auto;
  }
  &:has([data-virtual="true"]) {
    background-color: #BDFFB8;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http%3A//www.w3.org/2000/svg%22%20viewBox=%220%200%20340%2080%22%3E%0A%3Cpath%20d=%22M0%2C0H340V40L170%2C70L0%2C40Z%22%20fill=%22%233c3c3c%22%20/%3E%0A%3Cpath%20d=%22M0%2C30L170%2C60L340%2C30V50L170%2C80L0%2C50Z%22%20fill=%22%23CDEBCA%22%20/%3E%0A%3C/svg%3E');
    [data-virtual] {
      color: #BDFFB8;
    }
  }
}

/**
 * Bildungszentren: teaser cards
 */
.bz-teasercard {
  .bz-category {
    border-radius: 5px 5px 0 0;
    text-align: center;
    background-color: #838383;
    width: 100%;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .bz-date {
    margin-top: auto;
    margin-inline: 1rem;
    .meta-icon {
      display: none;
    }
  }
  &:has([data-virtual="true"]) {
    background: #BDFFB8 !important;
    .bz-category {
      color: #BDFFB8;
    }
  }
}

a:has(.bz-teasercard):is(:hover, :focus) .vcex-button {
  background: white;
  color: #3c3c3c !important;
}


/**
 * unavailability message for angebot teasers
 */
.unavailable-message,
.type-bildungsangebote.unavailable .card-bildungsangebot,
.bz-teasercard:has(.bz-date .unavailable) .bz-category {
  position:relative;
  &:before {
    content: "";
    background: #FF80F0;
    box-shadow: 0 2px 3px #0003;
    width: 1em;
    height: 1em;
    border-radius: 10000px;
  }
}
.type-bildungsangebote.unavailable .card-bildungsangebot,
.bz-teasercard:has(.bz-date .unavailable) .bz-category {
  &:before {
    position: absolute;
    top: 14px;
    right: 14px;
    display: block;
  }
}
.type-bildungsangebote.unavailable.unavailable.unavailable .card-bildungsangebot {
  &:before {
    top: 10px;
  }
}


/**
 * side-by-side info on regional pages
 */
.sidebyside-samewidth.sidebyside-samewidth.vc_row,
.bildungsangebot-regional.bildungsangebot-regional.vc_row {
  gap: 30px;

  & > .vc_column_container {
    @media (min-width: 768px) {
      width: calc(50% - 15px);
    }
    @media (max-width: 767px) {
      width: 100%;
      flex-basis: 100%;
    }
  }
}

/**
 * footer
 */
.footer-builder {
  .footer-standort em:has(a) {
    font-style: normal;
    display: block;
    margin-bottom: 0.95625rem;
  }
  .footer-standort a {
    color: #fff;
    text-decoration: none;
    &:is(:hover, :focus) {
      color: #88ff7e;
    }
  }
  .footer-standort em a {
    color: #88ff7e;
    &:is(:hover, :focus) {
      color: #fff;
    }
  }
  .footer-standort .wpb_wrapper.wpb_wrapper a[href^="tel:"] {
    color: inherit;
  }
  .vcex-flex-container .footer-standort:last-of-type {
    flex-grow: 1;
    .wpb_wrapper {
      display: grid;
      align-items: end;
      height: 100%;
      @media (max-width: 550px) {
        justify-content: center;
        & * {
          text-align: center !important;
        }
        & img {
          float: none;
          margin: 0 auto;
        }
      }
    }
  }
  @media (max-width: 767px) {
    .footer-builder-content .vc_row:has(.footer-standort) ~ div {
      display: none;
    }
  }
}


/**
 * call back links with icon apart from the one in the hero
 */
.call-back-link.call-back-link.call-back-link {
  .wpex-icon {
    background: #3c3c3c;
    height: 2.25em;
    aspect-ratio: 1;
    margin-left: -18px;
    border-radius: 99px;
    margin-block: -4px;
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    color: #88ff7e;
  }
  path {
    fill: currentColor;
  }
  &:is(:focus, :hover) {
    border-color: #3c3c3c;
    .wpex-icon {
      color: #3c3c3c;
      background: white;
    }
  }
  .infobox-expanding & .vcex-button-inner {
    justify-content: start;
  }
  .infobox-expanding & .wpex-icon {
    margin-left: -14px;
  }
}
.infobox-expanding .wpb_wrapper:has(> .theme-button-wrap > .call-back-link) {
  margin-block: auto;
}


#jobconnect-row {
  .ask-row {
    display: flex;
    gap: 40px;
    margin: 30px 0 60px 0;
    @media (max-width: 780px) {
      flex-direction: column;
    }
  }
  .jc-result-row {
    @media (max-width: 780px) {
      flex-direction: column;
      gap: 10px !important;
    }
  }
  .offeringterm {
    @media (max-width: 780px) {
      flex-basis: auto !important;
      width: auto !important;
    }
  }
}


/* revert blog settings for stellenangebote posts */
.post-in-category-stellenangebote {
  .custom-singular-template :is(.vcex-page-title, .vcex-post-meta, .vcex-image),
  #sidebar {
    display: none;
  }
  #primary#primary {
    float: none;
    width: auto;
  }
}

.meta-author a {
  cursor: text;
  color: inherit;
  pointer-events: none;
  &:is(:hover, :focus, :focus-visible) {
    text-decoration: none;
    outline: 0;
    color: inherit;
  }
}

/* mobile menu */
@media (min-width: 768px) {
  :root {
    --wpex-sidr-width: 440px;
  }
}
.sidr-class-dropdown-menu {
  a {
    --wpex-link-color: #88FF7E;
    --wpex-hover-link-color: white;
  }
  a:is(.sidr-class-sub-menu *) {
    --wpex-link-color: white;
    --wpex-hover-link-color: #88FF7E;
  }
  button:not(:is(.sidr-class-sub-menu *)) svg {
    fill: #88FF7E;
  }
}
.sidr-class-mobile-menu-searchform {
  color: white;
  & input::placeholder {
    opacity: 1;
  }
}

#mobile-menu a {
  &:before {
    color: #3c3c3c;
    content: " ";
    padding-inline-end: 1em;
    font-weight: 200;
    font-size: .9em;
    @media (max-width: 420px) {
      padding-inline-end: .2em;
      font-size: .7em;
    }
    @media (min-width: 421px) {
      content: "Menü";
    }
  }
}

#main .wpex-card-blog_akss .wpex-child-inherit-color a:is(:focus, :hover) {
  color: var(--wpex-hover-heading-link-color, var(--wpex-accent));
}