/*
Theme Name: Fresh Kicks
Theme URI: https://localhost
Description: Child-Theme von TwentyTwentyFive
Author: akibwoii
Author URI: https://michael-ilg.com
Template: twentytwentyfive
Version: 1.0.0
Text Domain: freshkicks
*/


/**
  * global styles
 */

 :root {
  --transition-fastest: .2s;
  --transition-fast: .4s;
  --transition-slow: 2s;
 }

 html {
  -webkit-hyphens: auto; /* Safari, alte WebKit */
  -ms-hyphens: auto;     /* alte IE / Edge */
  hyphens: auto;         /* moderne Browser */
}

b,strong {
    font-weight: 600;
}

svg {
  max-width: 100%;
  max-height: 100%;
}

.height-100 {
  height: 100%;
}

.space-between {
  justify-content: space-between;
}

.clickable-group {
  cursor: pointer;
}

.has-text-color {
  color: var(--wp--preset--color--primary) !important;
}

.has-text-color.has-secondary-color {
    color: var(--wp--preset--color--secondary) !important;
}

.has-text-color.has-background-color {
    color: var(--wp--preset--color--background) !important;
}

.scale-on-hover {
  transform: scale(1);
  transition: transform var(--transition-fastest) ease;
}

.scale-on-hover:hover {
  transform: scale(1.05);
}

:where(.wp-site-blocks *:focus),
:root :where(.wp-element-button:focus, .wp-block-button__link:focus) {
  outline-color: var(--wp--preset--color--secondary-20);
}

::selection {
  background-color: var(--wp--preset--color--primary); /* highlight background */
  color: var(--wp--preset--color--secondary-20);        /* highlight text */
}

/* Optional: For Firefox */
::-moz-selection {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--secondary-20);
}

/**
  * navigation
 */
.wp-block-navigation__responsive-close {
  height: 100%;
}

.wp-block-navigation__responsive-dialog {
  height: 100%;
  display: flex;
}

.wp-block-navigation__responsive-container-content {
    min-height: 50%;
    max-height: 100%;
    margin: auto;
}

.wp-block-navigation__container {
  justify-content: space-between !important;
}

.wp-block-navigation__responsive-close {
  max-width: 100% !important;
}

.wp-block-navigation__responsive-container-close {
  margin-top: 1rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item {
  color: var(--wp--preset--color--primary) !important;
  font-weight: bold;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.current-menu-item):hover {
  color: var(--wp--preset--color--secondary) !important;
  font-weight: bold;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover a:hover {
  text-decoration: none;
}

.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
  background: url(./assets/img/nav-open.svg) center center no-repeat;
  width: 48px;
  height: 48px;
  opacity: .85;
  transform: scale(.9);
  transition: transform var(--transition-fast) ease-in-out, opacity var(--transition-fast) ease-in-out;
}

.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close:hover {
  opacity: 1;
  transform: scale(1);
}

.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open > svg,
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close > svg {
  display: none;
}

.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
  background-image: url(./assets/img/nav-close.svg);
}


/**
  * start page
 */

 /***shrink animation***/

