/*
Theme Name: Vida y Salud Replica
Theme URI: https://vidaysalud.ch/
Author: ChatGPT
Description: Eine benutzerdefinierte WordPress‑Thema, das das Layout der Vida y Salud Homepage nachbildet.  Das Design verwendet ein festes Header‑Menü mit Logo, einen grossformatigen Bild‑Slider sowie Inhaltsbereiche für Einleitungstexte, Link‑Boxen zu Angebots‑ und Informationsseiten, einen Kartenabschnitt und einen Fussbereich.  Die Farbpalette sowie Schriftarten orientieren sich am Original.
Version: 1.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: vidaysalud-theme
*/

/*
 * Basis‑Stildefinitionen
 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  /* Die Textfarbe wird dynamisch über Customizer gesetzt (siehe functions.php) */
  color: var(--text-color);
  line-height: 1.6;
}

/* Farbvariablen für einfache Anpassung */
:root {
  --primary-color: #7fc9ff; /* sanfter Blauton, entspricht den Buttons des Originals */
  --accent-color: #9b7b64; /* warmes Braun, wie im Seitenleisten‑Iconbereich */
  --text-color: #3b3838;
  --light-bg: #ffffff;
  --shadow: rgba(0, 0, 0, 0.1);
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  position: relative;
  z-index: 100;
  background: transparent;
}

header .logo img {
  max-width: 250px;
  height: auto;
}

/* Navigation */
.primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.primary-menu li {
  position: relative;
}

.primary-menu li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 15px;
  transition: color 0.3s ease;
}

.primary-menu li a:hover,
.primary-menu li a:focus {
  color: var(--primary-color);
}

/* Slider */
.slider {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  object-fit: cover;
  opacity: 0;
  animation: slideAnimation 32s infinite;
}

/* Delay für jede Folie */
.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 4s; }
.slider img:nth-child(3) { animation-delay: 8s; }
.slider img:nth-child(4) { animation-delay: 12s; }
.slider img:nth-child(5) { animation-delay: 16s; }
.slider img:nth-child(6) { animation-delay: 20s; }
.slider img:nth-child(7) { animation-delay: 24s; }
.slider img:nth-child(8) { animation-delay: 28s; }

@keyframes slideAnimation {
  0% { opacity: 0; }
  4% { opacity: 1; }
  12% { opacity: 1; }
  16% { opacity: 0; }
  100% { opacity: 0; }
}

/* Home‑Intro */
.home-intro {
  max-width: 900px;
  margin: 60px auto;
  text-align: center;
  padding: 0 20px;
}

.home-intro h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.home-intro p {
  margin-bottom: 15px;
}

/* Link‑Boxen */
.link-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.link-box {
  background: var(--light-bg);
  border: 1px solid var(--shadow);
  box-shadow: 0 0 20px var(--shadow);
  width: 320px;
  text-align: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.link-box:hover {
  background: var(--primary-color);
  box-shadow: 0 0 20px #fff;
}

.link-box h3 {
  margin: 15px 0;
  font-size: 1.5rem;
  color: var(--text-color);
}

.link-box:hover h3 {
  color: #000;
}

.link-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* Kartenabschnitt */
.map-section {
  margin: 60px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.map-section iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

/* Sidebar‑Icons */
.sidebar-icons {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 200;
}

.sidebar-icons a {
  background-color: var(--accent-color);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 3px 0 0 3px;
  transition: background 0.3s ease, color 0.3s ease;
}

.sidebar-icons a:hover {
  background-color: var(--primary-color);
  color: #000;
}

.sidebar-icons i {
  margin-right: 8px;
}

/* Footer */
footer {
  background: var(--accent-color);
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

footer .footer-nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}

footer .footer-nav a:hover {
  text-decoration: underline;
}

/* Suche im Footer */
.search-form {
  margin-bottom: 20px;
}

.search-form input[type="search"] {
  padding: 8px 12px;
  border-radius: 4px;
  border: none;
}

.search-form button {
  padding: 8px 12px;
  margin-left: 5px;
  background: var(--primary-color);
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.search-form button:hover {
  background: #fff;
  color: var(--primary-color);
}