/*
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
*/

/* Write your custom CSS code below
_______________________________________________________________ */
html,
body {
  scroll-behavior: smooth;
}

/*  TYPOGRAFIE
______________________________________________________________ */
/*  Silbentrennung */

h3,
h4,
h5,
h6,
p {
  hyphens: auto; /* automatische Silbentrennung basierend auf der Sprache des Dokuments */
  text-wrap: pretty; /* Der Browser berechnet den Umbruch der letzten vier Zeilen neu, um das Textbild zu optimieren. */
  word-break: break-word; /* Sicherheitsnetz fuer sehr alte Browser. */
}

/*  Custom Underline
______________________________________________________________ */
.custom-underline a {
  text-decoration: underline;
  text-decoration-color: #007088; /* Optionale Linienfarbe */

  /* Linienicke einstellen */
  text-decoration-thickness: 1px;

  /* Abstand zur Fusslinie einstellen */
  text-underline-offset: 6px;
}
.custom-underline a:hover {
  color: #007088;
}

/*  Footer Underline
______________________________________________________________ */
.footer-underline a {
  text-decoration: underline;
  text-decoration-color: #d6e5e5; /* Optionale Linienfarbe */

  /* Linienicke einstellen */
  text-decoration-thickness: 1px;

  /* Abstand zur Fusslinie einstellen */
  text-underline-offset: 6px;
}
.footer-underline a:hover {
  color: #cbb900;
  text-decoration-color: #cbb900;
}

/*  CUSTOM LOGO
______________________________________________________________ */
.custom-logo .st0 {
  fill: #ffffff;
}
.custom-logo .st1 {
  fill: #ffffff;
}

.custom-logo.is-scrolled .st0 {
  fill: #cbb900;
}
.custom-logo.is-scrolled .st1 {
  fill: #007088;
}

/*  Custom Logo Color */
.custom-logo-color .st0 {
  fill: #cbb900;
}
.custom-logo-color .st1 {
  fill: #007088;
}

/*  Ollie Header / Slider-Block z-Index einstellen
______________________________________________________________ */
header.wp-block-template-part {
  position: relative !important;
  z-index: 9999 !important;
}

/* Slider-Block im Ollie-Layout darunter halten */
.wp-block-group.has-background,
.sliderberg-block,
.wp-block-cover {
  position: relative;
  z-index: 10 !important;
}

/*  NAVIGATION
______________________________________________________________ */
.content-primary-navigation {
  color: #007088 !important;
}

/*	MainNavigation CoverTmp Startseite */
.main-nav a:hover {
  color: #cbb900 !important;
}
.current-menu-item > a {
  color: #cbb900 !important;
}

/*	MainNavigation SeitenTmp */
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container
  .current-menu-item
  > a {
  color: #cbb900; /* currentMenu */
}

.wp-block-navigation :where(a),
.wp-block-navigation :where(a:active),
.wp-block-navigation :where(a:focus),
.wp-block-navigation :where(a:hover) {
  text-decoration: none !important;
}

.wp-block-navigation :where(a:hover) {
  color: #cbb900 !important; /* hoverMenu */
}

/* Sanfter Uebergang */
.main-nav a .main-nav,
.custom-logo,
.site-header {
  transition: all 1s ease; /*0.3s*/
}

/*  Sub NAVIGATION
________________________________________ */
.no-color-change {
  color: #007088 !important;
}

/*  MEDIENBLOCK
______________________________________________________________ */
.wp-block-media-text__media img,
.wp-block-media-text__media video {
  height: auto;
  max-width: unset;
  vertical-align: middle;
  width: 100%;
  border-radius: 10px;
}

/*  Tabellen Block
______________________________________________________________ */
/* Layout fixieren für die Zertifikate-Tabelle */
.wp-block-table.certificates table,
table.certificates {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse; /* Verhindert doppelte Linien */
  border-left: none; /* Äusseren linken Rand entfernen */
  border-right: none; /* Äusseren rechten Rand entfernen */
  font-size: 1.165rem !important;
}

/* Erste Spalte (25%) */
.certificates th:nth-child(1),
.certificates td:nth-child(1) {
  width: 20%;
}

/* Zweite Spalte (75%) */
.certificates th:nth-child(2),
.certificates td:nth-child(2) {
  width: 80%;
}

