/*
Theme Name: Graceful Trend Blog
Theme URI: https://optimathemes.com/graceful-trend-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Trend Blog is a free WordPress theme which brings a fresh, trendy, and minimal vibe to your website. Its designed to be incredibly versatile and look amazing no matter what your passion is. It is an ideal theme for lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, magazine, blogging, personal, and professional websites. It's packed with features you'll love. Sell your products with full WooCommerce compatibility. Reach a global audience with built-in Right-to-Left (RTL) support. Get found on Google with clean, SEO-optimized code. And ensure your site always looks its best with a 100% responsive and retina-ready design.
Template: graceful
Version: 1.0.1
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: graceful-trend-blog
Tags: blog, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, e-commerce
*/


/*
Customization of this theme starts here
*/

/* style.css */

/*--------------------------------------------------------------
Header Sections
--------------------------------------------------------------*/

body {
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
}

.blog .post-title {
    font-size: 28px;
    line-height: 38px;
}

.blog article .post-meta {
    margin-bottom: 10px;
}

.blog .post-page-content {
    padding: 10px 20px 0;
}


#top-navigation {
    border-bottom: 1px solid #d9d1c0;
}

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    border: 1px solid #ddd5c3;
    border-bottom: 3px solid #ddd5c3;
    font-weight: 600;
    padding: 9px 5px 7px;
    background: transparent;
}

aside .graceful-widget h2::after, 
.graceful-widget .widget-title::after {
    border-top: none;
}

.post-categories {
    background: #f3f3f3;
    border: 1px solid #c3c4c7;
    display: inline-block;
    margin-bottom: 10px;
    padding: 0 12px;
}

.post-title {
    word-wrap: break-word;
}

.graceful-slider-info {
    padding: 20px;
}

.graceful-slider-title {
    font-size: 32px;
    word-wrap: break-word;
}

@media screen and (max-width: 480px) {
    .graceful-slider-title {
        width: 300px;
    }
}

.blog .site-images {
    min-height: 245px;
}

.site-images img {
    width: 100%;
}

.content-column > li {
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    margin-right: 35px;
    width: calc((100% - 37px ) /2);
    width: -webkit-calc((100% - 40px ) /2);
}

.content-column > li:nth-of-type(2n+2) {
    margin-right: 0;
}

[data-layout*="col1-leftrightsidebar"] .content-column > li {
    width: 100%;
}

.entry-header {
    height: 200px;
    border-bottom: 1px solid #dddddd;
}

.blog .post-header-inner {
    background: transparent;
    border-left: none; 
    border-right:none; 
    border-top: none;
    margin: -45px auto 0;
    min-height: 170px;
    padding: 30px 20px 10px;
    position: relative;
    width: 88%;
}

.blog .post-header-inner::before, .blog .post-header-inner::after {
    display: none;
}

.widget_categories > ul > li {
    border-bottom: 1px solid #f4f1ec;
}

aside .wp-block-latest-posts.wp-block-latest-posts__list li {
    border-bottom: 1px solid #f4f1ec;
}

.wp-block-search__label {
    display: none;
}

.post-header {
    margin-top: 30px;
}

.content-column li {
    border-bottom: none;
}

.blog article .post-meta {
    margin-bottom: 0;
}

.single .post-date {
    color: #111111 !important;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
}

.single .post-title-author { 
    color: #111111 !important;
    display: inline-block;
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: normal;
}

.blog article .post-date {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
}

.blog article .post-header .post-meta a {
    font-family: 'Mulish', sans-serif;  
    font-size: 13px; 
}

@media screen and (max-width: 480px) {
    .content-column > li {
        width: 100%;
    }

    .blog .content-column > li {
        width: 100%;
    }
}

/* Top Navigation
   ===================================================== */

#top-navigation {
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0,0,0, 0.1);
  border-bottom: 1px solid #e4e4e4;
  background: #000000;
}

#top-menu {
  display: inline-block;
}

#top-menu li {
  position: relative;
}

