/*
Theme Name: Grand News
Template: news-blog
Text Domain:grand-news
Author: gradientthemes
Author URI: https://gradientthemes.com/
Description: Grand News is is a clean and elegantly designed multipurpose WooCommerce ready WordPress theme perfect for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, publishing or review site and any news related websites. The theme has a in built front page customizer designer and modern professional design is easy and quick to set up, especially with pre-built demos. Grand News is fully widgetized and supports popular page builders like Elementor web site builder, King Composer, Beaver Builder, SiteOrigin, Thrive Architect, Divi, Visual Composer, etc. The theme has built in widgets like News, social, post grids, post sliders and product widgets. Grand News is SEO friendly and RTL ready. See documentation:- https://www.gradientthemes.com/product/news-blog-pro-theme/
Tags: blog,one-column,two-columns,three-columns,right-sidebar,left-sidebar,grid-layout,sticky-Post,footer-widgets,custom-background,custom-header,custom-colors,custom-logo,custom-menu,featured-images,threaded-comments,translation-ready,full-width-template,rtl-language-support,theme-options,e-commerce,food-and-drink
Version: 1.0.4
Requires PHP: 5.6
Tested up to: 6.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

/* Test deploy - 24 April */

.container .footer-newsletter-section .blossomthemes-email-newsletter-wrapper {
     background:transparent;
     color: #ffffff;
     padding-top: 25px;
     padding-bottom: 25px;
}
 section.newsletter-section .dt-newsletter-wrapper {
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     -moz-justify-content: space-between;
     justify-content: space-between;
     -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     background-color: transparent;
     margin: 0;
     border-radius: 0px;
}
 section.newsletter-section .dt-newsletter-wrapper .blossomthemes-email-newsletter-wrapper .text-holder span, section.newsletter-section .dt-newsletter-wrapper .blossomthemes-email-newsletter-wrapper > form > label .text {
     color: var(--footer-text-color);
}
/***************** * Custom widget * ******************/
 .custom_product_widget .woocommerce-ordering {
     display: none;
}
 .custom_product_widget .woocommerce-result-count {
     font-size: 0.9em;
     margin-bottom: 10px;
     margin-top: 0.5em;
     font-style: italic;
}
 .custom_product_widget .woocommerce nav.woocommerce-pagination .page-numbers li, .custom_product_widget .woocommerce nav.woocommerce-pagination .page-numbers li a, .custom_product_widget .woocommerce nav.woocommerce-pagination .page-numbers li span.page-numbers {
     line-height: 10px;
     height: 25px;
     width: 25px;
     border: initial;
     font-size: 14px;
}
 .custom_product_widget .woocommerce a.added_to_cart {
     padding-top: .0em;
     padding-bottom: 10px;
}
/* Slow motion zoom container */
 .custom_product_widget li, .woocommerce ul.products li {
     transition: transform .9s;
}
/* The Transformation */
 .custom_product_widget li:hover, .woocommerce ul.products li:hover {
     -ms-transform: scale(1.04);
    /* IE 9 */
     -webkit-transform: scale(1.04);
    /* Safari 3-8 */
     transform: scale(1.04);
}
 .comment-content a, .wp-block-archives a, .wp-block-latest-posts a, .wp-block-tag-cloud a, .wp-block-latest-comments a, .wp-block-rss a {
     text-decoration: underline;
}
 #secondary .widget a, #primary .page .entry-content table a {
     color: var(--gbl-primary-color);
}
 #secondary .widget a:hover, #primary .page .entry-content table a:hover {
     color: var(--gbl-secondary-color);
}
 #primary .page .entry-content table a {
     text-decoration: underline;
}
 .page .entry-content li a, .page .comments-list .comment-meta-data a {
     text-decoration: underline;
}
/***************** * widget title * ******************/
 .post-widget-title {
     border-bottom: 4px solid var(--gbl-primary-color);
     margin-bottom: 21px;
     display: inline-block;
}
 .post-widget-title div, .widget-title span {
     padding: 6px 15px 6px 0px;
     background-color: transparent;
     font-weight: 700;
     line-height: 1.4;
     color: initial;
     font-size: 18px;
     display: inline-block;
}
 .widget .widget-title::after {
     position: absolute;
     content: "";
     background-color: var(--gbl-primary-color);
     width: 63px;
     height: 3px;
     bottom: 0px;
     left: 0;
}
 #secondary .widget.widget_block.widget_calendar tbody td a {
     background-color: var(--gbl-primary-color);
     color: #ffffff;
}
 .exclusive-posts .marquee a img {
     height: 40px;
     width: 40px;
     object-fit: cover;
     border-radius: 5px;
}
 .exclusive-posts .marquee a span.circle-marq .trending-no {
     border-radius: 5px;
}

/* This adds CSS for live Updates */

.live-updates-timeline {
  border-left: 3px solid red;
  padding-left: 20px;
  margin-top: 30px;
}

.live-update-block {
  position: relative;
  margin-bottom: 30px;
  padding-left: 15px;
}

.live-update-block::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 5px;
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
}

.live-time {
  font-size: 14px;
  color: #444;
  margin-bottom: 6px;
}

.live-content h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 4px 0;
}

.live-content p {
  font-size: 15px;
  line-height: 1.5;
}

.live-icons {
  margin-top: 10px;
}

.live-icons span {
  margin-right: 10px;
  cursor: pointer;
}

.live-icons a {
  color: #000;
  margin-right: 8px;
  text-decoration: none;
}

/* CSS Animation for Smooth Icon Transition on Post Save/Unsave */
.toggle-save-btn i {
  color: #b30000;
  transition: opacity 0.3s ease, transform 0.2s ease;
  font-size: 20px;
}

.toggle-save-btn:hover i {
  transform: scale(1.2);
  color: #a30000;
}

/*  CSS for Hover-Only Label Reveal */

.toggle-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  color: #b30000;
  font-family: inherit;
}

.toggle-save-btn .save-label {
  opacity: 0;
  transform: translateX(6px);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: 
    opacity 0.25s ease,
    max-width 0.3s ease,
    transform 0.3s ease;
  font-size: 16px;
  margin-left: 4px;
  color: #b30000;
	/* Smoothest sliding & fading with custom easing */
	transition:
    opacity 0.3s ease,
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
}

.toggle-save-btn:hover .save-label {
  opacity: 1;
  max-width: 160px;
  transform: translateX(0);
}
 /* enough for "Unsave this article" */

/* Tooltip Animation */
.with-tooltip {
  position: relative;
}

.with-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 80%; /* above the icon */
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: #222;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 99;
}

.with-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Modal CSS to handle login Prompt */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-modal {
  background: #fff;
  padding: 30px 20px;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
  position: relative;
  font-family: 'Segoe UI', sans-serif;
}

.login-modal h2 {
  margin-bottom: 20px;
  font-size: 22px;
  text-align: center;
}

.modal-login-form input[type="text"],
.modal-login-form input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.modal-login-form input[type="submit"] {
  width: 100%;
  padding: 12px;
  background: linear-gradient(to right, #b30000, #000);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.modal-footer-links {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.close-login-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  color: #333;
  cursor: pointer;
}

/* putting trending and related to the left */

/* === Move sidebar to the left for single post === */
.single .page-grid {
    display: flex;
    flex-direction: row-reverse; /* Moves sidebar to the left */
    gap: 30px;
}

/* Optional: Make sure widths are correct */
.single .site-main {
    width: 75%;
}

.single #secondary {
    width: 25%;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .single .page-grid {
        flex-direction: column;
    }

    .single .site-main,
    .single #secondary {
        width: 100%;
    }
}