/*
Theme Name: Graceful Joy Blog
Theme URI: https://optimathemes.com/graceful-joy-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Joy Blog is a free, modern, and minimal WordPress theme designed to bring a fresh and elegant look to any website. Highly versatile and visually appealing, it’s perfect for lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, magazine, personal, and professional blogs. This theme comes packed with features you’ll love, full WooCommerce compatibility for online stores, RTL language support for global audiences, and SEO-friendly code to help your content rank higher on search engines. Plus, its fully responsive and retina-ready design ensures your site looks stunning on every device. Whether you’re a blogger, creator, or entrepreneur, Graceful Joy Blog makes it easy to share your stories beautifully.
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-joy-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 #dddddd;
    border-bottom: 3px solid #dddddd;
    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: 160px;
    border-bottom: 1px solid #eeeeee;
}

.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: 'Open Sans', 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;
}

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

#graceful-post-slider .owl-nav {
    background-color: #f3efee;
}

#graceful-post-slider .owl-stage-outer:after {
    background-color: #f3efee;
}



#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-joy-category-title {
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-bottom: 4px solid #dddddd;
    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;
    padding-left: 40px;
    padding-right: 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(255,255,255,0.80);
  color: rgba(0,0,0,0.80) !important;
}


#featured-boxes .featured-box {
    width: calc((100% - 70px ) /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;
    }
}


.current-menu-item {
    background: #eeeeee;
}

#site-menu li:first-child a, #site-menu li:last-child a {
    padding-left: 16px;
    padding-right: 16px;
}

@media screen and (max-width: 768px) {
    .navigation-search-button {
        line-height: 20px;
    }
    #main-navigation .navigation-socials {
        right: 44px;
    }
}



/* ===========================
   Graceful Joy Carousel Slider Post List Styles
   =========================== */
.joy-latest-posts-slider {
    position: relative;
    width: 100%;
    background: #f3efee;
    padding: 44px;
}
.joy-latest-posts-slider .owl-item {
    border: 1px solid #eeeeee;
}
.joy-latest-posts-slider .joy-slider-item {
    position: relative;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.joy-latest-posts-slider .joy-slider-overlay {
    background: rgba(255, 255, 255, 0.8); /* light overlay */
    padding: 20px;
    text-align: center;
    color: #222; /* dark text */
    max-width: 600px;
    border-radius: 0; /* flat corners as per design */
}
.joy-latest-posts-slider .joy-slider-title a {
    color: #222; /* dark heading */
    text-decoration: none;
    font-size: 24px;
}
.joy-latest-posts-slider .joy-slider-excerpt {
    margin: 10px 0;
    font-size: 16px;
    color: #333; /* slightly lighter gray for body text */
}
.joy-latest-posts-slider .joy-slider-button {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 18px;
    background: #d9d3ce; /* soft gray/beige button */
    color: #222; /* dark button text */
    text-decoration: none;
    border-radius: 2px;
}
.joy-latest-posts-slider .joy-slider-button:hover {
    background: #c2bcb7; /* darker beige on hover */
}

/* ===========================
   Graceful Joy Blog Post List Styles
   =========================== */

.gjb-post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 40px;
}

/* Card shell */
.gjb-post-item {
    display: flex;
    position: relative;
    flex-direction: column;
}

/* Images or placeholders */
.gjb-post-thumb {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}
.gjb-post-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.gjb-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e5e5;
    display: block;
}

/* Featured hero (wide) */
.gjb-thumb-featured {
    aspect-ratio: 16 / 9;
    margin-bottom: 1.25rem;
}
.gjb-thumb-featured .gjb-thumb-placeholder {
    aspect-ratio: 16 / 9;
}

/* Grid thumbs (portrait style) */
.gjb-thumb-grid {
    aspect-ratio: 4 / 5;
    margin-bottom: 1rem;
}
.gjb-thumb-grid .gjb-thumb-placeholder {
    aspect-ratio: 4 / 5;
}

/* Header + Title */
.gjb-post-header { margin-top: 0; }

.gjb-post-title {
    letter-spacing: .06em;
    line-height: 1.2;
    font-size: 28px;
    margin: .25rem 0 .5rem;
}
.is-featured .gjb-post-title { font-size: 1.8rem; }
.gjb-post-title a {
    color: #111;
    text-decoration: none;
}

/* Meta line */
.gjb-post-meta {
    font-size: .8rem;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.gjb-meta-sep { opacity: .6; }

/* Excerpt */
.gjb-post-excerpt {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.gjb-post-excerpt p {
    margin-top: 0;
    margin-bottom: 0;
}
.is-featured .gjb-post-excerpt { max-width: 75ch; }

/* Read more button */
.gjb-read-more {
    display: inline-block;
    background: #f2f2f2;
    color: #222;
    padding: .6rem 1.1rem;
    font-size: .85rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s ease;
}
.gjb-read-more:hover { background: #e1e1e1; }

/* Grid: 2 columns after the hero */
@media (min-width: 768px) {
    .gjb-post-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .gjb-post-item.is-featured {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1100px) {
    .gjb-post-list {
        gap: 3.5rem;
    }
    .is-featured .gjb-post-title { font-size: 2.2rem; }
}

.gjb-post-category {
    position: absolute;
    bottom: 4px;
    left: 0;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 12px;
    margin: 12px;
    backdrop-filter: blur(10px);

}

.gjb-post-category a {
    color: #000000 !important;
    text-transform: uppercase;
    font-size: 12px;
}

@media screen and (max-width: 480px) {
    .joy-slider-wrapper.wrapped-content {
        padding-bottom: 12px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}