/*
Theme Name:     Domus Seniorum – aktives Child
Template:       neve
Author:         Huibert de Vet
Description:    Persönlich angepasstes Child Theme für domus-seniorum.de auf Basis von Neve. Fokus auf Barrierefreiheit, inhaltszentriertes Design und therapeutisch fundierte Nutzerführung.
Version:        1.2.1
License:        GPL-2.0+
Text Domain:    domus-seniorum
*/

/* ========== CSS CUSTOM PROPERTIES (VARIABLEN) ========== */
:root {
  /* 🎨 Domus Farbpalette */
  --domus-red: #843D36;
  --domus-gold: #EDC26A;
  --domus-light: #FAF8F5;
  --domus-dark-red: #6b2f2a;
  --domus-gold-hover: #E6B75E;
  
  /* 🔤 Typographie */
  --domus-font-base: 16px;
  --domus-line-height: 1.6;
  
  /* 🎯 Abstände */
  --domus-spacing-xs: 4px;
  --domus-spacing-sm: 8px;
  --domus-spacing-md: 12px;
  --domus-spacing-lg: 24px;
  --domus-spacing-xl: 40px;
  
  /* 🌊 Animationen */
  --domus-transition: 0.3s ease-in-out;
  --domus-transition-fast: 0.15s ease;
}

/* ========== BARRIEREFREIHEIT GRUNDLAGEN ========== */

/* 🔍 Bessere Fokus-Sichtbarkeit für Tastaturnavigation */
*:focus {
  outline: 6px solid var(--domus-gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 📱 Touch-Targets mindestens 44px für Senioren */
@media (max-width: 768px) {
  a, button, input, select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 🎭 Respekt für Nutzer-Präferenzen */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== TYPOGRAPHIE ========== */

/* Bessere Lesbarkeit für Senioren */
body {
  line-height: var(--domus-line-height);
  font-size: var(--domus-font-base);
}

/* Überschriften besser strukturiert */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin-bottom: 0.8em;
}

/* ========== NAVIGATION ========== */

/* 🎨 Navigation: Nur TEXT in Systemfarbe, Icons bleiben domus-rot */
.primary-menu-ul a:not(.nv-icon),
.primary-menu-ul .sub-menu a:not(.nv-icon) {
  transition: color var(--domus-transition);
}

/* Font Awesome Icons bleiben domus-rot */
.primary-menu-ul a i,
.primary-menu-ul .sub-menu a i,
.fa {
  color: var(--domus-red) !important;
}

/* Hover: domus-rot für Text */
.primary-menu-ul a:hover:not(.nv-icon),
.primary-menu-ul .sub-menu a:hover:not(.nv-icon) {
  color: var(--domus-red) !important;
  transform: scale(1.03);
  transition: transform var(--domus-transition);
  will-change: transform; /* Performance-Hint */
}

/* 🔽 Aktive Rubrik unterstreichen (aber nur auf der aktiven Kategorieseite) */
.primary-menu-ul li.current-menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
  text-decoration-color: var(--domus-gold);
}


/* 🔍 Lupe im Header-Icon sichtbar vergrößern */
a.nv-icon.nv-search svg,
.search-submit .nv-icon.nv-search svg {
  width: 40px !important;
  height: 40px !important;
  transition: fill var(--domus-transition);
}

/* 🔄 Hover-Effekt für Lupe – wechselt zu Rot OHNE zusätzliche Umrandung */
a.nv-icon.nv-search:hover svg path,
.search-submit:hover .nv-icon.nv-search svg path {
  fill: var(--domus-red) !important;
}

/* ❌ X-Button im mobilen Such-Overlay - Optimiert */
.close-responsive-search {
  background: none !important;
  border: none !important;
  padding: var(--domus-spacing-md) !important;
  cursor: pointer;
}

.close-responsive-search svg {
  width: 60px !important;
  height: 60px !important;
  transition: fill var(--domus-transition);
  display: block;
  margin: 0 auto;
  fill: #827e7a !important;
}

/* 🔁 Hover für X im Suchoverlay */
.close-responsive-search:hover svg path {
  fill: var(--domus-red) !important;
}

.close-responsive-search:hover {
  outline: 6px solid var(--domus-gold) !important;
  outline-offset: 5px !important;
}

/* 🍔 Hamburger-Menü-Button - Sauberer Code */
.navbar-toggle {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--domus-spacing-md) !important;
  cursor: pointer;
}

.navbar-toggle:focus,
.navbar-toggle:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 🍔 Hamburger-Balken mit CSS-Variablen */
.navbar-toggle:not(.is-active) .icon-bar {
  height: 5px;
  width: 40px;
  margin: var(--domus-spacing-xs) auto;
  display: block;
  transition: all var(--domus-transition);
  background-color: #827e7a !important;
}