#top-menu li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f107";
    margin-left: 6px;
    font-size: 12px;
}

#top-menu ul li.menu-item-has-children>a:after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 14px;
    float: right;
}

#top-menu > li {
  display: inline-block;
  list-style: none;
}

#top-menu li a {
  display: block;
  position: relative;
  padding: 0 5px;
  margin-left: 5px;
}

#top-menu li a {
  color: #ffffff;
}

#top-menu ul li a {
  color: #000000;
}

#top-menu a:focus {
  outline: 3px dotted #000000 !important;
}

#top-menu li a:first-child {
  margin-left: 0;
}

#top-menu > li > a {
  display: block;
  text-decoration: none;
}

#top-menu > li:first-child > a {
  padding-left: 0px;
}

#top-menu > li:last-child > a {
  padding-right: 0px;
}

#top-menu ul ul {
  top: -1px;
  left: 100%;
}

#top-menu .sub-menu {
  position: absolute;
  left: -999em;
  z-index: 1101;
  width: 170px;
  text-align: left;
  border: 1px solid #e4e4e4;
  border-width: 1px;
  opacity: 0;
}

#top-menu .menu-item:hover > ul, #top-menu .menu-item:focus-within > ul {
  left: 0;
  opacity: 1;
}

#top-menu .menu-item:hover ul ul, #top-menu .menu-item:focus-within ul ul{
  left: 100%;
}

#top-menu .sub-menu a {
  border-bottom-style: solid;
  border-bottom-width: 1px; 
}

#top-menu .sub-menu > li:last-of-type > a {
  border: none;
}

#top-menu .sub-menu li:first-child > .sub-menu {
  margin-top: -1px;
}

#top-menu .sub-menu > li > a {
  display: block;
  width: 100%;
  padding: 8px 15px;
  margin: 0;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 24px;
  letter-spacing: 0.5px;
}

#top-menu li a {
  font-size: 11px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: 600;
}
#top-menu .sub-menu > li > a {
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.5px;
}

#top-menu li a,
#main-menu li a {
  text-transform: uppercase;
}

#top-navigation > div {
  padding-left: 30px;
  padding-right: 30px;
}

#main-navigation {
    border-bottom: 1px solid #eeeeee;
    text-align: center;
}

#main-navigation #searchform #s {
    border: 1px solid #bdb29b;
}

.widget_categories > ul > li {
    border-bottom: 1px solid #000000;
}

aside .wp-block-latest-posts.wp-block-latest-posts__list li {
    border-bottom: 1px solid #000000;
}

.wp-block-search__label {
    display: none;
}

/* Media Query Min 768px
   ===================================================== */
@media screen and (min-width: 768px) {
    .blog .post-page-content p {
        padding: 0;
    }
    #main-navigation .wrapped-content {
        padding-left: 0;
    }
    .main-navigation-search {
        right: 0;
    }
    #main-navigation .navigation-socials {
        right: 35px;
    }
}


#graceful-post-slider {
    padding-left: 40px;
    padding-right: 40px;
}

#graceful-post-slider.wrapped-content {
    padding-left: 0;
    padding-right: 0;
}


#site-footer {
    border-top: 1px solid #999999;
}

@media screen and (min-width: 768px) {
    
    .wrapped-content .main-navigation-search {
        right: 0;
    }
    #main-navigation .wrapped-content .navigation-socials {
        right: 35px;
    }

    .main-navigation-search {
        right: 35px;
    }
    #main-navigation .navigation-socials {
        right: 75px;
    }
}

.graceful-widget .graceful-recent-image-box a {
    font-size: 14px;
}


#site-footer h2 {
    background: transparent; !important;
    padding: 3px !important;
}

.graceful-trend-category-title {
    margin-bottom: 20px;
    border: 1px solid #ddd5c3;
    border-bottom: 4px solid #ddd5c3;
    display: inline-block;
    padding-bottom: 1px;
    text-align: center;
    width: 100%;
    font-size: 28px;
    padding: 2px 0 4px;
}



