/*
Theme Name: Peter's Child Theme
Theme URI: https://olliewp.com
Description: This is Peter's custom child theme.
Author: Peter Spiess
Author URI: https://pstype.ch
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
-------------------------------------------------------------- */

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

html {
  scroll-behavior: smooth;
}
body {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

::selection {
  color: #fff;
  background: #f0870b;
}

/* Bilder ohne Rand class wp-block-image */
.wp-block-image.borderless {
  margin-bottom: 0em !important;
}

/* Zeilenlaenge Lauftext dreiviertel
---------------------------------------------------------------------------- */
.dreiviertel-txt {
  width: 78%;
  padding-top: 20px;
}

/* Primary Navigation text-decoration underline
---------------------------------------------------------------------------- */
.wp-block-navigation-item.current-menu-item > a {
  /* current-menu zeigt aktives Menu an */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #f0870b !important;
  text-decoration-thickness: 0.21em !important;
  text-underline-offset: 1.9em;
  transition: all 300ms ease-in-out;
  z-index: 999;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #f0870b;
  text-decoration-thickness: 0.21em;
  text-underline-offset: 1.9em;
  z-index: 999;
}

/* Primary Navigation Site Logo
---------------------------------------------------------------------------- */
.wp-block-site-logo img {
  height: auto;
  max-width: 70% !important;
}

/*	Primary Navigation Sticky Header
---------------------------------------------------------------------------- */
.site-header {
  top: 0;
  width: calc(100% - 0px);
  /*box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);*/
}
.site-header.is-sticky {
  position: fixed;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  animation: slideDown 1s ease-out;
}

/*	Primary Navigation Sticky Header Logo
------------------------------------------------ */
.site-header.is-sticky img {
  max-width: 70% !important;
}
/*
.site-header.is-sticky button {
	font-size: 14px;
	padding: 7px 10px;
}
*/
@keyframes slideDown {
  from {
    transform: translateY(-100%); /* Minus ist wichtig! */
  }
  to {
    transform: translateY(0);
  }
}

/* Text Link underline
--------------------------------------------- */
.link-small a {
  text-decoration: none !important;
  position: relative;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}
.link-small a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px; /*Linien Staerke */
  bottom: -4px; /*Linien Abstand */
  left: 0;
  color: #4d4d4d;
  background-color: #f0870b; /*Linien Farbe*/
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.4s ease-in-out;
}
.link-small a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

/* Footer Link underline invert
--------------------------------------------- */
.link-small-invert a {
  position: relative;
  color: #fff;
  text-decoration: none !important;
}
.link-small-invert a:hover {
  color: #fff;
}
.link-small-invert a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.link-small-invert a:hover::before {
  transform: scaleX(1);
}

/* Colors, Background gradients
---------------------------------------------------------------------------- */
.olive-green {
  background-image: linear-gradient(60deg, #617c00, #9dbc32);
}
.orange-yellow {
  background-image: linear-gradient(60deg, #b05e00, #f0870b);
}
.black-gray {
  background-image: linear-gradient(60deg, #000000, #4d4d4d);
}

/* Tables
---------------------------------------------------------------------------- */
.ke-table td {
  font-size: 1.2rem !important;
  line-height: 1.5rem !important;
}
.ke-table td,
th {
  vertical-align: top;
}
#column-one {
  width: 20%;
}
#column-two {
  width: 78%;
}

/* Google Maps einbinden
---------------------------------------------------------------------------- */
.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* EmailAdress Verschluesslung / Schriftgroesse
---------------------------------------------------------------------------- */
.encode-email {
  font-size: var(--wp--preset--font-size--base) !important;
}

/* Styling wp forms
---------------------------------------------------------------------------- */
.wpforms-container .wpforms-field-label {
  display: block;
  font-weight: 400;
  font-style: normal;
  word-break: break-word;
  word-wrap: break-word;
}
.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"] {
  background-color: #fff;
}
.wpforms-container-full .wpforms-field-label {
  color: #4d4d4d !important;
  font-family: "Barlow-Regular", sans-serif !important;
}
.wpforms-container-full .wpforms-field-sublabel {
  color: #4d4d4d !important;
  font-family: "Barlow-Regular", sans-serif !important;
}
div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success]
  > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: #fff !important;
  border: 1px solid #9dbc32;
  box-sizing: border-box;
}

