/*
Theme Name: Wyrd Northwest
Theme URI: https://wyrdnorthwest.com/
Author: Tait
Author URI: [www.wyrdnorthwest.com]
Description: A WordPress theme for the Wyrd Northwest 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: wyrdnorthwest

Colors:
    red: #D92626
    burgundy: #9B2626
    light-yellow: #EAF378
    medium-green: #39B109
    dark-green: #00501E
    very-dark-green: #001E00
    blue: #50AECE
    light-beige: #E0C983
    khaki-brown: #A09164
    black: #000000
*/

/* ==========================================================================
   Theme Styles
   ========================================================================== */
/* --- Typography --- */

/* Apply EB Garamond to the body text */
body {
    font-family: 'EB Garamond', serif;
    /* Ensure the default text color is readable against your background */
    color: #333; /* Or a darker shade if needed */
}

/* Apply Rye to headers */
h1, h2, h3, h4, h5, h6,
.entry-title, /* Main page/post titles, like "Howdy, traveler." */
.site-title /* Your site's main title in the header */
{
    font-family: 'Rye', cursive;
    /* Adjust header colors if needed to suit your new background */
    color: #1a1a1a; /* A dark color, or pick one from your branding */
}

/* If you have a site description/tagline, you might want it in EB Garamond too */
.site-description {
    font-family: 'EB Garamond', serif;
}

/* --- Header Styling --- */

/* Basic body styling to remove default margin/padding for full-width content */
body {
    margin: 0;
    padding: 0;
    background-color: #F0F0F0; /* A very light off-white for the general page background, can be changed */
    font-family: Arial, sans-serif; /* A fallback font, we can add custom fonts later */
}

/* Container for site content - adjust max-width as needed */
.container {
    max-width: 1200px; /* Example max-width for your content area */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* Some padding on the sides */
    padding-right: 20px;
}

/* Overall Header */
.site-header {
    background-color: #001E00; /* Very dark green from your palette for a strong base */
    padding: 15px 0; /* Vertical padding, horizontal padding handled by inner div */
    border-bottom: 2px solid #AFB444; /* Yellowish-green from your palette for a subtle accent line */
}

/* Inner header for logo left, nav right layout */
.site-header-inner {
    display: flex;
    justify-content: space-between; /* Pushes logo and nav to opposite ends */
    align-items: center; /* Vertically centers them */
    max-width: 1200px; /* Match your content container width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Internal padding matching container */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
}

/* Site Branding (Logo/Title) */
.site-branding {
    flex-shrink: 0; /* Prevent it from shrinking */
    margin-right: 20px; /* Space between logo and nav on desktop */
}

/* If using custom logo (WyrdLogo.png) */
.site-branding .custom-logo {
    max-height: 80px; /* Adjust height as needed for your logo */
    width: auto;
    display: block; /* Ensures it behaves nicely for spacing */
}

/* If using site title instead of logo */
.site-branding .site-title {
    margin: 0;
    font-size: 2.8em; /* Adjusted font size for impact */
    line-height: 1;
}

.site-branding .site-title a {
    color: #FFC83C; /* Bright yellow-orange for the title */
    text-decoration: none;
    font-family: 'Georgia', serif; /* A more "Wyrd" default font, can be replaced */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
}

.site-branding .site-description {
    margin: 5px 0 0;
    font-size: 1em;
    color: #68A0A0; /* Muted teal/blue-green for the description */
}

/* Main Navigation */
.main-navigation {
    flex-grow: 1; /* Allows it to take up available space */
    text-align: right; /* Aligns menu items to the right */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Makes menu items sit next to each other */
    justify-content: flex-end; /* Pushes menu items to the right */
    flex-wrap: wrap; /* Allows menu items to wrap on smaller screens */
}

.main-navigation li {
    margin-left: 25px; /* Spacing between menu items */
    position: relative; /* For dropdown menus if you add them later */
}

.main-navigation li a {
    display: block;
    padding: 8px 0; /* More vertical padding for clickable area */
    color: #CB6452; /* Saturated reddish-brown/salmon for nav links */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.15em;
    transition: color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover and subtle scale */
}

.main-navigation li a:hover,
.main-navigation li a:focus {
    color: #B71C00; /* Strong red-orange on hover */
    transform: translateY(-2px); /* Slightly lift on hover */
}

