@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* ============================================================
   OPAL COURSE DESIGN CSS
   Strukturierte & kommentierte Version (nach Themen/Funktionen)
   ------------------------------------------------------------
   Autor*in: [Alina und Christian]
   Beschreibung: Visuelles Design & Icon-Styling für OPAL-Kurs
   ============================================================ */


/* ============================================================
   1. GRUNDLEGENDE EINSTELLUNGEN & FARBEN
   ============================================================ */

/* Hauptfarben:
   - Blau (#003399 / #005EA8): Hauptfarbe für Text & Icons
   - Gelb (#FFCC00): Hover / aktive Elemente
   - Türkis (#008079): Navigation / Header
*/
h1 {
  color: #003399;
}

a, .btn {
  color: #003399;
}

a:hover, a:focus, a:active,
.btn:hover, .btn:focus, .btn:active {
  color: #FFCC00;
}

.content-preview-title {
  color: #005EA8 !important;
}


/* ============================================================
   2. NAVIGATION & BUTTONS
   ============================================================ */

.nav-container {
  display: none;
}

.page .mobile-page-header,
.nav-container,
.nav-container + .clearfix {
  background-color: #008079;
}


/* ============================================================
   3. MENÜ / BAUMSTRUKTUR (JSTREE)
   ============================================================ */

.jstree-default > .jstree-container-ul {
  background: #fff;
  color: #003399;
}

.jstree-default .jstree-node a:hover,
.jstree-default .jstree-node a:focus,
.jstree-default .jstree-node a:active {
  color: #FFCC00;
}

.jstree-default .jstree-clicked {
  background-color: transparent !important;
  color: #FFCC00 !important;
}


/* ============================================================
   4. ICONS VOR MENÜPUNKTEN (FONT AWESOME)
   ============================================================ */

/* Font Awesome 6 Free per CDN */

/* Unit 1 */

/* === Introductory Video === */
#id1755657489231149012 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1755657489231149012 > a.jstree-clicked .jstree-icon::before,
#id1755657489231149012 > a:hover .jstree-icon::before {
  color: #FFCC00;
}

/* === Informational Text === */
#id1749695604881632007 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f05a"; /* fa-circle-info */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1749695604881632007 > a.jstree-clicked .jstree-icon::before,
#id1749695604881632007 > a:hover .jstree-icon::before {
  color: #FFCC00 !important;
}

/* === Informational Text (PDF) === */
#id1749782134008245004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c1"; /* file-pdf */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1749782134008245004 > a.jstree-clicked .jstree-icon::before,
#id1749782134008245004 > a:hover .jstree-icon::before {
  color: #FFCC00 !important;
}

/* === Learning Video === */
#id1749782134066035004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1749782134066035004 > a.jstree-clicked .jstree-icon::before,
#id1749782134066035004 > a:hover .jstree-icon::before {
  color: #FFCC00;
}


/* Unit 2 */

/* === Introductory Video === */
#id1757558283844435004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1757558283844435004 > a.jstree-clicked .jstree-icon::before,
#id1757558283844435004 > a:hover .jstree-icon::before {
  color: #FFCC00;
}


/* === EQAVET in Action === */
#id1757558284278472004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1757558284278472004 > a.jstree-clicked .jstree-icon::before,
#id1757558284278472004 > a:hover .jstree-icon::before {
  color: #FFCC00;
}

/* Unit 3 */

/* === Introductory Video === */
#id1758249657630355003 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1758249657630355003 > a.jstree-clicked .jstree-icon::before,
#id1758249657630355003 > a:hover .jstree-icon::before {
  color: #FFCC00;
}

/* === Sharing of Good Practices === */
#id1758767834153016003 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1758767834153016003 > a.jstree-clicked .jstree-icon::before,
#id1758767834153016003 > a:hover .jstree-icon::before {
  color: #FFCC00;
}


/* Unit 4 */

/* === Introductory Video === */
#id1757558284841816004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1757558284841816004 > a.jstree-clicked .jstree-icon::before,
#id1757558284841816004 > a:hover .jstree-icon::before {
  color: #FFCC00;
}

/* === Learning Video === */
#id1759113373435744006 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f1c8"; /* file video */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1759113373435744006 > a.jstree-clicked .jstree-icon::before,
#id1759113373435744006 > a:hover .jstree-icon::before {
  color: #FFCC00;
}


/* === About EUVET-P === */
#id1749695594913795004 > a .jstree-icon::before {
  color: #005EA8;
  content: "\f7a2"; /* earth-europe */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}
#id1749695594913795004 > a.jstree-clicked .jstree-icon::before,
#id1749695594913795004 > a:hover .jstree-icon::before {
  color: #FFCC00;
}


/* ============================================================
   5. LAYOUT & HINTERGRUND
   ============================================================ */

#wrap {
  background: url(html_OPAL.png) no-repeat 0 0;
  background-attachment: fixed;       /* fixiert beim Scrollen */
  background-position: center center; /* zentriert das Bild */
  background-repeat: no-repeat;       /* keine Wiederholung */
  background-size: cover;             /* füllt gesamten Bereich */
}

.logo {
  background-image: url(euvetp_eu_combined.png);
  background-size: 250px;
  width: 300px;
}


/* ============================================================
   6. RESSOURCEN & INHALTSVORSCHAU
   ============================================================ */

.root .resource-details .content-preview-author,
.root .resource-details .content-preview-main > small,
.root .resource-details .content-preview-info,
.root .resource-details .repo-desc {
  display: none;
}


/* ============================================================
   ENDE DER DATEI
   ============================================================ */