/* ------------------------------------------------------------------
   Custom-Overrides für HelixUltimate (EBDN)
   Übertragen aus dem alten docomatic-Template, das beim Wechsel auf
   HelixUltimate nicht mehr geladen wird.
   Wird automatisch geladen (index.php: $theme->add_css('custom.css')).
   ------------------------------------------------------------------ */

/* === Linker Kategorie-Baum (mod_vina_treeview_content) === */

/* Alte jQuery-Treeview-Sprites (Linien + +/- Kästchen) entfernen */
div.vina-treeview-content .treeview .hitarea {
    background: none !important;
    height: 16px;
    width: 16px;
    margin-left: -16px;
    float: left;
    cursor: pointer;
}
div.vina-treeview-content .treeview li { background: none !important; }
div.vina-treeview-content .treeview li.lastExpandable { background-image: none !important; }

/* Auf-/Zuklappen als FontAwesome-Chevrons statt Sprite-Icons */
.hitarea.collapsable-hitarea::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f107" !important;   /* chevron-down */
    font-weight: 600;
}
.hitarea.expandable-hitarea::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f105" !important;   /* chevron-right */
    font-weight: 600;
}
/* Chevron vertikal an der ersten Textzeile ausrichten (gleiche line-height
   wie die Links; -0.25em war für die alte enge 14px-Zeile). */
.hitarea.expandable-hitarea,
.hitarea.collapsable-hitarea {
    margin-top: 2px !important;
    height: auto !important;
    line-height: 1.35 !important;
}

/* Zeilenhöhe/Umbruch-Abstand der Baum-Links.
   Früher line-height:14px (enger als die Schriftgröße) → mehrzeilige Titel
   (lange "Changelog for Engineering Base …"-Namen) liefen ineinander.
   Jetzt relativer Wert für lesbaren Umbruch + etwas Luft zwischen Einträgen.
   Betrifft nur die linken vina-Bäume (div.vina-treeview-content). */
