/*
Theme Name: SmallSpaceGardenPro Theme
Theme URI: https://SmallSpaceGardenPro.com/
Author: Your Name / AI Assistant
Author URI: https://SmallSpaceGardenPro.com/
Description: A custom WordPress theme for SmallSpaceGardenPro.com, focusing on affiliate content, small space gardening tips, readability, SEO, and accessibility.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, custom-header, featured-images, threaded-comments, translation-ready, accessibility-ready, affiliate, gardening
Text Domain: smallspacegardenpro

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset and Normalize
2.0 Accessibility
3.0 Variables (Colors & Fonts)
4.0 Global Styles
    4.1 Typography
    4.2 Links
    4.3 Forms & Buttons
    4.4 Images & Media
5.0 Site Structure
    5.1 Container
    5.2 Header
    5.3 Navigation
    5.4 Main Content Area
    5.5 Sidebar
    5.6 Footer
6.0 WordPress Specific
    6.1 Post and Page Entries
    6.2 Comments
    6.3 Widgets
    6.4 Gutenberg Editor Styles
7.0 Media Queries (Responsive Design)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Reset and Normalize
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 16px; /* Base font size */
    line-height: 1.6;
    color: var(--color-text-main);
    background-color: var(--color-background);
}

/*--------------------------------------------------------------
2.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP admin bar */
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px; /* Hidden off-screen */
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/*--------------------------------------------------------------
3.0 Variables (Colors & Fonts)
--------------------------------------------------------------*/
:root {
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-headings: var(--font-family-base); /* Same for consistency, can be changed */

    --color-primary: #3B7A57; /* Earthy Green */
    --color-accent: #D9A441; /* Muted Gold */
    --color-background: #FAF9F6; /* Off-white */
    --color-text-main: #2F2F2F; /* Dark Slate Gray */
    --color-text-light: #FFFFFF;
    --color-border: #DCDCDC; /* Light gray for borders */

    --container-width: 1100px;
    --container-padding: 20px;
    --header-height: auto; /* Flexible header height */
    --sidebar-width: 300px;
}

/*--------------------------------------------------------------
4.0 Global Styles
--------------------------------------------------------------*/

/* 4.1 Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--color-text-main);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-weight: 600;
}

h1 { font-size: 2.5rem; } /* Approx 40px */
h2 { font-size: 2rem; }   /* Approx 32px */
h3 { font-size: 1.75rem; } /* Approx 28px */
h4 { font-size: 1.5rem; } /* Approx 24px */
h5 { font-size: 1.25rem; } /* Approx 20px */
h6 { font-size: 1rem; }   /* Approx 16px */

p {
    margin-bottom: 1em;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

blockquote {
    margin: 1.5em 40px;
    padding: 10px 20px;
    border-left: 5px solid var(--color-primary);
    background-color: #f9f9f9; /* Slightly different from main background */
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* 4.2 Links */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-accent);
    text-decoration: underline;
}

/* 4.3 Forms & Buttons */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 122, 87, 0.2); /* Light primary focus ring */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link { /* Gutenberg button */
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: none;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--color-accent);
    color: var(--color-text-main); /* Ensure contrast on hover */
}

/* 4.4 Images & Media */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

figure {
    margin: 0 0 1em;
}

figcaption {
    font-size: 0.9em;
    color: #555; /* Slightly lighter than main text */
    font-style: italic;
    margin-top: 0.5em;
}

/*--------------------------------------------------------------
5.0 Site Structure
--------------------------------------------------------------*/

/* 5.1 Container */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.site-content-wrapper {
    display: flex;
    flex-direction: column; /* Default for mobile */
}

@media (min-width: 768px) {
    .site-content-wrapper.has-sidebar {
        flex-direction: row;
    }
}

/* 5.2 Header */
.site-header {
    /* Background color is set by Customizer, default here for fallback */
    background-color: var(--color-background);
    padding: 1em 0;
    border-bottom: 1px solid var(--color-border);
}

.site-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1em;
}