/***************** Animation for the 6.9 Accordion *****************/

/* 1. The Panel: Hidden by default */
.wp-block-accordion-panel {
  display: grid !important;
  grid-template-rows: 0fr !important; /* 0 height */
  transition:
    grid-template-rows 0.4s ease-out,
    opacity 0.4s ease-out !important; /* The Smooth Animation */
  opacity: 0 !important;
}

/* 2. The Content Wrapper */
/* We target the direct child of the panel (the <p> tag in your code) */
.wp-block-accordion-panel > * {
  overflow: hidden !important;
}

/* 3. The Active State */
/* When JS adds this class, the grid expands to 1 fraction (full height) */
.wp-block-accordion-panel.is-open {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
}

/****************** Change the Icon on the 6.9 Accordion *****************/

.wp-block-accordion-heading__toggle-icon {
  /* 1. Layout & Size */
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;

  /* 2. Hide the text */
  font-size: 0 !important;

  /* 3. Color Logic (Inherit from parent text) */
  background-color: currentColor;

  /* 4. The Mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.5 13.5-3.7 3.7V4h-1.5v13.2l-3.8-3.7-1 1 5.5 5.6 5.5-5.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.5 13.5-3.7 3.7V4h-1.5v13.2l-3.8-3.7-1 1 5.5 5.6 5.5-5.6z'/%3E%3C/svg%3E");

  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  /* 5. Animation */
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* Rotate 180deg when open */
button[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
  transform: rotate(180deg) !important;
}

/* Adjust the default transition time */
.wp-block-accordion-item
  > .wp-block-accordion-heading
  .wp-block-accordion-heading__toggle-icon {
  transition: transform 0.3s ease-in-out;
}

/* Mobile Einstellungen
---------------------------------------------------------------------------- */

/* min-width */

@media (min-width: 781px) {
  .is-menu-open.has-modal-open {
    max-width: 1280px;
    height: auto;
    background-image: url("https://praxis-kinderergo.ch/wp-content/themes/ollie-child/assets/images/kemobil-bg-1600.webp");
    background-size: calc(100%) !important;
    background-repeat: no-repeat !important;
  }
}

/* max-width */

@media (max-width: 780px) {
  .dreiviertel-txt {
    /* Textbreite Mobile anpassen */
    width: 100%;
    padding-top: 20px;
  }

  /*	Schriftgroesse Mobile */
  .wp-block-navigation
    .wp-block-navigation-item__content.wp-block-navigation-item__content {
    margin-top: 28px;
    font-size: 1.6rem;
  }

  .wp-block-navigation-item.current-menu-item > a {
    text-decoration: none; /* Menu underline ausblenden */
  }

  .wp-block-navigation .wp-block-navigation-item a:hover,
  .wp-block-navigation .wp-block-navigation-item a:focus {
    text-decoration: none; /* Menu underline hover ausblenden */
  }

  .site-header.is-sticky {
    display: none; /* Ausblenden des StickyHeaders */
  }

  .nomobile {
    display: none; /* Ausblenden der Galerie */
  }

  .is-menu-open.has-modal-open {
    background-image: url("https://praxis-kinderergo.ch/wp-content/themes/ollie-child/assets/images/kemobil-bg-900.webp");
    background-size: calc(100%) !important;
    background-repeat: no-repeat !important;
  }

  /* Medien/Text Randabstaende */
  .wp-block-media-text > .wp-block-media-text__content {
    padding: 0 0%;
  }
  .mt-randabstand {
    padding: 0 8%;
  }
}