/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Jannh Child Theme
	Author:       TieLabs
	Author URI:   https://tielabs.com
	Template:     jannah
	Version:      1.0.2
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* ==========================================================================
   CUSTOM CSS — Jannah Theme
   Organized by site area, top to bottom.
   Duplicate selectors merged; conflicts noted inline.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. GLOBAL / BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1 {
	font-size: 45px;
	line-height: 1;
}

h3 {
	text-transform: uppercase;
}

.container-wrapper {
	border: 0;
}

/* Dark skin base */
.dark-skin .container-wrapper {
	background-color: var(--tie-dark-skin-bg-main, #000);
	border-color: rgba(255, 255, 255, 0);
}


/* --------------------------------------------------------------------------
   2. TOP BAR / BREAKING NEWS TICKER
   -------------------------------------------------------------------------- */

/* Full-width blue bar with a 1400px inner wrapper */
#top-nav .container {
	max-width: 100%;
	padding: 0;
	background: #3373b8;
}

/* MERGED: .topbar-wrapper appeared twice in the original file */
.topbar-wrapper {
	max-width: 1400px;
	margin: auto;
	padding: 0 !important;
	background: transparent !important;
}

.top-nav-dark .top-nav {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 1) !important;
}

/* Breaking news label */
.breaking-title-text {
	text-transform: uppercase;
	font-weight: bold;
	background: #c71f37;
	padding: 13px 20px;
	margin-left: 15px;
}

#top-nav .breaking-title {
	color: #ffffff;
	margin-left: -25px;
}

#top-nav .breaking-title::before,
.top-nav-dark .ticker-content {
	background-color: transparent !important;
}

.top-nav-dark .top-nav .breaking a {
	color: #fff;
}

/* Ticker layout */
.ticker-dir-left .ticker,
.ticker-dir-left .ticker-content {
	padding-left: 70px;
}

.breaking-news-nav {
	left: 0;
	right: unset;
	padding-right: 0;
}

#top-nav .breaking-news-nav li:hover {
	background-color: #000 !important;
	border-color: #000 !important;
}

/* Top bar components (search, social, etc.) */
.components > li > a {
	width: 40px;
	font-size: 30px;
}

.top-nav-dark .top-nav .components > li > a,
.top-nav-dark .top-nav .components > li.social-icons-item .social-link:not(:hover) span {
	color: #fff !important;
}

.top-nav .components > li:hover > a {
	color: #000 !important;
}

.top-nav .social-icons-item .facebook-social-icon span:hover,
.top-nav .social-icons-item .facebook-social-icon:hover,
.top-nav .social-icons-item .twitter-social-icon span:hover,
.top-nav .social-icons-item .twitter-social-icon:hover,
.top-nav .social-icons-item .youtube-social-icon span:hover,
.top-nav .social-icons-item .youtube-social-icon:hover,
.top-nav .social-icons-item .instagram-social-icon span:hover,
.top-nav .social-icons-item .instagram-social-icon:hover {
	color: #000 !important;
	background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   3. HEADER & LOGO
   -------------------------------------------------------------------------- */

#tie-wrapper #theme-header {
	background-color: #f1f1f1;
}

/* Remove default header gradient */
#theme-header::before,
#theme-header.header-layout-1 #main-nav:not(.fixed-nav)::before {
	background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) !important;
}

.container.header-container {
	max-width: 100%;
	border-bottom: 1px solid #ccc;
}

.tie-row.logo-row {
	max-width: 1200px;
	margin: auto;
}

#logo {
	margin-top: 10px !important;
	margin-bottom: 20px !important;
}

#header-notification-bar {
	z-index: 999 !important;
}


/* --------------------------------------------------------------------------
   4. MAIN NAVIGATION
   -------------------------------------------------------------------------- */

#main-nav .container {
	max-width: 100%;
	background: #fff;
}

.main-menu-wrapper {
	max-width: 1400px;
	margin: auto;
	float: none !important;
}

.main-nav-below.top-nav-below #main-nav:not(.fixed-nav) {
	bottom: 0;
}


/* --------------------------------------------------------------------------
   5. CATEGORY / ARCHIVE PAGES
   -------------------------------------------------------------------------- */

/* NOTE: the original file set this twice — first `padding: 0 30px;`,
   then `padding: 0 30px 0 0;`. The second one wins, kept here. */
#category-title-section {
	padding: 0 30px 0 0;
}

#category-title-section .page-title {
	text-transform: uppercase !important;
	font-size: 40px !important;
	line-height: 1;
	background: #000;
	color: #fff;
	padding: 10px 20px;
}

/* Category badge colors */
.tie-cat-8468,
.tie-cat-item-8468 > span,
.tie-cat-8467,
.tie-cat-item-8467 > span {
	background-color: #0c609d !important;
	color: #ffffff !important;
}

#load-more-archives {
	background: #000;
	color: #fff;
	font-size: 18px;
}


