/*
Theme Name: Graceful Elegance Blog
Theme URI: https://optimathemes.com/graceful-elegance-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Elegance Blog is a free WordPress theme which brings a fresh, elegancey, 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.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-elegance-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: '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;
}

@media screen and (min-width: 768px) {
    #main-navigation .wrapped-content {
        max-width: unset;
        margin-left: 40px;
        margin-right: 40px;
    }
}
#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-elegance-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;
    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: #e8e1df;
}

#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 Elegance Carousel Slider Post List Styles
   =========================== */
.elegance-latest-posts-slider {
    position: relative;
    width: 100%;
    background: #f3efee;
    padding: 44px;
}
.elegance-latest-posts-slider .owl-item {
    border: 1px solid #eeeeee;
}
.elegance-latest-posts-slider .elegance-slider-item {
    position: relative;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elegance-latest-posts-slider .elegance-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 */
}
.elegance-latest-posts-slider .elegance-slider-title a {
    color: #222; /* dark heading */
    text-decoration: none;
    font-size: 24px;
}
.elegance-latest-posts-slider .elegance-slider-excerpt {
    margin: 10px 0;
    font-size: 16px;
    color: #333; /* slightly lighter gray for body text */
}
.elegance-latest-posts-slider .elegance-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;
}
.elegance-latest-posts-slider .elegance-slider-button:hover {
    background: #c2bcb7; /* darker beige on hover */
}

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

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

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

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

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

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

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

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

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

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

/* Read more button */
.geb-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;
}
.geb-read-more:hover { background: #e1e1e1; }

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

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

.geb-post-category {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 12px;
    margin: 12px;
    border-radius: 6px;
}

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