/*
Theme Name: Blogza
Theme URI: https://themeansar.com/free-themes/blogza-free-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogza is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogza is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogza is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogus/blogza/ and documentation at https://docs.themeansar.com/docs/blogus/
Version: 0.7
Requires PHP: 7.4
Requires at least: 5.4
Tested up to: 6.7
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: blogus
Text Domain: blogza
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Blogza WordPress Theme is child theme of Blogus, Copyright 2023 Themeansar
Blogza is distributed under the terms of the GNU General Public License v3

Blogza is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
*:focus {
    outline: 1px solid;
}
.navbar-toggler.x:focus,
button:focus {
    border: 1px solid;
    outline: 2px dotted #000;
}
button:focus:not(:focus-visible) {
    outline: 2px dotted #000;
}
p a {
    text-decoration: underline;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Roboto', sans-serif;
}
.site-title { 
    font-family: 'Roboto', sans-serif;
}
.navbar-wp .navbar-nav > li> a { 
    font-family: 'Roboto', sans-serif;
}
body { 
    font-family: 'Roboto', sans-serif;
}
footer .site-branding-text .site-title-footer a{
    font-family: 'Roboto', sans-serif;
}

.article_content a, .bs-blog-post single a, .entry-content a, 
.comment-body a, .textwidget a, .content-area a {
    text-decoration: underline;
}
 
/* -------bs-head three---- */
.bs-headthree .bs-header-main{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}
.bs-headthree .bs-header-main .inner{
    display: flex;
    padding: 15px 0;
    margin: 0;
    height: auto;
    min-height: 150px;
    align-items: center;
    text-align: center;
}
.bs-headthree .navbar-brand {
    margin-right: unset;
}
.bs-menu-full {
    position: relative;
}
.bs-headthree .navbar-brand .custom-logo{
    object-fit: cover;
    max-width: 100%;
    height: auto;
}
/* header Six */
.bs-headthree.six{
    margin-bottom: 50px;
}
.bs-headthree.six .bs-social {
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bs-headthree.six .navbar-wp {
    margin: 0;
    z-index: 999;
    transition: all 1s ease-out;
    padding: 0;
    height: auto;
    min-height: 58px;
    border-radius: 0;
    margin-bottom: 30px;
    border: 1px solid;
}
.bs-headthree.six .navbar-wp .navbar-nav > li> a {
    padding: 0px;
}
.right-nav a{
    box-shadow: none;
}
.bs-blog-post .bs-blog-thumb .bs-blog-category{
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
}
.bs-blog-post .small{
    padding: 0;
}
.bs-blog-post{
    box-shadow: none;
}
.bs-blog-post:hover{
    box-shadow: none;
}
.bs-blog-meta .bs-author .auth img{
    box-shadow: none;
}
.desk-header{
    padding: 0;
}
.site-branding-text .site-title{
    font-size: inherit;
}
.site-branding-text .site-title a{
    font-size: 60px;
}
.bs-masonry-columns.c2 {
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bs-blog-post .bs-blog-meta a{
    font-weight: 500;
}
.bs-masonry-columns.c3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 2rem;
    padding: 0;
}
.bs-blog-thumb.lg{
    height: auto;
}
.bs-blog-post .bs-blog-thumb img{
    min-height: 300px;
    transition: all 0.5s;
}
.bs-blog-post .bs-blog-thumb:hover img{
    transform: scale(1.05);
}
.bs-blog-post.single .bs-blog-thumb:hover img{
    transform: scale(1);    
}
.bs-social li a i{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.right-nav a{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.menu-link-description {
    font-size: 11px;
    padding: 2px 4px;
    margin: 0 3px;
    line-height: 10px;
    position: absolute;
    border-radius: 1px;
    line-height: normal;
    top: 0;
    margin: 0 3px;
    font-weight: 700;
    display: inline-table;
    word-break: keep-all;
    overflow-wrap: unset;
    width: max-content;
    z-index: 9;
}
.menu-link-description:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    left: 3px;
    bottom: -4px;
}
.bs-info-author-block .bs-author-pic img{
    margin: 0 auto;
}
.switch .slider::before{
    font-size: 20px;
}
.navbar-nav {
    justify-content: flex-start;
    row-gap: 1rem;
    column-gap: 1rem; /* Adjusted spacing to match Edge (16px) */
    padding: 0.5rem 0;
}
.list-blog.bs-blog-post{
    padding: 0;
    margin-bottom: 0;
}
.blog-post-list{
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.bs-blog-post .bs-header{
    padding: 20px 0;
}
.page-class .bs-card-box.padding-20{
    padding: 0;
    box-shadow: none;
}
img {
    max-width: 100%;
    display: block;
}
figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}
figure>img {
    grid-row: 1 / -1;
    grid-column: 1;
}
figure a {
    color: black;
    text-decoration: none;
}
/* blogza bg image wrapper */
.blogza-background-wrapper .squares,
.blogza-background-wrapper .circles,
.blogza-background-wrapper .triangles {
    display: none !important;
}
@media (max-width: 991.98px) {
    .bs-masonry-columns.c3 { 
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 991px){
    .bs-headthree .navbar-brand .custom-logo {
        width: 200px;
        height: auto;
    }
    .bs-headthree.six .navbar-wp .navbar-nav > li> a{
        padding: 13px 8px;
    }
    .navbar-nav {
        gap: 0;
        padding: 0;
    }
}
@media screen and (max-width: 767px){
    .bs-latest-heading span{
        display:none;
    }
    .bs-headthree .navbar-brand .custom-logo {
        width: 120px;
        height: auto;
    }
    .bs-masonry-columns.c3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-masonry-columns.c2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-blog-post .bs-blog-meta {
        justify-content: start;
    }
    /* Adjust artwork size on mobile to 300x300 square */
    .bs-blog-post .bs-blog-thumb {
        position: relative;
        width: 300px !important;
        height: 300px !important;
        padding-bottom: 0 !important; /* Remove aspect ratio */
        overflow: hidden;
        background: #000 !important; /* Black background for letterboxing */
    }
    .bs-blog-post .bs-blog-thumb img {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: auto !important;
        height: auto !important;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        display: block;
        object-fit: contain !important; /* Fit the entire image without cropping */
    }
    /* Override mobile menu background color */
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse .navbar-nav {
        background: #2e8b57 !important; /* Teal background */
    }
    /* Override mobile menu text color on hover */
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li > a:hover,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse .navbar-nav > li > a:hover,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li.active > a:hover,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse.show .navbar-nav > li > a:hover {
        color: #000 !important; /* Black on hover */
    }
    /* Handle touch interactions with :active and :focus */
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li > a:active,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse .navbar-nav > li > a:active,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li.active > a:active,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse.show .navbar-nav > li > a:active,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li > a:focus,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse .navbar-nav > li > a:focus,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li.active > a:focus,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse.show .navbar-nav > li > a:focus {
        color: #000 !important; /* Black on active/focus for touch */
    }
    /* Ensure text readability with shadow */
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-wp .navbar-nav > li > a,
    html body:not(.dark).wp-child-theme-blogza .bs-headthree.six .navbar-collapse .navbar-nav > li > a {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; /* Add shadow for readability */
    }
    /* Ensure other links use teal on hover */
    a:hover,
    a:hover img,
    .nav-link:hover,
    .link-div:hover,
    .link-div:hover img,
    .bs-social a:hover,
    .bs-social a:hover i {
        color: #2e8b57 !important;
        text-decoration: underline !important;
        background: none !important;
    }
    a:active,
    a:active img,
    .nav-link:active,
    .link-div:active,
    .link-div:active img,
    .bs-social a:active,
    .bs-social a:active i,
    a:focus,
    a:focus img,
    .nav-link:focus,
    .link-div:focus,
    .link-div:focus img,
    .bs-social a:focus,
    .bs-social a:focus i {
        color: #2e8b57 !important;
        text-decoration: underline !important;
        background: none !important;
    }
}
@media screen and (max-width: 480px) {
    .bs-headthree .bs-header-main .inner{
        min-height: 100px;
    }
    /* Further adjust for very small screens */
    .bs-blog-post .bs-blog-thumb {
        width: 300px !important;
        height: 300px !important;
    }
}

/* Style for Spotify link next to album titles */
.spotify-link {
    margin-left: 10px;
    color: #1DB954; /* Spotify green */
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}
.spotify-link:hover {
    text-decoration: underline;
    color: #1ed760; /* Lighter Spotify green on hover */
}
/* Ensure responsiveness on mobile */
@media screen and (max-width: 767px) {
    .spotify-link {
        display: inline-block;
        margin-left: 5px;
        font-size: 12px;
    }
}

/* Ensure Contact page background remains teal */
.page-id-70 .bs-page,
.page-id-70 .main-content {
    background-color: #2e8b57 !important; /* Teal background */
    background-image: none !important; /* Remove vinyl pattern on Contact page */
}

/* Add semi-transparent overlay to content for readability */
.bs-page,
.main-content {
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white overlay */
}

/* Ensure text is readable against the background */
.bs-page h1,
.bs-page h2,
.bs-page p,
.main-content h1,
.main-content h2,
.main-content p {
    color: #000; /* Black text for readability */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* Light shadow for contrast */
}

/* Override any potential pink colors site-wide */
a,
a:visited,
.nav-link,
.link-div,
.bs-social a,
.bs-social a i {
    color: #000 !important; /* Default link color to black */
    text-decoration: underline !important;
}
a:hover,
a:hover img,
.nav-link:hover,
.link-div:hover,
.link-div:hover img,
.bs-social a:hover,
.bs-social a:hover i {
    color: #2e8b57 !important; /* Teal on hover for all links */
    text-decoration: underline !important;
    background: none !important;
}
a:active,
a:active img,
.nav-link:active,
.link-div:active,
.link-div:active img,
.bs-social a:active,
.bs-social a:active i,
a:focus,
a:focus img,
.nav-link:focus,
.link-div:focus,
.link-div:focus img,
.bs-social a:focus,
.bs-social a:focus i {
    color: #2e8b57 !important; /* Teal on active/focus */
    text-decoration: underline !important;
    background: none !important;
}
/* Override buttons and form elements */
button,
input[type="submit"],
input[type="button"],
.btn,
.button {
    background-color: #2e8b57 !important; /* Teal background for buttons */
    color: #fff !important; /* White text */
    border-color: #2e8b57 !important; /* Teal border */
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {
    background-color: #d4a017 !important; /* Gold on hover for buttons */
    color: #fff !important;
    border-color: #d4a017 !important;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.btn:active,
.button:active,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.btn:focus,
.button:focus {
    background-color: #d4a017 !important; /* Gold on active/focus for buttons */
    color: #fff !important;
    border-color: #d4a017 !important;
}
/* Override borders and backgrounds that might be pink */
[class*="bs-"],
[class*="navbar-"],
[class*="btn-"],
[class*="button-"] {
    border-color: #2e8b57 !important; /* Teal borders */
    background-color: transparent !important; /* Remove any pink backgrounds */
}
[class*="bs-"]:hover,
[class*="navbar-"]:hover,
[class*="btn-"]:hover,
[class*="button-"]:hover {
    border-color: #d4a017 !important; /* Gold borders on hover */
    background-color: transparent !important;
}
/* Override specific elements for navigation menu hover */
.navbar-nav > li > a,
.navbar-nav > li.active > a {
    color: #000 !important; /* Default to black */
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a:hover {
    color: #2e8b57 !important; /* Teal on hover */
    text-decoration: underline !important;
}
.bs-blog-category a,
.bs-blog-meta a {
    color: #000 !important; /* Default to black */
}
.bs-blog-meta a:hover,
.bs-blog-meta a:focus {
    color: #2e8b57 !important; /* Teal on hover */
}

/* Change "Facebook" and "X" labels in the footer to white */
.site-footer .wp-block-social-links .wp-social-link-facebook .wp-block-social-link-label,
.site-footer .wp-block-social-links .wp-social-link-x .wp-block-social-link-label {
    color: #fff !important; /* White text for "Facebook" and "X" labels */
}

/* Override inline pink colors and potential dark.css pink */
.has-vivid-red-color,
.has-luminous-vivid-orange-color,
body.dark a:hover,
body.dark a:focus,
body.dark .bs-blog-meta a:hover,
body.dark .bs-blog-meta a:focus,
body.dark .bs-social a:hover,
body.dark .bs-social a:focus {
    color: #2e8b57 !important; /* Teal instead of pink */
}
.has-vivid-red-background-color,
.has-luminous-vivid-orange-background-color {
    background-color: #2e8b57 !important; /* Teal instead of pink */
}

/* Style the custom copyright notice */
.custom-copyright {
    background-color: #000; /* Match footer background */
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #333; /* Subtle separator */
}
.custom-copyright p {
    margin: 0;
    color: #bbb; /* Light gray to match existing footer text */
    font-size: 14px;
}
.custom-copyright p a {
    color: #d4a017 !important; /* Gold for links */
    text-decoration: none;
}
.custom-copyright p a:hover {
    color: #2e8b57 !important; /* Teal on hover */
}