/*
Theme Name:     Himalayan Voice Child
Theme URI:      https://thehimalayanvoice.com
Description:    Child theme for Himalayan Voice - Online News Portal
Author:         Himalayan Voice
Author URI:     https://thehimalayanvoice.com
Template:       blocksy
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:    himalayan-voice-child
*/

/* ============================================================
   HIMALAYAN VOICE — BRAND COLORS & VARIABLES
   ============================================================ */
:root {
    --hv-red:         #C0392B;   /* Primary — news authority    */
    --hv-red-dark:    #962d22;   /* Hover state for red         */
    --hv-navy:        #1A2940;   /* Secondary — trust           */
    --hv-navy-light:  #243652;   /* Hover state for navy        */
    --hv-gold:        #D4AC0D;   /* Accent — Himalayan identity */
    --hv-gold-light:  #f0c514;   /* Hover state for gold        */
    --hv-white:       #FFFFFF;
    --hv-off-white:   #F5F5F5;
    --hv-light-gray:  #EEEEEE;
    --hv-mid-gray:    #999999;
    --hv-text:        #1A1A1A;
    --hv-text-light:  #555555;
    --hv-border:      #E0E0E0;
    --hv-font-main:   'Georgia', 'Times New Roman', serif;
    --hv-font-ui:     'Inter', 'Helvetica Neue', Arial, sans-serif;
    --hv-font-mono:   'Courier New', monospace;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--hv-font-ui);
    color: var(--hv-text);
    background-color: var(--hv-white);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--hv-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--hv-red);
}

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

/* ============================================================
   TOP BAR — date, location, social icons
   ============================================================ */
.ct-top-bar,
.top-bar,
.topbar {
    background-color: var(--hv-navy) !important;
    color: var(--hv-white) !important;
    font-size: 12px;
    font-family: var(--hv-font-ui);
    padding: 6px 0;
    border-bottom: 2px solid var(--hv-gold);
}

.ct-top-bar a,
.top-bar a,
.topbar a {
    color: var(--hv-gold) !important;
}

.ct-top-bar a:hover,
.top-bar a:hover,
.topbar a:hover {
    color: var(--hv-white) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.ct-header,
header.site-header,
#site-header {
    background-color: var(--hv-white) !important;
    border-bottom: 3px solid var(--hv-red) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 12px 0;
}

.site-title,
.ct-site-title,
.logo-text {
    font-family: var(--hv-font-main);
    font-size: 28px;
    font-weight: 700;
    color: var(--hv-navy) !important;
    letter-spacing: -0.5px;
}

