/*
Theme Name:   Salient Child
Theme URI:    https://themenectar.com/salient/
Description:  Salient Child Theme – docbrown.media Stil (Dark Agency)
Author:       Deine Agentur
Author URI:   https://example.com
Template:     salient
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  salient-child
*/

/* ============================================================
   SALIENT CHILD THEME – CUSTOM STYLES
   Stil: Dark Agency (docbrown.media inspiriert)
   Farben: #0d0d0d bg | #c084fc accent | #7c3aed accent-dark
   ============================================================ */

/* ----------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (leicht anpassbar)
   ---------------------------------------------------------- */
:root {
  --accent:          #c084fc;
  --accent-dark:     #7c3aed;
  --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  --bg-body:         #0d0d0d;
  --bg-section:      #111111;
  --bg-card:         #1a1a1a;
  --bg-accent-tint:  #1f0a35;
  --text-main:       #cccccc;
  --text-muted:      #888888;
  --text-heading:    #ffffff;
  --border-subtle:   #222222;
  --border-card:     #2a2a2a;
  --radius-card:     8px;
  --radius-btn:      4px;
  --transition:      0.25s ease;
}

/* ----------------------------------------------------------
   2. GLOBAL BASE
   ---------------------------------------------------------- */
body {
  background-color: var(--bg-body) !important;
  color: var(--text-main) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading) !important;
  letter-spacing: -0.02em;
}

a {
  color: var(--accent);
  transition: color var(--transition);
}
a:hover {
  color: var(--accent-dark);
}

/* ----------------------------------------------------------
   3. HEADER
   ---------------------------------------------------------- */
#header-outer {
  background-color: rgba(13, 13, 13, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle) !important;
}

#header-outer.transparent {
  background-color: transparent !important;
  border-bottom: none !important;
}

#header-outer nav > ul > li > a {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#header-outer nav > ul > li > a:hover,
#header-outer nav > ul > li.sfHover > a {
  color: var(--accent) !important;
}

/* Dropdown */
#header-outer ul.sf-menu ul {
  background: #1a1a1a !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
}

#header-outer ul.sf-menu ul li a {
  color: #cccccc !important;
  transition: color var(--transition), background var(--transition);
}

#header-outer ul.sf-menu ul li a:hover {
  color: var(--accent) !important;
  background: var(--bg-accent-tint) !important;
}

/* Mobile Hamburger */
#mobile-menu-trigger span,
#mobile-menu-trigger span:before,
#mobile-menu-trigger span:after {
  background-color: #ffffff !important;
}

/* ----------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------- */
.nectar-button,
a.nectar-button,
.vc_btn3 {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: opacity var(--transition), transform var(--transition) !important;
}

.nectar-button:hover,
a.nectar-button:hover,
.vc_btn3:hover {
  opacity: 0.85 !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Outline Variante */
.nectar-button.see-through,
a.nectar-button.see-through {
  background: transparent !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent) !important;
}

.nectar-button.see-through:hover,
a.nectar-button.see-through:hover {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ----------------------------------------------------------
   5. HERO / NECTAR SLIDER
   ---------------------------------------------------------- */
.nectar-slider-wrap .nectar-el-before-heading {
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
}

.nectar-slider-wrap h2.title {
  font-size: clamp(2rem, 5vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
}

.nectar-slider-wrap p.sub {
  color: rgba(255,255,255,0.75) !important;
  font-size: 1.1rem !important;
}

/* ----------------------------------------------------------
   6. SERVICE CARDS / WPBAKERY COLUMNS
   ---------------------------------------------------------- */
.wpb_column .wpb_wrapper > div[style*="background:#1a1a1a"],
.wpb_column .wpb_wrapper > div[style*="background: #1a1a1a"] {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.wpb_column .wpb_wrapper > div[style*="background:#1a1a1a"]:hover,
.wpb_column .wpb_wrapper > div[style*="background: #1a1a1a"]:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(124, 58, 237, 0.2);
}

/* Service Card Labels */
p[style*="color:#c084fc"],
p[style*="color: #c084fc"] {
  font-weight: 600;
}

/* ----------------------------------------------------------
   7. PORTFOLIO
   ---------------------------------------------------------- */
.portfolio-items .work-item .work-info-bg {
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(124, 58, 237, 0.88) 100%
  ) !important;
}

.portfolio-items .work-item .work-info h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.portfolio-items .work-item .work-info span {
  color: rgba(255,255,255,0.7) !important;
}

.portfolio-items .work-item img {
  transition: transform 0.5s ease !important;
}

.portfolio-items .work-item:hover img {
  transform: scale(1.06) !important;
}

/* Portfolio Filter */
#portfolio-filter-nav li a {
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

#portfolio-filter-nav li a:hover,
#portfolio-filter-nav li.active a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ----------------------------------------------------------
   8. ICON LIST (Nectar)
   ---------------------------------------------------------- */
.nectar-icon-list .icon-holder {
  background: var(--bg-accent-tint) !important;
  border-color: var(--accent-dark) !important;
}

.nectar-icon-list .icon-holder i,
.nectar-icon-list .icon-holder span {
  color: var(--accent) !important;
}

.nectar-icon-list .nectar-icon-list-item h4 {
  color: var(--text-heading) !important;
}

.nectar-icon-list .nectar-icon-list-item p {
  color: var(--text-muted) !important;
}

/* Numerische Icons */
.nectar-icon-list .icon-holder .numerical {
  color: var(--accent) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
}

/* ----------------------------------------------------------
   9. INFO BOXES (Nectar)
   ---------------------------------------------------------- */
.nectar_info_box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-card) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.nectar_info_box:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 32px rgba(124,58,237,0.18) !important;
}

