/*
Theme Name: Graceful Glow Blog
Theme URI: https://optimathemes.com/graceful-glow-blog-theme/
Author: Aslam
Author URI: http://optimathemes.com/
Description: Graceful Glow Blog is a free, flexible, and multi-purpose WordPress theme designed for bloggers and content creators across all niches, including lifestyle, fashion, travel, tech, health, fitness, beauty, food, news, and more. With its clean, modern, and minimal design, it offers a visually appealing and user-friendly experience. The theme is fully responsive and Retina-ready, ensuring your site looks stunning on all devices. It’s also WooCommerce compatible, supports RTL (Right-to-Left) languages, and is SEO-optimized to help your content rank better in search engines. Whether you are starting a personal blog or running a professional magazine site, Graceful Glow Blog is built to meet your needs with speed, simplicity, and elegance.
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-glow-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 child theme starts here
*/

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

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

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

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

#main-navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e4e4e4;
}

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

aside .graceful-widget h2, 
.graceful-widget .widget-title {
    background: unset;
    border: 1px solid #dddddd;
    font-weight: 600;
}

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

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

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

#graceful-post-slider {
    padding-bottom: 0 !important;
    padding-left: 40px;
    padding-right: 40px;
}

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

#site-footer {
    background: #f2f2f2;
}

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

.single .post-date {
    color: #111111 !important;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
}

.single .post-title-author { 
    color: #111111 !important;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: normal;
}

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

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

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

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

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

#top-menu .sub-menu a {
    border-bottom:1px solid #dddddd;
}

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

.wp-block-search__button {
background: #f5f5f5;
    border: 1px solid #dddddd;
}


#site-menu li a {
    border-left: 1px solid #e4e4e4;
}

#site-menu li a:hover {
    background: #f5f5f5;
}

#site-menu .sub-menu > li > a:hover {
    background-color: #f5f5f5;
    color: #000000;
}

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

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

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

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


/* 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 .slide-item {
        background-position: center;
        height: 500px;
    }

    #graceful-post-slider.wrapped-content .slide-item {
        height: 450px;
    }

    .graceful-slider-read-more a {
        margin-bottom: 0;
    }
}

/* Media Query Min 768px End  */

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

.single .post-header {
    margin-top: 0px;
    margin-bottom: 30px;
}

.content-column li {
    border-bottom: none;
}

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

footer .widget-title {
    background: #dddddd !important;
}

.graceful-glow-category-title {
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    display: inline-block;
    padding-bottom: 1px;
    text-align: center;
    width: 100%;
    font-size: 28px;
    padding: 2px 0 4px;
}

/* ==========================================================================
   Featured Category Styles
   ========================================================================== */

.featured-category-section {
	max-width: 1200px;
	margin: 60px auto;
	padding: 0 20px;
}

.featured-category-title {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 40px;
	text-align: center;
	color: #333333;
}

.featured-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.featured-category-card {
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-category-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.featured-category-link {
	display: block;
	text-decoration: none;
	color: #ffffff !important;
}

.featured-category-image {
	position: relative;
	height: 400px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.featured-category-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 1;
}

.featured-category-content {
	position: relative;
	z-index: 2;
	padding: 30px;
	width: 100%;
}

.featured-category-badge {
	display: inline-block;
	background: #ff5722;
	color: #ffffff;
	padding: 2px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 3px;
	margin-bottom: 10px;
}

.featured-category-date {
	display: block;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 15px;
}

.featured-category-post-title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff !important;
	margin: 0;
	transition: opacity 0.3s ease;
}

.featured-category-card:hover .featured-category-post-title {
	opacity: 0.9;
}

/* Tablet */
@media (max-width: 992px) {
	.featured-category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
	
	.featured-category-image {
		height: 350px;
	}
	
	.featured-category-post-title {
		font-size: 20px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.featured-category-section {
		margin: 40px auto;
	}
	
	.featured-category-title {
		font-size: 28px;
		margin-bottom: 30px;
	}
	
	.featured-category-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.featured-category-image {
		height: 300px;
	}
	
	.featured-category-content {
		padding: 25px;
	}
	
	.featured-category-post-title {
		font-size: 18px;
	}
	
	.featured-category-badge {
		font-size: 10px;
		padding: 5px 12px;
	}
	
	.featured-category-date {
		font-size: 11px;
	}
}

/* Extra small mobile */
@media (max-width: 480px) {
	.featured-category-section {
		padding: 0 15px;
	}
	
	.featured-category-title {
		font-size: 24px;
	}
	
	.featured-category-image {
		height: 280px;
	}
	
	.featured-category-content {
		padding: 20px;
	}
	
	.featured-category-post-title {
		font-size: 16px;
	}
}

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

#featured-boxes {
  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 .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;
    }
}