.navbar-toggle.is-active .icon-bar {
  height: 3px;
  width: 40px;
  margin: 2px auto;
  display: block;
  transform-origin: center;
  transition: all var(--domus-transition);
  background-color: #827e7a !important;
}

/* 🔁 Hover-Farbe für Hamburger-Balken */
.navbar-toggle:hover .icon-bar {
  background-color: var(--domus-red) !important;
}

.navbar-toggle:hover {
  outline: 6px solid var(--domus-gold) !important;
  outline-offset: 2px !important;
}

/* 🔽 Submenü-Pfeil in Theme-Standardfarbe */
.sub-menu-icon {
  transition: color var(--domus-transition);
}

.sub-menu-icon:hover {
  color: var(--domus-red) !important;
  fill: currentColor !important;
  outline: 2px solid var(--domus-gold) !important;
  outline-offset: 2px !important;
}

/* 📏 Begrenzung der Suchfeld-Breite auf Desktop */
.responsive-search .search-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* ========== SUCHFELD DESKTOP - ADAPTIVE RAHMEN ========== */

/* Header-Suchfeld Container für durchgehenden Rahmen-Effekt */
.header-search,
.nv-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

/* Header-Suchfeld Normal-Zustand - 2px dünner Rahmen */
.header-search input[type="search"],
.nv-search-form input[type="search"],
input[type="search"].search-field {
  border: 2px solid #ddd !important;
  border-radius: 8px !important;
  padding: 12px 60px 12px 16px !important; /* Mehr Innenabstand */
  transition: all var(--domus-transition);
}

/* Header-Suchfeld Aktiv-Zustand - 6px goldener Rahmen */
.header-search input[type="search"]:focus,
.header-search input[type="search"]:active,
.nv-search-form input[type="search"]:focus,
.nv-search-form input[type="search"]:active,
input[type="search"].search-field:focus,
input[type="search"].search-field:active {
  border: 6px solid var(--domus-gold) !important;
  outline: none !important;
  padding: 8px 56px 8px 12px !important; /* Angepasst für dickeren Rahmen */
}

/* Lupe im Header - positioniert, normal ohne Rahmen */
.header-search .nv-icon.nv-search,
.nv-search-form .nv-icon.nv-search {
  position: absolute;
  right: 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  background: transparent;
  transition: all var(--domus-transition);
}

/* Lupe bei eigenem Hover - 6px goldener Rahmen */
.header-search .nv-icon.nv-search:hover,
.nv-search-form .nv-icon.nv-search:hover {
  border: 6px solid var(--domus-gold) !important;
  background-color: rgba(237, 194, 106, 0.1);
}

/* Lupe automatisch bei Suchfeld-Aktivierung - 6px goldener Rahmen */
.header-search input[type="search"]:focus ~ .nv-icon.nv-search,
.header-search input[type="search"]:active ~ .nv-icon.nv-search,
.nv-search-form input[type="search"]:focus ~ .nv-icon.nv-search,
.nv-search-form input[type="search"]:active ~ .nv-icon.nv-search,
.header-search.search-active .nv-icon.nv-search,
.nv-search-form.search-active .nv-icon.nv-search {
  border: 6px solid var(--domus-gold) !important;
  background-color: rgba(237, 194, 106, 0.1);
}

/* Overlay-Suchfeld Input - 6px goldener Rahmen */
.responsive-search .search-form input[type="search"] {
  border: 6px solid var(--domus-gold) !important;
  border-radius: 8px !important;
  height: 60px !important;
  padding: 12px 60px 12px 16px !important; /* Mehr Innenabstand */
  font-size: 18px !important;
  box-sizing: border-box;
  width: 100%;
}

/* Overlay Lupe-Button - positioniert für durchgehenden Rahmen */
.responsive-search .search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 6px solid var(--domus-gold) !important;
  padding: 8px !important;
  margin: 0;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all var(--domus-transition);
}

/* Lupe SVG Farbe - normal grau */
.responsive-search .search-submit svg path,
a.nv-icon.nv-search svg path {
  fill: #827e7a !important;
  transition: fill var(--domus-transition);
}

/* Hover-Effekt für Lupe Desktop - NUR Farbwechsel */
.header-search .nv-icon.nv-search:hover svg path,
.nv-search-form .nv-icon.nv-search:hover svg path {
  fill: var(--domus-red) !important;
}

.header-search .nv-icon.nv-search:hover,
.nv-search-form .nv-icon.nv-search:hover {
  background-color: rgba(237, 194, 106, 0.2);
}

/* Hover-Effekt für Lupe Mobile - NUR Farbwechsel */
.responsive-search .search-submit:hover {
  border: none !important;
  outline: none !important;
  background-color: rgba(237, 194, 106, 0.2);
}

