/* ============================================================
   campus-ew.de — Mega Menü Custom Styles
   Plugin:  Divi Torque Pro 1.6.2
   Prefix:  cew-
   Autor:   Jonas / Campus-EW GmbH
   Version: 1.0.0
   ============================================================

   HINWEIS: Alle Variablen im :root-Block an dein Design
   anpassen, bevor du die Datei live stellst.
   ============================================================ */

/* ============================================================
   1. CSS-Variablen (Design-Tokens)
   ============================================================ */
:root {
  /* Farben — campus-ew.de Brand CI */
  --cew-primary:       #035458;   /* campus-ew Teal (Primärfarbe) */
  --cew-primary-dark:  #023d40;   /* Teal dunkel (Hover) */
  --cew-accent:        #FBB000;   /* campus-ew Gold (Akzent) */
  --cew-accent-dark:   #e0a000;   /* Gold dunkel (Hover) */
  --cew-text:          #070707;   /* Haupttextfarbe */
  --cew-text-muted:    #666666;   /* Sekundärtext */
  --cew-bg-dropdown:   #FFFFFF;   /* Dropdown-Hintergrund */
  --cew-bg-hover:      #EEF5F5;   /* Teal-getöntes Hover */
  --cew-border:        #e8ecf0;   /* Trennlinien */
  --cew-col-heading:   #035458;   /* Spalten-Überschriften */

  /* Typografie */
  --cew-font-heading:  700 12px/1 sans-serif;
  --cew-font-link:     400 14px/1.4 sans-serif;
  --cew-font-desc:     400 12px/1.4 sans-serif;

  /* Abstände */
  --cew-dropdown-gap:  40px;      /* Abstand Dropdown vom Header */
  --cew-col-gap:       32px;      /* Abstand zwischen Spalten */
  --cew-link-pad:      6px 8px;   /* Padding pro Link-Item */

  /* Schatten & Radius */
  --cew-shadow:        0 8px 32px rgba(3,84,88,0.10);
  --cew-radius:        8px;

  /* Animationen */
  --cew-transition:    0.2s ease;
}


/* ============================================================
   2. Mega Menu Dropdown — Container
   Divi Torque Pro gibt der Dropdown-Ul die Klasse
   .mega-menu-content oder wraps sie in .dtp-mega-wrap.
   Falls deine Installation andere Klassen nutzt, prüfe
   im Browser-Devtools und passe hier an.
   ============================================================ */

/* Haupt-Wrapper des Dropdowns */
#main-header .nav li.mega-menu > .sub-menu,
#main-header .nav li.dtp-mega-menu > .sub-menu,
.et_pb_menu .nav li.mega-menu > .sub-menu {
  display:          none;           /* Standardmäßig versteckt */
  position:         fixed !important; /* Volle Breite relativ zum Viewport */
  left:             0 !important;
  right:            0 !important;
  width:            100% !important;
  max-width:        100% !important;
  top:              var(--cew-dropdown-gap) !important;
  background:       var(--cew-bg-dropdown);
  box-shadow:       var(--cew-shadow);
  border-top:       3px solid var(--cew-primary);
  border-radius:    0 0 var(--cew-radius) var(--cew-radius);
  padding:          0;
  z-index:          9999;
  animation:        cewDropdownIn var(--cew-transition);
}

/* Dropdown sichtbar bei Hover */
#main-header .nav li.mega-menu:hover > .sub-menu,
#main-header .nav li.dtp-mega-menu:hover > .sub-menu,
.et_pb_menu .nav li.mega-menu:hover > .sub-menu {
  display: block;
}

/* Divi Builder-Inhalt im Dropdown: Breite zurücksetzen */
#main-header .nav li.mega-menu > .sub-menu .et_pb_section,
#main-header .nav li.mega-menu > .sub-menu .et_pb_row {
  max-width:        1200px;
  margin:           0 auto;
  padding-top:      28px;
  padding-bottom:   28px;
}

/* Spalten im Mega Menu */
#main-header .nav li.mega-menu > .sub-menu .et_pb_column {
  padding:          0 var(--cew-col-gap) 0 0;
  border-right:     1px solid var(--cew-border);
}

#main-header .nav li.mega-menu > .sub-menu .et_pb_column:last-child {
  padding-right:    0;
  border-right:     none;
}


/* ============================================================
   3. Spalten-Überschriften
   CSS-Klasse im Divi Builder beim Text-/Heading-Modul
   unter "CSS-Klasse" eintragen: cew-mega-col-heading
   ============================================================ */
