/*
Theme Name: RK News Theme
Theme URI: https://rknewsblog.com
Author: Your Name
Author URI: https://rknewsblog.com
Description: A custom theme for the RK News Blog with menu and featured image support.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rknewstheme
*/

/* --- Custom Font Definitions --- */
@font-face {
    font-family: 'News 706';
    src: url('fonts/News706BT-RomanC.woff') format('woff');
    font-weight: normal; /* 400 */
    font-style: normal;
}

@font-face {
    font-family: 'News 706';
    src: url('fonts/News706BT-BoldC.woff') format('woff');
    font-weight: bold; /* 700 */
    font-style: normal;
}

@font-face {
    font-family: 'News 706';
    src: url('fonts/News706BT-ItalicC.woff') format('woff');
    font-weight: normal; /* 400 */
    font-style: italic;
}
/* --- End Custom Font Definitions --- */


/* --- GLOBAL & FULL-WIDTH LAYOUT --- */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    background-color: #fff; /* Ensures background is white for full-width */
}

.container {
    max-width: 100%;
    margin: 0;
    padding: 0; /* Removes side padding for edge-to-edge header/footer */
    box-shadow: none;
    background-color: transparent;
}

/* Adds padding back to your main content for readability */
.content-area {
    max-width: 1200px; /* Keeps content from being too wide on large screens */
    margin: 0 auto;
    padding: 25px;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    color: #111;
}

/* --- HEADER STYLE: Gray/Sky Blue & Centered --- */
.site-header {
    background: linear-gradient(90deg, #6c757d 0%, #87CEEB 100%);
    padding: 0;
    color: #fff;
}

.header-branding-bar {
    padding: 10px 25px;
}

.branding-content {
    display: flex;
    align-items: center;
    justify-content: center; /* THIS CENTERS THE LOGO AND TITLE */
}

.site-logo .custom-logo-link img.custom-logo {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.site-title-container {
    margin-left: 20px;
}

h1.site-title,
p.site-title {
    font-family: 'News 706', serif; /* Use the font name from @font-face */
    font-size: 2.2rem;
    font-weight: normal;  /* This selects the Roman/Regular file */
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    margin: 0;
    padding: 0;
    text-transform: none; /* Set to none to match the MS Word look */
    letter-spacing: 1px;
}

.site-title a {
    color: #fff; /* Applies color to the link */
    text-decoration: none;
}

/* --- NAVIGATION BAR --- */
.header-nav-bar {
    background-color: rgba(0,0,0,0.2);
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center; /* THIS CENTERS THE MENU */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-navigation ul li a {
    display: block;
    color: #fff;
    padding: 15px 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    transition: background-color 0.3s;
    white-space: nowrap; /* Prevents text from wrapping */
}

.main-navigation ul li a:hover {
    background-color: rgba(255,255,255,0.1);
}


/* --- HOMEPAGE POST LAYOUT (TWO-COLUMN) --- */
.home article.post {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

/* This is a "clearfix" to contain the floated image */
.home article.post::after {
    content: "";
    display: table;
    clear: both;
}

/* Featured image (left column) */
.home article.post .post-thumbnail {
    float: left;
    width: 40%; /* Image container takes up 40% of the width */
    max-width: 350px; /* Prevents image from getting too large on big screens */
    margin-right: 30px;
    margin-bottom: 10px;
}

.wp-post-image {
    max-width: 100%; /* Ensures image never overflows its container */
    height: auto;
}

.home article.post .entry-header h2 a {
    font-size: 1.7em;
    color: #111;
    text-decoration: none;
    line-height: 1.3;
}

.home article.post .entry-header h2 a:hover {
    color: #0073aa;
}

/* --- SINGLE POST STYLING --- */
.single .post-thumbnail {
    max-width: 100%;
    margin-bottom: 25px;
}

.single .entry-content p {
    font-size: 1.1em;
    line-height: 1.7;
}

/* --- NEWS TV STYLE FOOTER --- */
.site-footer {
    background-color: #222222;
    color: #cccccc;
    padding: 0;
    margin-top: 40px;
    font-family: Arial, sans-serif;
}

.footer-social-app-bar {
    background-color: #1a1a1a;
    padding: 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.footer-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows items to stack on mobile */
}

.footer-follow-us, .footer-download-app {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adds spacing when stacked */
}

.footer-follow-us h4, .footer-download-app h4 {
    color: #fff;
    margin: 0 20px 0 0;
    font-size: 1em;
    font-weight: bold;
}

.footer-social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.2s;
}

.footer-social-icons a:hover {
    background-color: #555;
}

.app-badges img {
    height: 40px;
    margin-left: 10px;
}

.footer-legal-bar {
    background-color: #000;
    color: #a0a0a0;
    padding: 15px;
    text-align: center;
    font-size: 0.85em;
}

.footer-legal-bar p {
    margin: 0 0 5px;
}

.footer-legal-bar a {
    color: #a0a0a0;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s;
}

.footer-legal-bar a:hover {
    color: #fff;
}

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    /* Center header content on mobile */
    .branding-content {
        flex-direction: column;
        text-align: center;
    }
    
    .site-title-container {
        margin-left: 0;
        margin-top: 15px;
    }

    /* Stack homepage post image and text */
    .home article.post .post-thumbnail {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .home article.post .entry-header h2 a {
        font-size: 1.4em;
    }
    
    /* Center footer social/app bar items */
    .footer-bar-content {
        flex-direction: column;
        justify-content: center;
    }
    
    .footer-follow-us, .footer-download-app {
        margin-bottom: 20px;
        flex-direction: column;
    }
    
    .footer-follow-us h4, .footer-download-app h4 {
        margin: 0 0 15px 0;
    }
}
/* FIX: Remove white space above header */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
/* This new rule forces all homepage images to be the same size */
.home article.post .post-thumbnail img {
    width: 100%;
    height: 220px; /* You can adjust this pixel value to make images taller or shorter */
    object-fit: cover;
}
/* --- SUBMENU / DROPDOWN STYLES --- */

/* Set up the parent menu item for positioning */
.main-navigation ul li {
    position: relative;
}

/* Hide the submenu by default and position it */
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%; /* Place it directly below the parent */
    left: 0;
    background-color: #3a3a3a; /* Dark background for the dropdown */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 200px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    z-index: 100; /* Make sure it appears above other content */
}

/* Show the submenu when hovering over the parent list item */
.main-navigation ul li:hover > .sub-menu {
    display: block;
}

/* Style the links inside the dropdown */
.main-navigation .sub-menu li a {
    padding: 8px 15px;
    color: #ffffff;
    white-space: nowrap; /* Prevent links from wrapping to a new line */
    font-weight: normal;
    text-transform: none;
}

/* Add a hover effect for links inside the dropdown */
.main-navigation .sub-menu li a:hover {
    background-color: #555555;
}

/* --- ADD DROPDOWN ARROW INDICATOR --- */
.main-navigation .menu-item-has-children > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 7px;
    display: inline-block;
}