/*
Theme Name: EE Music Class Articles
Theme URI: https://www.eemusicclass.com
Author: Muse Group
Author URI: https://www.musegroup.com
Description: Custom WordPress theme replicating the Essential Elements Music Class design for the articles subdomain (articles.eemusicclass.com). Built on Bootstrap 4.6 with Montserrat font, matching the original site's navigation, footer, and color scheme.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eemc-articles
Tags: blog, education, custom-header, custom-menu, featured-images, one-column, two-columns
*/

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #e4e5e6;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: #0085CB;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #006da6;
    text-decoration: underline;
}

img { max-width: 100%; height: auto; }

/* ===== HEADINGS ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
}
h1 { font-size: 2.2em; color: #333; }
h2 { font-size: 1.8em; color: #333; }
h3 { color: #D91C5C; font-size: 1.5em; }
h4 { font-size: 1.2em; color: #333; }
hr { border: 0; border-bottom: 1px solid #232323; }

/* ===== LAYOUT ===== */
.site-wrapper {
    max-width: 1340px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 1px 8px 8px 3px rgba(55, 55, 55, .50);
    border-radius: 0 0 5px 5px;
    min-height: 80vh;
}
@media (min-width: 1600px) {
    .site-wrapper { max-width: 1540px; }
}

/* ===== TOP NAVBAR ===== */
.site-header {
    background-color: #fff;
    border-bottom: 1px solid #D9D9D9;
    position: sticky;
    top: 0;
    z-index: 10000;
}
.navbar-inner {
    max-width: 1540px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    flex-wrap: wrap;
}
.site-logo img {
    max-width: 200px;
    height: auto;
}
.main-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    flex-wrap: wrap;
}
.main-nav li { position: relative; }
.main-nav li a {
    display: block;
    padding: 6px 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #0085CB;
    font-size: 0.9em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.main-nav li a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}
/* nav-articles: styled same as other nav items */
.main-nav .nav-subscribe a {
    background-color: #28a745;
    color: #fff !important;
    padding: 6px 14px;
}
.main-nav .nav-subscribe a:hover {
    background-color: #218838;
}
.main-nav .nav-login a {
    color: #28a745;
    border: 1px solid #28a745;
    padding: 6px 14px;
}
.main-nav .nav-login a:hover {
    background-color: #28a745;
    color: #fff;
}

/* Dropdown */
.main-nav .has-dropdown:hover .sub-menu {
    display: block;
}
.main-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
    padding: 5px 0;
    list-style: none;
}
.main-nav .sub-menu li a {
    text-transform: none;
    padding: 8px 16px;
    font-weight: 400;
    color: #333;
    font-size: 0.9em;
}
.main-nav .sub-menu li a:hover {
    background-color: #0085CB;
    color: #fff;
}

/* Mobile hamburger */
.menu-toggle {
    display: none;
    background: none;
    border: 2px solid #0085CB;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    color: #0085CB;
    font-size: 1.2em;
}
@media (max-width: 991px) {
    .menu-toggle { display: block; }
    .main-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin-top: 10px;
    }
    .main-nav.active { display: flex; }
    .main-nav li { width: 100%; }
    .main-nav li a {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
    }
    .main-nav .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: #f9f9f9;
    }
    .main-nav .has-dropdown:hover .sub-menu { display: block; }
}

/* ===== TRIAL BANNER ===== */
.trial-banner {
    background-color: #0085CB;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 1.1em;
}
.trial-banner a {
    display: inline-block;
    background-color: #28a745;
    color: #fff;
    padding: 5px 18px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s;
}
.trial-banner a:hover {
    background-color: #218838;
    text-decoration: none;
    color: #fff;
}

/* ===== MAIN CONTENT ===== */
.site-content {
    padding: 30px 40px 40px;
}
@media (max-width: 768px) {
    .site-content { padding: 20px 15px 30px; }
}