.cew-mega-col-heading,
.cew-mega-col-heading h4,
.cew-mega-col-heading p {
  font:             var(--cew-font-heading);
  color:            var(--cew-col-heading) !important;
  text-transform:   uppercase;
  letter-spacing:   0.08em;
  margin-bottom:    12px !important;
  padding-bottom:   10px;
  border-bottom:    2px solid var(--cew-accent);
  display:          block;
}


/* ============================================================
   4. Link-Items — Text-Modul Ansatz (<a class="cew-mega-link">)
   Im Divi Text-Modul per HTML einfügen.
   ============================================================ */

/* Basis: Link als Flex-Zeile */
a.cew-mega-link {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          5px 8px;
  min-height:       32px;
  border-radius:    5px;
  text-decoration:  none;
  color:            var(--cew-text);
  transition:       background var(--cew-transition),
                    padding-left var(--cew-transition);
  margin-bottom:    2px;
}

a.cew-mega-link:hover {
  background:       var(--cew-bg-hover);
  padding-left:     14px;
}

/* Titel-Span */
a.cew-mega-link .dd-link-title {
  font-size:        13.5px;
  font-weight:      500;
  color:            var(--cew-text);
  transition:       color var(--cew-transition);
  display:          block;
  line-height:      1.3;
}

a.cew-mega-link:hover .dd-link-title {
  color:            var(--cew-primary);
}

/* Beschreibungs-Span */
a.cew-mega-link .dd-link-desc {
  font-size:        11.5px;
  color:            var(--cew-text-muted);
  display:          block;
  line-height:      1.3;
  margin-top:       1px;
}

/* Text-Container (Titel + Beschreibung übereinander) */
a.cew-mega-link .cew-link-text {
  display:          flex;
  flex-direction:   column;
  flex:             1;
}

/* Auto-Pfeil wenn KEIN Icon vorhanden (:has mit breiter Browserunterstützung) */
a.cew-mega-link:not(:has(.cew-link-icon))::before {
  content:          '›';
  color:            var(--cew-primary);
  font-size:        20px;
  font-weight:      300;
  line-height:      1;
  flex-shrink:      0;
  opacity:          0.45;
  transition:       opacity var(--cew-transition);
}

a.cew-mega-link:not(:has(.cew-link-icon)):hover::before {
  opacity:          1;
}

/* SVG-Icon-Span */
.cew-link-icon {
  width:            18px;
  height:           18px;
  flex-shrink:      0;
  color:            var(--cew-primary);
  opacity:          0.75;
  display:          flex;
  align-items:      center;
  transition:       opacity var(--cew-transition);
}

.cew-link-icon svg {
  width:            18px;
  height:           18px;
}

a.cew-mega-link:hover .cew-link-icon {
  opacity:          1;
}

/* Divi Text-Modul: Standard-Margins entfernen */
.et_pb_text .cew-mega-link,
.et_pb_text_inner a.cew-mega-link {
  margin-bottom:    2px !important;
}

.et_pb_text_inner p { margin: 0 !important; }

/* Spalten-Heading im Text-Modul */
.et_pb_text_inner .cew-mega-col-heading,
.et_pb_text_inner h4.cew-mega-col-heading {
  font-size:        11px !important;
  font-weight:      700 !important;
  text-transform:   uppercase !important;
  letter-spacing:   .08em !important;
  color:            var(--cew-col-heading) !important;
  padding-bottom:   10px !important;
  border-bottom:    2px solid var(--cew-accent) !important;
  margin-bottom:    12px !important;
  margin-top:       0 !important;
}

/* Trennlinie zwischen Gruppen */
.cew-mega-divider-line {
  height:           1px;
  background:       var(--cew-border);
  margin:           10px 6px;
}


/* ============================================================
   4b. Link-Items — Blurb-Modul Ansatz
   CSS-Klasse am Blurb-Modul eintragen: cew-mega-link
   Divi Blurb: Icon Position "Links" empfohlen
   ============================================================ */

/* Kompakter Blurb-Wrapper */
.et_pb_blurb.cew-mega-link {
  margin-bottom:    2px !important;
  padding:          5px 8px !important;
  border-radius:    5px !important;
  background:       transparent !important;
  transition:       background var(--cew-transition),
                    padding-left var(--cew-transition);
}

.et_pb_blurb.cew-mega-link:hover {
  background:       var(--cew-bg-hover) !important;
  padding-left:     14px !important;
}

/* Blurb-Inhalt: Icon links, Text rechts */
.et_pb_blurb.cew-mega-link .et_pb_blurb_content {
  display:          flex !important;
  flex-direction:   row !important;
  align-items:      center !important;
  gap:              8px !important;
  text-align:       left !important;
}