div.vina-treeview-content li > a,
div.vina-treeview-content li > a .catTitle,
.vina_tree_css ul > li > a {
    line-height: 1.35 !important;
    color: #0097ec !important;
}
div.vina-treeview-content .treeview li {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
div.vina-treeview-content li > a:hover,
.vina_tree_css ul > li > a.hover {
    color: #252f45 !important;
}

/* === EBDN-Inhaltstabellen (Kategorie-Beschreibungen & Artikel) ===
   Die Tabellen stehen als <table class="EBDN_table"> bzw. "articleTable"
   in den Inhalten. */
.EBDN_table, .articleTable {
    font-size: 16px !important;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    border-width: 2px;
    border-style: solid;
    border-color: #CCC;
    width: 100%;
    table-layout: fixed;
}
.EBDN_table tr, .EBDN_table td, .EBDN_table th,
.articleTable tr, .articleTable td, .articleTable th {
    border-width: 1px;
    border-style: solid;
    border-color: #CCC;
    padding-left: 5px;
    padding-right: 5px;
}
/* Schmale erste Spalte (Icon-/Type-Spalte) */
.EBDN_table tr th:nth-child(1) { width: 10%; }
/* Kopfzeile grau + fett */
.EBDN_table tr:first-child, .articleTable tr:first-child {
    background-color: #e5e5e5 !important;
    font-weight: 700;
    font-style: normal;
}
/* Zebra-Streifen für Artikel-Tabellen */
.articleTable tr:nth-child(odd)  { background-color: rgba(0,151,236,0.3); }
.articleTable tr:nth-child(even) { background-color: rgba(255,255,255,1); }


/* === EasyBlog-Showcase-Slider: NUR auf der latest-Seite hell ===
   Der dunkle Textblock stammt aus dem globalen Inline-Design
   (.eb-gallery-box .eb-gallery-body{background:rgba(26,37,53,.85)}).
   Höhere Spezifität (body.view-latest + 2 Klassen) schlägt die Inline-Regel.
   Der Homepage-Slider (view-wrapper) bleibt UNBERÜHRT dunkel. */
/* Textblock hell (weißer Grund, dunkle Schrift); Layout bleibt Standard:
   Textblock rechts (50%), Bild-Cover links sichtbar. Der Placeholder für
   Posts OHNE Bild wird über den Modul-Parameter show_cover_placeholder=Nein
   entfernt (nicht per CSS, da das Cover ein Inline-!important-Bild ist). */
body.view-latest .eb-gallery-box .eb-gallery-body {
    background: #ffffff !important;
}
/* latest: Slides OHNE echtes Cover (EasyBlog rendert placeholder-image.png):
   Bild-Bereich ausblenden + Textblock über die volle Breite.
   Slides MIT echtem Bild behalten das Standard-Layout (Bild links, Text rechts). */
body.view-latest .eb-gallery-box:has(.eb-post-image img[src*="placeholder-image"]) .eb-showcase-thumb,
body.view-latest .eb-gallery-box:has(.eb-post-image img[src*="placeholder-image"]) .eb-post-image {
    display: none !important;
}
body.view-latest .eb-gallery-box:has(img[src*="placeholder-image"]) .eb-gallery-body {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    padding-left: 20px !important;
}
/* Autor-Minibild im Slider ausblenden */
body.view-latest .eb-gallery-body > img,
body.view-latest .eb-gallery-body .o-avatar,
body.view-latest .eb-gallery-body [class*="avatar"] {
    display: none !important;
}
body.view-latest .eb-gallery-box .eb-gallery-title,
body.view-latest .eb-gallery-box .eb-gallery-title a,
body.view-latest .eb-gallery-box .eb-gallery-content,
body.view-latest .eb-gallery-box .eb-gallery-content p {
    color: #1a2535 !important;
}
body.view-latest .eb-gallery-box .eb-gallery-meta,
body.view-latest .eb-gallery-box .eb-gallery-meta a,
body.view-latest .eb-gallery-box .eb-gallery-meta span {
    color: #0097ec !important;
}


/* === EasyBlog-Kategorien-Baum in der RECHTEN Spalte (#sp-right) ===
   Betrifft NUR das Kategorie-Menü rechts (mod_easyblogcategories, tree-Layout;
   z.B. Blogs-Seite / "Module Documentation"). Die LINKE Spalte (#sp-left) und
   das vina-Treeview auf den com_content-Seiten bleiben komplett unberührt.
   Wünsche: (1) Rahmen entfernen, (2) bündig oben/links anschließen,
   (3) Unterordner weniger einrücken (Text war sonst so gequetscht, dass
   Wörter mittendrin umbrachen). */

/* (1)+(2) Card-Rahmen/Hintergrund weg + bündig – sowohl am HU-sp-module-Chrome
   als auch am EasyBlog-Wrapper (#eb.mod_easyblogcategories) neutralisieren. */
#sp-right .sp-module:has(.mod_easyblogcategories),
#sp-right .mod_easyblogcategories {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* (3) Einrückung der Unterordner reduzieren. Original: INLINE
   padding-left = Ebene × 30px auf einer FLACHEN DOM-Struktur (kein <ul>-Nesting)
   → per Attribut-Selektor auf den konkreten Inline-Wert gezielt ~halbieren.
   Hierarchie bleibt erhalten, nur enger. */
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 30px"]  { padding-left: 14px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 60px"]  { padding-left: 28px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 90px"]  { padding-left: 42px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 120px"] { padding-left: 56px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 150px"] { padding-left: 70px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 180px"] { padding-left: 84px !important; }
#sp-right .mod_easyblogcategories .eb-mod-item [style*="padding-left: 210px"] { padding-left: 98px !important; }

/* Wort-Umbruch mitten im Wort verhindern (durch weniger Einrückung ist jetzt
   genug Platz vorhanden). */
