/*
Theme Name: Simple Starter
Theme URI: https://example.com
Author: MAJ Softeranext
Author URI: https://example.com
Description: Minimal starter theme for learning WordPress theming. Two-column blog layout with Customizer controls.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simple-starter
Tags: two-columns, blog, responsive, accessibility
*/

/* Basic reset and variables */
:root {
  --accent-color: #1e90ff;
  --max-width: 1000px;
  --space: 1rem;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --sidebar-width: 320px; /* default, overridden by inline CSS from WP */
}

html,body{height:100%}
body { font-family: var(--font-system); margin:0; padding:0; color:#222; background:#fff; line-height:1.6; }
a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.site-header { background:#f7f7f7; padding: var(--space); border-bottom:1px solid #eee; }
.site-branding { max-width: var(--max-width); margin:0 auto; display:flex; align-items:center; gap:1rem; width:100%; }
.site-logo { width:160px; height:80px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex: 0 0 auto; }
.site-logo img { width:auto; max-width:100%; max-height:100%; display:block; object-fit:contain; }
.branding-text { display:flex; flex-direction:column; gap:.25rem; }
.site-title { font-weight:700; font-size:1.25rem; margin:0; }
.site-description { margin:0; color:#666; font-size:.9rem; }

.site-navigation { margin-left:auto; }
.site-navigation .menu { list-style:none; margin:0; padding:0; display:flex; gap:1rem; }

.site-main { max-width: var(--max-width); margin: var(--space) auto; padding:0 var(--space); display:grid; grid-template-columns: 1fr var(--sidebar-width); gap:2rem; align-items:start; }

/* Responsive: single column on small */
@media (max-width:900px) {
  .site-main { grid-template-columns: 1fr; }
  .site-navigation { margin-top:.5rem; }
}

/* When sidebar is hidden (body has no-sidebar class) use single column */
body.simple-starter-no-sidebar .site-main { grid-template-columns: 1fr; }

/* Post list */
.article-list article { border-bottom:1px solid #eee; padding:1rem 0; display:flex; gap:1rem; align-items:flex-start; }
.article-list .post-thumbnail img { width:140px; height:auto; display:block; border-radius:4px; }
.entry-title { margin:0 0 .25rem; font-size:1.1rem; }
.entry-meta { color:#666; font-size:.9rem; margin-bottom:.5rem; }

/* Hero */
.site-hero { background:linear-gradient(180deg, rgba(30,144,255,0.08), rgba(255,255,255,0)); padding:2rem var(--space); border-radius:6px; margin-bottom:1.5rem; }
.site-hero h1 { margin:0 0 .5rem; font-size:2rem; }
.site-hero p { margin:0; color:#444; }

/* Sidebar */
.widget { background:#fafafa; border:1px solid #f0f0f0; padding:1rem; margin-bottom:1rem; border-radius:4px; }
.widget-title { font-weight:700; margin:0 0 .5rem; }

/* Footer */
.site-footer { padding:1rem; background:#f7f7f7; text-align:center; border-top:1px solid #eee; margin-top:2rem; }

/* Utility: featured image full width for single */
.single .post-thumbnail img { max-width:100%; height:auto; display:block; margin-bottom:1rem; }

/* Respect accent color from body inline style variable if set */
/* ============================================
   FOOTER STYLES
   ============================================ */

.site-footer {
    background: #1a1a2e;
    color: #c8d6e5;
    padding: 40px 20px 20px;
    margin-top: 40px;
    border-top: none;
}

.footer-widgets {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-column h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.footer-column .footer-description {
    font-size: 14px;
    line-height: 1.6;
    color: #a8b2d1;
    margin-bottom: 10px;
}

.footer-column .footer-powered {
    font-size: 13px;
    color: #a8b2d1;
}

.footer-column .footer-powered a {
    color: #667eea;
    text-decoration: none;
}

.footer-column .footer-powered a:hover {
    text-decoration: underline;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 8px;
}

.footer-menu li a {
    color: #c8d6e5;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-menu li a:hover {
    color: #667eea;
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #c8d6e5;
}

.footer-contact li a {
    color: #c8d6e5;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact li a:hover {
    color: #667eea;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
}

.footer-copyright {
    font-size: 13px;
    color: #8892b0;
    margin: 0;
}

.footer-copyright strong {
    color: #fff;
}

.footer-copyright .footer-link {
    color: #667eea;
    text-decoration: none;
}

.footer-copyright .footer-link:hover {
    text-decoration: underline;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-column h3 {
        margin-top: 20px;
    }
    
    .footer-column:first-child h3 {
        margin-top: 0;
    }
}
/* ============================================
   MOBILE HEADER & HAMBURGER MENU
   ============================================ */

/* Hide menu toggle on desktop */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .site-navigation {
        display: none;
        width: 100%;
        margin-top: 10px;
    }

    .site-navigation.open {
        display: block;
    }

    .site-navigation .menu {
        flex-direction: column;
        gap: 0;
        background: #f7f7f7;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eee;
    }

    .site-navigation .menu li {
        border-bottom: 1px solid #eee;
        margin: 0;
    }

    .site-navigation .menu li:last-child {
        border-bottom: none;
    }

    .site-navigation .menu li a {
        display: block;
        padding: 12px 20px;
        width: 100%;
        color: #333;
        text-decoration: none;
        transition: background 0.3s ease;
    }

    .site-navigation .menu li a:hover {
        background: #667eea;
        color: #fff;
    }

    .site-branding {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .branding-text {
        flex: 1;
        min-width: 0;
    }

    .site-title h1 {
        font-size: 1.1rem;
    }
}
/* ============================================
   MOBILE HEADER - LOGO / SITE NAME FIX
   ============================================ */

@media (max-width: 768px) {
    /* Hide site description on mobile */
    .branding-text .site-description {
        display: none;
    }
    
    /* Make site title smaller on mobile */
    .branding-text .site-title {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
    /* Hide site title and description if logo exists */
    .branding-text .site-title {
        display: none;
    }
    .branding-text .site-description {
        display: none;
    }
}