.site-description,
.ct-site-tagline {
    color: var(--hv-mid-gray) !important;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================================
   NAVIGATION MENU
   ============================================================ */
.ct-header nav,
nav.main-navigation,
#site-navigation,
.primary-menu-container {
    background-color: var(--hv-navy) !important;
}

/* Main nav links */
.ct-header nav a,
.main-navigation a,
#site-navigation a,
.primary-menu-container a {
    color: var(--hv-white) !important;
    font-family: var(--hv-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 16px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ct-header nav a:hover,
.main-navigation a:hover,
#site-navigation a:hover {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
}

/* Active/current menu item */
.current-menu-item > a,
.current-page-ancestor > a {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
}

/* Dropdown menus */
.ct-header nav .sub-menu,
.main-navigation .sub-menu {
    background-color: var(--hv-navy) !important;
    border-top: 2px solid var(--hv-red);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
}

.ct-header nav .sub-menu a,
.main-navigation .sub-menu a {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 12px !important;
}

/* ============================================================
   BREAKING NEWS / TRENDING BAR
   ============================================================ */
.breaking-news,
.trending-bar,
.ct-ticker,
.news-ticker {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
}

.breaking-news .label,
.breaking-label,
.ticker-label {
    background-color: var(--hv-navy) !important;
    color: var(--hv-gold) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    margin-right: 12px;
}

.breaking-news a,
.trending-bar a,
.news-ticker a {
    color: var(--hv-white) !important;
}

.breaking-news a:hover,
.trending-bar a:hover,
.news-ticker a:hover {
    color: var(--hv-gold) !important;
}

/* ============================================================
   CATEGORY LABELS / TAGS
   ============================================================ */
.cat-label,
.category-label,
.post-category,
.entry-category,
.ct-label,
.td-post-category {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 2px;
    display: inline-block;
}

.cat-label:hover,
.category-label:hover,
.post-category:hover {
    background-color: var(--hv-navy) !important;
    color: var(--hv-white) !important;
}

/* ============================================================
   ARTICLE CARDS / POST GRID
   ============================================================ */
.post-card,
.article-card,
.ct-post,
article.post {
    background-color: var(--hv-white);
    border: 1px solid var(--hv-border);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.post-card:hover,
.article-card:hover,
article.post:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

/* Post thumbnails */
.post-thumbnail,
.entry-thumbnail,
.ct-image-container {
    overflow: hidden;
}

.post-thumbnail img,
.entry-thumbnail img,
.ct-image-container img {
    transition: transform 0.4s ease;
    width: 100%;
    object-fit: cover;
}

.post-thumbnail img:hover,
.entry-thumbnail img:hover,
.ct-image-container img:hover {
    transform: scale(1.04);
}

/* ============================================================
   HEADINGS & TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hv-font-main);
    color: var(--hv-navy);
    line-height: 1.3;
    font-weight: 700;
}

/* Article/post titles */
.entry-title,
.post-title,
h2.entry-title a,
h3.entry-title a {
    font-family: var(--hv-font-main);
    color: var(--hv-navy) !important;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.entry-title a:hover,
.post-title a:hover,
h2.entry-title a:hover,
h3.entry-title a:hover {
    color: var(--hv-red) !important;
}

/* Single post title */
.single .entry-title,
h1.entry-title {
    font-size: 32px;
    color: var(--hv-navy);
    border-left: 4px solid var(--hv-red);
    padding-left: 16px;
    margin-bottom: 16px;
}

/* Section headings on homepage */
.section-title,
.block-title,
.widget-title,
h3.widget-title {
    font-family: var(--hv-font-ui);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--hv-white) !important;
    background-color: var(--hv-navy);
    padding: 8px 14px;
    margin-bottom: 16px;
    border-left: 4px solid var(--hv-red);
    display: block;
}

/* ============================================================
   ARTICLE BODY CONTENT
   ============================================================ */
.entry-content,
.post-content,
article .entry-content {
    font-family: var(--hv-font-main);
    font-size: 17px;
    line-height: 1.8;
    color: var(--hv-text);
}

.entry-content p,
.post-content p {
    margin-bottom: 20px;
}

.entry-content h2,
.post-content h2 {
    font-size: 22px;
    color: var(--hv-navy);
    border-bottom: 2px solid var(--hv-light-gray);
    padding-bottom: 8px;
    margin: 32px 0 16px;
}

.entry-content h3,
.post-content h3 {
    font-size: 18px;
    color: var(--hv-navy);
    margin: 24px 0 12px;
}

/* Blockquote */
.entry-content blockquote,
.post-content blockquote {
    border-left: 4px solid var(--hv-red);
    background-color: var(--hv-off-white);
    padding: 16px 20px;
    margin: 24px 0;
    font-style: italic;
    color: var(--hv-text-light);
    font-size: 18px;
}

/* ============================================================
   META — author, date, reading time
   ============================================================ */
.entry-meta,
.post-meta,
.ct-meta {
    font-size: 12px;
    color: var(--hv-mid-gray);
    font-family: var(--hv-font-ui);
    margin: 8px 0;
}

.entry-meta a,
.post-meta a,
.ct-meta a {
    color: var(--hv-mid-gray) !important;
    font-weight: 600;
}

.entry-meta a:hover,
.post-meta a:hover {
    color: var(--hv-red) !important;
}

/* ============================================================
   BUTTONS & CTA
   ============================================================ */
.btn,
.button,
input[type="submit"],
.wp-block-button__link,
.ct-button {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
    font-family: var(--hv-font-ui);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--hv-red-dark) !important;
    color: var(--hv-white) !important;
}

/* Read more links */
.read-more,
.more-link,
.ct-more-link {
    color: var(--hv-red) !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.read-more:hover,
.more-link:hover {
    color: var(--hv-navy) !important;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-form input[type="search"],
.ct-search input[type="search"] {
    border: 2px solid var(--hv-border);
    border-radius: 3px 0 0 3px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: var(--hv-font-ui);
    outline: none;
    transition: border-color 0.2s ease;
}

.search-form input[type="search"]:focus {
    border-color: var(--hv-red);
}

.search-form input[type="submit"],
.ct-search button {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
    border: none;
    border-radius: 0 3px 3px 0;
    padding: 8px 16px;
    cursor: pointer;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar,
#secondary,
.ct-sidebar {
    font-family: var(--hv-font-ui);
}

.sidebar .widget,
#secondary .widget {
    margin-bottom: 28px;
    border: 1px solid var(--hv-border);
    border-radius: 4px;
    overflow: hidden;
}

.sidebar .widget-title,
#secondary .widget-title {
    background-color: var(--hv-navy);
    color: var(--hv-white) !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 10px 14px;
    margin: 0 0 0 0;
    border-left: 4px solid var(--hv-red);
}

/* Popular posts in sidebar */
.sidebar .popular-posts li,
#secondary .popular-posts li {
    border-bottom: 1px solid var(--hv-light-gray);
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}

.sidebar .popular-posts li a,
#secondary .popular-posts li a {
    color: var(--hv-navy) !important;
    font-weight: 600;
}

.sidebar .popular-posts li a:hover {
    color: var(--hv-red) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,
.nav-links,
.page-numbers {
    font-family: var(--hv-font-ui);
    margin: 32px 0;
}

.page-numbers a,
.pagination a {
    background-color: var(--hv-light-gray);
    color: var(--hv-navy) !important;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.page-numbers a:hover,
.pagination a:hover,
.page-numbers.current {
    background-color: var(--hv-red) !important;
    color: var(--hv-white) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ct-footer,
footer.site-footer,
#colophon {
    background-color: var(--hv-navy) !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 48px 0 0;
    border-top: 4px solid var(--hv-red);
}

.ct-footer .widget-title,
footer .widget-title {
    background-color: transparent !important;
    color: var(--hv-gold) !important;
    border-left: 3px solid var(--hv-red);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 0 0 10px;
    margin-bottom: 16px;
}

.ct-footer a,
footer a {
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px;
    line-height: 2;
    transition: color 0.2s ease;
}

.ct-footer a:hover,
footer a:hover {
    color: var(--hv-gold) !important;
}

/* Footer bottom bar */
.ct-footer-bottom,
.footer-bottom,
.site-info {
    background-color: rgba(0,0,0,0.25) !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 14px 0;
    margin-top: 32px;
    font-size: 12px;
    color: rgba(255,255,255,0.5) !important;
    text-align: center;
}

/* ============================================================
   SOCIAL MEDIA ICONS
   ============================================================ */
.social-links a,
.ct-social-links a,
.social-icons a {
    background-color: rgba(255,255,255,0.1) !important;
    color: var(--hv-white) !important;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.2s ease;
    margin: 0 4px;
}

.social-links a:hover,
.ct-social-links a:hover {
    background-color: var(--hv-red) !important;
}

/* ============================================================
   ADVERTISEMENT ZONES
   ============================================================ */
.ad-zone,
.advertisement,
.ad-banner {
    text-align: center;
    padding: 12px;
    background-color: var(--hv-off-white);
    border: 1px dashed var(--hv-border);
    border-radius: 4px;
    margin: 20px 0;
    font-size: 11px;
    color: var(--hv-mid-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   FEATURED / HERO POST
   ============================================================ */
.hero-post,
.featured-post,
.ct-hero {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.hero-post .overlay,
.featured-post .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(26,41,64,0.92));
    padding: 32px 24px 24px;
}

.hero-post .entry-title,
.featured-post .entry-title {
    color: var(--hv-white) !important;
    font-size: 24px;
    border-left: none;
    padding-left: 0;
}

/* ============================================================
   TAGS
   ============================================================ */
.tags-links a,
.post-tags a,
.entry-tags a {
    background-color: var(--hv-light-gray);
    color: var(--hv-text-light) !important;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 2px;
    margin: 2px;
    display: inline-block;
    transition: all 0.2s ease;
}

.tags-links a:hover,
.post-tags a:hover {
    background-color: var(--hv-navy) !important;
    color: var(--hv-white) !important;
}

/* ============================================================
   AUTHOR BOX
   ============================================================ */
.author-box,
.ct-author-box {
    background-color: var(--hv-off-white);
    border: 1px solid var(--hv-border);
    border-left: 4px solid var(--hv-red);
    border-radius: 4px;
    padding: 20px;
    margin: 32px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.author-box img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 3px solid var(--hv-red);
}

.author-box .author-name {
    font-weight: 700;
    color: var(--hv-navy);
    font-size: 15px;
}

/* ============================================================
   RELATED POSTS
   ============================================================ */
.related-posts,
.ct-related-posts {
    border-top: 3px solid var(--hv-navy);
    padding-top: 24px;
    margin-top: 32px;
}

.related-posts h3,
.ct-related-posts h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--hv-navy);
    margin-bottom: 20px;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .single .entry-title,
    h1.entry-title {
        font-size: 22px;
    }

    .entry-content,
    .post-content {
        font-size: 16px;
    }

    .site-title,
    .ct-site-title {
        font-size: 22px;
    }

    .section-title,
    .widget-title,
    h3.widget-title {
        font-size: 12px;
    }

    .ct-footer,
    footer.site-footer {
        padding: 32px 0 0;
    }
}

@media (max-width: 480px) {
    .single .entry-title,
    h1.entry-title {
        font-size: 20px;
        padding-left: 10px;
    }

    .entry-content h2,
    .post-content h2 {
        font-size: 18px;
    }
}

/* ============================================================
   NEPALI LANGUAGE SECTION SUPPORT
   ============================================================ */
:lang(ne),
.nepali-content {
    font-family: 'Noto Sans Devanagari', 'Mangal', Arial Unicode MS, sans-serif;
    font-size: 17px;
    line-height: 2;
}