/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Sporty Africa — African iGaming news
	Author:       Sporty Africa
	Author URI:   https://sporty.africa
	Template:     jannah
	Version:      1.2.2
	Text Domain:  jannah-child
*/

:root {
	--sporty-orange: #FF6600;
	--sporty-orange-dark: #E55A00;
	--sporty-dark: #231018;
	--sporty-black: #12090d;
	--sporty-ink: #1a1216;
	--sporty-muted: #6b7280;
	--sporty-line: rgba(35, 16, 24, 0.1);
	--sporty-paper: #faf8f7;
}

/* Clean shell — less chrome, more content */
body.theme-jannah {
	background: var(--sporty-paper);
	color: var(--sporty-ink);
}

#tie-wrapper.boxed-layout,
.boxed-layout #tie-wrapper {
	box-shadow: none;
}

#theme-header.header-layout-1 #main-nav {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: var(--sporty-dark);
}

#theme-header #top-nav {
	background: #160c10;
}

#main-nav .main-menu > ul > li > a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 12px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Never show Home in primary nav — logo is home */
#main-nav .menu-item-home,
#main-nav .menu > li.menu-item-home,
#menu-item-308 {
	display: none !important;
}

/* Kill solid orange active pill / dash between logo and first item */
#main-nav.menu-style-solid-bg .main-menu > ul > li,
#main-nav.menu-style-solid-bg .main-menu > ul > li > a,
#main-nav.menu-style-solid-bg .main-menu > ul > li.current-menu-item,
#main-nav.menu-style-solid-bg .main-menu > ul > li.current-menu-item > a,
#main-nav.menu-style-solid-bg .main-menu > ul > li.tie-current-menu,
#main-nav.menu-style-solid-bg .main-menu > ul > li.tie-current-menu > a,
#main-nav .main-menu > ul > li.current-menu-item > a,
#main-nav .main-menu > ul > li.tie-current-menu > a,
#main-nav .main-menu > ul > li.current_page_item > a {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

#main-nav .main-menu > ul > li:hover > a,
#main-nav .main-menu > ul > li.current-menu-item > a,
#main-nav .main-menu > ul > li.tie-current-menu > a {
	color: var(--sporty-orange) !important;
}

.main-menu .menu > li.current-menu-item,
.main-menu .menu > li.tie-current-menu,
.main-menu .menu > li.current_page_item,
#main-nav .main-menu > ul > li {
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
}

.main-menu .menu > li.current-menu-item:after,
.main-menu .menu > li.tie-current-menu:after,
.main-menu .menu > li.current-menu-item > a:after,
.main-menu .menu > li.tie-current-menu > a:after,
#main-nav .main-menu > ul > li > a:before,
#main-nav .main-menu > ul > li > a:after {
	display: none !important;
	content: none !important;
	border: 0 !important;
}

.header-layout-1-logo img,
.logo img {
	max-height: 64px;
	width: auto;
}

/* Logo → News: break Jannah table/right-align header */
#theme-header.header-layout-1 #main-nav .main-menu-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	gap: 16px;
}

#theme-header.header-layout-1 #main-nav .header-layout-1-logo {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	vertical-align: middle;
}

#theme-header.header-layout-1 #main-nav #menu-components-wrap {
	display: flex !important;
	float: none !important;
	flex: 1 1 auto !important;
	justify-content: flex-start !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	text-align: left !important;
}

#theme-header.header-layout-1 #main-nav .main-menu,
#theme-header.header-layout-1 #main-nav .main-menu-wrap,
#theme-header.header-layout-1 #main-nav #main-nav-menu {
	display: block !important;
	float: none !important;
	margin: 0 auto 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
	width: auto !important;
	max-width: 100%;
}

#theme-header.header-layout-1 #main-nav .main-menu > ul.menu {
	display: flex !important;
	float: none !important;
	flex-wrap: wrap;
	justify-content: flex-start !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	text-align: left !important;
}

#theme-header.header-layout-1 #main-nav .main-menu > ul.menu > li {
	display: block !important;
	float: none !important;
}

#theme-header.header-layout-1 #main-nav .components {
	margin-left: auto;
}

/* Strip content frames / card chrome */
#tie-wrapper,
#tie-container,
.container-wrapper,
.mag-box,
.mag-box-container,
.sidebar .container-wrapper,
.theiaStickySidebar .container-wrapper,
.entry-content .container-wrapper,
.section-item .container-wrapper,
.widget.container-wrapper {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.mag-box {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.boxed-layout #tie-wrapper,
#tie-wrapper.boxed-layout {
	max-width: none;
	margin: 0;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent;
}

body.theme-jannah,
#tie-body {
	background: #fff;
}

/* Section titles — simple orange rule */
.the-global-title,
.block-title,
.magazine2 .the-global-title {
	border: 0;
	position: relative;
	padding-left: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 15px;
	background: transparent !important;
}

