/*
Theme Name: Graceful Essence Blog
Theme URI: https://optimathemes.com/graceful-essence-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Essence Blog is a versatile WordPress blog theme ideal for bloggers and website creators across multiple niches—including lifestyle, fashion, travel, technology, health, fitness, beauty, food, personal, and professional blogs, as well as news and online magazine websites. Designed with a clean, modern, and minimal layout, this theme is fully responsive and Retina-ready, ensuring your site looks great on all devices. Graceful Essence Blog is also WooCommerce compatible, supports RTL (Right-to-Left) languages, and comes fully SEO optimized to help your content rank better in search engines. Whether you’re a beginner or a pro, this theme offers an elegant and flexible foundation for your WordPress site.
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-essence-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
--------------------------------------------------------------*/

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

.post-categories {
    background: #f1f1f1;
}

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

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

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

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    background: #000000;
    color: #ffffff !important;
    border-bottom: 1px solid #000000;
    font-weight: 700;
    
}

aside .graceful-widget h2::after, 
.graceful-widget .widget-title::after {
    border-top: 8px solid #000000;
}



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

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

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

#primary .continue-read a {
    border: 1px solid #111111;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    line-height: 34px;
    text-transform: capitalize;
}

#primary .continue-read a:hover {
    background: #f1f1f1;
}

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

.site-images {
    min-height: 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; 
}

.content-column > li {
    margin-bottom: 60px;
}

.post-footer{
    border-bottom: 1px solid #eeeeee;
}

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

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

#main-navigation {
    text-align: center;
}

.grace-latest {
    text-align: center;
    background: #f3f3f3;
    padding: 7px;
    font-size: 20px;
    margin-bottom: 36px;
}

.main-navigation-sidebar {
  position: absolute;
  top: 0px;
  left: 40px;
  z-index: 1;
}
            
.main-navigation-search {
  position: absolute;
  top: 0px;
  right: 40px;
  z-index: 2;
}

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

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

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

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

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

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

#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 .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 {
  position: absolute;
  left: -999em;
  z-index: 1101;
  width: 170px;
  text-align: left;
  border: 1px solid #e4e4e4;
  border-width: 1px;
  opacity: 0;
}

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

#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 {
    background: #ffffff;
    border-bottom: 1px solid #eee;
}

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

.main-content {
    margin-top: 40px;
}

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 24px;
    }
    #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-hero-banner {
    min-height: 500px;
    display: flex;
    align-items: center;
}

.graceful-hb-col {
    position: relative;
    float: left;
    width: 100%;
}

.graceful-hb-col:last-child {
    min-height: 400px;
}

.graceful-hb-col img {
    width: 450px;
    height: 450px;
    margin: 50px;
}

.graceful-hb-col h2 {
    font-size: 38px;
    margin-bottom: 20px;
}

.graceful-hb-col a {
    padding: 6px 20px;
    background: #333333;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: bold;
    float: left;
    border-radius: 5px;
}


#graceful-hero-banner-wrap {
    padding-left: 40px;
    padding-right: 40px;
}

@media screen and (min-width: 768px) {

    .graceful-hb-col:first-child {
        width: 59%;
    }
    
    .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-hb-col {
        width: 49%;
    }
}

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


#graceful-post-slider .slide-item {
    background-size: cover;
    height: 420px;
}

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

#responsive-menu .sub-menu > li {
    background: #eeeeee;
}

#responsive-menu .sub-menu > li li {
    background: #cccccc;
}

.close-graceful-search {
    background: #000000;
}

#site-menu li a {
    font-family: 'Open Sans', sans-serif;
}

aside .graceful-widget h2 {
    font-family: Open Sans, sans-serif;
}

#graceful-hero-banner-wrap {
    margin-top: 20px;
}


.graceful-hb-col a:focus {
    outline: 2px dotted #000000 !important;
}


.close-graceful-search {
    background: #dddddd;
    border: 1px solid #aaaaaa;
}

#site-footer {
    border-top: 1px solid #cccccc;
    background: #f2f2f2;
}

#site-footer .graceful-widget h2 {
    color: #ffffff !important;
}

.intro-text form {
    margin-top: 35px;
}


#primary .continue-read a {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 300;
    background: #fafafa;
}

.blog .post-header {
    width: 80%;
    text-align: left;
    margin: 40px 10% 0;
}

