/*
 Theme Name: Outcasts of Pacifica
 Theme URI: https://pacificacomic.com/
 Author: Tait
 Author URI: https://www.pacificacomic.com/
 Description: Child theme of ComixCore for the Outcasts Of Pacifica comic.
 Version: 1.0
 Requires at least: 6.0
 Requires PHP: 7.4
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: outcasts-of-pacifica
 Template: comixcore

 Colors:

     light-yellow: #EAF378
     medium-green: #398109
     dark-green: #00501E
     very-dark-green: #001E00
     blue: #50AECE
     bright-orange: #F5B027
     vivid-red: #ED3C0A
     light-beige: #E0C983
     khaki-brown: #A09164
     black: #000000
*/

/* ==========================================================================
   Fonts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');

/* ==========================================================================
   Outcasts of Pacifica – Header Styling + Nav Block
   ========================================================================== */

.site-header {
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 9999; /* Keeps it above other content */
    background-color: transparent;
}

.site-header .site-branding .site-description {
    color: var(--comixcore-header-text-color);
}

.site-header-inner {
    display: flex;
    align-items: center;
    border: 6px solid;
    border-radius: 100px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 25px 15px 50px;
    box-sizing: border-box;
}

.site-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex-shrink: 0;
}

.site-title {
    margin-bottom: 0.05em;
    line-height: 0.75;
}

.site-description {
    max-width: 40ch;
    line-height: 1.15;
}

.main-navigation {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

.main-navigation ul {
    margin-top: 0;
    background-color: transparent;
}

.main-navigation li a:hover,
.main-navigation li a:focus {
    background-color: transparent;
}

/* Current page indicator */
.main-navigation .current-menu-item a,
.main-navigation .current_page_item a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: 'Rye', cursive;
}

/* Drop Caps */
.entry-header .entry-title::first-letter {
    float: left;
    font-family: 'Rye', cursive;
    font-size: 2em;
    line-height: 0.8;
    margin-top: 5px;
    font-weight: bold;
    color: #ED3C0A;
}

/* Disable drop cap on comic pages */
body.single-comic .entry-header .entry-title::first-letter {
    float: none;
    font-size: 1em;
}

body, p, li, td, th {
    font-family: 'Playwrite DE Grund', sans-serif;
}

body {
    background-image: url('images/WNWBackground.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-color: var(--comixcore-nav-background-color);
}

/* ==========================================================================
   Content Area
   ========================================================================== */

#content.content-area-with-sidebar {
    border-radius: 50px;
    border-top: 6px solid var(--comixcore-header-border-color);
    border-bottom: 6px solid var(--comixcore-header-border-color);
     background:
        linear-gradient(
            90deg,
            var(--comixcore-primary-color),
            var(--comixcore-secondary-color)
        ) top center / 100% no-repeat;
}

#primary {
    background-image: url('images/PaperSm.jpg');
    background-size: cover;
    border-radius: 50px;
    border: 6px solid var(--comixcore-header-border-color);
     margin-top: 50px;
     margin-bottom: 50px;
}

#secondary {
     margin-top: 25px;
     margin-bottom: 25px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer a {
    color: #EAF378;
}

.site-footer a:hover {
    color: #AFB444;
}

/* ==========================================================================
   Sidebar Styles
   ========================================================================== */

.widget {
    background-image: url('images/PaperSm.jpg');
    background-size: cover;
    border-radius: 25px;
    padding: 25px;
    margin-bottom: 30px;
    border: 6px solid var(--comixcore-header-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .main-navigation ul {
        border-radius: 14px;
        padding: 8px;

    .site-description {
        max-width: 100%;
    }

    .main-navigation li a {
        padding: 10px;
    }
}