/*
Theme Name: My Simple Theme
Theme URI: https://example.com/my-simple-theme
Author: Your Name
Author URI: https://example.com/
Description: A simple, responsive, and customizable WordPress theme.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: lightweight, responsive, custom-logo, custom-background, custom-menu, one-column, two-columns, three-columns, right-sidebar
*/

/* --- Basic Reset & Typography --- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #333; }
.container { padding: 2em; }
a { color: #0073aa; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* --- Sticky Footer --- */
.sticky-footer-active { display: flex; flex-direction: column; min-height: 100vh; }
.sticky-footer-active #page { flex: 1 0 auto; }

/* --- Layout --- */
.container, .site-branding-container {
    margin-left: auto;
    margin-right: auto;
    /* max-width is set dynamically via inline styles */
}

.content-sidebar-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2em; /* Space between content and sidebar */
}

.site-main {
    flex-grow: 1;
}

/* 1 Column Layout (Default) */
.layout-1-col .site-main { width: 100%; }
.layout-1-col .widget-area { display: none; }

/* 2 Column Layout */
.layout-2-col .site-main { flex: 1; min-width: 0; } /* Allow content to shrink */
.layout-2-col .widget-area { flex-basis: 300px; flex-shrink: 0; }

/* 3 Column Layout (advanced - requires a second sidebar to be registered) */
/* For now, this will behave like 2-col. You would add another sidebar for a true 3-col. */
.layout-3-col .site-main { flex: 1; min-width: 0; }
.layout-3-col .widget-area { flex-basis: 250px; flex-shrink: 0; }


/* --- Header --- */
.site-header { padding: 1em 2em; border-bottom: 1px solid #eee; }
.site-branding-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em; }
.site-branding { flex-shrink: 0; }
.site-title a { font-weight: 900; }
.site-title a:hover { text-decoration: none; }
.site-description { color: #777; margin: 0; }
.custom-logo-link img { max-height: 80px; width: auto; }

/* --- Navigation --- */
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.main-navigation li { margin-left: 1.5em; }
.main-navigation a { display: block; color: #555; font-weight: bold; }
.main-navigation a:hover { color: #0073aa; text-decoration: none; }

/* --- Sticky Header --- */
.sticky-header-active .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body.sticky-header-active { padding-top: 120px; /* Adjust to your header height */ }

/* --- Content & Widgets --- */
.entry-header, .entry-content { margin-bottom: 1.5em; }
.widget { margin-bottom: 1.5em; padding: 1em; border: 1px solid #eee; border-radius: 4px; }
.widget-title { font-size: 1.2rem; margin-bottom: 1em; }

/* --- Footer --- */
.site-footer {
    width: 100%;
    flex-shrink: 0;
    margin-top: 2em;
    padding: 2em;
    background: #f1f1f1;
    text-align: center;
    color: #555;
    border-top: 1px solid #ddd;
}

/* --- Responsive Design (Mobile First) --- */
@media (max-width: 768px) {
    /* Stack columns on smaller screens */
    .content-sidebar-wrapper { flex-direction: column; }
    .layout-2-col .widget-area, .layout-3-col .widget-area { width: 100%; flex-basis: auto; }

    /* Center header items */
    .site-branding-container { flex-direction: column; text-align: center; }
    .main-navigation ul { justify-content: center; }
    .main-navigation li { margin: 0.5em; }
    body.sticky-header-active { padding-top: 180px; /* Adjust for taller mobile header */ }
}