.scroll-shrink-cover {
  width: 100vw;
  min-height: 100vh;
  border-radius: 0;
  overflow: hidden;
  transition: border-radius 0.1s ease-out;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.scroll-shrink-cover.shrunk {
  width: 450px;
  min-height: 450px;
  border-radius: 50%;
  margin: 50px auto;
}

.scroll-shrink-cover figure {
  max-width: 80%;
}

.fast-facts .wp-block-group {
  transition: transform var(--transition-fast) ease;
}

.fast-facts .wp-block-group a {
  text-decoration: none !important;
}

.startpage-product-preview .has-text-color {
  color: var(--wp--preset--color--primary) !important;
}

.startpage-product-preview li:nth-child(odd) > .wp-block-group > .wp-block-group {
  background-color: var(--wp--preset--color--secondary-20);
  text-align: left;
}

.startpage-product-preview li:nth-child(even) {
  justify-self: flex-end;
    margin-right: 0 !important;
    margin-left: auto !important;
}

.startpage-product-preview li:nth-child(even) > .wp-block-group > .wp-block-group {
  background-color: var(--wp--preset--color--primary-20);
  text-align: left;
}

.startpage-project-preview > li.wp-block-post {
  display: flex;
}

.startpage-project-preview > li.wp-block-post .wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.startpage-project-preview > li.wp-block-post .wp-block-group .wp-block-post-excerpt {
  margin-top: auto;
}

/**
  * general styling classes
  */

.border-color-transient {
  border: 4px solid var(--wp--preset--color--secondary);
}

/* .border-color-transient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  border: 4px solid var(--wp--preset--color--secondary);
  background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
} */

/* .border-color-transient.animated::before {
  animation: border-flow 4s linear infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

ul.wp-block-post-template > li:nth-child(2n+1) .border-color-transient.animated::before {
  animation-delay: 0s;
}
ul.wp-block-post-template > li:nth-child(2n+2) .border-color-transient.animated::before  {
  animation-delay: 2s;
}

@keyframes border-flow {
  0%   { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 200% 0; }
} */

.cta-book-meeting,
.cta-book-meeting svg path {
  transition: var(--transition-fast) ease;
}

.cta-book-meeting:hover {
  transform: scale(1.1) rotate(5deg);
}

.cta-book-meeting a:focus {
  outline: none;
}

.cta-book-meeting svg {
  overflow: visible;
}

.cta-book-meeting svg path {
  transform-origin: center center;
}

.cta-book-meeting:hover svg path:nth-child(1) {
  filter: drop-shadow(1px 1px 8px rgba(0,0,0,0.3));
}



.cta-book-meeting a:focus svg path:nth-child(1) {
  stroke-width: 2px;
  stroke: var(--wp--preset--color--white);
  filter: drop-shadow(0 0 1px var(--wp--preset--color--secondary))
    drop-shadow(0 0 1px var(--wp--preset--color--secondary))
    drop-shadow(0 0 1px var(--wp--preset--color--secondary));
}

.cta-book-meeting:hover svg path:nth-child(2),
.cta-book-meeting:hover svg path:nth-child(3)  {
  transform: scale(1.1);
}

.icon-hover-animation-default {
  transform: rotate(0deg);
  transition: transform var(--transition-fast) ease-in-out;
}

.icon-hover-animation-default:hover {
  transform: rotate(720deg);
}

@keyframes scale-up {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

body:not(.editor-styles-wrapper) .animate-scale-up,
div:not(.editor-styles-wrapper) .animate-scale-up {
  transform: scale(0);
  opacity: 0;
}

body:not(.editor-styles-wrapper) .animate-scale-up.visible,
div:not(.editor-styles-wrapper) .animate-scale-up.visible {
  animation: scale-up 0.5s forwards ease-out;
}

.editor-styles-wrapper .animate-scale-up {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* Define the shake keyframes */
@keyframes shake {
  0%   { transform: translateX(0) rotate(0); }
  1%  { transform: translateX(-5px) rotate(-2deg); }
  2%  { transform: translateX(5px) rotate(3deg); }
  3%  { transform: translateX(-5px) rotate(-3deg); }
  4%  { transform: translateX(5px) rotate(2deg); }
  5% { transform: translateX(0); }
}

/* Apply to a class with interval */
.shake-element {
  display: inline-block;
  animation: shake 8s ease-in-out infinite;
  transform-origin: center center;
  animation-delay: 5s;
  animation-fill-mode: both;
}

@media (max-width: 767px) {
  .is-hidden-mobile {
    display: none !important;
  }

  .startpage-product-preview > li.wp-block-post {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .is-hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .is-hidden-desktop {
    display: none !important;
  }
}

/**
  * archive
  */

.archive.category article {
  display: flex;
  flex-direction: column;
}

.archive.category article div:last-child {
  margin-top: auto;
}

.archive.category article .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--text);
}

.archive.category article .wp-block-post-excerpt__more-link {
  text-decoration: none;
  color: var(--wp--preset--color--secondary);
}

/**
  * accordion
  */
.wp-block-details summary {
    list-style: none;
    display: block;
    position: relative;
    padding-left: 0.8em;
    text-indent: -0.5em;
}

.wp-block-details summary::before {
    content: "▸";
    text-align: center;
    transform: scaleX(1.5);
    display: inline-block;
    width: .5em;
}
.wp-block-details[open] summary::before {
    transform: rotate(90deg) scaleX(1.5);
    transform-origin: left center;
}

.wp-block-details p {
  padding-left: 0.8em;
}
  

/**
  * forms styling
  */

.frm_forms fieldset {
  border: none;
  padding: 0;
}

.frm_forms button {
  border: none;
  background: transparent;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--background);
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 2px;
}


.frm_forms .frm_form_field .frm_primary_label {
  display: none;
}
  
.frm_forms .frm_form_field {
  position: relative;
  border-radius: 16px;
  padding: 0;
  margin-bottom: var(--wp--preset--spacing--30);
  height: 50px;
  margin-top: 1em;
}

.frm_forms .frm_form_field input,
.frm_forms .frm_form_field textarea,
.frm_forms .frm_form_field select,
.frm_full > input:not([type='checkbox']):not([type='radio']):not([type='button']) {
  border: 4px solid var(--wp--preset--color--secondary);
  position: relative;
  border-radius: 16px;
  padding: 0;
  height: 50px;
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px);
  background: var(--wp--preset--color--background);
  padding: 1em;
  box-sizing: border-box;
  color: var(--wp--preset--color--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 100;
  letter-spacing: 2px;
  transition: border var(--transition-fast) ease;
}

.frm_forms .frm_form_field input:hover,
.frm_forms .frm_form_field textarea:hover,
.frm_forms .frm_form_field select:hover,
.frm_full > input:hover:not([type='checkbox']):not([type='radio']):not([type='button']) {
  border: 4px solid var(--wp--preset--color--primary);
}

.frm_forms .frm_form_field:has(textarea) {
  height: 300px;
}

/* .frm_forms .frm_form_field:not(.wp-block-button__link):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--wp--preset--color--primary),
    var(--wp--preset--color--secondary)
  );
  z-index: 0;
  pointer-events: none;
  margin: -4px 4px 4px -4px;
  transition: border var(--transition-fast) ease;
  border: 4px transparent;
}

.frm_forms .frm_form_field:not(.wp-block-button__link):hover:before {
  border: 4px solid var(--wp--preset--color--secondary);
}

.frm_forms .frm_form_field input,
.frm_forms .frm_form_field textarea,
.frm_forms .frm_form_field select,
.frm_full > input:not([type='checkbox']):not([type='radio']):not([type='button']) {
  position: relative;
  z-index: 1;
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px);
  border: none;
  border-radius: 12px;
  background: var(--wp--preset--color--background);
  padding: 0.5em 1em;
  box-sizing: border-box;
  color: var(--wp--preset--color--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 100;
  letter-spacing: 2px;
} */

.frm_forms .frm_form_field textarea {
  resize: none;
}

.frm_forms .frm_form_field:hover::before,
.frm_forms .frm_form_field:focus-within::before {
  filter: brightness(1.1);
}

.frm_forms .frm_form_field input::placeholder,
.frm_forms .frm_form_field textarea::placeholder,
.frm_forms .frm_form_field select::placeholder {
  color: var(--wp--preset--color--text-50);
  opacity: 1;
}

.frm_forms .frm_form_field.wp-block-button__link {
  margin-right: 4px;
  margin-top: 2em;
}

.frm_forms .frm_form_field.wp-block-button__link > div,
.frm_forms .frm_form_field.wp-block-button__link > div > button {
  height: 100%;
  width: 100%;
}

.frm_forms .frm_error_style,
.frm_forms .frm_error {
  color: red;
}

.frm_forms .frm_error {
  font-size: 16px;
  margin: .5em;
  font-weight: 400;
}

/**
  * consent banner
  */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  background-color: var(--wp--preset--color--primary) !important;
  border: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--background) !important;
}