/*
Theme Name:         Blogger Portal
Theme URI:          https://demo.mysterythemes.com/news-portal-demos/
Author:             Mystery Themes
Author URI:         https://mysterythemes.com
Description:        Improve your blogging experience with Blogger Portal...
Version:            3.0.4
Requires at least:  5.6
Tested up to:       6.6
Requires PHP:       7.2
License:            GNU General Public License v3 or later
License URI:        http://www.gnu.org/licenses/gpl-3.0.html
Template:           news-portal
Text Domain:        blogger-portal
Tags:               news, blog, entertainment, grid-layout, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-logo, featured-image-header, footer-widgets, full-width-template, rtl-language-support, theme-options, translation-ready
*/

/*--------------------------------------------------------------
# CSS Variables for Theming
--------------------------------------------------------------*/
:root {
    --body-bg: #fdf6f9;
    --card-bg: #ffffff;
    --text-color: #302b2b;
    --link-hover: #000000;
    --border-light: rgba(0, 0, 0, 0.1);
    --shadow-light: 0 0 8px var(--border-light);
    --font-primary: "Be Vietnam Pro", Helvetica, Arial, sans-serif;
}

.site-mode--dark {
    --body-bg: #222222;
    --card-bg: #2f2f2f;
    --text-color: #e0e0e0;
    --link-hover: #ffffff;
    --border-light: rgba(255, 255, 255, 0.1);
    --shadow-light: 0 0 8px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
# Body & Typography
--------------------------------------------------------------*/
body {
    font-family: var(--font-primary);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6,
.item-title a,
.entry-title a {
    font-family: var(--font-primary);
    font-weight: 700;
}

.entry-title a {
    font-size: 28px;
}

a:hover,
a:focus,
a:active {
    color: var(--link-hover);
}

/* Background for main containers */
.fullwidth_layout #page,
body.boxed_layout,
.np-block-title,
.widget-title,
.page-header .page-title,
.np-related-title,
.widget_block .wp-block-group__inner-container > h1,
.widget_block .wp-block-group__inner-container > h2,
.widget_block .wp-block-group__inner-container > h3,
.widget_block .wp-block-group__inner-container > h4,
.widget_block .wp-block-group__inner-container > h5,
.widget_block .wp-block-group__inner-container > h6 {
    background-color: var(--body-bg);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#masthead {
    z-index: 9999;
    background-color: var(--card-bg);
    position: relative;
}

#top-header,
#content,
#colophon {
    z-index: 99;
    position: relative;
}

.top-navigation ul li:first-child {
    border-left: 0;
    padding-left: 0;
}

/*--------------------------------------------------------------
# Background Animation (Fixed)
--------------------------------------------------------------*/
.blogger-portal-background-animation {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed; /* Ensures it covers the whole viewport */
    top: 0;
    left: 0;
    pointer-events: none; /* Prevents interference with clicks */
    z-index: -1; /* Sends it behind content */
}

.blogger-portal-circles div {
    position: absolute; /* Changed from fixed to absolute inside fixed container */
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 6px solid rgb(173 20 87 / 0.8);
    border-radius: 0; /* Start as squares */
}

.blogger-portal-circles div:nth-child(1) { top: 12%; left: 42%; }
.blogger-portal-circles div:nth-child(2) { top: 70%; left: 50%; }
.blogger-portal-circles div:nth-child(3) { top: 17%; left: 6%; }
.blogger-portal-circles div:nth-child(4) { top: 60%; left: 90%; }
.blogger-portal-circles div:nth-child(5) { top: 50%; left: 10%; }
.blogger-portal-circles div:nth-child(6) { top: 80%; left: 70%; }
.blogger-portal-circles div:nth-child(7) { top: 60%; left: 80%; }
.blogger-portal-circles div:nth-child(8) { top: 88%; left: 25%; }
.blogger-portal-circles div:nth-child(9) { top: 95%; right: 5%; left: auto; }
.blogger-portal-circles div:nth-child(10) { top: 20%; left: 80%; }

@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(360deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.3) translateY(-90px) rotate(-180deg);
        border-radius: 50%;
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Widgets & Sidebar
--------------------------------------------------------------*/
.fullwidth_layout .widget {
    background-color: var(--card-bg);
    box-shadow: var(--shadow-light);
    padding: 20px;
}

#secondary .widget .np-recent-posts-wrapper .np-post-meta {
    display: none;
}