@media (min-width: 768px) {
    .site-branding {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.site-title {
    font-size: 2rem;
    margin: 0;
    font-weight: 700;
}

.site-title a {
    color: var(--color-text-main);
    text-decoration: none;
}

.site-title a:hover {
    color: var(--color-primary);
}

.site-description {
    font-size: 0.9rem;
    color: #555; /* Lighter than main text */
    margin: 0.25em 0 0 0;
}

.custom-logo-link img {
    max-height: 70px; /* Adjust as needed */
    width: auto;
}

/* 5.3 Navigation */
.main-navigation {
    background-color: var(--color-primary); /* Primary color for nav bar */
    padding: 0.5em 0;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Mobile first */
    align-items: center;
}

.main-navigation li {
    margin: 0.5em 0;
}

.main-navigation a {
    color: var(--color-text-light);
    text-decoration: none;
    padding: 0.5em 1em;
    display: block;
    font-weight: 500;
    border-radius: 3px;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    background-color: var(--color-accent);
    color: var(--color-text-main); /* Ensure contrast */
}

@media (min-width: 768px) {
    .main-navigation ul {
        flex-direction: row;
        justify-content: center; /* Center nav items */
    }
    .main-navigation li {
        margin: 0 0.5em;
    }
}

/* Mobile menu button (if implementing JS toggle later) */
.menu-toggle { display: none; }


/* 5.4 Main Content Area */
.site-main {
    flex-grow: 1;
    padding-top: 2em;
    padding-bottom: 2em;
}

.has-sidebar .site-main {
    width: 100%; /* Mobile full width */
}

@media (min-width: 768px) {
    .has-sidebar .site-main {
        width: calc(100% - var(--sidebar-width) - 2 * var(--container-padding)); /* Adjust for padding if sidebar is outside main */
        margin-right: calc(2 * var(--container-padding)); /* Space between content and sidebar */
    }
}


/* 5.5 Sidebar */
.widget-area {
    padding: 2em 0; /* Mobile */
    background-color: #fdfcfb; /* Slightly off-white */
    border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .widget-area {
        width: var(--sidebar-width);
        flex-shrink: 0;
        padding: 2em var(--container-padding);
        border-top: none;
        border-left: 1px solid var(--color-border);
    }
}

.widget {
    margin-bottom: 2em;
}

.widget-title {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 0.75em;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.25em;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    margin-bottom: 0.5em;
}

.widget ul li a {
    text-decoration: none;
}

.widget select {
    width: 100%;
    padding: 8px;
}

/* Search Widget */
.widget_search .search-form {
    display: flex;
}
.widget_search .search-field {
    flex-grow: 1;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.widget_search .search-submit {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 10px 15px;
}


/* 5.6 Footer */
.site-footer {
    background-color: var(--color-text-main);
    color: #ccc; /* Lighter text for footer */
    padding: 2em 0;
    font-size: 0.9rem;
}

.site-footer a {
    color: var(--color-accent);
}

.site-footer a:hover {
    color: var(--color-text-light);
}

.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2em;
}

.footer-widget-area {
    width: 100%; /* Full width on small screens */
    margin-bottom: 2em;
}

@media (min-width: 768px) {
    .footer-widget-area {
        width: calc(33.333% - 20px); /* Adjust for 3 columns with gap */
    }
    .footer-widget-area:not(:last-child) {
        margin-right: 30px;
    }
}

.site-info {
    text-align: center;
    border-top: 1px solid #444; /* Darker border within footer */
    padding-top: 1.5em;
}

/*--------------------------------------------------------------
6.0 WordPress Specific
--------------------------------------------------------------*/

/* 6.1 Post and Page Entries */
.entry {
    margin-bottom: 3em;
    background-color: var(--color-background); /* White background for posts */
    padding: 1.5em; /* Add some padding around posts */
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.page .entry { /* No border/shadow for simple pages, or keep if preferred */
    /* border: none;
    box-shadow: none;
    padding: 0; */
}

.entry-header {
    margin-bottom: 1em;
}

.entry-title {
    margin-top: 0;
    margin-bottom: 0.25em;
    font-size: 2.2rem; /* Large title for single post/page */
}

.entry-title a {
    text-decoration: none;
    color: var(--color-text-main);
}

.entry-title a:hover {
    color: var(--color-primary);
}

/* For archive pages */
.archive .entry-title, .home .entry-title {
    font-size: 1.8rem;
}


.entry-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1em;
}

.entry-meta a {
    color: #666;
}
.entry-meta a:hover {
    color: var(--color-primary);
}

.entry-meta .byline:before,
.entry-meta .posted-on:before,
.entry-meta .cat-links:before,
.entry-meta .tags-links:before,
.entry-meta .comments-link:before {
    content: " | "; /* Separator, adjust as needed */
    margin: 0 0.5em;
}
.entry-meta .byline:first-child:before,
.entry-meta .posted-on:first-child:before,
.entry-meta .cat-links:first-child:before,
.entry-meta .tags-links:first-child:before,
.entry-meta .comments-link:first-child:before {
    content: "";
    margin: 0;
}


.post-thumbnail {
    margin-bottom: 1.5em;
    display: block;
}

.post-thumbnail img {
    border-radius: 4px;
    display: block;
    width: 100%;
}

.single .post-thumbnail-container { /* For single post featured image */
    margin-bottom: 1.5em;
}

.entry-content,
.entry-summary {
    line-height: 1.7;
}

.entry-content p:last-child,
.entry-summary p:last-child {
    margin-bottom: 0;
}

.entry-content a {
    /* For links within content, could make them stand out more */
    /* text-decoration: underline; */
}

.entry-footer {
    margin-top: 1.5em;
    font-size: 0.9rem;
    color: #666;
}

.page-links { /* For wp_link_pages */
    clear: both;
    margin: 0 0 1.5em;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border);
}


/* 6.2 Comments */
.comments-area {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
    font-size: 1.5rem;
    margin-bottom: 1em;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}

.comment-list .comment {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--color-border);
}
.comment-list .children {
    list-style: none;
    margin-left: 2em; /* Indent replies */
}

