/* ============================================
   CGS IT Training — Slide Theme
   Central stylesheet for all slide decks.
   ============================================ */

/* ---- Colors ---- */
:root {
    --cgs-dark: #1a1a2e;
    --cgs-primary: #16213e;
    --cgs-accent: #0f3460;
    --cgs-highlight: #e94560;
    --cgs-light: #f5f5f5;
    --cgs-text: #2c3e50;
    --cgs-code-bg: #1e1e2e;
}

/* ---- Base ---- */
.reveal {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 30px;
    color: var(--cgs-text);
}

/* ---- Subtle background decoration for regular slides ---- */
.reveal .slides section:not(.section-slide) {
    background:
        /* Thin accent line top-right corner */
        linear-gradient(135deg, transparent 94%, rgba(15,52,96,0.04) 94%) no-repeat,
        /* Faint grid dots */
        radial-gradient(circle, rgba(15,52,96,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px;
}

/* Decorative corner accent — top-right geometric element */
.reveal .slides section:not(.section-slide)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background:
        linear-gradient(225deg, rgba(233,69,96,0.06) 0%, transparent 60%),
        linear-gradient(225deg, rgba(15,52,96,0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Bottom-left subtle line accent */
.reveal .slides section:not(.section-slide)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, rgba(15,52,96,0.08), transparent);
    pointer-events: none;
    z-index: 0;
}

/* ---- Headings ---- */
.reveal h1, .reveal h2, .reveal h3 {
    color: var(--cgs-dark);
    text-transform: none;
    letter-spacing: -0.02em;
}
.reveal h1 { font-size: 1.8em; }
.reveal h2 { font-size: 1.4em; margin-bottom: 0.6em; }
.reveal h3 { font-size: 1.1em; color: var(--cgs-accent); }

/* ---- Slide Layout: Header oben, Content vertikal zentriert ----
   PowerPoint-Stil: H2 sitzt immer oben an derselben Position,
   alle weiteren Elemente sind im verbleibenden Platz vertikal zentriert.

   Technik: Header absolute-positioned am Top (raus aus dem Flex-Flow),
   Section selbst ist Flex-Column mit justify-content:center, ein
   padding-top reserviert vertikalen Platz fuer den Header.
   So zentriert sich der Content automatisch im Rest des Slides.
*/
.reveal .slides section:not(.section-slide) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 72px;
    padding-bottom: 16px;
    /* min-height noetig damit justify-content:center Raum hat - Reveals
       scrollLayout setzt sonst hoehe = content-height (auto), und dann
       gibts nichts zu zentrieren. position WIRD NICHT ueberschrieben -
       Reveals position:absolute bleibt fuer Slide-Positioning. */
    min-height: 720px;
}
.reveal .slides section:not(.section-slide) > h1:first-child,
.reveal .slides section:not(.section-slide) > h2:first-child,
.reveal .slides section:not(.section-slide) > .slide-header:first-child {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 1;
}
/* Wenn der Slide-Header ein flex-Container ist (h2 + venn-mini),
   muss er trotz position:absolute korrekt seine Children layouten */
.reveal .slides section:not(.section-slide) > .slide-header:first-child {
    padding: 0 5%;
}

/* ---- Lists ---- */
.reveal ul, .reveal ol {
    text-align: left;
    display: block;
}
.reveal li {
    margin-bottom: 0.4em;
    line-height: 1.4;
}

/* ---- Title slide ---- */
.reveal .title-slide {
    text-align: center;
}
.reveal .title-slide h1 {
    font-size: 2.2em;
    color: var(--cgs-dark);
    border-bottom: 4px solid var(--cgs-highlight);
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: inline-block;
}
.reveal .title-slide h2 {
    font-size: 1.1em;
    color: #666;
    font-weight: 400;
}

/* ---- Tech logos on title slide ---- */
.reveal .tech-logos {
    display: flex;
    gap: 35px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}
.reveal .tech-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.reveal .tech-logo img {
    height: 48px;
    width: auto;
    box-shadow: none;
    border: none;
}
.reveal .tech-logo span {
    font-size: 0.45em;
    color: #999;
    font-weight: 500;
}

/* ---- Section divider slides ---- */
.reveal .section-slide {
    background: linear-gradient(135deg, var(--cgs-dark) 0%, var(--cgs-accent) 100%);
    /* Titel/Divider weiterhin vertikal zentriert (center:false in JS-Config
       wirkt sonst auch auf Section-Slides und verschiebt Titel an den Top).
       min-height: 720 noetig, sonst schrumpft Section auf Content-Hoehe
       und justify-content:center hat nichts zu zentrieren. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 720px;
}
.reveal .section-slide h1 {
    color: white;
    font-size: 2.4em;
    text-shadow: none;
}
.reveal .section-slide h2 {
    color: rgba(255,255,255,0.95);
    font-weight: 300;
}
.reveal .section-slide p {
    color: rgba(255,255,255,0.85);
    font-weight: 400;
}

/* ---- Line Awesome icons ---- */
.reveal .la, .reveal .las, .reveal .lab, .reveal .lar {
    margin-right: 6px;
    color: var(--cgs-accent);
    width: 1.2em;
    text-align: center;
    display: inline-block;
}
.reveal .icon-large {
    font-size: 1.6em;
    vertical-align: middle;
}

/* ---- Code ---- */
.reveal code {
    background: #e8e8e8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
.reveal pre {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-radius: 8px;
    width: 95%;
}
.reveal pre code {
    background: var(--cgs-code-bg);
    padding: 20px;
    font-size: 0.65em;
    line-height: 1.5;
    max-height: 480px;
    border-radius: 8px;
}

/* ---- Tables ---- */
.reveal table {
    font-size: 0.7em;
    border-collapse: collapse;
    margin: 0 auto;
}
.reveal table th {
    background: var(--cgs-dark);
    color: white;
    padding: 10px 16px;
    font-weight: 600;
}
.reveal table td {
    padding: 8px 16px;
    border: 1px solid #ddd;
}
.reveal table tr:nth-child(even) td {
    background: #f9f9f9;
}

/* ---- Blockquotes / callouts ---- */
.reveal blockquote {
    background: #f0f7ff;
    border-left: 5px solid var(--cgs-accent);
    padding: 15px 25px;
    font-style: normal;
    font-size: 0.85em;
    border-radius: 0 6px 6px 0;
    width: 85%;
    margin: 20px auto;
}

/* ---- Highlight box ---- */
.reveal .highlight-box {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left: 5px solid #ff9800;
    padding: 15px 25px;
    border-radius: 0 6px 6px 0;
    font-size: 0.85em;
    text-align: left;
}

/* ---- Two columns ---- */
.reveal .columns {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.reveal .columns > * {
    flex: 1;
}

/* ---- Badges ---- */
.badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
    color: white;
}
.badge-green { background: #27ae60; }
.badge-red { background: #e74c3c; }
.badge-blue { background: #2980b9; }
.badge-orange { background: #f39c12; }

/* ---- Images ---- */
.reveal img {
    max-height: 450px;
    border: none;
    box-shadow: none;
}

/* ============================================
   CGS Branding — Logo & Footer
   Adjust --cgs-logo-* variables to restyle
   ============================================ */
:root {
    --cgs-logo-size: 80px;
    --cgs-logo-top: 16px;
    --cgs-logo-left: 20px;
    --cgs-logo-opacity: 0.9;
    --cgs-footer-size: 14px;
}

.cgs-logo {
    position: fixed;
    top: var(--cgs-logo-top);
    left: var(--cgs-logo-left);
    width: var(--cgs-logo-size);
    height: var(--cgs-logo-size);
    z-index: 100;
    opacity: var(--cgs-logo-opacity);
}
.cgs-footer {
    position: fixed;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--cgs-footer-size);
    color: #888;
    z-index: 100;
    letter-spacing: 0.02em;
}

/* ============================================
   reveal.js overrides — layout & controls
   ============================================ */

/* Slide number: bottom-left, no overlap with scroll controls */
.reveal .slide-number {
    bottom: 14px !important;
    left: 20px !important;
    right: auto !important;
    font-size: 14px !important;
    color: #888 !important;
    background: transparent !important;
}

/* Scroll progress bar: keep right */
.reveal .scroll-progress {
    right: 0 !important;
}

/* ============================================
   Component styles — reusable across decks
   ============================================ */

/* ---- Trainer card ---- */
.trainer-card {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    text-align: left;
}
.trainer-card .trainer-icon {
    font-size: 6em;
    color: var(--cgs-accent);
    opacity: 0.8;
}
.trainer-card .trainer-info h3 {
    margin-bottom: 0.3em;
    font-size: 1.3em;
}
.trainer-card .trainer-info p {
    margin: 0.2em 0;
    font-size: 0.75em;
    color: #666;
}
.trainer-card .trainer-info a {
    color: var(--cgs-accent);
    text-decoration: none;
}

/* ---- Day cards (week overview) ---- */
.day-card {
    background: white;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 5px solid var(--cgs-accent);
    text-align: left;
    font-size: 0.72em;
}
.day-card .day-label {
    font-weight: 700;
    color: var(--cgs-accent);
    font-size: 1.05em;
    margin-bottom: 4px;
}
.day-card .day-topics {
    color: #555;
}

/* ---- Method grid (2x2) ---- */
.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}
.method-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
}
.method-card i {
    font-size: 2.2em;
    color: var(--cgs-accent);
    display: block;
    margin-bottom: 10px;
}
.method-card h3 {
    font-size: 0.9em;
    margin-bottom: 6px;
}
.method-card p {
    font-size: 0.65em;
    color: #666;
    margin: 0;
}

/* ---- Prerequisites columns ---- */
.prereq-columns {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.prereq-columns > div {
    flex: 1;
}
.prereq-columns h3 {
    border-bottom: 2px solid var(--cgs-accent);
    padding-bottom: 6px;
    margin-bottom: 12px;
}