/*!
Theme Name: Hemila
Theme URI: https://pencilwp.com/product/hemila-pro/
Author: PencilWp
Description: Hemila is a creative multipurpose news theme. Polished & Optimized for The News Fetcher (Final Master Version).
Version: 1.6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hemila
*/

/* 1. TYPOGRAPHY & GLOBAL RESET */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: #2c2c2c;
    background-color: #f8f9fa; /* Subtle grey for depth */
    line-height: 1.6;
    margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Smooth Scrolling */
html { scroll-behavior: smooth; }

/* Fluid Images */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 6px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a {
    color: #2A2E40;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
a:hover { color: #0CBDBD; }

/*---------------------------------------
# 2. HEADER & NAVIGATION
-----------------------------------------*/
.header { position: relative; background: #2A2E40; }

/* Topbar */
.topbar { padding: 8px 0; background: #fff; border-bottom: 1px solid #eee; font-size: 13px; }
.top-date { font-weight: 600; color: #666; display: flex; align-items: center; }
.top-date i { color: #F48C1E; margin-right: 6px; }
.top-right ul { text-align: right; margin: 0; padding: 0; }
.top-right ul li { display: inline-block; margin-left: 15px; }

/* Main Header (Logo Area) */
.header-inner { padding: 25px 0; background: #2A2E40; }
.logo { display: flex; align-items: center; height: 100%; }

/* FLUID LOGO LOGIC */
.custom-logo-link img, .logo img {
    max-height: 50px; /* Desktop Height */
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}
.logo .site-title a { color: #fff; font-size: 32px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.logo .site-description { display: none; }

/* Social Icons (Glassmorphism) */
.social-widget { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.social-icons li { display: inline-block; margin-left: 8px; }
.social-icons li a {
    display: flex; justify-content: center; align-items: center;
    width: 34px; height: 34px; background: rgba(255,255,255,0.1); color: #fff;
    border-radius: 50%; font-size: 14px;
    backdrop-filter: blur(4px);
}
.social-icons li a:hover { background: #0CBDBD; transform: scale(1.1); }

/* STICKY MENU BAR */
.main-menu {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 3px solid #0CBDBD;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: sticky; top: 0; z-index: 1000;
    backdrop-filter: blur(10px);
}

/* Flexbox Menu */
.main-navigation { display: flex; align-items: center; justify-content: space-between; }
.main-navigation ul { margin: 0; padding: 0; list-style: none; display: flex; }
.main-navigation ul li { position: relative; }
.main-navigation ul li a {
    color: #222; display: block; padding: 18px 20px;
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
}
.main-navigation ul li:hover > a, .main-navigation ul li.current-menu-item > a {
    color: #0CBDBD; background: rgba(12, 189, 189, 0.05);
}

/* Dropdowns */
.main-navigation ul ul {
    position: absolute; top: 100%; left: 0; background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); min-width: 220px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 2px solid #F48C1E; z-index: 9999; display: block;
}
.main-navigation ul li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.main-navigation ul ul li { display: block; border-bottom: 1px solid #f9f9f9; }
.main-navigation ul ul li a { padding: 12px 20px; font-size: 13px; text-transform: none; }

/*---------------------------------------
# 3. CONTENT & FLUID CARDS
-----------------------------------------*/
.hero-section { margin-bottom: 50px; }
.hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; pointer-events: none;
}
.hero-big-card, .hero-small-card {
    border-radius: 12px; overflow: hidden; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.hero-big-card:hover img, .hero-small-card:hover img { transform: scale(1.08); }

/* Article List Cards */
.hemila-single-post {
    margin-bottom: 40px; background: #fff; border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hemila-single-post:hover { transform: translateY(-5px); }
.hemila-single-post .blog-head img { border-radius: 8px; width: 100%; }
.hemila-single-post .blog-body h2 { font-size: 22px; font-weight: 700; margin: 15px 0 10px; line-height: 1.3; }
.hemila-single-post .blog-body h2 a:hover { color: #0CBDBD; text-decoration: underline; text-decoration-color: #F48C1E; }

/* Typography */
.entry-content p, .entry-content li { font-size: 19px !important; line-height: 1.8 !important; color: #333; margin-bottom: 1.5em; }
.entry-content h2 { font-size: 28px; font-weight: 800; margin-top: 40px; color: #111; letter-spacing: -0.5px; }

/*---------------------------------------
# 4. STICKY SIDEBAR & WIDGETS
-----------------------------------------*/
.hemila-sidebar { position: sticky; top: 90px; } /* Sidebar follows scroll */
.hemila-sidebar .widget {
    background: #fff; padding: 30px; border: 1px solid #eee; border-top: 3px solid #0CBDBD;
    margin-bottom: 30px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}
.widget .widget-title {
    font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; margin-bottom: 20px; color: #2A2E40;
}
.widget ul li { border-bottom: 1px solid #f9f9f9; padding: 12px 0; }
.widget ul li a:hover { color: #F48C1E; transform: translateX(5px); display: inline-block; }

/* Forms */
.search-form { position: relative; }
.search-form input[type="search"] { height: 50px; padding-right: 55px; border: 1px solid #ddd; border-radius: 6px; }
.search-form input[type="submit"] {
    position: absolute; top: 0; right: 0; height: 50px; width: 50px;
    background: #0CBDBD; color: transparent !important; border-radius: 0 6px 6px 0; padding: 0;
}
.search-form:after {
    content: "\f002"; font-family: 'FontAwesome'; position: absolute; top: 0; right: 0;
    width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; pointer-events: none;
}
input[type="text"], input[type="email"], textarea { width: 100%; padding: 12px 15px; border: 1px solid #ebebeb; border-radius: 6px; background: #fff; box-sizing: border-box; }

/*---------------------------------------
# 5. SINGLE POST ELEMENTS (Author/Share)
-----------------------------------------*/

/* Hero Header & Meta */
.entry-header { margin-bottom: 30px; }
.entry-cat-pill { margin-bottom: 15px; }
.entry-cat-pill a {
    background: #F48C1E; color: #fff; padding: 5px 12px; 
    font-size: 12px; font-weight: 700; text-transform: uppercase; 
    border-radius: 4px; display: inline-block;
}
.entry-cat-pill a:hover { background: #0CBDBD; color: #fff; }

.entry-meta-row { display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 30px; }
.meta-avatar img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; }
.meta-text { display: flex; flex-direction: column; }
.meta-text .byline { font-weight: 700; font-size: 14px; color: #2A2E40; }
.meta-text .posted-on { font-size: 13px; color: #888; }

.single-featured-image { margin-bottom: 35px; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.single-featured-image img { width: 100%; height: auto; display: block; }

/* Share Box */
.news-share-box { padding: 25px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.news-share-box h4 { margin: 0 0 15px; font-size: 16px; font-weight: 800; text-transform: uppercase; }
.share-links { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px; border-radius: 5px; color: #fff !important; 
    font-weight: 600; font-size: 14px; flex: 1; min-width: 120px;
}
.share-btn i { margin-right: 8px; font-size: 16px; }
.share-btn.fb { background: #1877f2; }
.share-btn.tw { background: #000; }
.share-btn.wa { background: #25d366; }
.share-btn:hover { opacity: 0.9; transform: translateY(-2px); }

/* Author Box */
.author-box-card {
    display: flex; align-items: flex-start;
    background: #f9f9f9; padding: 30px; 
    border-left: 5px solid #0CBDBD; border-radius: 6px; margin-top: 40px;
}
.author-box-img img { width: 80px; height: 80px; border-radius: 50%; margin-right: 25px; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.author-box-content h4 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #2A2E40; }
.author-box-content p { font-size: 15px; color: #555; line-height: 1.6; margin: 0 0 10px; }
.author-box-link a { font-size: 13px; font-weight: 700; color: #F48C1E; text-transform: uppercase; }

/*---------------------------------------
# 6. PAGINATION (FORCE HORIZONTAL)
-----------------------------------------*/
.pagination-main, .nav-links, .page-numbers, ul.page-numbers {
    display: flex !important; flex-wrap: wrap !important; flex-direction: row !important;
    justify-content: flex-start; gap: 10px; padding: 0 !important; margin: 40px 0 0 !important; list-style: none !important;
}
.pagination-main li, ul.page-numbers li { display: block !important; margin: 0 !important; padding: 0 !important; width: auto !important; }

.page-numbers {
    display: flex; justify-content: center; align-items: center;
    width: 45px; height: 45px; border-radius: 50%;
    background: #fff; border: 1px solid #eee; color: #333; font-weight: 600; text-decoration: none;
    transition: all 0.2s ease;
}
.page-numbers.current, a.page-numbers:hover, .pagination-main li.active a {
    background: #F48C1E; color: #fff !important; border-color: #F48C1E; transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(244, 140, 30, 0.3);
}
ul.page-numbers { width: 100%; }

/*---------------------------------------
# 7. UTILITIES & CLEANUP
-----------------------------------------*/
.site-footer { background: #1a1d2e; color: #bbb; }
.footer-top { padding: 60px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.footer-bottom { padding: 25px 0; background: #151725; text-align: center; }
.scroll-top a {
    position: fixed; bottom: 25px; right: 25px; background: #F48C1E; color: #fff;
    width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; z-index: 999;
    box-shadow: 0 4px 15px rgba(244, 140, 30, 0.4);
}

/* Hide Old Elements */
.comments, .post-thumb .comment, .blog-meta .fa-comments, .post-formet { display: none !important; }

/* NUCLEAR DUPLICATE TITLE FIX */
/* Hides any H1 that is NOT our custom one */
.site-main h1:not(.custom-hero-title),
.entry-header h1:not(.custom-hero-title),
.page-header h1,
.post-header h1,
h1.entry-title:not(.custom-hero-title) {
    display: none !important;
}

/* Show our custom one */
h1.custom-hero-title {
    display: block !important;
    font-size: 34px; font-weight: 800; line-height: 1.25;
    margin-bottom: 20px; color: #111; letter-spacing: -0.5px;
}

@media print { .header, .site-footer, .hemila-sidebar { display: none !important; } }

/*---------------------------------------
# 8. MOBILE & RESPONSIVE RULES
-----------------------------------------*/
.hemila-mobile-menu { display: none; float: right; margin-top: 5px; }

@media (max-width: 991px) {
    /* Logo & Header */
    .custom-logo-link img, .logo img { max-height: 35px; }
    .header-inner { padding: 15px 0; }
    
    /* Mobile Menu Logic (Checkbox Hack) */
    .main-navigation {
        display: none; flex-direction: column; align-items: flex-start;
        position: absolute; top: 100%; left: 0; width: 100%;
        background: #fff; border-top: 2px solid #F48C1E; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    #mobile-menu-checkbox:checked ~ .main-menu .main-navigation { display: block !important; animation: slideDown 0.3s ease forwards; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

    .main-navigation ul { width: 100%; flex-direction: column; }
    .main-navigation ul li { border-bottom: 1px solid #f0f0f0; width: 100%; }
    .main-navigation ul li a { padding: 15px 25px; }
    .header-search-icon, .topbar .top-right { display: none; }
    .topbar { text-align: center; }
    .top-date { justify-content: center; }
    .header-inner .row { display: flex; align-items: center; justify-content: space-between; }
    .hemila-mobile-menu { display: block; }
}

@media (max-width: 768px) {
    /* Single Post Mobile Adjustments */
    .author-box-card { flex-direction: column; text-align: center; }
    .author-box-img img { margin: 0 auto 15px auto !important; }
    .share-links { flex-wrap: wrap; }
    .share-links a { flex: 1; text-align: center; }
    h1.custom-hero-title { font-size: 26px !important; }
}