.the-global-title:before,
.block-title:before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	width: 3px;
	height: 76%;
	background: var(--sporty-orange);
}

.meta-cat a,
.post-cat,
.tie-cat {
	background: var(--sporty-orange) !important;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 11px;
}

a:hover {
	color: var(--sporty-orange);
}

.breaking-title {
	background: var(--sporty-orange) !important;
	color: #fff !important;
	font-weight: 800;
	text-transform: uppercase;
}

.button,
input[type="submit"],
.more-link {
	background: var(--sporty-orange) !important;
	border-color: var(--sporty-orange) !important;
	color: #fff !important;
	border-radius: 2px;
	font-weight: 700;
}

/* Footer — 4 columns, clean, no bullets */
#footer,
.site-footer,
#theme-footer,
#footer-widgets-container {
	background: var(--sporty-dark);
}

#footer-widgets-container {
	padding: 36px 0 20px;
}

#footer-widgets-container .footer-widget-area .tie-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 -12px;
}

#footer-widgets-container .tie-col-md-3 {
	float: none !important;
	width: 100%;
	padding: 0 12px 28px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	#footer-widgets-container .tie-col-md-3 {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (min-width: 992px) {
	#footer-widgets-container .footer-widget-area .tie-row {
		flex-wrap: nowrap;
	}

	#footer-widgets-container .tie-col-md-3 {
		width: 25% !important;
		flex: 0 0 25% !important;
		max-width: 25% !important;
		padding-bottom: 0;
	}
}

#footer .widget,
#theme-footer .widget,
#footer-widgets-container .widget {
	margin-bottom: 0;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

#footer .widget-title,
#theme-footer .widget-title,
.footer-widget-area .widget-title,
#footer .widget-title .the-subtitle,
#footer-widgets-container .the-subtitle {
	display: inline-block;
	background: transparent !important;
	color: #fff !important;
	padding: 0 0 6px !important;
	margin: 0 0 12px !important;
	border: 0 !important;
	border-bottom: 2px solid var(--sporty-orange) !important;
	font-size: 12px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

#footer .widget ul,
#footer .sporty-footer-links,
.sporty-footer-links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#footer .widget ul li,
.sporty-footer-links li {
	list-style: none !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	line-height: 1.35;
}

#footer .widget ul li:before,
.sporty-footer-links li:before,
#footer .widget ul li:after,
.sporty-footer-links li:after {
	display: none !important;
	content: none !important;
}

.sporty-footer-links a,
#footer .widget ul a {
	color: #d5cacf;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
}

.sporty-footer-links a:hover,
#footer .widget ul a:hover {
	color: var(--sporty-orange) !important;
}

.sporty-footer-brand {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
}

.sporty-footer-about p {
	margin: 0;
	color: #c9c1c4;
	font-size: 14px;
	line-height: 1.6;
}

.sporty-footer-news p {
	margin: 0 0 12px;
	color: #c9c1c4;
	font-size: 14px;
}

.sporty-footer-btn {
	display: inline-block !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Footer menu in copyright row — compact inline */
.site-info .footer-menu,
#footer .footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-info .footer-menu li {
	display: inline-block;
	margin: 0 12px 0 0;
	list-style: none;
}

.sporty-featured,
.sporty-main,
.sporty-more,
.sporty-news,
.sporty-reg {
	margin-bottom: 36px;
}

/* Author cards */
.sporty-authors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	margin: 12px 0 40px;
}

.sporty-author-card {
	display: flex;
	gap: 18px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--sporty-line);
	border-radius: 4px;
}

.sporty-author-card__media {
	flex: 0 0 88px;
}

.sporty-author-card__avatar {
	width: 88px !important;
	height: 88px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.sporty-author-card__role {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sporty-orange);
}

.sporty-author-card__name {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
}

.sporty-author-card__name a {
	color: var(--sporty-ink);
	text-decoration: none;
}

.sporty-author-card__name a:hover {
	color: var(--sporty-orange);
}

.sporty-author-card__bio {
	margin: 0 0 10px;
	color: var(--sporty-muted);
	font-size: 14px;
	line-height: 1.55;
}

.sporty-author-card__meta {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.sporty-author-card__meta a {
	color: var(--sporty-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sporty-orange);
}

/* Author archive + post about-author polish */
.author-info,
.about-author,
#about-author,
.about-the-author {
	border: 1px solid var(--sporty-line) !important;
	background: #fff !important;
	border-radius: 4px;
	padding: 20px !important;
}

.author-info img,
.about-author img,
#about-author img {
	border-radius: 50%;
}

.mobile-header .logo img {
	max-height: 48px;
}

/* ========== Mobile-friendly ========== */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

img,
video,
iframe,
embed,
object,
.wp-block-image img,
.entry img,
.post-thumbnail img,
.mag-box img {
	max-width: 100%;
	height: auto;
}