/* Nur horizontale Linien anzeigen, vertikale entfernen */
.certificates th,
.certificates td {
  border-top: 1px solid var(--wp--style--node-gradient-color, #e5e7eb); /* Obere Linie */
  border-bottom: 1px solid var(--wp--style--node-gradient-color, #e5e7eb); /* Untere Linie */
  border-left: none !important; /* Vertikale Linie links entfernen */
  border-right: none !important; /* Vertikale Linie rechts entfernen */
  padding: 30px 0 !important; /* Mehr Abstand zwischen horiz. Linien */
}

/*  Create custom icon lists
______________________________________________________________ */
.pstype_check_mark li {
  padding-left: 10px;
  margin-bottom: 7px;
}
.pstype_check_mark li::marker {
  content: "\2794";
  color: #007088;
  font-weight: normal;
}

/*  GSAP Bibliothek CSS
______________________________________________________________ */
.hover-box {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
  transition: border-color 0s;
}

.hover-box.is-hovered h2,
.hover-box.is-hovered h3 {
  color: #fff !important; /* Titel Hover Box */
}

.hover-box.is-hovered p,
.hover-box.is-hovered a {
  color: #fff !important; /* Lead unter Titel */
}

.hover-box.is-hovered .gate_logo {
  fill: #fff !important;
}

.hover-box h2,
.hover-box h3,
.hover-box p,
.hover-box a {
  transition: color 0.25s ease;
}

.hover-box > *:not(.glow-bg) {
  position: relative;
  z-index: 1;
}
/* Cursor */
.glow-bg {
  position: absolute !important;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.hover-box.is-neutral {
  --accent-gradient: linear-gradient(
    180deg,
    #007088 0%,
    #cbb900 100% /* #fdbb2d 100% */
  ) !important;
  --accent-border: rgba(223, 227, 240, 0.8);
  border: none;
}

.hover-box.is-gateway {
  --accent-gradient: linear-gradient(
    0deg,
    rgb(223, 170, 26) 0%,
    rgb(203, 185, 0) 16.667%,
    rgb(164, 116, 81) 33.333%,
    rgb(0, 112, 136) 50%,
    rgb(9, 91, 121) 66.667%,
    rgb(0, 40, 71) 83.333%,
    rgb(0, 1, 22) 100%
  ) !important;
  --accent-border: rgba(223, 227, 240, 0.8);
  border: none;
}

.hover-box.is-kurse {
  --accent-gradient: linear-gradient(
    180deg,
    #007088 0%,
    #57c785 50%,
    #cbb900 100%
  ) !important;
  --accent-border: rgba(223, 227, 240, 0.8);
  border: none;
}

.hover-box.is-mesh {
  --accent-gradient: linear-gradient(
    180deg,
    rgb(35, 44, 57, 1) 50%,
    rgba(35, 44, 57, 1) 100%
  ) !important;
  --accent-border: rgba(223, 227, 240, 0.8);
  border: none;
  z-index: 9999 !important;
}

.hover-box.is-erdtoene {
  --accent-gradient: linear-gradient(
    0deg,
    rgb(164, 116, 81) 0%,
    rgb(156, 152, 129) 16.667%,
    rgb(115, 160, 157) 33.333%,
    rgb(59, 137, 154) 50%,
    rgb(9, 91, 121) 66.667%,
    rgb(0, 40, 71) 83.333%,
    rgb(0, 1, 22) 100%
  );
  --accent-border: rgba(216, 90, 48, 0.8);
  border: none;
}

.hover-box.is-hovered {
  background: var(--accent-gradient) !important;
}

/*  Video einbinden
______________________________________________________________ */
.video-2-3 {
  width: 100%;
  height: 200px;
  max-width: 400px; /* Begrenzt die Breite, damit es nicht zu riesig wird */
  aspect-ratio: 2 / 3; /* Setzt das exakte 2:3 Verhältnis (z.B. 400px x 600px) */
  border: none;
}

/*  FluentForm CSS
______________________________________________________________ */
.fluentform .ff-el-form-control {
  border: none !important;
  border-bottom: 1px solid #808793 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.ff-default .ff-el-input--label label {
  display: inline-block;
  font-size: 1.165rem; /* Hier Grösse anpassen */
  color: #232c39; /* Schriftfarbe */
  font-weight: 300;
  line-height: inherit;
  margin-bottom: 0;
}

/*	Media Queries
________________________________________________________________________________________________ */

/*	Sticky-Title Klasse in Spaltenblock schreiben */
@media (min-width: 768px) {
  /* 1. DESKTOP-ANSICHT (Ab iPad/Tablet aufwärts) */
  header.wp-block-template-part {
    position: relative !important;
    z-index: 9999 !important;
  }

  .sticky-title {
    position: -webkit-sticky;
    position: sticky;
    top: 164px; /* Abstand zum oberen Rand beim Scrollen */
    align-self: flex-start; /* Wichtig in Flexbox-Spalten */
  }
}