/*--------------------------------------------------------------
Featured Boxes Sections
--------------------------------------------------------------*/

#featured-boxes {
  
  background: #fff;
  margin-top: 40px;
}

#featured-boxes .wrapped-content {
  font-size: 0;
  text-align: center;
}

#featured-boxes .featured-box {
  position: relative;
  float: left;
}

#featured-boxes a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#featured-boxes .graceful-wrap-outer {
  padding: 12px;
}

#featured-boxes h4 {
  display: inline-block;
  padding: 11px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0.50);
  color: #ffffff !important;
}


#featured-boxes .featured-box {
    width: calc((100% - 50px ) /3);
    width: -webkit-calc((100% - 70px ) /3);
    margin-right: 34px;
}

#featured-boxes .featured-box:last-child {
    margin-right: 0;
}


@media screen and (max-width: 768px) {
    .featured-box {
        display: block;
    }
    .main-navigation-search {
        right: 10px;
        top: 18px !important;
    }
}


@media screen and (max-width: 480px) {
    #featured-boxes .featured-box {
        width: 100%;
        margin-bottom: 34px;
    }
    
    #featured-boxes {
      padding: 20px !important;
    }
}



/**
 * Trend Slider Static Styles
 */

/* Trend Slider Styles */
.graceful-trend-slider-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.graceful-trend-slider {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-top: 40px;
}

/* Slide Item Styles - Split Layout */
.graceful-trend-slide-item {
    background: #f1f1f1;
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: hidden;
}

/* Background Image - Full Width */
.graceful-trend-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.graceful-trend-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Card - Left Side Overlay */
.graceful-trend-slide-content {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.7); /* Slightly transparent */
    backdrop-filter: blur(7px); /* Subtle blur effect */
    -webkit-backdrop-filter: blur(7px); /* For Safari compatibility */
    padding: 40px;
    margin: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 100%;
}

.graceful-trend-slide-title {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #333333;
}

.graceful-trend-slide-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.graceful-trend-slide-title a:hover {
    color: var(--trend-slider-accent);
}

.graceful-trend-slide-excerpt {
    color: #000000;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Read More Button - Uses CSS Variables */
.graceful-trend-read-more {
    display: inline-block;
    background: var(--trend-slider-accent);
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    color: #ffffff !important;
}

.graceful-trend-read-more:hover {
    background: var(--trend-slider-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--trend-slider-accent-shadow);
    color: #ffffff;
}

/* Owl Carousel Navigation Arrows - Uses CSS Variables */
.graceful-trend-slider .owl-nav {
    position: absolute;
    top: 46%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    margin-top: 0;
    z-index: 3;
}

.graceful-trend-slider .owl-nav button {
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--trend-slider-accent) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px var(--trend-slider-accent-shadow) !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.graceful-trend-slider .owl-nav button:hover {
    background: var(--trend-slider-hover) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px var(--trend-slider-accent-shadow-hover) !important;
}

.graceful-trend-slider .owl-nav .owl-prev {
    left: 20px;
}

.graceful-trend-slider .owl-nav .owl-next {
    right: 20px;
}

.graceful-trend-slider .owl-nav button span {
    font-size: 35px !important;
    height: 32px;
}

/* Override Owl Carousel default theme styles for arrows */
.graceful-trend-slider.owl-theme .owl-nav [class*='owl-'] {
    background: var(--trend-slider-accent) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    position: absolute !important;
    box-shadow: 0 4px 15px var(--trend-slider-accent-shadow) !important;
}

.graceful-trend-slider.owl-theme .owl-nav [class*='owl-']:hover {
    background: var(--trend-slider-hover) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px var(--trend-slider-accent-shadow-hover) !important;
}

.graceful-trend-slider.owl-theme .owl-nav .owl-prev {
    left: 10px !important;
}

.graceful-trend-slider.owl-theme .owl-nav .owl-next {
    right: 10px !important;
}

/* Pagination Dots - Bottom Center */
.graceful-trend-slider .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 4px 10px;
    backdrop-filter: blur(7px); /* Adjust the pixel value for desired blur intensity */
        -webkit-backdrop-filter: blur(7px); /* For Safari compatibility */
}