/* Icon-Bereich: auf 20px schrumpfen */
.et_pb_blurb.cew-mega-link .et_pb_main_blurb_image {
  width:            20px !important;
  min-width:        20px !important;
  margin:           0 !important;
  line-height:      1 !important;
}

/* Divi ETModules / FontAwesome Icon (Buchstabe im Icon-Font) */
.et_pb_blurb.cew-mega-link .et-pb-icon {
  font-size:        20px !important;
  width:            20px !important;
  height:           20px !important;
  color:            var(--cew-primary) !important;
  opacity:          0.65;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  transition:       opacity var(--cew-transition);
}

.et_pb_blurb.cew-mega-link:hover .et-pb-icon {
  opacity:          1;
}

/* Bild-Icon (falls statt ETModules-Icon ein Bild verwendet wird) */
.et_pb_blurb.cew-mega-link .et_pb_blurb_image img,
.et_pb_blurb.cew-mega-link .et_pb_image_wrap img {
  width:            20px !important;
  height:           20px !important;
  margin:           0 !important;
  object-fit:       contain !important;
}

/* Text-Container */
.et_pb_blurb.cew-mega-link .et_pb_blurb_container {
  flex:             1 !important;
  padding:          0 !important;
  text-align:       left !important;
}

/* Titel — neuere Divi-Klasse + ältere Fallback-Klasse */
.et_pb_blurb.cew-mega-link .et_pb_module_header,
.et_pb_blurb.cew-mega-link .et_pb_main_blurb_title {
  font-size:        13.5px !important;
  font-weight:      500 !important;
  line-height:      1.3 !important;
  margin:           0 0 1px 0 !important;
  padding:          0 !important;
}

.et_pb_blurb.cew-mega-link .et_pb_module_header a,
.et_pb_blurb.cew-mega-link .et_pb_main_blurb_title a {
  color:            var(--cew-text) !important;
  text-decoration:  none !important;
  font-size:        13.5px !important;
  font-weight:      500 !important;
  transition:       color var(--cew-transition);
}

.et_pb_blurb.cew-mega-link:hover .et_pb_module_header a,
.et_pb_blurb.cew-mega-link:hover .et_pb_main_blurb_title a {
  color:            var(--cew-primary) !important;
}

/* Beschreibungstext */
.et_pb_blurb.cew-mega-link .et_pb_blurb_description {
  margin:           0 !important;
  padding:          0 !important;
}

.et_pb_blurb.cew-mega-link .et_pb_blurb_description p {
  font-size:        11.5px !important;
  color:            var(--cew-text-muted) !important;
  line-height:      1.3 !important;
  margin:           0 !important;
  padding:          0 !important;
}


/* ============================================================
   5. Spalten-Icon (Kategorie-Icon über dem Spalten-Titel)
   CSS-Klasse am Image-Modul: cew-mega-category-icon
   ============================================================ */
.cew-mega-category-icon img {
  width:            36px !important;
  height:           36px !important;
  margin-bottom:    8px;
  object-fit:       contain;
}


/* ============================================================
   6. CTA-Button im Mega Menu
   CSS-Klasse am Button-Modul: cew-mega-cta-btn
   ============================================================ */
.cew-mega-cta-btn .et_pb_button {
  background:       var(--cew-primary) !important;
  color:            #fff !important;
  border:           none !important;
  border-radius:    4px !important;
  font-size:        13px !important;
  font-weight:      600 !important;
  padding:          10px 20px !important;
  text-decoration:  none !important;
  display:          inline-block;
  transition:       background var(--cew-transition),
                    transform var(--cew-transition);
  width:            100%;
  text-align:       center;
  margin-top:       16px;
}

.cew-mega-cta-btn .et_pb_button:hover {
  background:       var(--cew-primary-dark) !important;
  transform:        translateY(-1px);
}

.cew-mega-cta-btn .et_pb_button::after {
  display:          none !important; /* Divi Pfeil-Icon entfernen */
}


/* ============================================================
   7. "Beraten lassen" — Top-Nav CTA-Button
   CSS-Klasse direkt am Menüpunkt unter Design > Menüs
   eintragen: cew-nav-cta
   ============================================================ */
#top-menu > li.cew-nav-cta > a,
.et_mobile_menu li.cew-nav-cta > a {
  background:       var(--cew-accent) !important;
  color:            #fff !important;
  border-radius:    4px !important;
  padding:          8px 18px !important;
  font-weight:      700 !important;
  text-decoration:  none !important;
  transition:       background var(--cew-transition),
                    transform var(--cew-transition);
  display:          inline-block;
  margin-left:      8px;
}

#top-menu > li.cew-nav-cta > a:hover {
  background:       #c98010 !important;
  transform:        translateY(-1px);
}