.blog .post-page-content {
    width: 80%;
    text-align: left;
    margin: 0px 10%;
}

.blog .post-page-content p {
    padding: 0;
    margin: 0;
}

.blog .post-footer {
    width: 80%;
    text-align: left;
    margin: 0px 10%;
    padding: 3px 3px 3px 0 !important;
}

.blog .continue-read {
    text-align: left;
}

.post-categories {
    background: #f2f2f2;
    border: 1px solid #dddddd;
}


.site-images a::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.site-images a:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

.graceful-hero-banner .graceful-hb-col .navigation-socials a {
    padding: 2px;
    background: transparent;
    color: #ff6481;
    font-size: 18px;
    font-weight: bold;
}


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

#featured-boxes {
  border-bottom: 1px solid #eee;
  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 .featured-box img {
    border-radius: 20px;
}

#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: 20px;
        top: 7px !important;
    }
}


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

    .main-navigation-search {
        top: 0 !important;
    }
}


/* Media Queries */
@media screen and (max-width: 480px) {
    .graceful-hero-banner {
        flex-direction: column;
        align-items: flex-start; /* Adjust as needed */
        flex-direction: column-reverse;

    }
    .graceful-hb-col a {
        float: unset;
        padding: 8px 20px;
    }
    .main-navigation-search {
        right: 20px;
    }
    .graceful-hb-col img {
        width: 100%;
        height: 100%;
        text-align: center; 
        margin: 20px 0px 30px;
    }
    .graceful-hb-col h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .graceful-hb-col:last-child {
        min-height: 300px;
    }
    .graceful-hb-col:first-child::after {
        left: 0;
        width: 100%;
    }
    
}

@media (min-width:700px) and (max-width:900px) {
    .graceful-hb-col img {
        width: 340px;
        height: 340px;
    }
    .graceful-hb-col:first-child {
        text-align: center;
    }
    .graceful-hb-col:first-child::after {
        display: none;
    }
    .graceful-hb-col:last-child {
        min-height: 200px;
        text-align: center;
    }
}

.site-menu-wrapper {
    margin-right: 0px;
}

#primary .post-date {
    color: #1a1a1a;
}



/*--------------------------------------------------------------
Graceful Essence Slider
--------------------------------------------------------------*/

#graceful-essence-slider {
    background: #ffffff;
    padding: 40px 0;
}

#graceful-essence-slider .graceful-essence-owl .graceful-essence-slide {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

/* Inner container to create left image / right content layout */
#graceful-essence-slider .graceful-essence-slide-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 92%;
    margin: 0 auto;
}

/* Left image */
#graceful-essence-slider .graceful-essence-slide-image {
    flex: 0 0 480px;
    max-width: 480px;
    position: relative;
}

#graceful-essence-slider .graceful-essence-slide-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: none;
    object-fit: cover;
}

#graceful-essence-slider .graceful-essence-image-placeholder {
    width: 100%;
    height: 220px;
    background: #f5f5f5;
}

/* Right content */
#graceful-essence-slider .graceful-essence-slide-content {
    flex: 1 1 auto;
}

/* Category badge */
#graceful-essence-slider .graceful-essence-category span {
    display: inline-block;
    background: #000000; /* small colored badge */
    color: #ffffff;
    padding: 1px 10px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.2px;
    text-transform: none;
}

#graceful-essence-slider .graceful-essence-title {
    margin: 18px 0 10px;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    color: #33383b; /* bold typography color */
}

#graceful-essence-slider .graceful-essence-title a {
    text-decoration: none;
    color: inherit;
}

#graceful-essence-slider .graceful-essence-author {
    color: #8d9396; /* subtle gray for author */
    font-size: 14px;
    margin-top: 6px;
}

/* Navigation buttons centered below slider */
#graceful-essence-slider .graceful-essence-slider-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 22px;
}

#graceful-essence-slider .graceful-essence-slider-nav button {
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
    padding: 6px 10px;
    color: #6b6f71;
}

/* Responsive tweaks */
@media (max-width: 880px) {
    #graceful-essence-slider .graceful-essence-slide-inner {
        flex-direction: column;
        gap: 18px;
    }

    #graceful-essence-slider .graceful-essence-slide-image {
        flex: 0 0 auto;
        max-width: 100%;
    }

    #graceful-essence-slider .graceful-essence-title {
        font-size: 28px;
    }
}


#graceful-essence-slider .owl-dots {
    display: none;
}