/*
Theme Name: Sahifa Child
Theme URI: https://salafimakthaba.com
Description: Child theme of Sahifa for SalafiMakthaba. Every site-specific customization lives here; the purchased Sahifa parent theme stays unmodified and updatable.
Author: SalafiMakthaba
Author URI: https://salafimakthaba.com
Template: sahifa
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: sahifa-child
*/

/* =============================================================================
   Custom styles for salafimakthaba.com
   Parent (Sahifa) styles load first — anything below overrides them.
   Keep this organised; add a comment header per section.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   Announcement bar  (framework/parts/breaking-news.php override)
   Sits directly below the main nav, full boxed-content width.
   -------------------------------------------------------------------------- */
.smk-ticker {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 auto 20px;
	background: #1c1c1c;
	border-top: 3px solid #917512;      /* theme gold */
	font-family: "Open Sans", "Droid Sans", Arial, sans-serif;
	line-height: 1.2;
}

/* Align the bar's edges with the rest of the boxed layout
   (same column as #theme-header, #main-nav and #main-content). */
#wrapper.boxed .smk-ticker,
#wrapper.boxed-all .smk-ticker {
	width: 1045px;
	max-width: 100%;
}

#wrapper.wide-layout .smk-ticker {
	width: 100%;
}

@media only screen and (max-width: 1045px) {
	#wrapper.boxed .smk-ticker,
	#wrapper.boxed-all .smk-ticker {
		width: 100%;
	}
}

.smk-ticker__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: #917512;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.smk-ticker__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.smk-ticker__track {
	display: flex;
	width: max-content;
	animation-name: smk-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.smk-ticker:hover .smk-ticker__track,
.smk-ticker:focus-within .smk-ticker__track {
	animation-play-state: paused;
}

.smk-ticker__run {
	display: flex;
	flex: 0 0 auto;
}

.smk-ticker__item {
	display: inline-flex;
	align-items: center;
	padding: 12px 0;
	color: #f4f4f4;
	font-size: 13.5px;
	white-space: nowrap;
}

.smk-ticker__item::after {
	content: "\2022";           /* • separator */
	margin: 0 34px;
	color: #917512;
	font-size: 12px;
}

.smk-ticker__item a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.smk-ticker__item a:hover {
	color: #e8c766;
}

.smk-ticker__more {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}

.smk-ticker__more:hover {
	background: #917512;
	color: #fff;
}

@keyframes smk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.smk-ticker__viewport { overflow-x: auto; }
	.smk-ticker__track { animation: none; }
	.smk-ticker__run + .smk-ticker__run { display: none; }
}

/* Phones: slimmer bar + smaller text */
@media (max-width: 600px) {
	.smk-ticker {
		border-top-width: 2px;
	}

	.smk-ticker__item {
		font-size: 11.5px;
		padding: 8px 0;
	}

	.smk-ticker__item::after {
		margin: 0 16px;
	}

	.smk-ticker__label {
		padding: 0 10px;
		font-size: 9.5px;
		letter-spacing: .05em;
	}

	.smk-ticker__more {
		padding: 0 10px;
		font-size: 9.5px;
	}

	.smk-ticker__viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
		        mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	}
}