/*
Theme Name: Graceful Halo Blog
Theme URI: https://optimathemes.com/graceful-halo-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Halo Blog is a free, elegant, and versatile WordPress theme crafted for bloggers, creators, and storytellers. Whether you write about lifestyle, fashion, travel, beauty, food, fitness, health, tech, or news, this theme adapts perfectly to your niche. Featuring a clean, modern, and minimal design, Graceful Halo Blog ensures your content shines across all devices with its fully responsive and Retina-ready layout. Built with performance, accessibility, and SEO best practices in mind, it delivers both speed and visibility. The theme is WooCommerce compatible, translation-ready, and supports RTL languages, making it ideal for a global audience. Whether you’re starting a personal blog or building a professional online platform, Graceful Halo Blog blends sophisticated style with powerful functionality to help your voice stand out and your audience grow.
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-halo-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 {
    background-color: #f4f1ec;
}

.entry-header {
    height: 150px;
}

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

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


#main-navigation {
    background-color: #ede8de;
    border-top: 1px solid #d9d1c0;
    border-bottom: 1px solid #d9d1c0;
}

#top-navigation {
    background-color: #000000;
    color: #ffffff;
    border-bottom: 1px solid #d9d1c0;
}

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    background: #f4f1ec;
    border-bottom: 2px solid #cbc1aa;
    font-weight: 600;
    border-radius: 15px;
}

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

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

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

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

.graceful-slider-title {
    width: 460px;
    word-wrap: break-word;
}

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

.site-images {
    min-height: 245px;
    background: #f4f1ec;
}

#site-footer {
    background: #dfd8cb;
}

#site-footer .graceful-widget .widget-title {
    background: #ede8de !important;
    border-bottom: 1px solid #b9ad94 !important;
}

#site-footer .graceful-widget .widget-title::after {
    border-top: 8px solid #b9ad94;
}

.footer-widgets {
    border-bottom: 1px solid #a19376;    
}

#site-menu li a {
    font-weight: 500;
    border-right: 1px solid #cbc0a8;
}

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

#site-menu li:first-child a {
    padding-left: 16px;
    border-left: 1px solid #cbc0a8;
}

.single .post-date {
    color: #111111 !important;
    font-family: 'Open Sans', 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;
}


.content-column > li {
    margin-bottom: 30px;
    display: inline-block;
    vertical-align: top;
    margin-right: 35px;
    width: calc((100% - 40px ) /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%;
}


@media screen and (max-width: 480px) {
    .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;
}

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

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

#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 a:hover {
    background: #333333;
}

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

.post-categories {
    background: unset;
    border: unset;
    margin-bottom: 0;
    padding: 0;
}

.wp-block-search__button {
    background: #f4f1ec;
    border: 1px solid #d9d1c0;
}

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

#main-navigation #searchform #searchsubmit, .close-graceful-search {
    background: #f4f1ec;
    border: 1px solid #d9d1c0;
}

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

#graceful-post-slider {
    padding-bottom: 40px;
    margin-top: 40px;
    border-radius: 30px;
}

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


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

#featured-boxes {
  padding: 34px 34px 30px 34px !important;
  border-bottom: 1px solid #eee;
  background: #fff;
  margin-top: 40px;
  border-radius: 50px;
}

#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;
  border-radius: 20px;
  min-width: 140px;
}

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


#featured-boxes .featured-box img {
    border-radius: 30px;
}

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


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


/* 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;
    }

    .latest-posts-ticker .owl-nav .owl-prev {
        left: -40px !important; 
    }
    .latest-posts-ticker .owl-nav .owl-next {
        right: -40px !important; 
    }
}


/*--------------------------------------------------------------
Latest Posts Ticker
--------------------------------------------------------------*/
.latest-posts-ticker {
    background: #fff;
    padding: 20px 24px;
    margin-top: 40px;
    border-radius: 80px;
}

.latest-posts-ticker .item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
}