#sp-right .mod_easyblogcategories .eb-mod-media-title,
#sp-right .mod_easyblogcategories .eb-mod-media-body {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}


/* === Komento-Kommentar-Button ("Submit Comment") auf AUCOTEC-Blau ===
   Kommentarsystem auf den EasyBlog-Einträgen = KOMENTO, gerendert von FOUNDRY 2:
   <button class="o-btn o-btn--primary …" data-kt-submit> im Foundry-Wrapper #fd
   (NICHT .btn/.btn-primary, NICHT #kt — laut DevTools!). Farbe stammt aus
   `#fd .o-btn--primary` (Foundry-Variable --fd-primary-500). Nur den Submit-Button
   (data-kt-submit) übersteuern; der Cancel-Button (o-btn--default / data-kt-cancel)
   bleibt unberührt. Höhere Spezifität (1,3,0) + !important schlägt die Foundry-Regel. */
#fd .o-btn.o-btn--primary[data-kt-submit] {
    background-color: #0097ec !important;
    border-color: #0097ec !important;
    color: #ffffff !important;
}
#fd .o-btn.o-btn--primary[data-kt-submit]:hover,
#fd .o-btn.o-btn--primary[data-kt-submit]:focus,
#fd .o-btn.o-btn--primary[data-kt-submit]:active {
    background-color: #0078c0 !important;
    border-color: #0078c0 !important;
    color: #ffffff !important;
}


/* === EasyDiscuss-Komponente: horizontales Padding ===
   Auf den EasyDiscuss-Seiten (categories/listings/entry) klebten Inhalt,
   Karten und Toolbar-Icons direkt an den Rändern. `#ed.type-component` trifft
   NUR die Komponente — NICHT das Homepage-Q&A-Modul (dessen #ed hat kein
   `type-component`) und nicht #sp-right/vina. */
/* EasyDiscuss-Komponente (categories/listings/entry): Karten-Padding.
   Die Corporate-Regel `#ed .o-card{padding:0 0 .75rem 0}` (fürs Homepage-Q&A-
   MODUL gedacht) nahm auch den Kategorie-/Post-Karten auf den KOMPONENTEN-Seiten
   das horizontale Padding → Text/Icons klebten an den Kartenrändern. Nur für
   `#ed.type-component` wieder Padding geben (Modul #ed ohne type-component bleibt
   unberührt). Höhere Spezifität (1,2,0) schlägt die Corporate-Regel (1,1,0). */
#ed.type-component .o-card {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* EasyDiscuss "Ask a question"-Button (rechte Spalte, Modul #ed.ed-mod--ask):
   <a class="o-btn o-btn--primary">. Hintergrund ist AUCOTEC-Blau (--si-primary),
   aber die Corporate-Regel `html body #ed a{color:#0097ec}` färbt den Link-Text
   ebenfalls blau → blau auf blau. Fix: Schrift weiß (Spezifität 1,2,0 schlägt
   die Corporate-Regel 1,0,3). */
#ed .o-btn.o-btn--primary,
#ed .o-btn.o-btn--primary:visited,
#ed .o-btn.o-btn--primary:hover,
#ed .o-btn.o-btn--primary:focus {
    color: #ffffff !important;
}

/* === EasyDiscuss: FontAwesome-Icons wiederherstellen ===
   Die Corporate-Regel `#ed *{font-family:'Titillium Web'!important}` (für die
   TEXT-Schrift gewollt) überschrieb auch die Icon-Schrift der <i class="fa …">
   → Glyphen wurden zu Kästchen (□), u.a. die Dropdown-Pfeile auf den Filter-
   Buttons (All Posts / Insert filter / Newest First). Font-Family für die Icon-
   Klassen wieder auf FontAwesome setzen — FA6+FA5-Fallback, da beide geladen
   sind (Template=FA6, EasyDiscuss/Foundry=FA5). `font-weight` wird von der
   Corporate-Regel NICHT angetastet (fas/fa=900, far=400) → bleibt korrekt.
   Höhere Spezifität (1,1,0) schlägt `#ed *` (1,0,0). */