#secondary .widget.news_portal_recent_posts .np-recent-posts-wrapper .np-post-thumb {
    box-shadow: var(--shadow-light);
    border-radius: 7px;
}

#secondary .widget .np-post-title.small-size a,
#secondary .widget.widget_categories a {
    font-weight: 600;
}

.fullwidth_layout .site-footer .widget {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

/*--------------------------------------------------------------
# Archive & Post Listings
--------------------------------------------------------------*/
.fullwidth_layout article,
.fullwidth_layout .np-related-section-wrapper .np-single-post {
    box-shadow: var(--shadow-light);
    padding: 20px;
    background-color: var(--card-bg);
}

.archive-list article,
.home-list article {
    display: grid;
    grid-template-columns: 40% 57%;
    grid-gap: 3%;
}

.archive-list article.no-image,
.home-list article.no-image {
    grid-template-columns: 100%;
}

.archive-list .np-article-thumb img,
.home-list .np-article-thumb img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.archive-list .np-archive-post-content-wrapper,
.home-list .np-archive-post-content-wrapper {
    box-shadow: none;
    padding: 0;
}

.archive-list .np-archive-post-content-wrapper:before,
.home-list .np-archive-post-content-wrapper:before {
    display: none;
}

.fullwidth_layout .np-archive-post-content-wrapper {
    box-shadow: none;
}

.wp-block-latest-comments article {
    box-shadow: none;
    padding: 0;
    display: block;
}

#np-scrollup {
    z-index: 9999;
}

.np-archive-classic-post-wrapper .np-archive-post-content-wrapper,
.np-archive-grid-post-wrapper .np-archive-post-content-wrapper,
.archive-classic .np-archive-post-content-wrapper,
.home-classic .np-archive-post-content-wrapper {
    padding: 20px 0 0;
}

/*--------------------------------------------------------------
# Dark Mode Overrides
--------------------------------------------------------------*/
.site-mode--dark.fullwidth_layout article,
.site-mode--dark.fullwidth_layout .np-related-section-wrapper .np-single-post,
.site-mode--dark.fullwidth_layout .widget {
    background-color: var(--card-bg);
}

.site-mode--dark.fullwidth_layout #page,
body.boxed_layout.site-mode--dark,
.site-mode--dark .np-block-title,
.site-mode--dark .widget-title,
.site-mode--dark .page-header .page-title,
.site-mode--dark .np-related-title,
.site-mode--dark .widget_block .wp-block-group__inner-container > h1,
.site-mode--dark .widget_block .wp-block-group__inner-container > h2,
.site-mode--dark .widget_block .wp-block-group__inner-container > h3,
.site-mode--dark .widget_block .wp-block-group__inner-container > h4,
.site-mode--dark .widget_block .wp-block-group__inner-container > h5,
.site-mode--dark .widget_block .wp-block-group__inner-container > h6,
.site-mode--dark #masthead {
    background-color: var(--body-bg);
}

body.site-mode--dark.boxed_layout .np-archive-post-content-wrapper {
    background: none;
}

.boxed_layout.site-mode--dark #page,
.site-mode--dark #page {
    background-color: #2C2C2C; /* Slightly different for page container */
}

/* Footer widgets in dark mode – more specific selector to avoid !important */
.site-mode--dark #colophon .widget {
    background-color: transparent !important; /* Retained !important only if necessary; consider removing if parent already transparent */
}

/*--------------------------------------------------------------
# Responsive Enhancements
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .entry-title a {
        font-size: 22px; /* Smaller on mobile */
    }

    .archive-list article,
    .home-list article {
        grid-template-columns: 1fr; /* Stack image and content */
        grid-gap: 15px;
    }

    .archive-list .np-article-thumb img,
    .home-list .np-article-thumb img {
        height: 200px; /* Reduce image height on mobile */
    }

    .fullwidth_layout .widget {
        padding: 15px; /* Slightly less padding */
    }
}

@media (max-width: 480px) {
    .entry-title a {
        font-size: 20px;
    }

    .archive-list .np-article-thumb img,
    .home-list .np-article-thumb img {
        height: 150px;
    }
}