.comment-author .avatar {
    float: left;
    margin-right: 10px;
    border-radius: 50%;
}

.comment-metadata a {
    font-size: 0.85em;
    color: #777;
}

.comment-form label {
    display: block;
    margin-bottom: 0.25em;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
    font-size: 0.9em;
    margin-bottom: 1em;
}

.form-submit .submit { /* Style comment submit button */
    /* Uses global button styles */
}

/* 6.3 Widgets (already partially styled in 5.5) */
.widget_calendar table { width: 100%; }
.widget_calendar caption { text-align: center; font-weight: bold; margin-bottom: 0.5em; }

/* 6.4 Gutenberg Editor Styles */
/* Alignment */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Make sure embeds and figures behave */
.wp-block-embed,
.wp-block-image,
figure.wp-block-table { /* Gutenberg table figure */
    margin-bottom: 1.5em;
}

/* Wide and Full Alignments for Gutenberg */
.alignwide {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-width); /* Or a bit wider than text column if sidebar present */
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/* Clear floats after alignleft/right */
.entry-content::after,
.entry-summary::after,
.comment-content::after,
.widget::after {
    content: "";
    display: table;
    clear: both;
}

/* Specific Gutenberg block styling if needed */
.wp-block-quote {
    border-left-color: var(--color-primary);
}

.wp-block-pullquote blockquote {
    border-top: 3px solid var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    color: var(--color-primary);
    padding: 1em 0;
}

.wp-block-separator {
    border-color: var(--color-border);
}

/*--------------------------------------------------------------
7.0 Media Queries (Responsive Design)
--------------------------------------------------------------*/

/* Tablet */
@media (max-width: 767px) {
    :root {
        --container-padding: 15px;
    }
    .site-content-wrapper.has-sidebar .site-main {
        width: 100%;
        margin-right: 0;
    }
    .widget-area {
        width: 100%;
        padding: 2em var(--container-padding);
        border-left: none;
    }

    .entry-title { font-size: 1.8rem; }
    .archive .entry-title, .home .entry-title { font-size: 1.6rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .footer-widget-area {
        width: 100%;
        margin-right: 0 !important; /* Override for stacked columns */
    }
}

/* Mobile */
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }
    .site-title {
        font-size: 1.6rem;
    }
    .entry-title { font-size: 1.6rem; }
    .archive .entry-title, .home .entry-title { font-size: 1.4rem; }

    .main-navigation ul {
        /* Example for a basic toggle menu if JS was added */
        /* display: none; */
    }
    .main-navigation.toggled ul {
        /* display: flex; */
    }
    /* .menu-toggle { display: block; } */ /* Enable if adding JS for menu */
}