/*
Theme Name: Graceful Zen Blog
Theme URI: https://optimathemes.com/graceful-zen-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Zen Blog is a simple, clean and responsive WordPress blog theme. This theme is perfect for travel blog, food blog, fashion blog, youtube bloggers and writers who need to create personal blog site for any kind of blog or website like lifestyle, tech, health, fitness, beauty, news, magazine, blogging, personal, professional, etc. Its fully Responsive and Retina Display ready, clean, modern and minimal design. Graceful is WooCommerce compatible, supports RTL(Right To Left) and is optimized for SEO.
Template: graceful
Version: 1.0.0
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-zen-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 child theme starts here
*/

/* style.css */

#main-navigation {
    background: unset;
    border-bottom: 1px solid #dddddd;
}

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

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

.blog .post-title {
    margin-bottom: 6px;
}

.post-categories {
    background: #f1f1f1;
}

@media screen and (min-width: 768px) {
    .post-image-col {
        float: left;
        width: 44%;
    }
    .post-content-col {
        float: right;
        width: 51%;
    }
    .post-image-col {
        min-width: 380px;
    }
    .blog .site-images {
        min-height: 335px;        
    }
    .blog .content-column li {
        float: left;
        margin-bottom: 50px;
        border-bottom: unset;
    }
    .blog .post-header {
        text-align: unset;
    }
    .blog .post-title {
        font-size: 24px;
        line-height: 30px;
    }
    .blog .post-page-content {
        padding-top: 0;
    }
    .blog .post-page-content p {
        padding: 0px;
        margin: 0px;
        
    }
    .blog .continue-read {
        text-align: left;
        margin: 5px 0 30px;
    }
    .blog .continue-read a {
        padding: 0;
    }
}


/*--------------------------------------------------------------
Top Navigation Section
--------------------------------------------------------------*/

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

#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;
  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;
  background: #16b7cc;
}

#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: 1px solid #dddddd;
}

#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: 700;
  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;
  color: #16b7cc;
}

#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;
}

/*--------------------------------------------------------------
Special Links Sections
--------------------------------------------------------------*/

#special-links {
  padding: 40px !important;
  border-bottom: 1px solid #eee;
}

#special-links .wrapped-content {
  font-size: 0;
  text-align: center;
}

#special-links .special-link {
  position: relative;
  float: left;
}

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

#special-links .graceful-wrap-outer {
  padding: 12px;
}

#special-links 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;
}

#special-links .special-link {
    width: calc((100% - 50px ) /3);
    width: -webkit-calc((100% - 70px ) /3);
    margin-right: 34px;
}

#special-links .special-link:last-child {
    margin-right: 0;
}


@media screen and (max-width: 768px) {
    .special-link {
        display: block;
    }
}

aside .graceful-widget h2 {
    background: none;
    border-bottom: 1px solid #16b7cc;
}

aside .graceful-widget h2::after {
    border-top: 8px solid #16b7cc;
}

.graceful-widget .widget-title {
    background: none;
    border-bottom: 1px solid #16b7cc;
}

#site-footer {
    background: f2f2f2;
}

/*--------------------------------------------------------------
Home Page Blog List Layout Customization
--------------------------------------------------------------*/
.blog .content-column article {
    display: flex;
    overflow: hidden;
    height: 400px; 
}
.blog .post-image-col{
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
    
}
.blog .post-image-col .site-images{
    height: 400px; 
}
.blog .site-images a img{
    width: 100%;
    height: 100%;
    object-fit: cover;   
}
.blog .site-images .no-thumbnail {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
}
.blog .post-content-col {
    flex: 0 0 50%;
    padding: 25px;
    display: flex;
    flex-direction: column;
}
.blog .content-column li {
    margin-bottom: 50px;
}
.blog .post-header {
    text-align: unset;
}
.blog .post-title {
    font-size: 28px;
    font-weight: bolder;
    line-height: 36px;
}
.blog .post-page-content {
    padding-top: 0;
}
.blog .post-page-content p {
    padding: 0px;
    margin: 0px;
    letter-spacing: unset;
}
.blog .continue-read {
    text-align: left;
    margin: 5px 0 30px;
    padding: 0;
}

.blog .continue-read a {
    line-height: 34px;
}
    

