/*
 Theme Name: HankDonovan
 Description: Custom HTML, CSS. What could go wrong?
 Version: 1.0
 Author: Reuben Hank Donovan
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: hankdonovan
 Last Updated: 2 March 2025
*/

/* 
This site uses a custom WordPress theme designed by Hank Donovan.
While this theme is not available for download, you are welcome to study its structure and design and utilize theme files.
The theme is released under the GPL v2 or later license.
For inquiries, please contact RHDonovan 
*/

/* ===================================== */
/* ===== WEBSITE VARIABLE CONTROLS ===== */
/* ===================================== */

:root {
    --LightModeBackgroundColor: #fff;
    --DarkModeBackgroundColor: #222;
    --LightModeText: #333;
    --DarkModeText: #fff;
}

/* ===================================== */
/* ========== GLOBAL STYLES ============ */
/* ===================================== */

/* "a" refers to links. */
a {
    font-size: large;
}

html {
   background-color: #222;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: rgba(255, 0, 0, 0);
    color: #fff;
}

/* HEADER MENU SETTINGS */
.site-title {
    margin: 15px;
}

.site-title a {
    display: block;
    text-decoration: none;
    font-size: 30px;
}

.header-container {
    width: 100%;
    background-color: rgba(255, 0, 0, 0);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: left;
}

.header-menu {
    display: flex;
    align-items: center;
}

#primary-menu.menu li {
    display: block;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 10px;
    border: 1px solid #ccc;
}

#primary-menu.menu a {
    display: block;
    align-items: right;
    text-decoration: none;
}

#primary-menu.menu {
    display: flex;
    justify-content: right;
    text-align: right;
	padding: 0px;
}

/* FOOTER MENU SETTINGS */
.footer-container {
    width: 100%;
    background-color: rgba(255, 0, 0, 0);
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.footer-menu {
    margin-top: 2vw;
    margin-bottom: 2vw;
}

#footer-menu li {
    display: block;
    text-decoration: none;
    padding: 5px 5vw;
}

.copyright-box {
    display: flex;
    justify-content: right;
}

/* EDITOR FOR CONTENT */
.custom-content-container {
    display: flex;
    justify-content: left;
    padding: 5px;
}

.site-content a {
    text-decoration: none;
}

/* EDITOR FOR HOMEPAGE */
.homepage-container {
    display: flex;
    justify-content: center;
}

/* DARK MODE BUTTON */
#DarkModeToggleButton {
    font-weight: bold;
    display: block;
    padding: 10px 10px;
    margin: 0 10px;
    border: 1px solid #ccc;
}

/* EDITOR FOR STORIES PAGE */
.table-of-contents a {
    text-decoration: none;
}

.table-of-contents a:visited {
    text-decoration: bold;
}

.table-of-contents .category-section {
    margin: 5px;
    margin-bottom: 25px;
    border: 2px solid;
    padding: 5px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.table-of-contents .category-title {
    display: flex;
    justify-content: center;
}

.table-of-contents .entry-title {
    display: flex;
    margin: 5px;
    margin-left: 10px;
}

/* EDITOR FOR POSTS */
.post-navigation {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
}

.nav-next {
    display: flex;
    justify-content: right;
}

.nav-previous {
    display: flex;
    justify-content: left;
}

.other-chapters {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    flex-direction: column;
}

.entry-content {
    text-indent: .25in;
}

/* DENOTES BACKGROUND COLORS */
/* Light mode styles */
body {
    background-color: var(--LightModeBackgroundColor);
    color: var(--LightModeText);
}

nav, a, header, footer {
    color: var(--LightModeText);
}

#DarkModeToggleButton {
    background-color: var(--DarkModeBackgroundColor);
    color: var(--DarkModeText);
}

/* Dark mode styles */
.dark-mode body {
    background-color: var(--DarkModeBackgroundColor);
    color: var(--DarkModeText);
}

.dark-mode header, .dark-mode a {
    color: var(--DarkModeText);
}

.dark-mode a, .dark-mode section, .dark-mode footer, .dark-mode nav, .dark-mode .entry-content a, .dark-mode {
    background-color: var(--DarkModeBackgroundColor);
    color: var(--DarkModeText);
}

.dark-mode #DarkModeToggleButton {
    background-color: var(--LightModeBackgroundColor);
    color: var(--LightModeText);
}

/* ===================================== */
/* ======== RESPONSIVE DESIGN ========= */
/* ===================================== */

@media (max-width: 960px) {
    /* HEADER */
    .header-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-menu {
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    .site-title {
        display: flex;
    }

    #primary-menu.menu {
        flex-direction: column;
    }

    /* SITE CONTENT */
    .site-content {
        margin: 5vw;
    }

    .post-content {
        margin-left: 1vw;
        margin-right: 1vw;
    }

    #DarkModeToggleButton {
        font-weight: bold;
        display: block;
        padding: 10px;
        margin: 10px;
        border: 1px solid #ccc;
    }
}

@media (min-width: 960px) {
    .header-container {
        flex-direction: row;
        align-items: left;
    }

    .site-content {
        margin-left: 7vw;
        margin-right: 7vw;
    }
    
     .post-content {
        margin-top: 5vw;
        margin-left: 15vw;
        margin-right: 15vw;
    }
}