// /wp-content/themes/cyberpunk-future/style.css

/*
Theme Name:   Cyberpunk Future
Theme URI:    https://beispiel.com/cyberpunk-future
Author:       Dein Name
Author URI:   https://deine-webseite.com
Description:  Ein futuristisches, an Cyberpunk 2077 angelehntes WordPress-Theme.
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         dark, futuristic, cyberpunk, two-columns
Text Domain:  cyberpunk-future
*/
@font-face {font-family: 'Orbitron'; src: url('fonts/Orbitron-Regular.ttf') format('truetype'); font-weight: 400;}
@font-face {font-family: 'Orbitron'; src: url('fonts/Orbitron-Bold.ttf') format('truetype'); font-weight: 700;}

body {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .entry-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--primary-accent-color);
    text-shadow: 
        0 0 var(--glow-blur-radius) var(--primary-accent-color),
        0 0 calc(var(--glow-blur-radius) * 2) var(--primary-accent-color),
        0 0 calc(var(--glow-blur-radius) * 3) var(--primary-glow-rgba);
    letter-spacing: 2px;
    text-transform: uppercase;
}

a {
    color: var(--secondary-accent-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
    text-shadow: 0 0 8px var(--secondary-glow-rgba-strong);
}

.site-header {
    padding: 1rem 5%;
    border-bottom: 1px solid var(--subtle-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-main {max-width: 960px; margin: 4rem auto; padding: 0 2rem;}

.post {
    background-color: var(--content-bg-color);
    border: 1px solid var(--secondary-border-color);
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 0 15px var(--secondary-glow-rgba-faint);
}

.entry-content {border: none; padding: 0;}

.main-navigation {width: 100%;}
#primary-menu {list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px;}
#primary-menu a {
    display: block; padding: 8px 16px; font-family: 'Orbitron', sans-serif; font-size: 0.9em;
    color: var(--secondary-accent-color); text-transform: uppercase; letter-spacing: 1px;
    border: 1px solid transparent; transition: all 0.3s ease;
}
#primary-menu a:hover, #primary-menu .current-menu-item a {
    color: var(--link-hover-color); background-color: var(--secondary-glow-rgba-faint);
    border-color: var(--secondary-accent-color); text-shadow: 0 0 8px var(--secondary-glow-rgba-strong);
}

.site-footer {
    background-color: var(--footer-bg-color);
    padding: 3rem 5%; margin-top: 5rem;
    border-top: 2px solid var(--secondary-border-color);
    text-align: center;
}
.footer-widgets-area {display: flex; justify-content: center; gap: 3rem; margin-bottom: 3rem;}
.footer-widgets-area .widget {flex: 1; max-width: 300px;}
.widget-title {color: var(--primary-accent-color); margin-bottom: 1rem; letter-spacing: 1px;}
.site-info {color: var(--muted-text-color); font-size: 0.9em; letter-spacing: 1px; text-transform: uppercase;}

.content-area-container {display: flex; gap: 3rem;}
.site-main {flex: 1; min-width: 0;}
#secondary {width: 300px; flex-shrink: 0;}

.widget-area .widget {
    background-color: var(--secondary-glow-rgba-faint);
    border: 1px solid var(--secondary-border-color);
    padding: 1.5rem; margin-bottom: 2rem;
}
.widget-area .widget ul {list-style: none; padding: 0; margin: 0;}
.widget-area .widget ul li {padding: 0.5rem 0; border-bottom: 1px solid var(--subtle-border-color);}
.widget-area .widget ul li:last-child {border-bottom: none;}

.menu-toggle {
    display: none; background: transparent;
    border: 1px solid var(--secondary-accent-color);
    width: 40px; height: 40px; padding: 8px; cursor: pointer;
    flex-direction: column; justify-content: space-around;
}
.menu-toggle .line {display: block; height: 2px; width: 100%; background: var(--secondary-accent-color); transition: all 0.3s ease;}

@media screen and (max-width: 800px) {
    .site-header {justify-content: space-between;}
    .menu-toggle {display: flex;}
    .main-navigation {
        display: none; position: absolute; top: 60px; left: 0; width: 100%;
        background: var(--footer-bg-color); border-bottom: 1px solid var(--secondary-border-color);
    }
    .main-navigation.toggled {display: block;}
    #primary-menu {flex-direction: column; align-items: center; gap: 0;}
    #primary-menu a {width: 100%; text-align: center; border-top: 1px solid var(--subtle-border-color);}
    .content-area-container {flex-direction: column;}
    #secondary {width: 100%; margin-top: 3rem;}
    .site-main {padding: 0;}
    h1.entry-title {font-size: 1.8em;}
}

/*--------------------------------------------------------------
>>> LESE-MODUS (FINAL MIT HÖHERER SPEZIFITÄT)
--------------------------------------------------------------*/

/* --- Das Icon-Styling --- */
.toggle-reader-mode {
    position: fixed;
    top: 150px;
    left: 20px;
    z-index: 1000;
    background: var(--content-bg-color);
    border: 1px solid var(--secondary-border-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: var(--secondary-accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 28px; 
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle-reader-mode:hover {
    color: var(--primary-accent-color);
    border-color: var(--primary-accent-color);
    transform: scale(1.1);
}
.toggle-reader-mode .icon-close { display: none; }
.toggle-reader-mode .icon-open { display: block; }

/* --- Wenn der Lese-Modus aktiv ist --- */

/* Verstecke alle störenden Elemente mit !important */
body.reader-mode-active .site-header,
body.reader-mode-active #secondary,
body.reader-mode-active .site-footer {
    display: none !important;
}

/* Ändere den Hintergrund und die Schrift */
body.reader-mode-active {
    background-color: var(--content-bg-color) !important;
    color: var(--main-text-color) !important;
}

/* Zentriere den Artikel */
body.reader-mode-active .site-main {
    width: 100% !important;
    font-family: Georgia, serif !important;
    font-size: 1.15em !important;
    line-height: 1.8 !important;
    /* Setze Außenabstände zurück, um Zentrierung sicherzustellen */
    margin: 4rem auto !important;
}

/* Passe die Typografie im Lese-Modus an */
body.reader-mode-active h1,
body.reader-mode-active h2,
body.reader-mode-active h3,
body.reader-mode-active .entry-title {
    color: var(--primary-accent-color) !important;
    text-shadow: none !important;
    font-family: Georgia, serif !important;
}
body.reader-mode-active a {
    color: var(--secondary-accent-color) !important;
    text-shadow: none !important;
}
body.reader-mode-active .entry-header {
    border-bottom: 1px solid var(--subtle-border-color);
    margin-bottom: 2em;
    padding-bottom: 1em;
}

/* Der Button wird zum Schließen-Button */
body.reader-mode-active .toggle-reader-mode {
    color: var(--main-text-color);
    background-color: var(--content-bg-color);
    border: 1px solid var(--subtle-border-color);
}
body.reader-mode-active .toggle-reader-mode:hover {
    color: var(--primary-accent-color);
    border-color: var(--primary-accent-color);
}

/* Tausche die Icons im Lese-Modus */
body.reader-mode-active .toggle-reader-mode .icon-open { display: none; }
body.reader-mode-active .toggle-reader-mode .icon-close { display: block; }