.responsive-search .search-submit:hover svg path {
  fill: var(--domus-red) !important;
}

/* ========== SUCHFELD MOBIL - EINHEITLICH 6PX ========== */

@media (max-width: 768px) {
  .responsive-search .search-form {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    /* KEIN border hier - nur das input bekommt den Rahmen */
  }

  .responsive-search .search-form input[type="search"] {
    border: 6px solid var(--domus-gold) !important;
    border-radius: 8px !important;
    height: 60px !important;
    padding: 12px 60px 12px 16px !important; /* Mehr Innenabstand */
    font-size: 18px !important;
    box-sizing: border-box;
    width: 100%;
  }

  .responsive-search .search-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none !important; /* KEIN Rahmen */
    outline: none !important;
    padding: 8px !important;
    margin: 0;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all var(--domus-transition);
  }

  .responsive-search .search-submit svg {
    width: 32px !important;
    height: 32px !important;
  }

  .responsive-search .search-submit svg path {
    fill: #827e7a !important;
  }

  /* Mobile Hover-Effekt - NUR Farbwechsel, KEIN Rahmen */
  .responsive-search .search-submit:hover {
    border: none !important;
    outline: none !important;
    background-color: rgba(237, 194, 106, 0.2) !important;
  }

  .responsive-search .search-submit:hover svg path {
    fill: var(--domus-red) !important;
  }
}

/* ========== HEADERBEREICH ========== */

/* Header-Elemente Hover-Effekte */
.menu-toggle:hover svg,
.header-search:hover svg {
  fill: var(--domus-red);
  transition: fill var(--domus-transition);
}

/* ========== MEGAMENÜ-ANPASSUNGEN ========== */

/* Trennlinien im Dropdown-Menü entfernen */
.primary-menu-ul .sub-menu,
.primary-menu-ul .sub-menu li {
  border: none !important;
  box-shadow: none !important;
}

/* Suchfeld: Hintergrund der Autovervollständigung */
.algolia-autocomplete .ds-dropdown-menu {
  background-color: var(--domus-red) !important;
  color: var(--domus-light) !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.aa-dropdown-menu .aa-suggestion {
  color: var(--domus-light) !important;
  padding: var(--domus-spacing-sm) var(--domus-spacing-md);
  border-radius: 4px;
  transition: background-color var(--domus-transition-fast);
}

.aa-dropdown-menu .aa-suggestion:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ========== FOOTERBEREICH ========== */

/* Footer: Einheitliches Styling */
footer#footer {
  background-color: var(--domus-red) !important;
  color: var(--domus-light) !important;
  padding: var(--domus-spacing-lg) 0;
}

footer#footer a {
  color: var(--domus-light) !important;
  transition: color var(--domus-transition);
  text-decoration: underline;
  text-underline-offset: 2px;
}

footer#footer a:hover {
  color: var(--domus-gold) !important;
  text-decoration: none;
}

/* ========== SCROLL-TO-TOP BUTTON (NEVE) ========== */

/* Neve's eigener Scroll-Button - korrekte Selektoren */
#scroll-to-top,
button.scroll-to-top {
  background-color: var(--domus-red) !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all var(--domus-transition) !important;
}

/* Goldener Rand wenn Button über Footer schwebt */
#scroll-to-top.over-footer,
button.scroll-to-top.over-footer {
  border: 6px solid var(--domus-gold) !important;
}

#scroll-to-top:hover,
button.scroll-to-top:hover {
  background-color: var(--domus-gold-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

#scroll-to-top svg path,
button.scroll-to-top svg path {
  fill: var(--domus-light) !important;
}

/* ========== MOBILE OPTIMIERUNGEN ========== */

@media (max-width: 768px) {
  :root {
    --domus-font-base: 18px; /* Größere Schrift auf Mobile */
    --domus-spacing-xl: 20px; /* Kleinere Abstände */
  }
  
  button.nv-back-to-top {
    width: 50px !important;
    height: 50px !important;
  }

	
/* ========== TEMPORARY FIXES ========== */
/* 🛠 Workaround – waiting for permanent fix */
.header-menu-sidebar-overlay.hfg-ov.hfg-pe {
  display: none !important;
}

/* ========== HIGH CONTRAST MODE SUPPORT ========== */
@media (prefers-contrast: high) {
  :root {
    --domus-red: #000000;
    --domus-gold: #000000;
  }
  
  a {
    text-decoration: underline !important;
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  button.nv-back-to-top,
  .navbar-toggle,
  .close-responsive-search {
    display: none !important;
  }
  
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: black !important;
    background: white !important;
  }
}


	/* Abstand oberhalb jedes Artikel-Teasers in Archiv-/Kategorieseiten */
.domus-top-spacing {
    padding-top: 2em;
}