.nectar_info_box .icon-holder {
  background: var(--bg-accent-tint) !important;
}

.nectar_info_box .icon-holder i {
  color: var(--accent) !important;
}

.nectar_info_box h3 {
  color: var(--text-heading) !important;
}

/* ----------------------------------------------------------
   10. PREISTABELLEN / PRICING
   ---------------------------------------------------------- */
div[style*="background:#1f0a35"],
div[style*="background: #1f0a35"] {
  box-shadow: 0 0 0 2px var(--accent),
              0 24px 56px rgba(124,58,237,0.25) !important;
}

/* ----------------------------------------------------------
   11. FORMULAR / CONTACT FORM 7
   ---------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-btn) !important;
  color: var(--text-main) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  transition: border-color var(--transition) !important;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.15) !important;
}

.wpcf7 input[type="submit"] {
  background: var(--accent-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: var(--radius-btn) !important;
  cursor: pointer !important;
  transition: opacity var(--transition), transform var(--transition) !important;
}

.wpcf7 input[type="submit"]:hover {
  opacity: 0.85 !important;
  transform: translateY(-2px) !important;
}

/* ----------------------------------------------------------
   12. FOOTER
   ---------------------------------------------------------- */
#footer-outer {
  background-color: var(--bg-body) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

#footer-outer .col {
  color: var(--text-muted) !important;
}

#footer-outer h4 {
  color: var(--text-heading) !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 18px !important;
}

#footer-outer a {
  color: var(--text-muted) !important;
  transition: color var(--transition) !important;
}

#footer-outer a:hover {
  color: var(--accent) !important;
}

#copyright {
  background-color: #0a0a0a !important;
  border-top: 1px solid var(--border-subtle) !important;
  color: #555555 !important;
}

#copyright a {
  color: #666666 !important;
}

#copyright a:hover {
  color: var(--accent) !important;
}

/* ----------------------------------------------------------
   13. SCROLL-TO-TOP BUTTON
   ---------------------------------------------------------- */
#to-top {
  background: var(--accent-gradient) !important;
  border-radius: 50% !important;
}

#to-top:hover {
  opacity: 0.85 !important;
  transform: translateY(-3px) !important;
}

/* ----------------------------------------------------------
   14. PAGE TRANSITIONS & LOADING
   ---------------------------------------------------------- */
#ajax-loading-screen {
  background-color: var(--bg-body) !important;
}

/* ----------------------------------------------------------
   15. HIGHLIGHTED TEXT (Nectar)
   ---------------------------------------------------------- */
.nectar-highlighted-text .highlight-wrap span {
  background-image: var(--accent-gradient) !important;
}

/* ----------------------------------------------------------
   16. SECTION TRENNER / DIVIDER
   ---------------------------------------------------------- */
.wpb_row + .wpb_row {
  border-top: 0 !important;
}

.nectar-divider {
  border-color: var(--border-subtle) !important;
}

/* ----------------------------------------------------------
   17. RESPONSIVE ANPASSUNGEN
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }

  .wpb_column { margin-bottom: 24px; }

  #header-outer {
    background-color: rgba(13, 13, 13, 0.98) !important;
  }
}

@media (max-width: 480px) {
  .nectar-button {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }
}