/* --------------------------------------------------------------------------
   6. POSTS / SINGLE POST
   -------------------------------------------------------------------------- */

.post-layout-1 .entry-header-outer,
.post-layout-2 .entry-header-outer,
.post-layout-6 .entry-header-outer {
	padding: 30px 30px 20px 0;
}

/* Thumbnail overlay gradient */
.thumb-overlay::after {
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.95)) !important;
  height: 100% !important;
}

/* Share buttons */
#share-buttons-top {
	padding: 10px 0 20px;
}

.share-links .share-btn-icon {
	font-size: 25px;
}

/* About the author box */
.post-components .about-author,
#author-title-section {
	background: #f7f7f7;
	border: 1px solid #ccc;
}

.about-author .author-info::before {
	content: "ABOUT THE AUTHOR";
	display: block;
	font-weight: bold;
	margin: 0 0 15px 0;
}

.entry-header-outer .about-author {
	margin-top: 0;
}

.about-name {
	margin-bottom: 0 !important;
}

.about-title {
	font-size: 20px;
}

.wp-block-heading.bio-title {
	margin: -15px 0 25px;
	font-size: 20px;
}


/* --------------------------------------------------------------------------
   7. WIDGET & BLOCK TITLES
   -------------------------------------------------------------------------- */

.mag-box-title h3 {
	background: #3373b8;
	color: #fff;
	padding: 5px 20px;
	margin: 0 0 -12px;
}

.mag-box-title h3:only-child {
	max-width: 100%;
	margin-bottom: -12px;
}

.widget-title .the-subtitle {
	background: #000;
	color: #fff;
	padding: 5px 15px;
	margin-bottom: -12px;
}

.dark-skin .widget-title .the-subtitle {
	background: #fff;
	color: #000;
	text-transform: uppercase;
}

/* Remove default title accent line */
.block-head-1 .the-global-title::before,
.block-head-1 .comment-reply-title::before,
.block-head-1 .related.products > h2::before,
.block-head-1 .up-sells > h2::before,
.block-head-1 .cross-sells > h2::before,
.block-head-1 .cart_totals > h2::before,
.block-head-1 .bbp-form legend::before {
	display: none;
}

/* Hide "more" link on this specific block */
#tie-block_2740 .tie-alignright {
	display: none;
}


/* --------------------------------------------------------------------------
   8. POST LIST / STREAM WIDGETS
   -------------------------------------------------------------------------- */

/* CONFLICT (resolved): the original file had
     padding-top: 20px !important;   ...and later...
     padding: 0 30px 0 0;
   Because of the !important, the effective result was 20px on top
   and 30px on the right. Consolidated here to match that behavior. */
.mag-box.wide-post-box .container-wrapper {
	padding: 0 30px 0 0;
	padding-top: 20px !important;
}

.wide-post-box .posts-items li {
	padding: 15px 0;
}

.posts-list-container .post-item:not(:first-child) .post-thumb img {
	width: 279px;
	height: 139px;
	object-fit: cover;
}

.stream-item-top {
	margin-top: 10px !important;
}

.stream-item-widget img {
	width: 100%;
}

.light-gray #posts-list-widget-16 {
	background: #f1f1f1;
}


/* --------------------------------------------------------------------------
   9. SOCIAL ICONS & STATISTICS WIDGETS
   -------------------------------------------------------------------------- */

.light-gray #social-statistics-4 {
	background: #f1f1f1;
}

/* MERGED: this selector appeared twice in the original file */
.social-statistics-widget a span.counter-icon {
	background-color: #000;
	font-size: 30px;
}

.social-statistics-widget a span.counter-icon:hover {
	background: #3373b8;
}

.social-statistics-widget li {
	padding: 0 5px;
	width: 25%;
}

.solid-social-icons {
	display: flex;
	flex-wrap: wrap;
}

/* Hide follower counts */
.followers {
	display: none;
}

/* Circle icon layout */
.circle-icons .social-icons-item a span.counter-icon {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	line-height: 50px;
}

.circle-three-cols .social-icons-item {
	width: calc(100% / 4);
}

.circle-three-cols .social-icons-item a span.counter-icon {
	font-size: 38px !important;
}

.social-icons-widget .social-icons-item .social-link {
	font-size: 35px;
	margin: 0 10px;
}


/* --------------------------------------------------------------------------
   10. SIDEBAR
   -------------------------------------------------------------------------- */

.sidebar .container-wrapper,
.sidebar .tie-weather-widget {
	padding-top: 30px;
}


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */

#footer-widgets-container {
	background: #000;
}

.footer-widget-area {
	padding-top: 20px !important;
}

#site-info .tie-social-icon::before {
	font-size: 30px;
}

#site-info .social-link {
	margin: 0 15px;
}

.site-info .social-icons-item .facebook-social-icon:hover,
.site-info .social-icons-item .twitter-social-icon:hover,
.site-info .social-link.youtube-social-icon:hover,
.site-info .social-link.instagram-social-icon:hover {
	background-color: transparent !important;
}