/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

@font-face {
  font-display: swap; 
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/unbounded-v12-latin-200.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/unbounded-v12-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/unbounded-v12-latin-700.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/unbounded-v12-latin-900.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/hanken-grotesk-v12-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/hanken-grotesk-v12-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/hanken-grotesk-v12-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/hanken-grotesk-v12-latin-900.woff2') format('woff2');
}



/* --- MENÜ HINTERGRUND --------------------------------------- */
#slide-out-widget-area.fullscreen-alt,
#slide-out-widget-area-bg.fullscreen-alt.solid {
  background-color: #8b53ff !important;
}


/* --- INNER LAYOUT ------------------------------------------- */
/* Kein Scrollen */
#slide-out-widget-area {
  overflow-y: hidden !important;
}

#slide-out-widget-area .inner-wrap {
  height: 100vh !important;
  overflow: hidden !important;
}

#slide-out-widget-area .inner {
  height: 100vh !important;
  overflow: hidden !important;
  padding-top: clamp(70px, 11vh, 120px) !important;
  padding-bottom: clamp(60px, 8vh, 90px) !important;
  box-sizing: border-box !important;
}

/* Button-Abstände schrumpfen auf kleinen Screens */
#slide-out-widget-area ul.menu > li {
  margin-bottom: clamp(8px, 1.5vh, 18px) !important;
}


/* --- MENÜLISTE: zentriert ----------------------------------- */
#slide-out-widget-area ul.menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: 100% !important;
}

/* Alle Menüpunkte: Block (volle Zeile), zentriert */
#slide-out-widget-area ul.menu > li {
  display: block !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Unterpunkte ausblenden */
#slide-out-widget-area ul.menu > li > ul {
  display: none !important;
}


/* --- BUTTONS (Pill-Form, Grundstil) ------------------------- */
#slide-out-widget-area ul.menu > li > a {
  display: inline-block !important;
  font-family: 'Unbounded', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 18px 44px !important;
  border-radius: 60px !important;
  min-width: 160px !important;
  text-align: center !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  white-space: nowrap !important;
}


/* --- INDIVIDUELLE BUTTON-FARBEN & ROTATIONEN ---------------- */

/* 1. Leistungen – Olivgelb */
#slide-out-widget-area li.menu-item-1944 > a {
  background-color: #b7ae39 !important;
  color: #fff5d9 !important;
  transform: rotate(-3deg) !important;
}
#slide-out-widget-area li.menu-item-1944 > a:hover {
  transform: rotate(-3deg) scale(1.05) !important;
  opacity: 0.9 !important;
}

/* 2. Prozess – Creme */
#slide-out-widget-area li.menu-item-1942 > a {
  background-color: #fff5d9 !important;
  color: #ff9f38 !important;
  transform: rotate(2deg) !important;
}
#slide-out-widget-area li.menu-item-1942 > a:hover {
  transform: rotate(2deg) scale(1.05) !important;
  opacity: 0.9 !important;
}

/* 3. Case Studies – Gelb */
#slide-out-widget-area li.menu-item-1940 > a {
  background-color: #ffd874 !important;
  color: #4d060a !important;
  transform: rotate(-2deg) !important;
}
#slide-out-widget-area li.menu-item-1940 > a:hover {
  transform: rotate(-2deg) scale(1.05) !important;
  opacity: 0.9 !important;
}

/* 4. Über Uns – Weiss/Hellrosa */
#slide-out-widget-area li.menu-item-1941 > a {
  background-color: #fdf4fc !important;
  color: #4d060a !important;
  transform: rotate(4deg) !important;
}
#slide-out-widget-area li.menu-item-1941 > a:hover {
  transform: rotate(4deg) scale(1.05) !important;
  opacity: 0.9 !important;
}

/* 5. Insights – Lavendel */
#slide-out-widget-area li.menu-item-1943 > a {
  background-color: #dbcdf8 !important;
  color: #8b53ff !important;
  transform: rotate(-3deg) !important;
}
#slide-out-widget-area li.menu-item-1943 > a:hover {
  transform: rotate(-3deg) scale(1.05) !important;
  opacity: 0.9 !important;
}

/* 6. Kontakt – Dunkelrot */
#slide-out-widget-area li.menu-item-1939 > a {
  background-color: #4d060a !important;
  color: #dbcdf8 !important;
  transform: rotate(3deg) !important;
}
#slide-out-widget-area li.menu-item-1939 > a:hover {
  transform: rotate(3deg) scale(1.05) !important;
  opacity: 0.9 !important;
}