/* ============================================================
   8. Trennlinie / Divider in Mega Menu (optional)
   CSS-Klasse am Divider-Modul: cew-mega-divider
   ============================================================ */
.cew-mega-divider .et_pb_divider {
  border-color:     var(--cew-border) !important;
  margin:           12px 0 !important;
}


/* ============================================================
   9. "Alle Themenbereiche" — letzter Link in Spalte 4
   CSS-Klasse: cew-mega-all-link
   ============================================================ */
.cew-mega-all-link a,
.cew-mega-all-link .et_pb_main_blurb_title a {
  color:            var(--cew-primary) !important;
  font-weight:      600 !important;
  text-decoration:  none;
}

.cew-mega-all-link a:hover,
.cew-mega-all-link .et_pb_main_blurb_title a:hover {
  text-decoration:  underline;
}


/* ============================================================
   10. Einblend-Animation
   ============================================================ */
@keyframes cewDropdownIn {
  from {
    opacity:    0;
    transform:  translateY(-8px);
  }
  to {
    opacity:    1;
    transform:  translateY(0);
  }
}


/* ============================================================
   11. MOBILE-STYLES (max-width: 980px)
   Divi Breakpoint für Tablet/Mobile
   ============================================================ */
@media (max-width: 980px) {

  /* Mega Menu auf Mobile: kein Fixed, normaler Stack */
  #main-header .nav li.mega-menu > .sub-menu,
  #main-header .nav li.dtp-mega-menu > .sub-menu {
    position:     relative !important;
    top:          auto !important;
    left:         auto !important;
    width:        100% !important;
    box-shadow:   none !important;
    border-top:   none !important;
    border-radius: 0 !important;
    background:   #f8f9fc !important;
    padding:      0 !important;
    animation:    none !important;
  }

  /* Spalten auf Mobile: volle Breite, untereinander */
  #main-header .nav li.mega-menu > .sub-menu .et_pb_column,
  #main-header .nav li.mega-menu > .sub-menu .et_pb_column_1_4,
  #main-header .nav li.mega-menu > .sub-menu .et_pb_column_1_2 {
    width:        100% !important;
    padding:      0 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--cew-border);
  }

  /* Zeilen auf Mobile */
  #main-header .nav li.mega-menu > .sub-menu .et_pb_row {
    padding:      12px 0 !important;
    max-width:    100% !important;
  }

  /* Spalten-Überschriften auf Mobile: größer, besser klickbar */
  .cew-mega-col-heading,
  .cew-mega-col-heading h4,
  .cew-mega-col-heading p {
    font-size:    13px !important;
    padding:      12px 0 8px !important;
  }

  /* Link-Items auf Mobile: Touch-Targets 44px */
  .et_pb_blurb.cew-mega-link {
    padding:      8px 12px !important;
    min-height:   44px !important;
    display:      flex !important;
    align-items:  center !important;
  }

  .cew-mega-link .et_pb_main_blurb_title a,
  .cew-mega-link .et_pb_module_header a {
    font-size:    14px !important;
    min-height:   44px !important;
    display:      flex !important;
    align-items:  center !important;
  }

  /* CTA-Button auf Mobile: volle Breite */
  .cew-mega-cta-btn .et_pb_button {
    width:        100% !important;
    margin:       12px 0 !important;
    padding:      14px 20px !important;
    text-align:   center !important;
  }

  /* "Beraten lassen" auf Mobile */
  #top-menu > li.cew-nav-cta > a,
  .et_mobile_menu li.cew-nav-cta > a {
    display:      block !important;
    margin:       8px 16px !important;
    text-align:   center !important;
  }

  /* Icons auf Mobile verkleinern */
  .cew-mega-category-icon img {
    width:        28px !important;
    height:       28px !important;
  }

  .cew-mega-link .et_pb_blurb_image img {
    width:        16px !important;
    height:       16px !important;
  }
}


/* ============================================================
   12. TABLET-STYLES (981px – 1280px)
   ============================================================ */
@media (min-width: 981px) and (max-width: 1280px) {

  /* Auf Tablet: "Unsere Produkte" als 2×2 Grid statt 4 Spalten */
  #main-header .nav li.mega-menu > .sub-menu .et_pb_column_1_4 {
    width:        50% !important;
    margin-bottom: 16px;
  }

  /* Schriftgrößen leicht reduzieren */
  .cew-mega-link .et_pb_main_blurb_title a,
  .cew-mega-link .et_pb_module_header a {
    font-size:    13px !important;
  }

  .cew-mega-link .et_pb_blurb_description p {
    font-size:    11px !important;
  }
}