/* --- Basic Content Area Background --- */
.site-content {
    background-color: #FFFFFF; /* Pure white for the content area for contrast */
    padding: 40px 20px; /* Internal padding for content */
    margin-bottom: 20px; /* Space below content before footer */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* --- Comic Page Styling --- */

/* Center comic and cover images */
.comic-image-wrapper,
.comic-cover-wrapper {
    text-align: center; /* Centers inline elements like img */
    margin: 20px auto; /* Adds vertical margin and centers block element */
    max-width: 100%; /* Ensures wrapper doesn't exceed parent width */
}

.comic-page-image,
.comic-issue-cover {
    max-width: 100%; /* Ensures images are responsive and fit within their container */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below image */
    margin: 0 auto; /* Centers the image itself within its wrapper */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Comic Page Title Styling */
.entry-header .entry-title {
    text-align: center;
    font-size: 2.2em; /* Adjust as needed */
    margin-bottom: 25px;
    color: #333; /* Dark gray for readability */
}

.comic-series-title {
    font-weight: 700; /* Bold the series name */
    color: #555;
}

.comic-issue-title {
    font-weight: 600; /* Slightly less bold for issue title */
    color: #444;
}

.comic-page-number {
    font-weight: 400; /* Regular weight for page number */
    color: #666;
}

/* Comic Navigation Styling */
.comic-navigation {
    display: flex; /* Use flexbox for easy alignment */
    justify-content: space-between; /* Pushes previous to left, next to right */
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 0;
    border-top: 1px solid #eee; /* Separator line */
    border-bottom: 1px solid #eee;
}

.comic-navigation a {
    text-decoration: none; /* Remove underline */
    color: #0073aa; /* WordPress blue, or choose your own theme color */
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.comic-navigation a:hover,
.comic-navigation a:focus {
    background-color: #f0f0f0; /* Light background on hover */
    color: #005177;
}

.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
}

/* Basic container adjustments for better flow (if your theme needs it) */
.site-content {
    padding: 20px; /* Add some general padding around content */
}

/* Center the entire comic post content area */
article.post-type-comic {
    max-width: 960px; /* Or choose a width that looks good on your site */
    margin: 0 auto;   /* This centers the block element */
    padding: 20px;    /* Add some internal padding */
    box-sizing: border-box; /* Ensures padding is included in the max-width */
    background-color: #fff; /* Optional: Gives the content area a white background */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow around the content box */
}

/* --- Comic Page Styling --- */
/* Center comic and cover images */
.comic-image-wrapper,
.comic-cover-wrapper {
    text-align: center;
    margin: 20px auto;
    max-width: 100%;
}

.comic-page-image,
.comic-issue-cover {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* --- Page Title Styling --- */
.entry-header .entry-title {
    text-align: left; /* Changes alignment from center to left */
    font-size: 2.2em;
    margin-bottom: 25px;
    color: #333; /* Default text color for the rest of the title */
}

/* Drop Cap for the first letter of the page title */
.entry-header .entry-title::first-letter {
    float: left;
    font-size: 4em; /* Too big */
    line-height: 0.8; /* Adjusts vertical spacing */
    margin-right: 5px;
    font-weight: bold;
    color: #B71C00; /* A Rust-Red color. */
}

.comic-series-title {
    font-weight: 700;
    color: #555;
}

.comic-issue-title {
    font-weight: 600;
    color: #444;
}

.comic-page-number {
    font-weight: 400;
    color: #666;
}

/* Comic Navigation Styling */
.comic-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.comic-navigation a {
    text-decoration: none;
    color: #0073aa;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.comic-navigation a:hover,
.comic-navigation a:focus {
    background-color: #f0f0f0;
    color: #005177;
}

.nav-previous {
    text-align: left;
}

.nav-next {
    text-align: right;
}

/* Basic container adjustments for better flow (already there) */
.site-content {
    padding: 20px;
}

/* --- Site Background Image --- */
body {
    background-image: url('https://www.wyrdnorthwest.com/f2ali4wnw/wp-content/uploads/2025/07/WNWBackground.jpg'); /* Replace with the URL of WNWBackground.jpg */
    background-repeat: no-repeat; /* Ensures the image does not tile */
    background-size: cover; /* Stretches/shrinks the image to cover the entire background */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; /* Keeps the background static while scrolling */
}

/* --- Remove/Transparentize Outer Content Boxes (Boxes 2 & 3 from your reference) --- */

/* Target common main content wrappers to make them transparent and remove default spacing */
main#main, /* Often contains the primary content */
.site-content, /* Very common class for the overall content wrapper */
.site-main, /* Another common class for main content area */
#content, /* Another common ID for the main content area */
.site-inner /* Common wrapper inside .site-content */
 {
    background-color: transparent !important; /* Make sure these areas are transparent */
    padding: 0 !important; /* Remove any default padding */
    margin: 0 !important; /* Remove any default margin */
}

/* --- Your existing Readable Content Boxes CSS (No changes needed, but showing for context) --- */

/* Apply off-white background to the primary content area (This is your desired Box 1) */
#primary {
    background-color: #f8f8f8; /* A light, off-white color */
    padding: 30px; /* Add some padding inside the box */
    border-radius: 10px; /* Optional: adds rounded corners to the box */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Optional: adds a subtle shadow for depth */
    margin: 20px auto; /* Centers #primary within the now transparent parent */
    max-width: 1200px; /* Max width for #primary */
    box-sizing: border-box;
}

/* Other existing CSS for body, article.post-type-comic, etc. remain unchanged. */

/* --- Readable Content Boxes --- */

/* Apply the paper image background to the primary content area */
#primary {
    background-color: #F1DCAA; /* The sampled off-white color as fallback */
    background-image: url('https://www.wyrdnorthwest.com/f2ali4wnw/wp-content/uploads/2025/07/PaperSm.jpg'); /* Replace with the URL of Paper1.jpg */
    background-repeat: no-repeat; /* Ensure the image does not tile */
    background-size: cover; /* Make the image cover the entire active area of #primary */
    background-position: center center; /* Center the background image within the box */

    padding: 30px; /* Add some padding inside the box */
    border-radius: 10px; /* Optional: adds rounded corners to the box */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Optional: adds a subtle shadow for depth */
    margin: 20px auto; /* Centers #primary within the now transparent parent */
    max-width: 1200px; /* Max width for #primary */
    box-sizing: border-box;
}

/* Ensure images and other elements inside the box are responsive */
#primary img {
    max-width: 100%;
    height: auto;
}

/* Optional: Make the main site container slightly transparent to see the background through */
.site {
    background-color: rgba(255, 255, 255, 0.1); /* Very slight white tint */
}

/* --- Adjust your existing centering CSS to remove background from the article, as it's now on #primary --- */
article.post-type-comic {
    background-color: transparent !important; /* Make sure the article doesn't have its own background */
    box-shadow: none !important; /* Remove the shadow from the article */
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure the header and footer are within the colored box */
.entry-header, .entry-content, .entry-footer {
    background-color: transparent; /* Inherit the background from #primary */
}

/* Ensure the header and footer are within the colored box */
.entry-header, .entry-content, .entry-footer {
    background-color: transparent; /* Inherit the background from #primary */
}