#ed .fa,
#ed .fas,
#ed .far,
#ed .fdi {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}
#ed .fab {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}
/* EasyDiscuss Raty-Bewertungssterne nutzen eine EIGENE Icon-Font `raty-font`
   (Content \e800/\e801, keine FA-Codepoints) — ebenfalls von `#ed *` auf
   Titillium gezwungen → Kästchen. Separat wiederherstellen (nicht in die FA-
   Fallback-Liste mischen, sonst Codepoint-Kollision mit FA-Glyphen). */
#ed .raty,
#ed [class^="raty-"],
#ed [class*=" raty-"] {
    font-family: "raty-font" !important;
}


/* === EasySocial: Primary-Buttons auf CI-Blau (weiße Schrift) ===
   `#es .btn-es-primary` wird in mehreren EasySocial-CSS widersprüchlich gestylt
   (style.min.css: weiß/Blau #4a90e2; objects.min.css: blaue Schrift #428bca auf
   hellem Verlauf) → je nach Ladereihenfolge blau-auf-blau / unlesbar (z.B. der
   Friend-Request "Accept"-Button = <a class="btn btn-es-primary … accept-friend">).
   Einheitlich AUCOTEC-Blau + weiße Schrift; Verlauf/Text-Schatten entfernen.
   Höhere Spezifität (#es .btn.btn-es-primary = 1,2,0) schlägt die Konflikt-Regeln
   (1,1,0). Outline-Buttons (.btn-es-primary-o) und Reject (.btn-es) bleiben. */
#es .btn.btn-es-primary,
#es .btn.btn-es-primary:visited {
    background-color: #0097ec !important;
    background-image: none !important;
    border-color: #0097ec !important;
    color: #ffffff !important;
    text-shadow: none !important;
}
#es .btn.btn-es-primary:hover,
#es .btn.btn-es-primary:focus,
#es .btn.btn-es-primary:active {
    background-color: #0078c0 !important;
    background-image: none !important;
    border-color: #0078c0 !important;
    color: #ffffff !important;
}

/* === EasySocial-Suchfilter: Label "Question&Answers" wurde abgeschnitten ===
   Das Filter-Dropdown ist nur 262px breit, jedes Item 50% (2 Spalten). Das
   Label "Question&Answers" ist EIN Wort ohne Leerzeichen → nicht umbrechbar →
   passt nicht in die halbe Breite und wird abgeschnitten. Dropdown verbreitern
   (beide Spalten fassen dann die Labels); als Fallback langes Wort umbrechen. */
#es .mod-es-search__dropdown {
    width: 300px !important;
}
#es .mod-es-search__filter-item label {
    overflow-wrap: anywhere;
}


/* === Joomla-Artikel Edit-/"Checked out"-Button (nur Editor-Ansicht) auf CI-Blau ===
   HelixUltimate stylt den Artikel-Aktionsbutton via `.article-details
   .article-can-edit a` mit background:#2a61c9 (indigo) + color:#fff — ABER die
   Corporate-Regel `a{color:#0097ec !important}` überschreibt die Schrift → blau
   auf blau (laut DevTools). Hintergrund auf AUCOTEC-Blau, Schrift weiß mit
   höherer Spezifität (.article-details .article-can-edit a = 0,3,1) als die
   `a`-Regel (0,0,1). Wrapper ist `.article-can-edit` (NICHT `.icons`). */
.article-details .article-can-edit a,
.article-details .article-can-edit a:visited {
    background: #0097ec !important;
    border-color: #0097ec !important;
    color: #ffffff !important;
}
.article-details .article-can-edit a:hover,
.article-details .article-can-edit a:focus,
.article-details .article-can-edit a:active {
    background: #0078c0 !important;
    border-color: #0078c0 !important;
    color: #ffffff !important;
}
.article-details .article-can-edit a * {
    color: #ffffff !important;
}