.graceful-trend-slider .owl-dots .owl-dot {
    display: inline-block;
    margin: 0 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.graceful-trend-slider .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 0;
    display: block;
}

.graceful-trend-slider .owl-dots .owl-dot:hover,
.graceful-trend-slider .owl-dots .owl-dot:hover span {
    background: var(--trend-slider-accent);
    transform: scale(1.2);
}

.graceful-trend-slider .owl-dots .owl-dot.active,
.graceful-trend-slider .owl-dots .owl-dot.active span {
    background: var(--trend-slider-accent);
    transform: scale(1.3);
}

/* Responsive Design - Mobile First */
@media (max-width: 480px) {
    .graceful-trend-slider {
        height: 400px; /* Increased height for better image visibility */
    }
    
    .graceful-trend-slide-item {
        height: 400px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }
    
    /* Ensure background image is visible on mobile */
    .graceful-trend-slide-image {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Full height */
        z-index: 1;
    }
    
    /* Add gradient overlay for better text readability on mobile */
    .graceful-trend-slide-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        z-index: 1;
    }
    
    .graceful-trend-slide-content {
        position: relative;
        z-index: 3; /* Above gradient overlay */
        margin: 15px;
        padding: 20px;
        max-width: none;
        width: calc(100% - 30px); /* Full width minus margins */
        margin-top: auto; /* Push to bottom */
        background: rgba(255, 255, 255, 0.7); /* Slightly transparent */
        backdrop-filter: blur(7px); /* Subtle blur effect */
        -webkit-backdrop-filter: blur(7px); /* For Safari compatibility */
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Enhanced shadow for mobile */
    }
    
    .graceful-trend-slide-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .graceful-trend-slide-excerpt {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .graceful-trend-read-more {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    /* Hide navigation arrows on mobile */
    .graceful-trend-slider .owl-nav {
        display: none;
    }
    
    .graceful-trend-slider .owl-dots {
        bottom: 10px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .graceful-trend-slider {
        height: 350px;
    }
    
    .graceful-trend-slide-item {
        height: 350px;
    }
    
    .graceful-trend-slide-content {
        margin: 30px;
        padding: 35px;
        max-width: 350px;
    }
    
    .graceful-trend-slider .owl-nav .owl-prev {
        left: 15px;
    }
    
    .graceful-trend-slider .owl-nav .owl-next {
        right: 15px;
    }
    
    .graceful-trend-slider .owl-nav button {
        width: 45px;
        height: 45px;
    }
}

@media (min-width: 769px) {
    .graceful-trend-slider {
        height: 400px;
    }
    
    .graceful-trend-slide-item {
        height: 400px;
    }
    
    .graceful-trend-slide-content {
        margin: 40px;
        padding: 40px;
        max-width: 400px;
    }
    
    .graceful-trend-slide-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .graceful-trend-slide-excerpt {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }
}

@media (min-width: 1024px) {
    .graceful-trend-slider-wrapper {
        max-width: 1200px;
    }
    
    .graceful-trend-slide-content {
        margin: 60px;
        padding: 45px;
        max-width: 450px;
    }
    
    .graceful-trend-slide-title {
        font-size: 1.6rem;
    }
    
    .graceful-trend-slide-excerpt {
        font-size: 1rem;
    }
}

/* Screen reader only text */
.graceful-trend-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip link - visible when focused */
.graceful-trend-skip-link:focus {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    background: #007cba !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    z-index: 9999 !important;
    clip: auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Error State */
.graceful-trend-slider-error {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin: 20px 0;
}


.graceful-trend-slider .gracearrow {
    font-size: 12px !important;
}

/* Trend Slider Style End */