/*
Theme Name:   News Magazine X Child
Theme URI:    https://wp-royal-themes.com/
Description:  A child theme for News Magazine X — customize freely without losing changes on parent theme updates.
Author:       Your Name
Author URI:   https://yourwebsite.com
Template:     news-magazine-x
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  news-magazine-x-child
Tags:         news, magazine, blog, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==============================================
   CHILD THEME CUSTOM STYLES
   Add your customizations below.
   These will override the parent theme styles.
   ============================================== */

/* ----- Global / Typography ----- */
body {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.75;
    color: #222222;
}

a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* ----- Accent / Brand Color ----- */
:root {
    --nmx-accent:       #c0392b;   /* Change this to your brand color */
    --nmx-accent-dark:  #96281b;
    --nmx-accent-light: #e74c3c;
    --nmx-text:         #222222;
    --nmx-muted:        #777777;
    --nmx-border:       #e5e5e5;
    --nmx-bg:           #f5f5f5;
    --nmx-white:        #ffffff;
}

/* ----- Header Customization ----- */
.site-header,
.nmx-header {
    border-bottom: 3px solid var(--nmx-accent);
    background-color: var(--nmx-white);
}

.site-branding .site-title a {
    color: var(--nmx-accent);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.site-branding .site-title a:hover {
    color: var(--nmx-accent-dark);
    text-decoration: none;
}

/* ----- Navigation Menu ----- */
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
    color: var(--nmx-accent);
}

.main-navigation .sub-menu {
    border-top: 2px solid var(--nmx-accent);
}

/* ----- Breaking News Ticker ----- */
.nmx-breaking-news,
.breaking-news-bar {
    background-color: var(--nmx-accent);
    color: var(--nmx-white);
}

.nmx-breaking-news .breaking-label,
.breaking-news-bar .label {
    background-color: var(--nmx-accent-dark);
}

/* ----- Post / Article Cards ----- */
.nmx-post-card:hover,
.post-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    transform: translateY(-2px);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.post-title a:hover,
.entry-title a:hover {
    color: var(--nmx-accent);
}

/* Category badge / label */
.nmx-category-label,
.cat-label,
.post-category a {
    background-color: var(--nmx-accent);
    color: var(--nmx-white) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
}

/* ----- Featured / Hero Section ----- */
.nmx-featured-post .entry-title a,
.hero-section .entry-title a {
    color: var(--nmx-white);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.nmx-featured-post:hover .entry-title a,
.hero-section:hover .entry-title a {
    color: var(--nmx-accent-light);
}

/* ----- Sidebar ----- */
.widget-area .widget-title,
.sidebar .widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nmx-text);
    border-left: 4px solid var(--nmx-accent);
    padding-left: 10px;
    margin-bottom: 16px;
}

/* ----- Buttons ----- */
.btn-primary,
button[type="submit"],
input[type="submit"],
.nmx-btn {
    background-color: var(--nmx-accent);
    color: var(--nmx-white);
    border: none;
    border-radius: 3px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.nmx-btn:hover {
    background-color: var(--nmx-accent-dark);
    color: var(--nmx-white);
}

/* ----- Single Post ----- */
.single .entry-header .entry-title {
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.25;
    font-weight: 800;
    color: var(--nmx-text);
}

.single .entry-content p {
    margin-bottom: 1.4em;
}

.single .entry-content a {
    color: var(--nmx-accent);
    text-decoration: underline;
}

.single .entry-content blockquote {
    border-left: 4px solid var(--nmx-accent);
    background: var(--nmx-bg);
    padding: 16px 20px;
    margin: 24px 0;
    font-style: italic;
    color: var(--nmx-muted);
}

/* Post meta (author, date, reading time) */
.entry-meta,
.post-meta {
    font-size: 13px;
    color: var(--nmx-muted);
    margin-bottom: 16px;
}

.entry-meta a,
.post-meta a {
    color: var(--nmx-accent);
}

/* ----- Pagination ----- */
.page-numbers.current,
.pagination .current {
    background-color: var(--nmx-accent);
    color: var(--nmx-white);
    border-color: var(--nmx-accent);
}

.page-numbers:hover,
.pagination a:hover {
    background-color: var(--nmx-accent-light);
    color: var(--nmx-white);
}

/* ----- Footer ----- */
.site-footer {
    background-color: #1a1a1a;
    color: #cccccc;
    border-top: 3px solid var(--nmx-accent);
}

.site-footer a {
    color: #cccccc;
}

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

.site-footer .widget-title {
    color: var(--nmx-white);
    border-color: var(--nmx-accent);
}

.site-footer .footer-bottom {
    border-top: 1px solid #333333;
    font-size: 13px;
    color: #888888;
    padding-top: 14px;
    margin-top: 30px;
}

/* ----- Search Form ----- */
.search-form .search-field:focus {
    border-color: var(--nmx-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
}

/* ----- WooCommerce (if used) ----- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
    background-color: var(--nmx-accent) !important;
    color: var(--nmx-white) !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--nmx-accent-dark) !important;
}

/* ----- Responsive Tweaks ----- */
@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
    }

    .single .entry-header .entry-title {
        font-size: 24px;
    }

    .widget-area {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px;
    }
}