/* Responsive adjustments */
@media (max-width: 992px) {
    .blog .content-column article {
        height: 350px;
    }
    
    .blog .post-image-col .site-images {
        height: 350px;
    }
    
    .blog .post-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .blog .content-column article {
        flex-direction: column;
        height: auto;
    }
    
    .blog .post-image-col .site-images {
        flex: 0 0 280px;
        height: 280px;
    }
    
    .blog .post-content-col {
        flex: 1;
        padding: 15px;
    }
    
    .blog .post-title {
        font-size: 23px;
    }
    
    .blog .post-author {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .blog .graceful-latest .post-card {
        height: 430px;
    }
    .blog .post-image-col .site-images {
        height: 220px;
    }
}

@media (min-width: 992px) {
    .blog .post-content-col {
        background: #fff;
        z-index: 1;
        height: 340px;
        margin: 30px 0 30px -30px;
        box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
    }
}

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



/*--------------------------------------------------------------
Category Page List Layout Customization
--------------------------------------------------------------*/
.category .content-column article {
    display: flex;
    overflow: hidden;
    height: 400px; 
}
.category .post-image-col{
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
    
}
.category .post-image-col .site-images{
    height: 400px; 
}
.category .site-images a img{
    width: 100%;
    height: 100%;
    object-fit: cover;   
}
.category .site-images .no-thumbnail {
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
.category .post-content-col {
    flex: 0 0 50%;
    padding: 25px;
    display: flex;
    flex-direction: column;
}
.category .content-column li {
    margin-bottom: 50px;
}
.category .post-header {
    text-align: unset;
}
.category .post-title {
    font-size: 28px;
    font-weight: bolder;
    line-height: 36px;
}
.category .post-page-content {
    padding-top: 0;
}
.category .post-page-content p {
    padding: 0px;
    margin: 0px;
    letter-spacing: unset;
}
.category .continue-read {
    text-align: left;
    margin: 5px 0 30px;
    padding: 0;
}

.category .continue-read a {
    line-height: 34px;
}
    

/* Responsive adjustments */
@media (max-width: 992px) {
    .category .content-column article {
        height: 350px;
    }
    
    .category .post-image-col .site-images {
        height: 350px;
    }
    
    .category .post-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .category .content-column article {
        flex-direction: column;
        height: auto;
    }
    
    .category .post-image-col .site-images {
        flex: 0 0 280px;
        height: 280px;
    }
    
    .category .post-content-col {
        flex: 1;
        padding: 15px;
    }
    
    .category .post-title {
        font-size: 23px;
    }
    
    .category .post-author {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .category .graceful-latest .post-card {
        height: 430px;
    }
    .category .post-image-col .site-images {
        height: 220px;
    }
}

@media (min-width: 992px) {
    .category .post-content-col {
        background: #fff;
        z-index: 1;
        height: 340px;
        margin: 30px 0 30px -30px;
        box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.2);
    }
}

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


.graceful-zen-category-title {
    margin-top: 1px;
    padding: 10px 0;
    font-size: 32px;
}

.category .graceful-zen-wave-svg {
    margin-bottom: 30px;
}

.single .graceful-zen-wave-svg {
    margin-bottom: 8px;
}

.graceful-zen-wave-svg path {
    fill: #16b7cc;
}

/*--------------------------------------------------------------
Graceful Zen Post Slider Customization
--------------------------------------------------------------*/
.graceful-zen-slider-container {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 20px;
}

#graceful-zen-post-slider .slider-item {
    display: flex;
    align-items: stretch;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-height: 400px;
}

#graceful-zen-post-slider .text-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 0px 10px 0px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
    padding: 0px;
    margin: 30px -30px 30px 0;
    padding: 20px 20px 20px 0;
    min-height: 362px;
}

#graceful-zen-post-slider .post-title {
    font-family: 'Cormorant Garamond', 'Times', serif;
    font-size: 2.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

#graceful-zen-post-slider .title-underline {
    width: 60px;
    height: 3px;
    background: #20b2aa;
    margin-bottom: 20px;
}

#graceful-zen-post-slider .post-excerpt {
    font-family: 'Montserrat', sans-serif;
    color: #666;
    margin-bottom: 25px;
    font-size: 1.1em;
    line-height: 1.5;
}

#graceful-zen-post-slider .read-more-btn {
    background: #16b7cc;
    color: white;
    padding: 6px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    width: fit-content;
}

#graceful-zen-post-slider .read-more-btn:hover {
    background: #1a9999;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

#graceful-zen-post-slider .image-panel {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    position: relative;
}

#graceful-zen-post-slider .image-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}

#graceful-zen-post-slider .default-image {  
    background: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* Owl Carousel Custom Styles - Scoped to #graceful-zen-post-slider */
#graceful-zen-post-slider.owl-carousel {
    position: relative;
}

#graceful-zen-post-slider .owl-nav {
    display: none;
}

#graceful-zen-post-slider .owl-dots {
    position: absolute;
    bottom: 30px;
    right: 20%;
    z-index: 10;
    text-align: right;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#graceful-zen-post-slider .owl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

#graceful-zen-post-slider .owl-dot span {
    display: none;
}

#graceful-zen-post-slider .owl-dot.active {
    background: #20b2aa;
    transform: scale(1.2);
}

#graceful-zen-post-slider .owl-dot:hover {
    background: #20b2aa;
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    #graceful-zen-post-slider .slider-item {
        flex-direction: column;
        min-height: auto;
        box-shadow: none;
    }
    
    #graceful-zen-post-slider .text-panel {
        order: 2;
        box-shadow: none;
        margin: 0px -30px 0px 0;
        padding: 20px 20px 20px 0;
        justify-content: start;
        min-height: 300px;
    }
    
    #graceful-zen-post-slider .image-panel {
        order: 1;
        min-height: 250px;
    }
    
    #graceful-zen-post-slider .post-title {
        font-size: 1.8em;
        line-height: 32px !important;
    }
    
    #graceful-zen-post-slider .post-excerpt {
        font-size: 1em;
        margin-top: 0;
    }
    
    #graceful-zen-post-slider .graceful-zen-slider-container {
        padding: 10px;
    }
    
    #graceful-zen-post-slider .owl-dots {
        bottom: 20px;
        right: 40%;
    }
}

@media (max-width: 480px) {
    #graceful-zen-post-slider .text-panel {
        box-shadow: none;
    }
    
    #graceful-zen-post-slider .post-title {
        font-size: 1.5em;
    }
    
    
    
    #graceful-zen-post-slider .read-more-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    #graceful-zen-post-slider .owl-dots {
        bottom: 15px;
        
    }
}

.navigation-search-button i {
    color: #16b7cc !important;
}