/* --- FOOTER-LINKS (Widget-Block: Impressum · AGB · Datenschutz) --- */
/*
   Die drei Links sind als WordPress-Widget-Block (wp-block-columns)
   im Off-Canvas-Bereich angelegt – nicht im Menü selbst.
   .inner ist position:relative → absolut am unteren Rand positioniert.
*/
#slide-out-widget-area .widget_block {
  position: absolute !important;
  bottom: 30px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Spalten-Layout: gleichmäßig verteilt in einer Zeile */
#slide-out-widget-area .widget_block .wp-block-columns {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

#slide-out-widget-area .widget_block .wp-block-column {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Absatz-Abstand entfernen */
#slide-out-widget-area .widget_block p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Link-Styling: transparent, keine Unterstreichung */
#slide-out-widget-area .widget_block a {
  color: rgba(222, 205, 251, 0.6) !important;
  text-decoration: none !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline !important;
}

#slide-out-widget-area .widget_block a:hover {
  color: rgba(222, 205, 251, 1) !important;
  text-decoration: none !important;
}


/* --- LINIE (off-canvas-social-links) ENTFERNEN -------------- */
#slide-out-widget-area .off-canvas-social-links {
  display: none !important;
}


/* --- SCHLIESSEN-BUTTON (X) ---------------------------------- */
#slide-out-widget-area .slide_out_area_close .close-line {
  background-color: rgba(255, 245, 217, 0.9) !important;
}

/* --- TAP-HIGHLIGHT & ACTIVE/FOCUS STATES ------------------- */

/* Tap-Highlight komplett entfernen */
#slide-out-widget-area ul.menu > li > a {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* Farben beim Klick (active/focus) einfrieren */
#slide-out-widget-area li.menu-item-1944 > a:active,
#slide-out-widget-area li.menu-item-1944 > a:focus { color: #fff5d9 !important; }

#slide-out-widget-area li.menu-item-1942 > a:active,
#slide-out-widget-area li.menu-item-1942 > a:focus { color: #ff9f38 !important; }

#slide-out-widget-area li.menu-item-1940 > a:active,
#slide-out-widget-area li.menu-item-1940 > a:focus { color: #4d060a !important; }

#slide-out-widget-area li.menu-item-1941 > a:active,
#slide-out-widget-area li.menu-item-1941 > a:focus { color: #4d060a !important; }

#slide-out-widget-area li.menu-item-1943 > a:active,
#slide-out-widget-area li.menu-item-1943 > a:focus { color: #8b53ff !important; }

#slide-out-widget-area li.menu-item-1939 > a:active,
#slide-out-widget-area li.menu-item-1939 > a:focus { color: #dbcdf8 !important; }

/* --- ACTIVE / FOCUS / VISITED – Bulletproof Fix ------------- */

/* touch-action verhindert Tap-Delays auf Mobile */
#slide-out-widget-area ul.menu > li > a {
  touch-action: manipulation !important;
}

/* 1. Leistungen */
#slide-out-widget-area li.menu-item-1944 > a:active,
#slide-out-widget-area li.menu-item-1944 > a:focus,
#slide-out-widget-area li.menu-item-1944 > a:visited {
  color: #fff5d9 !important;
  -webkit-text-fill-color: #fff5d9 !important;
}

/* 2. Prozess */
#slide-out-widget-area li.menu-item-1942 > a:active,
#slide-out-widget-area li.menu-item-1942 > a:focus,
#slide-out-widget-area li.menu-item-1942 > a:visited {
  color: #ff9f38 !important;
  -webkit-text-fill-color: #ff9f38 !important;
}

/* 3. Case Studies */
#slide-out-widget-area li.menu-item-1940 > a:active,
#slide-out-widget-area li.menu-item-1940 > a:focus,
#slide-out-widget-area li.menu-item-1940 > a:visited {
  color: #4d060a !important;
  -webkit-text-fill-color: #4d060a !important;
}

/* 4. Über Uns */
#slide-out-widget-area li.menu-item-1941 > a:active,
#slide-out-widget-area li.menu-item-1941 > a:focus,
#slide-out-widget-area li.menu-item-1941 > a:visited {
  color: #4d060a !important;
  -webkit-text-fill-color: #4d060a !important;
}

/* 5. Insights */
#slide-out-widget-area li.menu-item-1943 > a:active,
#slide-out-widget-area li.menu-item-1943 > a:focus,
#slide-out-widget-area li.menu-item-1943 > a:visited {
  color: #8b53ff !important;
  -webkit-text-fill-color: #8b53ff !important;
}

/* 6. Kontakt */
#slide-out-widget-area li.menu-item-1939 > a:active,
#slide-out-widget-area li.menu-item-1939 > a:focus,
#slide-out-widget-area li.menu-item-1939 > a:visited {
  color: #dbcdf8 !important;
  -webkit-text-fill-color: #dbcdf8 !important;
}