.latest-posts-ticker .item a {
    background: #f4f1ec;
    width: 100%;
    border-radius: 50px;
}

.latest-posts-ticker .post-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.latest-posts-ticker .post-thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-right: 15px;
    border-radius: 50px;
    border: 5px solid #fff;
}

.latest-posts-ticker .post-thumbnail img {
    width: 100%;
    height: auto;
}

.latest-posts-ticker .post-thumbnail .no-thumbnail {
    width: 100%;
    height: 100%;
    background-color: #ddd; 
}

.latest-posts-ticker .post-details {
    display: flex;
    align-items: center;
}

.latest-posts-ticker .post-title {
    font-size: 18px;
    line-height: 30px !important;
    margin: 0;
    color: #333;
    display: inline-block;
    max-height: 100px;
    overflow: hidden;
    padding: 0 10px 0 0;
    font-family: 'Lato', sans-serif;
}

.latest-posts-ticker .owl-nav {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none; /* Allows clicks to pass through empty space */
}

.latest-posts-ticker .owl-nav button {
    background: none !important;
    border: none;
    font-size: 60px !important; /* Increase the size of the arrows */
    pointer-events: all;
    color: #777 !important; /* Change to your preferred color */
    cursor: pointer;
    padding: 10px; /* Add padding to increase clickable area */
}

.latest-posts-ticker .owl-nav button:hover {
    color: #000 !important; /* Optional: change color on hover */
}

.latest-posts-ticker .owl-nav .owl-prev {
    position: absolute;
    left: 0px; 
}

.latest-posts-ticker .owl-nav .owl-next {
    position: absolute;
    right: 0px; 
}

.main-content {
    border-radius: 30px;
    margin-bottom: 40px;
}

.graceful-small-image-box {
    background-color: #f2f2f2;
    background-position: center;
    background-size: cover;
    float: left;
    height: 70px;
    margin-right: 12px;
    width: 70px;
    border: 5px solid #ffffff;
    border-radius: 35px;
}

.graceful-recent-image-box {
    background: #f4f1ec;
    clear: both;
    display: block;
    margin-top: 25px;
    margin-bottom: 15px;
    min-height: unset;
    height: 70px;
    border-radius: 35px;
}


.graceful-widget .graceful-recent-image-box a {
    color: #3a3a3a;
    display: block;
    font-size: 13px;
    font-weight: 500;
    height: 55px;
    line-height: 22px;
    margin-top: 3px;
    overflow: hidden;
    vertical-align: top;
    width: 185px;
    padding: 12px 11px 0 0px;
}


/* Custom Styles for Blog Layout */
.content-column li {
    border-bottom: unset;
}

.content-post .post-card {
    margin-bottom: 30px;
    position: relative;
}

.content-post .post-card-inner {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
}

.content-post .site-images {
    height: 300px;
    overflow: hidden;
    border-radius: 25px;
}

.content-post .site-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}

.content-post .post-content {
    background: #fff;
    text-align: left;
    padding: 25px;
    border-radius: 20px;
    margin: -100px 20px 30px 0px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .10196078431372549);
    border-left: 1px solid #eeeeee;
}

.content-post .post-categories a {
    background-color: #b3a58a;
    color: #ffffff !important;
    padding: 0 15px 1px;
    border-radius: 20px;
    margin-right: 8px;
    font-size: 11px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 15px;
}

.content-post .post-title {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
}

.content-post .post-page-content {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    padding-top: 0;
}

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

.blog .post-header {
    text-align: left;
}

#graceful-post-slider .slide-item {
    border-radius: 30px;
}

.graceful-wrap-container {
    border-radius: 30px;
}

#graceful-post-slider .owl-nav {
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.post-header-inner {
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.site-images img {
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.single .content-wrap {
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.graceful-halo-category-title {
    margin-bottom: 20px;
    border-bottom: 7px solid #b3a58a;
    display: inline-block;
    padding-bottom: 1px;
}