table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Readable tap targets — do NOT target slider/mega arrows or every button */
#main-nav .main-menu > ul > li > a,
.mobile-menu > ul > li > a,
.hamburger-icon,
#mobile-menu-icon,
a.button:not(.slider-arrow-nav a),
input[type="submit"] {
	min-height: 44px;
}

/* Mega-menu / nav carousel arrows — hide the broken < > chip grid */
.main-menu .slider-arrow-nav,
.mega-menu .slider-arrow-nav,
.mega-menu-block .slider-arrow-nav,
.main-menu-wrapper .slider-arrow-nav,
#main-nav .slider-arrow-nav,
.mobile-menu .slider-arrow-nav,
#slide-out-nav .slider-arrow-nav,
.slide-out-nav .slider-arrow-nav {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Content block arrows (Latest News etc.) stay usable and tidy */
.mag-box-options .slider-arrow-nav,
.widget-pagination-wrapper .slider-arrow-nav {
	display: flex !important;
	visibility: visible !important;
	height: auto !important;
	overflow: visible !important;
	float: none !important;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.mag-box-options .slider-arrow-nav li,
.widget-pagination-wrapper .slider-arrow-nav li {
	float: none !important;
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mag-box-options .slider-arrow-nav a,
.widget-pagination-wrapper .slider-arrow-nav a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	line-height: 1 !important;
	margin: 0 !important;
}

@media (max-width: 991px) {
	#theme-header.header-layout-1 #main-nav {
		line-height: normal !important;
	}

	#theme-header.header-layout-1 #main-nav .main-menu-wrapper {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between !important;
		gap: 8px;
	}

	#theme-header.header-layout-1 #main-nav .header-layout-1-logo {
		flex: 0 0 auto;
		max-width: 58%;
	}

	#theme-header.header-layout-1 #main-nav .header-layout-1-logo img,
	.mobile-header .logo img,
	.logo img {
		max-height: 44px !important;
		width: auto !important;
	}

	#theme-header.header-layout-1 #main-nav #menu-components-wrap {
		display: none !important; /* desktop menu; mobile menu panel handles nav */
	}

	.breaking-news {
		font-size: 13px;
	}

	.breaking-title {
		font-size: 11px !important;
		padding: 4px 8px !important;
	}

	/* Hero / slider readability */
	.slider-area .thumb-title,
	.slider-area .slide-title,
	.slider-area h2,
	.slider-area h3,
	.tie-slick-slider .thumb-title,
	.slide .thumb-overlay .thumb-title {
		font-size: clamp(18px, 5.2vw, 28px) !important;
		line-height: 1.25 !important;
		padding-right: 12px;
		word-break: break-word;
	}

	.container,
	.container-wrapper {
		padding-left: 14px;
		padding-right: 14px;
	}

	.mag-box {
		margin-bottom: 22px !important;
	}

	.the-global-title,
	.block-title,
	.magazine2 .the-global-title {
		font-size: 13px !important;
		margin-bottom: 12px;
	}

	/* Post lists: stack media above title when cramped */
	.wide-post-box .post-item,
	.big-post-left-box .post-item,
	.posts-items li {
		max-width: 100%;
	}

	.entry,
	.entry-content,
	#the-post {
		font-size: 16px;
		line-height: 1.65;
		overflow-wrap: anywhere;
	}

	.entry h1,
	.entry-header h1,
	.post-title-single {
		font-size: clamp(22px, 6vw, 32px) !important;
		line-height: 1.2 !important;
	}

	/* Footer already stacks; tighten */
	#footer-widgets-container {
		padding: 28px 0 12px;
	}

	#footer-widgets-container .tie-col-md-3 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-bottom: 22px;
	}

	.site-info,
	.copyright-text,
	.site-info .footer-menu {
		text-align: center;
		font-size: 12px;
		line-height: 1.5;
	}

	.site-info .footer-menu li {
		display: inline-block;
		margin: 0 8px 6px 0;
	}

	/* Sidebar below content */
	.sidebar,
	.sidebar-right,
	.sidebar-left {
		margin-top: 24px;
		width: 100% !important;
		float: none !important;
	}

	/* Reduce sticky/fixed chrome collisions */
	.fixed-nav,
	.is-sticky #main-nav {
		position: relative !important;
	}
}

@media (max-width: 640px) {
	.sporty-author-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.sporty-authors-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	#top-nav .components,
	#top-nav .top-nav-components {
		display: none;
	}

	.timeline-widget .post-thumbnail,
	.timeline .post-thumbnail {
		max-width: 100%;
	}

	.slider-area .slide,
	.slider-area .slide .slide-overlay {
		min-height: 220px;
	}
}

/* Very small phones */
@media (max-width: 380px) {
	.header-layout-1-logo {
		max-width: 52% !important;
	}

	.breaking-news a {
		font-size: 12px;
	}
}