/*!
Theme Name: Helmys
Theme URI: http://underscores.me/
Author: iRiSGRaFiX
Author URI: https://irisgrafix.at
Description: Theme for Helmy's Genusswerk
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: helmys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Helmys is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* Animation */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(80px);
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
    -webkit-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    -o-transform: translateX(-80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
    -webkit-transform: translateX(80px);
    -moz-transform: translateX(80px);
    -ms-transform: translateX(80px);
    -o-transform: translateX(80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.screen-reader-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



:focus {
  outline: none;
  outline-offset: 2px;
}

body:focus {
  outline: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-dark);
  background-color: var(--bg-light);


}

/*footer-Ausrichtung immer unten*/
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#header_banner {
  min-height: 180px;
  max-height: 400px;
  object-fit: cover;
  width: 100%;
  min-width: 100%;
}

main {
  flex: 1;
}

main.site-main {
  animation: fadeIn 2s ease forwards;
}

/*ende footer-Ausrichtung immer unten*/

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Site Header */
.site-header {
  background: var(--bg-dark);
  text-align: center;
  line-height: normal;
  padding-top: 10px;
}

.site-header .custom-logo {
  width: 300px;
  max-width: 85%;
}

/* Hamburger Menu Toggle - Animiert zu X */
.site-header .menu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  height: 30px;
  margin: 8px auto 6px auto;
  position: relative;
  z-index: 1001;
  transition: transform 0.3s ease;
  overflow: visible;
}

.site-header .menu-toggle:hover {
  transform: scale(1.05);
}

.site-header .menu-toggle .bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  border-radius: 3px;
  transition: all 0.3s ease;
  transform-origin: center;
  position: relative;
}

/* X-Form wenn Menü offen */
.site-header .menu-toggle.active .bar:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

.site-header .menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-header .menu-toggle.active .bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Primary Menu - Slide-in Animation */
#site-navigation {
  position: relative;
}

.menu-menue-oben-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
}

#primary-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease;
  transform-origin: top;
}

#site-navigation.toggled #primary-menu {
  max-height: 1000px;
  opacity: 1;
}

#primary-menu li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#site-navigation.toggled #primary-menu li {
  opacity: 1;
  transform: translateX(0);
}

#primary-menu a {
  font-family: var(--font-family-sans);
  text-decoration: none;
  color: var(--color-gold);
  font-size: 1.1rem;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

#primary-menu a:hover {
  color: var(--color-gold-hover);
  background: var(--color-dark-hover);
}

#primary-menu>li>a {
  text-transform: uppercase;
  border-top: 1px dotted var(--color-gold);
  display: block;
  padding: 6px 20px;
}

#primary-menu>li ul li a {
  display: block;
  padding: 4px;
}

@media screen and (max-width: 760px) {
  #primary-menu a {
    font-size: 1rem;
  }
}

/* Footer */
footer.site-footer {
  background: var(--bg-dark);
  color: var(--color-light);
  text-align: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-gold);
}

#footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

#footer-menu li {
  margin: 0 1.5rem;
}

#footer-menu li a {
  text-decoration: none;
  color: var(--color-gold);
  font-family: var(--font-family-sans);
  font-size: 0.9rem;
}

#footer-menu li a:hover {
  color: var(--color-gold-hover);
}

/* Seiten mit und ohne aside */
.page-content {
  /*display: flex;
  gap: 2rem;*/
  padding: 1.8%;
  padding-top: 40px;
}

.page-content main {
  flex: 1 1 100%;
}

.page-content.has-sidebar main {
  flex: 0 1 70%;
}

.page-content.has-sidebar aside {
  flex: 0 1 30%;
}


/* STARTSEITE */
[class^="home_block_"] .container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;

  padding: 1.8%;
}

.home-notice {
  background: var(--bg-dark);
  color: var(--color-light);
}

.home-notice .inner {
  border: 1px solid var(--color-gold);
  padding: 1rem;
  width: 100%;
}

[class^="home_block_"] .home_text {
  width: 60%;
  padding: 10px 20px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: fadeInLeft 1s ease forwards;
  opacity: 0;
  -webkit-animation: fadeInLeft 1s ease forwards;
  -moz-animation: fadeInLeft 1s ease forwards;
  -ms-animation: fadeInLeft 1s ease forwards;
  -o-animation: fadeInLeft 1s ease forwards;
}

[class^="home_block_"] .home_image {
  width: 40%;
  padding: 10px;
  animation: fadeInRight 1s ease forwards;
  opacity: 0;
  -webkit-animation: fadeInRight 1s ease forwards;
  -moz-animation: fadeInRight 1s ease forwards;
  -ms-animation: fadeInRight 1s ease forwards;
  -o-animation: fadeInRight 1s ease forwards;
}

[class^="home_block_"] .home_image img {
  height: 100%;
  object-fit: cover;
  padding: 5px;
  border: 1px solid var(--color-green);
}

[class^="home_block_"] .home_text h1 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-gold);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

[class^="home_block_"] .home_text h2 {
  font-size: var(--font-size-base) !important;
  font-family: var(--font-family);
  font-weight: bold;
  color: var(--color-dark);
  text-shadow: none;
}

[class^="home_block_"] .home_text p {
  margin: 1rem 0;
}