/* Blog layout */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}
@media (max-width: 991px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* Article cards */
.article-card {
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #e0e0e0;
}
.article-card:last-child {
    border-bottom: none;
}
.article-card .entry-thumbnail {
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}
.article-card .entry-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.article-card .entry-thumbnail:hover img {
    transform: scale(1.03);
}
.article-card .entry-meta {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 8px;
}
.article-card .entry-meta a { color: #0085CB; }
.article-card .entry-title {
    margin: 0 0 10px;
}
.article-card .entry-title a {
    color: #333;
    text-decoration: none;
}
.article-card .entry-title a:hover {
    color: #0085CB;
}
.article-card .entry-excerpt {
    color: #555;
    line-height: 1.7;
}
.read-more-link {
    display: inline-block;
    margin-top: 10px;
    color: #0085CB;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
}
.read-more-link:hover { color: #D91C5C; }

/* Single post */
.single-article .entry-header {
    margin-bottom: 25px;
}
.single-article .entry-meta {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 15px;
}
.single-article .entry-content {
    font-size: 1.05em;
    line-height: 1.8;
    color: #444;
}
.single-article .entry-content p {
    margin-bottom: 1.2em;
}
.single-article .entry-content img {
    border-radius: 5px;
    margin: 15px 0;
}
.single-article .entry-content blockquote {
    border-left: 4px solid #0085CB;
    margin: 20px 0;
    padding: 15px 20px;
    background: #f5f8fa;
    font-style: italic;
    color: #555;
}
.single-article .entry-content ul,
.single-article .entry-content ol {
    margin: 15px 0;
    padding-left: 25px;
}

/* Tags */
.entry-tags { margin-top: 20px; }
.entry-tags a {
    display: inline-block;
    background: #e4e5e6;
    color: #555;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.8em;
    margin: 3px 2px;
    transition: all 0.2s;
}
.entry-tags a:hover {
    background: #0085CB;
    color: #fff;
    text-decoration: none;
}

/* ===== SIDEBAR ===== */
.sidebar .widget {
    margin-bottom: 30px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}
.sidebar .widget-title {
    font-size: 1.1em;
    color: #D91C5C;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #D91C5C;
}
.sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .widget ul li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.sidebar .widget ul li:last-child { border-bottom: none; }
.sidebar .widget ul li a {
    color: #333;
    font-size: 0.9em;
}
.sidebar .widget ul li a:hover { color: #0085CB; }

/* Search widget */
.search-form {
    display: flex;
}
.search-form input[type="search"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    outline: none;
}
.search-form input[type="search"]:focus {
    border-color: #0085CB;
}
.search-form button {
    padding: 8px 15px;
    background: #0085CB;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.search-form button:hover { background: #006da6; }

/* ===== PAGINATION ===== */
.pagination-wrap {
    text-align: center;
    padding: 30px 0;
}
.pagination-wrap .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #0085CB;
    font-weight: 700;
    font-size: 0.9em;
}
.pagination-wrap .page-numbers.current {
    background: #0085CB;
    color: #fff;
    border-color: #0085CB;
}
.pagination-wrap .page-numbers:hover {
    background: #f0f0f0;
    text-decoration: none;
}
.pagination-wrap .page-numbers.current:hover {
    background: #0085CB;
}

/* ===== COMMENTS ===== */
.comments-area { margin-top: 40px; }
.comments-area .comments-title {
    font-size: 1.3em;
    margin-bottom: 20px;
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list .comment {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
.comment-author {
    font-weight: 700;
    color: #333;
}
.comment-content { margin-top: 8px; color: #555; }
.comment-respond { margin-top: 30px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 12px;
}
.comment-form textarea { min-height: 120px; }
.comment-form input:focus,
.comment-form textarea:focus { border-color: #0085CB; outline: none; }
.comment-form input[type="submit"] {
    background: #0085CB;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}
.comment-form input[type="submit"]:hover { background: #006da6; }

/* ===== FOOTER ===== */
.site-footer {
    background-color: #282828;
    color: #fff;
    font-size: 0.9em;
    margin-top: 40px;
    padding: 25px 20px;
    text-align: center;
    border-top: 1px solid #ddd;
}
.footer-links {
    margin-bottom: 10px;
}
.footer-links a {
    color: #fff;
    margin: 0 8px;
    font-size: 0.9em;
    text-decoration: none;
}
.footer-links a:hover {
    text-decoration: underline;
    color: #ccc;
}
.footer-links .sep {
    color: #888;
    margin: 0 2px;
}
.footer-copy {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 8px;
}

/* ===== BRAND COLORS (utility) ===== */
.bg-olive   { background-color: #959C2C; }
.bg-orange  { background-color: #F04C26; }
.bg-aqua    { background-color: #00B0AD; }
.bg-purple  { background-color: #8781BD; }
.bg-red     { background-color: #D91C5C; }
.bg-eeblue  { background-color: #0095D9; }
.bg-eepink  { background-color: #DA1C5C; }
.text-eeblue { color: #0085CB; }
.text-eepink { color: #D91C5C; }

/* ===== WordPress alignment classes ===== */
.alignleft   { float: left; margin: 0 20px 10px 0; }
.alignright  { float: right; margin: 0 0 10px 20px; }
.aligncenter { display: block; margin: 10px auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: 0.85em; color: #888; margin-top: 5px; }

/* Gutenberg blocks */
.wp-block-image { margin: 20px 0; }
.wp-block-quote {
    border-left: 4px solid #0085CB;
    margin: 20px 0;
    padding: 15px 20px;
    background: #f5f8fa;
}
.has-text-align-center { text-align: center; }