.home_block_catering {
  background: var(--bg-dark);
  color: var(--color-light);
}

.home_block_catering h2,
.home_block_catering h3 {
  color: var(--color-light) !important;
}

.home_button {
  width: fit-content;
  margin: 1.5rem auto;
  background: var(--color-gold);
  padding: 0.1rem 1rem 0.3rem 1rem;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
}

.home_button:hover {
  background: var(--color-gold-hover);
  font-size: calc(var(--font-size-base) - 1px);
  border: 1px solid var(--color-gold-hover);
}

.home_button a {
  text-decoration: none;
  color: var(--color-light);
}

.kontakt-wrapper {
  display: flex;
  gap: 20px 20px;
  flex-wrap: wrap;
}

.kontakt-wrapper div {
  flex: 1;
  /*padding: 0 1rem;*/
}

.kontakt-formular {
  text-align: center;
  background: var(--bg-dark);
  padding: 20px;
  padding-top: 10px;
  box-shadow: 0 0 0 4px var(--bg-light),
    0 0 0 5px var(--color-green);
}

.form-info {
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-light);
}

.kontakt-formular input,
.kontakt-formular textarea {
  padding: 3px;
  width: 100%;
}

.wpcf7-spinner {
  display: none !important;
}

.wpcf7-submit {
  background: var(--color-gold);
  color: var(--color-dark);
  font-weight: bold;
  border: none;
  padding: 8px 16px !important;
  cursor: pointer;
  display: inline-block;
  width: fit-content !important;
  margin: 0 auto;
}



.kontakt-formular p.dsgvo {
  color: var(--color-light);
  font-size: 0.9rem;
  font-style: italic;
}

.kontakt-formular {
  min-width: 250px
}

.kontakt-text {
  padding: 20px;
  text-align: center;
}

.input-container {
  background: var(--color-dark);

  padding: 4px;
  margin-bottom: 20px;
  position: relative;
}

.input-container textarea {
  resize: none;
  outline: none;
}

.input-container input,
.input-container textarea {
  font-size: 1.1rem;
  color: var(--color-dark);
  outline: none;
  border: 0;
  border: 1px solid var(--color-gold);
  width: 100%;
  background: var(--color-light);
  position: relative;
  z-index: 2;
}

.input-container label,
.input-container textarea:placeholder-shown~label {
  color: var(--color-gold);
  position: absolute;
  left: 8px;
  top: 7px;
  z-index: 2;
  font-size: 1rem;
  font-style: italic;
  text-shadow: 1px 1px 1px darkslategray;
  transition: 0.5s;
}


/* Floating Label für CF7 mit verschachteltem HTML */
.input-container input:focus~label,
.input-container input:not(:placeholder-shown)~label,
.input-container textarea:focus~label,
.input-container textarea:not(:placeholder-shown)~label {
  top: -18px;
  left: 8px;
  font-size: 1rem;
}

.input-container input:placeholder-shown~label {
  top: 16px;
  font-size: 1rem;
}


.input-container textarea:placeholder-shown~label {
  top: 16px;
  font-size: 1rem;
}

/* Floating Label bleibt oben bei Wert oder Fokus */
.input-container.has-focus label,
.input-container.has-value label {
  top: -18px;
  left: 8px;
  font-size: 1rem;
}


.input-container.has-focus label,
.input-container input:not(:placeholder-shown)~label,
.input-container textarea:not(:placeholder-shown)~label {
  top: -18px;
  left: 8px;
  font-size: 1rem;
}

.input-container input:placeholder-shown~label,
.input-container textarea:placeholder-shown~label {
  top: 16px;
  font-size: 1.1rem;
}

.wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  right: 0;
  font-style: italic;
}

/* Fehlermeldung ausblenden */
.wpcf7-not-valid-tip {
  display: none !important;
}

/* Input mit Fehler rot umrahmen */
.wpcf7-form-control.wpcf7-not-valid {
  border: 2px solid #e74c3c !important;
  /* Rot */
  background-color: #fff6f6;
  /* leicht rötlicher Hintergrund optional */
}

/* Optional: sanfter Übergang */
.wpcf7-form-control {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wpcf7-response-output {
  color: var(--color-light) !important;
  font-size: 0.9rem !important;
  border-color: red !important;
}

.scroll-to-top {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 999;
  background: var(--color-gold);
  color: var(--color-dark);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
  transition: opacity 0.3s;
}

.scroll-to-top.show {
  display: block;
  opacity: 0.7;
}

@media screen and (max-width: 750px) {
  .page-content {
    padding-top: 30px;
  }

  [class^="home_block_"] .container {
    flex-direction: column;
    padding: 0;
  }

  [class^="home_block_"] .home_text {
    padding: 4%;
  }

  [class^="home_block_"] .home_text,
  [class^="home_block_"] .home_image {
    width: 100%;
  }

  [class^="home_block_"] .home_image {
    padding: 0;
  }

  [class^="home_block_"] .home_image img {
    padding: 0;
    border: none;
  }

  .home-notice .container {
    padding: 1.8%;
  }
}

@media screen and (max-width: 588px) {
  .kontakt-text {
    padding-bottom: 0;
  }

  .kontakt-page .page-content {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .kontakt-formular {
    box-shadow: none;
  }
}