/* ==========================================================================
   Islamnow — component styles
   These classes are applied to core Gutenberg blocks (Group, Columns,
   Query Loop, Cover, Buttons…) via the block's "Additional CSS class(es)"
   field. The ready-made pattern in inc/block-patterns.php already wires
   all of this up — this file is what makes it look right.
   ========================================================================== */

/* -- Accessibility utility: visually-hidden but screen-reader-visible ----- */
/* Standard WP core class name; defined here as a defensive fallback in
   case the Avanam parent theme doesn't already provide it (most do). */
.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* -- Top bar: Hijri/Gregorian date + Prayer times -------------------------- */
/* Printed by inc/topbar.php via wp_body_open(), replacing Avanam's
   default promotional banner (hidden client-side — see
   hideLegacyTopbar() in assets/js/islamnow.js). Plain markup, not a
   Gutenberg block, so no .wp-block-group dependency. */
.islamnow-topbar {
	background: var( --islamnow-green-900 );
	color: var( --islamnow-cream );
	font-size: 0.85rem;
	line-height: 1.5;
}
.islamnow-topbar a { color: var( --islamnow-cream ); }
.islamnow-topbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.islamnow-topbar-date {
	white-space: nowrap;
	font-weight: 600;
	color: var( --islamnow-silver );
}
.islamnow-topbar-sep {
	margin: 0 6px;
	opacity: 0.75;
}
.islamnow-topbar-prayer {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-weight: 500;
}
.islamnow-topbar-actions {
	display: flex;
	align-items: center;
}
.islamnow-notify-toggle {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	color: var( --islamnow-silver );
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.85rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.islamnow-notify-toggle:hover {
	border-color: var( --islamnow-gold );
}
.islamnow-notify-toggle:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-notify-toggle.is-active {
	background: var( --islamnow-gold );
	border-color: var( --islamnow-gold );
	color: var( --islamnow-green-900 );
}
.islamnow-prayer-item {
	white-space: nowrap;
}
.islamnow-prayer-item.is-next {
	font-weight: 700;
}
.islamnow-prayer-time {
	color: var( --islamnow-silver );
	font-weight: 700;
}
.islamnow-prayer-countdown {
	opacity: 0.92;
	font-weight: 600;
	color: var( --islamnow-silver );
}
.islamnow-prayer-next-label {
	color: var( --islamnow-gold-light );
	font-weight: 700;
}
.islamnow-prayer-label {
	color: var( --islamnow-gold-light );
	font-weight: 700;
	margin-right: 3px;
}
.islamnow-prayer-item.is-next .islamnow-prayer-label {
	color: var( --islamnow-gold-light );
}
.islamnow-prayer-item.is-next .islamnow-prayer-time,
.islamnow-prayer-item.is-next .islamnow-prayer-countdown {
	color: var( --islamnow-silver );
}

/* Native <details>/<summary> disclosure for the "change location"
   picker — no custom ARIA plumbing needed, keyboard support is free. */
.islamnow-location-picker {
	position: relative;
	font-size: 0.75rem;
}
.islamnow-location-picker summary {
	cursor: pointer;
	color: var( --islamnow-silver );
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.islamnow-location-picker summary::-webkit-details-marker {
	display: none;
}
.islamnow-location-picker summary:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-location-picker[open] summary {
	margin-bottom: 6px;
}

/* -- Country → City cascading selects -------------------------------------- */
.islamnow-country-city {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.islamnow-country-city .islamnow-location-field select {
	min-width: 150px;
	max-width: 220px;
}
.islamnow-location-or {
	margin: 0 0 8px;
	font-size: 0.7rem;
	opacity: 0.7;
	text-align: center;
}

.islamnow-location-form {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.islamnow-location-form input[type="text"] {
	border: 1px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.08);
	color: var( --islamnow-silver );
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 0.75rem;
	min-width: 160px;
}
.islamnow-location-form input[type="text"]::placeholder {
	color: rgba(251,247,238,0.6);
}
.islamnow-location-form button,
.islamnow-location-reset {
	background: transparent;
	border: 1px solid var( --islamnow-gold );
	color: var( --islamnow-silver );
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 0.75rem;
	cursor: pointer;
}
.islamnow-location-form button:hover,
.islamnow-location-reset:hover {
	background: rgba(201,162,75,0.15);
}
.islamnow-location-form button:focus-visible,
.islamnow-location-reset:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-location-reset {
	display: block;
	margin-top: 6px;
}
.islamnow-location-status {
	margin: 6px 0 0;
	font-size: 0.72rem;
	opacity: 0.85;
}

/* -- Calculation method + Asr madhab selects (inside the location picker) ------- */
.islamnow-location-settings {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.15);
}
.islamnow-location-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.72rem;
	color: var( --islamnow-silver );
}
.islamnow-location-field select {
	background: rgba(255,255,255,0.08);
	color: var( --islamnow-silver );
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 0.75rem;
	max-width: 220px;
}
.islamnow-location-field select:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* -- Monthly calendar --------------------------------------------------------- */
.islamnow-monthly-calendar {
	font-size: 0.75rem;
	margin-left: 12px;
}
.islamnow-monthly-calendar summary {
	cursor: pointer;
	color: var( --islamnow-silver );
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.islamnow-monthly-calendar summary::-webkit-details-marker {
	display: none;
}
.islamnow-monthly-calendar summary:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-monthly-calendar-body {
	margin-top: 8px;
	max-height: 280px;
	overflow-y: auto;
	background: var( --islamnow-surface );
	border-radius: 8px;
	padding: 4px;
}
.islamnow-monthly-calendar-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75rem;
	color: var( --islamnow-ink );
}
.islamnow-monthly-calendar-table th,
.islamnow-monthly-calendar-table td {
	padding: 5px 8px;
	text-align: center;
	white-space: nowrap;
}
.islamnow-monthly-calendar-table thead th {
	position: sticky;
	top: 0;
	background: var( --islamnow-cream-alt );
	color: var( --islamnow-ink-soft );
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.islamnow-monthly-calendar-table tbody tr:nth-child(even) {
	background: var( --islamnow-cream-alt );
}
.islamnow-monthly-calendar-table tr.is-today {
	background: var( --islamnow-gold-light ) !important;
	font-weight: 700;
}

/* Stack date above prayer times on narrow screens, and let the prayer
   list wrap onto its own line instead of squeezing horizontally. */
@media (max-width: 600px) {
	.islamnow-topbar-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 8px 16px;
	}
}

/* -- Site header ------------------------------------------------------------ */
.site-header,
.islamnow-header {
	background: var( --islamnow-surface );
	border-bottom: 1px solid var( --islamnow-border );
}
.islamnow-logo-text {
	font-weight: 800;
	letter-spacing: 0.03em;
	color: var( --islamnow-ink );
}
.islamnow-logo-tagline {
	font-size: 0.75rem;
	color: var( --islamnow-ink-soft );
}

/* -- Hero section ------------------------------------------------------------ */
.islamnow-hero {
	border-radius: 18px;
	overflow: hidden;
	padding: 56px 40px !important;
}
.islamnow-hero h1 {
	color: #ffffff;
	font-size: clamp( 1.8rem, 3vw, 2.5rem );
	font-weight: 800;
	line-height: 1.2;
}
.islamnow-hero p,
.islamnow-hero cite {
	color: #F3ECDC;
}
.islamnow-hero .wp-block-button__link,
.islamnow-btn-gold {
	background: var( --islamnow-gold ) !important;
	color: var( --islamnow-green-900 ) !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
}
.islamnow-hero .wp-block-button__link:hover,
.islamnow-btn-gold:hover {
	background: var( --islamnow-gold-dark ) !important;
}

/* Verse / Hadith of the day highlight cards, stacked beside the hero */
.islamnow-daycard {
	border-radius: 14px;
	padding: 22px 24px;
}
.islamnow-daycard--verse {
	background: var( --islamnow-green-900 );
	color: #ffffff;
}
.islamnow-daycard--verse .islamnow-arabic {
	font-family: var( --islamnow-font-arabic );
	font-size: 1.4rem;
	direction: rtl;
	color: var( --islamnow-gold-light );
	margin-bottom: 8px;
}
.islamnow-daycard--hadith {
	background: var( --islamnow-cream );
	border: 1px solid var( --islamnow-border );
	color: var( --islamnow-silver );
}
.islamnow-daycard .islamnow-eyebrow {
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var( --islamnow-gold );
}
.islamnow-daycard--hadith .islamnow-eyebrow { color: var( --islamnow-gold-dark ); }
.islamnow-daycard .islamnow-source {
	font-size: 0.75rem;
	opacity: 0.75;
}
.islamnow-daycard .wp-block-button__link {
	background: transparent !important;
	border: 1px solid currentColor !important;
	color: inherit !important;
	border-radius: 6px !important;
	font-size: 0.78rem !important;
	padding: 8px 16px !important;
}

/* -- Topic icon grid (Salah, Fasting, Zakat…) --------------------------------- */
/* Rendered by the [islamnow_topics] shortcode (see
   islamnow_render_topics_grid() in inc/block-patterns.php) — a CSS
   grid rather than a fixed-count layout, since the item count depends
   on whatever menu the site owner assigns to the "Islamnow — Homepage
   Topic Grid" location and can be anything from 3 to 20. */
.islamnow-topics {
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 14px;
	padding: 28px 20px !important;
}
.islamnow-topics-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 96px, 1fr ) );
	gap: 20px 12px;
}
.islamnow-topic-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var( --islamnow-ink );
	text-decoration: none;
	border-radius: 10px;
	padding: 4px;
	transition: transform 0.15s ease;
}
.islamnow-topic-link:hover {
	transform: translateY(-2px);
}
.islamnow-topic-link:hover .islamnow-topic-icon {
	border-color: var( --islamnow-gold-dark );
}
.islamnow-topic-link:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 3px;
}
.islamnow-topic-link .islamnow-topic-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	border-radius: 50%;
	border: 1.5px solid var( --islamnow-gold );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var( --islamnow-ink-soft );
	transition: border-color 0.15s ease;
}
.islamnow-topic-link .islamnow-topic-label {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
}

/* -- Dua of the Day band ------------------------------------------------------- */
.islamnow-daycard--dua {
	background: var( --islamnow-cream-alt );
	border: 1px solid var( --islamnow-gold-light );
	padding: 26px 28px !important;
}
.islamnow-daycard--dua .islamnow-eyebrow {
	color: var( --islamnow-gold-dark );
	margin: 0;
}
.islamnow-daycard--dua .islamnow-arabic {
	font-family: var( --islamnow-font-arabic );
	font-size: 1.3rem;
	direction: rtl;
	color: var( --islamnow-ink );
	margin: 10px 0 6px;
}
.islamnow-daycard--dua .islamnow-source {
	color: var( --islamnow-ink-soft );
}

/* Generic small badge, reused wherever a category/label chip is needed
   (e.g. the Dua of the Day category tag). */
.islamnow-badge {
	display: inline-block;
	background: var( --islamnow-surface );
	color: var( --islamnow-ink-soft );
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 4px;
	margin: 0;
}

/* -- Section headings ---------------------------------------------------------- */
.islamnow-section-title {
	font-weight: 800;
	color: var( --islamnow-ink );
	font-size: 1.3rem;
}
.islamnow-section-link {
	font-size: 0.85rem;
	color: var( --islamnow-gold-dark );
	font-weight: 600;
}

/* -- Article / recent post cards ------------------------------------------------ */
.islamnow-article-card {
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.islamnow-article-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(15,43,34,0.14);
	border-color: var( --islamnow-gold-light );
}
.islamnow-article-card img { border-radius: 0; transition: transform 0.35s ease; }
.islamnow-article-card .wp-block-post-featured-image { overflow: hidden; display: block; }
.islamnow-article-card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}
.islamnow-article-card .islamnow-card-body { padding: 16px !important; }
.islamnow-article-card .islamnow-badge,
.islamnow-article-card .islamnow-badge a {
	display: inline-block;
	background: var( --islamnow-cream-alt );
	color: var( --islamnow-ink-soft ) !important;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
}
.islamnow-article-card h3 { font-size: 1.02rem; margin: 6px 0; transition: color 0.2s ease; }
.islamnow-article-card:hover h3 { color: var( --islamnow-gold-dark ); }
.islamnow-article-card .islamnow-meta {
	font-size: 0.75rem;
	color: var( --islamnow-ink-soft );
}
.islamnow-article-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.islamnow-article-card .wp-block-post-excerpt {
	font-size: 0.85rem;
	color: var( --islamnow-ink-soft );
}
@media ( prefers-reduced-motion: reduce ) {
	.islamnow-article-card,
	.islamnow-article-card img,
	.islamnow-article-card h3 {
		transition: none;
	}
	.islamnow-article-card:hover {
		transform: none;
	}
	.islamnow-article-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* -- Sidebar: popular articles ---------------------------------------------------- */
.islamnow-sidebar-box {
	background: var( --islamnow-cream-alt );
	border-radius: 14px;
	padding: 22px !important;
}
.islamnow-sidebar-box .wp-block-post-template {
	counter-reset: islamnow-popular;
	list-style: none;
	padding: 0;
	margin: 0;
}
.islamnow-popular-item {
	border-bottom: 1px solid var( --islamnow-border );
	padding: 12px 0;
	align-items: center;
	gap: 12px;
	position: relative;
}
.islamnow-popular-item::before {
	counter-increment: islamnow-popular;
	content: counter( islamnow-popular );
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --islamnow-green-900 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.islamnow-popular-item:last-child { border-bottom: none; }
.islamnow-popular-item .wp-block-post-featured-image img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
}
.islamnow-popular-item h4 { font-size: 0.9rem; margin: 0; }

/* -- Categories grid --------------------------------------------------------------- */
.islamnow-cat-card {
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 10px;
	padding: 16px !important;
	transition: border-color 0.15s ease;
}
.islamnow-cat-card:hover {
	border-color: var( --islamnow-gold );
}
.islamnow-cat-link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
.islamnow-cat-link:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 3px;
	border-radius: 4px;
}
.islamnow-cat-card .islamnow-cat-icon { color: var( --islamnow-gold-dark ); font-size: 1.2rem; }
.islamnow-cat-card .islamnow-cat-count { font-size: 0.75rem; color: var( --islamnow-ink-soft ); }

/* -- Sidebar card: now hosts [islamnow_qibla] (was a static Hijri-only box) -------- */
.islamnow-hijri-box {
	background: var( --islamnow-cream-alt );
	border-radius: 14px;
	padding: 24px !important;
	text-align: center;
}
.islamnow-hijri-day { font-size: 2.4rem; font-weight: 800; color: var( --islamnow-ink ); line-height: 1; }
.islamnow-hijri-month { font-size: 1rem; font-weight: 600; color: var( --islamnow-ink-soft ); }
.islamnow-hijri-gregorian { font-size: 0.78rem; color: var( --islamnow-ink-soft ); }

/* -- "Explore Islamnow" band: links to Quran/Hadith/Bookmarks (was a static
   newsletter-signup placeholder + social icons) -------------------------------------- */
.islamnow-newsletter-box {
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 14px;
	padding: 22px !important;
}
.islamnow-newsletter-box input[type="email"] {
	border: 1px solid var( --islamnow-border );
	border-radius: 6px;
	padding: 10px 12px;
}
.islamnow-social-round a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --islamnow-green-900 );
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
}

/* -- Quran CTA band ---------------------------------------------------------------------- */
.islamnow-cta-band {
	background: var( --islamnow-green-900 );
	color: #fff;
	border-radius: 16px;
	padding: 32px !important;
}
.islamnow-cta-band h3 { color: #fff; font-size: 1.4rem; }
.islamnow-cta-band p { color: #DDE7E1; }
.islamnow-cta-stat {
	text-align: center;
	color: #fff;
}
.islamnow-cta-stat .islamnow-cta-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}
.islamnow-cta-band .wp-block-button__link {
	background: var( --islamnow-gold ) !important;
	color: var( --islamnow-green-900 ) !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
}

/* -- Footer --------------------------------------------------------------------------------- */
.islamnow-footer {
	background: var( --islamnow-green-900 );
	color: #CFE0D7;
}
.islamnow-footer h4 {
	color: #fff;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.islamnow-footer a { color: #CFE0D7; }
.islamnow-footer a:hover { color: var( --islamnow-gold ); }
.islamnow-footer .islamnow-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	font-size: 0.8rem;
	color: #9FB4A9;
}

/* -- Responsive tweaks -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.islamnow-hero { padding: 36px 24px !important; }
	.islamnow-cta-band .wp-block-columns { flex-wrap: wrap; }
}

/* -- Dark / Light mode toggle -------------------------------------------------------------------- */
/* Auto-injected floating wrapper (see inc/dark-mode.php). Fixed to the
   bottom-right corner so it works on every template without touching
   Avanam's own header markup. */
.islamnow-theme-toggle-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
}

/* The button itself — shared by the floating instance and any manually
   placed [islamnow_theme_toggle] shortcode instance. */
.islamnow-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --islamnow-border );
	border-radius: 50%;
	background: var( --islamnow-surface );
	color: var( --islamnow-ink );
	box-shadow: 0 4px 14px rgba(15, 43, 34, 0.18);
	cursor: pointer;
	transition: var( --islamnow-mode-transition ), transform 0.15s ease;
}
.islamnow-theme-toggle:hover {
	transform: translateY(-2px);
	border-color: var( --islamnow-gold );
}
.islamnow-theme-toggle:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-theme-toggle-icon {
	font-size: 1.15rem;
	line-height: 1;
}
/* Light mode: show the moon (= "switch to dark"), hide the sun. */
.islamnow-theme-toggle-icon--sun { display: none; }
.islamnow-theme-toggle-icon--moon { display: inline-block; }
/* Dark mode: show the sun (= "switch to light"), hide the moon. */
html[data-islamnow-theme="dark"] .islamnow-theme-toggle-icon--sun { display: inline-block; }
html[data-islamnow-theme="dark"] .islamnow-theme-toggle-icon--moon { display: none; }

/* -- Accessibility: visible keyboard focus everywhere --------------------------------------------- */
/* A visible focus ring on every interactive element we style, not just
   the floating toggle/back-to-top buttons — required for keyboard and
   switch-device users to track where they are on the page. Uses
   :focus-visible so mouse/touch clicks don't get an unwanted ring. */
.islamnow-topics a:focus-visible,
.islamnow-article-card a:focus-visible,
.islamnow-sidebar-box a:focus-visible,
.islamnow-newsletter-box a:focus-visible,
.islamnow-hijri-box a:focus-visible,
.islamnow-daycard a:focus-visible,
.islamnow-cta-band a:focus-visible,
.islamnow-footer a:focus-visible,
.islamnow-social-round a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* -- Accessibility: honor prefers-reduced-motion ------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.islamnow-theme-toggle,
	.islamnow-back-to-top,
	.islamnow-reading-progress-bar,
	.islamnow-topic-link,
	.islamnow-cat-card,
	body {
		transition: none !important;
	}
	.islamnow-theme-toggle:hover,
	.islamnow-back-to-top:hover,
	.islamnow-topic-link:hover {
		transform: none;
	}
}

/* -- Reading progress bar ------------------------------------------------------------------------ */
.islamnow-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 10000;
	pointer-events: none;
}
.islamnow-reading-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient( 90deg, var( --islamnow-gold ), var( --islamnow-gold-dark ) );
	transition: width 0.1s linear;
}

/* -- Back to top button --------------------------------------------------------------------------- */
/* Mirrors .islamnow-theme-toggle's look, but sits on the opposite
   (bottom-left) corner so the two floating buttons never overlap. */
.islamnow-back-to-top {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var( --islamnow-border );
	border-radius: 50%;
	background: var( --islamnow-surface );
	color: var( --islamnow-ink );
	font-size: 1.1rem;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(15, 43, 34, 0.18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, border-color 0.2s ease;
}
.islamnow-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.islamnow-back-to-top:hover {
	transform: translateY(-2px);
	border-color: var( --islamnow-gold );
}
.islamnow-back-to-top.is-visible:hover {
	transform: translateY(-2px);
}
.islamnow-back-to-top:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* On small screens the back-to-top button and the theme toggle can sit
   close to thumb-reach corners at the same time; nudge them in a touch
   so neither crowds the edge. */
@media (max-width: 480px) {
	.islamnow-theme-toggle-float,
	.islamnow-back-to-top {
		bottom: 14px;
	}
	.islamnow-theme-toggle-float { right: 14px; }
	.islamnow-back-to-top { left: 14px; }
}

/* -- Unified search ([islamnow_search]) ----------------------------------------------------------- */
.islamnow-search-app {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
}
.islamnow-search-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var( --islamnow-border );
	border-radius: 10px;
	background: var( --islamnow-surface );
	color: var( --islamnow-ink );
	font-size: 0.95rem;
}
.islamnow-search-input:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-search-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(15,43,34,0.2);
	max-height: 420px;
	overflow-y: auto;
	z-index: 30;
	padding: 8px;
}
.islamnow-search-status {
	font-size: 0.85rem;
	color: var( --islamnow-ink-soft );
	padding: 10px 8px;
	margin: 0;
}
.islamnow-search-group {
	padding: 6px 4px;
	border-bottom: 1px solid var( --islamnow-border );
}
.islamnow-search-group:last-child { border-bottom: none; }
.islamnow-search-group-title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --islamnow-gold-dark );
	padding: 4px 8px;
	margin: 0;
}
.islamnow-search-result {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 8px;
	text-decoration: none;
	color: inherit;
}
a.islamnow-search-result:hover,
a.islamnow-search-result:focus-visible {
	background: var( --islamnow-cream-alt );
	outline: none;
}
.islamnow-search-result-ref {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var( --islamnow-gold-dark );
	margin-bottom: 2px;
}
.islamnow-search-result-text {
	display: block;
	font-size: 0.85rem;
	color: var( --islamnow-ink );
}
.islamnow-search-note {
	font-size: 0.78rem;
	color: var( --islamnow-ink-soft );
	padding: 4px 8px;
	margin: 0 0 4px;
	font-style: italic;
}
.islamnow-search-more {
	display: inline-block;
	margin: 4px 8px 6px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --islamnow-gold-dark );
	text-decoration: underline;
	text-underline-offset: 2px;
}
.islamnow-search-more:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* -- Homepage highlight section ([islamnow_highlight]) --------------------------------------------
   Left: auto-rotating verse slider. Right: Hadith of the Day + Dua of
   the Day cards, stacked — reusing .islamnow-daycard--hadith/--dua
   exactly as-is (defined earlier in this file), so this section stays
   visually consistent with the rest of the site with no duplicated CSS. */
.islamnow-highlight {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	background: var( --islamnow-green-900 );
	border-radius: 18px;
	padding: 40px 36px;
	color: var( --islamnow-cream );
	position: relative;
	overflow: hidden;
}
.islamnow-highlight-slider {
	flex: 1 1 440px;
	min-width: 260px;
	position: relative;
}
.islamnow-highlight-slider .islamnow-eyebrow {
	color: var( --islamnow-gold );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.islamnow-highlight-slide {
	min-height: 150px;
	transition: opacity 0.15s ease;
}
.islamnow-highlight-slide.is-fading {
	opacity: 0;
}
.islamnow-highlight-slide .islamnow-arabic {
	font-family: var( --islamnow-font-arabic );
	font-size: 1.6rem;
	line-height: 1.8;
	color: var( --islamnow-silver );
	direction: rtl;
	margin: 0 0 14px;
}
.islamnow-highlight-slide p {
	color: var( --islamnow-silver );
	margin: 0 0 10px;
}
.islamnow-highlight-slide .islamnow-source {
	font-size: 0.8rem;
	opacity: 0.8;
	font-style: italic;
	margin: 0;
}
.islamnow-highlight-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
.islamnow-highlight-prev,
.islamnow-highlight-next {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	color: var( --islamnow-cream );
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	flex: 0 0 auto;
}
.islamnow-highlight-prev:hover,
.islamnow-highlight-next:hover {
	border-color: var( --islamnow-gold );
	color: var( --islamnow-gold );
}
.islamnow-highlight-prev:focus-visible,
.islamnow-highlight-next:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-highlight-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}
.islamnow-highlight-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.15s ease, background 0.15s ease;
}
.islamnow-highlight-dot.is-active {
	background: var( --islamnow-gold );
	width: 22px;
	border-radius: 4px;
}
.islamnow-highlight-dot:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-highlight-cta {
	display: inline-block;
	margin-top: 22px;
	color: var( --islamnow-green-900 );
	background: var( --islamnow-gold );
	font-weight: 700;
	font-size: 0.85rem;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
}
.islamnow-highlight-cta:hover {
	background: var( --islamnow-gold-dark );
}
.islamnow-highlight-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.islamnow-highlight-side {
	flex: 1 1 320px;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* Cards keep their own already-defined look (.islamnow-daycard--hadith
   is a light cream card, --dua is cream-alt) EXCEPT inside this
   always-dark dashboard highlight box, where a light-cream card would
   both clash with the dark theme and (for --hadith specifically) have
   poor text contrast, since nothing here was overriding its text
   color away from the light-card default. Overridden to dark below,
   scoped narrowly to .islamnow-highlight-side so the standalone
   "Dua of the Day" band elsewhere on the site (light background,
   dark ink text) is untouched. */
.islamnow-highlight-side .islamnow-daycard {
	width: 100%;
}
.islamnow-highlight-side .islamnow-daycard--hadith,
.islamnow-highlight-side .islamnow-daycard--dua {
	background: #0c1f18 !important;
	border-color: rgba(201,162,75,.22) !important;
	color: var( --islamnow-silver ) !important;
	position: relative;
	z-index: 2;
}
.islamnow-highlight-side .islamnow-daycard--hadith .islamnow-eyebrow,
.islamnow-highlight-side .islamnow-daycard--dua .islamnow-eyebrow {
	color: var( --islamnow-gold ) !important;
}
.islamnow-highlight-side .islamnow-daycard--dua .islamnow-arabic {
	color: var( --islamnow-gold-light ) !important;
}
.islamnow-highlight-side .islamnow-daycard--hadith .islamnow-source,
.islamnow-highlight-side .islamnow-daycard--dua .islamnow-source {
	color: var( --islamnow-silver ) !important;
	opacity: 0.75;
}

@media ( prefers-reduced-motion: reduce ) {
	.islamnow-highlight-slide {
		transition: none;
	}
	.islamnow-highlight-dot {
		transition: none;
	}
}

@media (max-width: 720px) {
	.islamnow-highlight {
		padding: 28px 20px;
	}
}

/* -- Qibla finder ([islamnow_qibla]) ---------------------------------------------------------------
   Direction computed in JS (great-circle bearing, no external API —
   see the "Qibla finder" section of islamnow.js). This is just the
   compass dial styling: a circle with N/E/S/W marks that rotates with
   live device orientation when available, plus a Kaaba pin positioned
   via JS-computed x/y so the icon itself never rotates (stays legible). */
.islamnow-qibla {
	max-width: 320px;
	margin: 0 auto;
	text-align: center;
}
.islamnow-qibla-compass {
	position: relative;
	width: 220px;
	height: 220px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var( --islamnow-surface );
	border: 2px solid var( --islamnow-border );
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}
.islamnow-qibla-fixed-pointer {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 14px solid var( --islamnow-gold );
	z-index: 3;
}
.islamnow-qibla-dial {
	position: absolute;
	inset: 0;
	transition: transform 0.2s ease-out;
}
.islamnow-qibla-mark {
	position: absolute;
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --islamnow-ink-soft );
}
.islamnow-qibla-mark--n { top: 8px; left: 50%; transform: translateX(-50%); color: var( --islamnow-ink ); }
.islamnow-qibla-mark--e { right: 8px; top: 50%; transform: translateY(-50%); }
.islamnow-qibla-mark--s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.islamnow-qibla-mark--w { left: 8px; top: 50%; transform: translateY(-50%); }
.islamnow-qibla-kaaba {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -14px;
	margin-left: -14px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	z-index: 2;
	transition: transform 0.2s ease-out;
}
.islamnow-qibla-compass::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px;
	border-radius: 50%;
	background: var( --islamnow-gold );
}
.islamnow-qibla-info {
	font-size: 1rem;
	font-weight: 700;
	color: var( --islamnow-ink );
	margin: 0 0 6px;
}
.islamnow-qibla-note {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --islamnow-ink-soft );
	margin-top: 6px;
}
.islamnow-qibla-hint {
	font-size: 0.8rem;
	color: var( --islamnow-ink-soft );
	margin: 10px 0 0;
}
.islamnow-qibla-enable {
	margin-top: 10px;
	background: var( --islamnow-gold );
	color: var( --islamnow-green-900 );
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
.islamnow-qibla-enable:hover {
	background: var( --islamnow-gold-dark );
}
.islamnow-qibla-enable:focus-visible {
	outline: 2px solid var( --islamnow-green-900 );
	outline-offset: 2px;
}
.islamnow-qibla-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var( --islamnow-border );
	border-top-color: var( --islamnow-gold );
	animation: islamnow-qibla-spin 0.7s linear infinite;
	vertical-align: middle;
	margin-right: 4px;
}
@keyframes islamnow-qibla-spin {
	to { transform: rotate(360deg); }
}
@media ( prefers-reduced-motion: reduce ) {
	.islamnow-qibla-dial,
	.islamnow-qibla-kaaba,
	.islamnow-qibla-spinner {
		transition: none;
		animation: none;
	}
}

/* -- Bookmarks & reading history ([islamnow_bookmarks]) ------------------------------------------- */
.islamnow-bookmarks-app {
	max-width: 720px;
	margin: 0 auto;
}
.islamnow-bookmarks-section {
	margin-bottom: 36px;
}
.islamnow-bookmarks-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.islamnow-bookmarks-clear {
	background: transparent;
	border: 1px solid var( --islamnow-border );
	color: var( --islamnow-ink-soft );
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 0.78rem;
	cursor: pointer;
}
.islamnow-bookmarks-clear:hover {
	border-color: var( --islamnow-gold );
	color: var( --islamnow-gold-dark );
}
.islamnow-bookmarks-clear:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-bookmarks-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.islamnow-bookmarks-empty {
	color: var( --islamnow-ink-soft );
	font-size: 0.9rem;
	padding: 14px 0;
}
.islamnow-bookmarks-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var( --islamnow-surface );
	border: 1px solid var( --islamnow-border );
	border-radius: 10px;
	padding: 12px 14px;
}
.islamnow-bookmarks-link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
	text-decoration: none;
}
.islamnow-bookmarks-link:hover .islamnow-bookmarks-item-label {
	color: var( --islamnow-gold-dark );
}
.islamnow-bookmarks-link:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
	border-radius: 6px;
}
.islamnow-bookmarks-item-label {
	font-weight: 700;
	font-size: 0.92rem;
	color: var( --islamnow-ink );
}
.islamnow-bookmarks-item-sub {
	font-size: 0.8rem;
	color: var( --islamnow-ink-soft );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.islamnow-bookmarks-remove {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: var( --islamnow-ink-soft );
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.islamnow-bookmarks-remove:hover {
	background: var( --islamnow-cream-alt );
	color: #B3261E;
}
.islamnow-bookmarks-remove:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-bookmarks-note {
	font-size: 0.78rem;
	color: var( --islamnow-ink-soft );
	font-style: italic;
	text-align: center;
}

/* -- Content verification badge (Adım 19/20) -------------------------------------------------------
   Shown next to Verse/Hadith/Dua of the Day content once an editor has
   marked that specific item as reviewed in Islamnow ▸ Content
   Verification (wp-admin). Purely informational, no interaction. */
.islamnow-verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --islamnow-gold );
	color: var( --islamnow-green-900 );
	font-size: 0.65rem;
	font-weight: 700;
	vertical-align: middle;
	cursor: help;
}

/* -- Design system: Toast ------------------------------------------------------------------------- */
.islamnow-toast-container {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10050;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.islamnow-toast {
	background: var( --islamnow-green-900 );
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(15,43,34,0.3);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.islamnow-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.islamnow-toast--error {
	background: #B3261E;
}
@media ( prefers-reduced-motion: reduce ) {
	.islamnow-toast {
		transition: none;
	}
}

/* -- Design system: Modal -------------------------------------------------------------------------- */
.islamnow-modal {
	max-width: 520px;
	width: calc(100% - 40px);
	border: none;
	border-radius: 14px;
	padding: 0;
	background: var( --islamnow-surface );
	color: var( --islamnow-ink );
}
.islamnow-modal::backdrop {
	background: rgba(15,43,34,0.55);
}
.islamnow-modal--fallback {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,43,34,0.55);
	z-index: 10060;
	max-width: none;
	width: auto;
}
.islamnow-modal--fallback .islamnow-modal-inner {
	max-width: 520px;
	width: calc(100% - 40px);
}
.islamnow-modal-inner {
	position: relative;
	background: var( --islamnow-surface );
	border-radius: 14px;
	padding: 28px 24px;
}
.islamnow-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: none;
	color: var( --islamnow-ink-soft );
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}
.islamnow-modal-close:hover {
	background: var( --islamnow-cream-alt );
}
.islamnow-modal-close:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}
.islamnow-modal-body {
	color: var( --islamnow-ink );
}

/* -- Design system: Tabs --------------------------------------------------------------------------- */
.islamnow-tabs-list {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var( --islamnow-border );
	margin-bottom: 16px;
}
.islamnow-tabs-list [role="tab"] {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --islamnow-ink-soft );
	cursor: pointer;
}
.islamnow-tabs-list [role="tab"][aria-selected="true"] {
	color: var( --islamnow-gold-dark );
	border-bottom-color: var( --islamnow-gold );
}
.islamnow-tabs-list [role="tab"]:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* -- Design system: Skeleton loading --------------------------------------------------------------- */
.islamnow-skeleton {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
}
.islamnow-skeleton-line {
	height: 14px;
	border-radius: 4px;
	background: linear-gradient( 90deg, var( --islamnow-cream-alt ) 25%, var( --islamnow-border ) 37%, var( --islamnow-cream-alt ) 63% );
	background-size: 400% 100%;
	animation: islamnow-skeleton-shimmer 1.4s ease infinite;
}
@keyframes islamnow-skeleton-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media ( prefers-reduced-motion: reduce ) {
	.islamnow-skeleton-line {
		animation: none;
		background: var( --islamnow-cream-alt );
	}
}

/* -- PWA: Install App button ([islamnow_install_app]) ---------------------------------------------- */
/* Hidden by default (via the `hidden` HTML attribute) — JS in
   inc/pwa.php only reveals it once the browser actually fires
   beforeinstallprompt (not every browser/OS supports installable PWAs
   the same way, e.g. desktop/iOS Safari). */
.islamnow-install-app {
	background: var( --islamnow-gold );
	color: var( --islamnow-green-900 );
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
.islamnow-install-app:hover {
	background: var( --islamnow-gold-dark );
}
.islamnow-install-app:focus-visible {
	outline: 2px solid var( --islamnow-green-900 );
	outline-offset: 2px;
}

/* -- Language switcher ([islamnow_language_switcher]) ----------------------------------------------- */
.islamnow-language-switcher {
	display: inline-flex;
	gap: 4px;
	border: 1px solid var( --islamnow-border );
	border-radius: 999px;
	padding: 3px;
	background: var( --islamnow-surface );
}
.islamnow-language-link {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var( --islamnow-ink-soft );
	text-decoration: none;
}
.islamnow-language-link:hover {
	color: var( --islamnow-gold-dark );
}
.islamnow-language-link.is-active {
	background: var( --islamnow-gold );
	color: var( --islamnow-green-900 );
}
.islamnow-language-link:focus-visible {
	outline: 2px solid var( --islamnow-gold );
	outline-offset: 2px;
}

/* ==========================================================================\n   Premium dashboard redesign — emerald / gold / silver\n   ========================================================================== */
.islamnow-dashboard-page {
	background:
		radial-gradient(circle at 76% 12%, rgba(201,162,75,.08), transparent 26%),
		radial-gradient(circle at 18% 48%, rgba(27,92,72,.16), transparent 32%),
	#061b15;
	color: var(--islamnow-silver);
	padding: 22px 20px 46px;
	min-height: 100vh;
}
.islamnow-dashboard-shell { max-width: 1440px !important; }
.islamnow-dashboard-page p,
.islamnow-dashboard-page h1,
.islamnow-dashboard-page h2,
.islamnow-dashboard-page h3 { color: var(--islamnow-silver); }
.islamnow-dashboard-page a { color: var(--islamnow-silver); }
.islamnow-welcome-bar {
	padding: 4px 4px 22px;
	border-bottom: 1px solid rgba(201,162,75,.18);
	margin-bottom: 22px;
}
.islamnow-brand-mark {
	font-family: var(--islamnow-font-arabic);
	font-size: 3rem !important;
	line-height: 1;
	color: var(--islamnow-gold) !important;
	margin: 0 14px 0 0 !important;
	text-shadow: 0 0 24px rgba(201,162,75,.2);
}
.islamnow-welcome-eyebrow,
.islamnow-dashboard-kicker {
	margin: 0 !important;
	font-size: .78rem !important;
	font-weight: 800 !important;
	letter-spacing: .12em;
	color: var(--islamnow-gold) !important;
	text-transform: uppercase;
}
.islamnow-welcome-subtitle { margin: 2px 0 0 !important; color: #899b93 !important; font-size: .82rem !important; }
.islamnow-date-actions { gap: 16px !important; }
.islamnow-date-actions .wp-block-shortcode { color: #9eaaa5; font-size: .78rem; }
.islamnow-prayer-button .wp-block-button__link {
	border: 1px solid rgba(201,162,75,.65) !important;
	background: rgba(201,162,75,.08) !important;
	color: var(--islamnow-gold-light) !important;
	border-radius: 999px !important;
	padding: 9px 18px !important;
	font-size: .78rem !important;
	font-weight: 700 !important;
}
.islamnow-prayer-button .wp-block-button__link:hover { background: var(--islamnow-gold) !important; color: #071a14 !important; }

.islamnow-main-grid { gap: 18px !important; margin-bottom: 18px !important; }
.islamnow-main-grid > .wp-block-column { min-width: 0; }
.islamnow-main-grid .islamnow-highlight {
	min-height: 420px;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(201,162,75,.28);
	background:
		radial-gradient(circle at 80% 20%, rgba(201,162,75,.10), transparent 24%),
		linear-gradient(135deg, #071b16, #0b251d 62%, #071712);
	box-shadow: 0 24px 70px rgba(0,0,0,.28);
	position: relative;
}
.islamnow-highlight::after {
	content: '';
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(214,218,224,.08);
	border-radius: 12px;
	pointer-events: none;
}
.islamnow-highlight-slider { padding: 4px 10px; }
.islamnow-highlight-slider .islamnow-eyebrow { color: var(--islamnow-gold-light); }
.islamnow-highlight-slide .islamnow-arabic {
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
	color: var(--islamnow-gold-light);
	text-shadow: 0 3px 22px rgba(0,0,0,.4);
	margin-top: 24px;
}
.islamnow-highlight-slide p:not(.islamnow-arabic) { font-family: Georgia, serif; font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.7; color: #e0e3e5; }
.islamnow-highlight-slide .islamnow-source { color: var(--islamnow-gold) !important; font-family: var(--islamnow-font-body) !important; font-size: .8rem !important; }
.islamnow-highlight-cta { position: relative; z-index: 2; background: linear-gradient(135deg,#e7c66d,#c9a24b); box-shadow: 0 10px 24px rgba(201,162,75,.18); }
.islamnow-highlight-side { flex: 0 1 34%; min-width: 280px; position: relative; z-index: 2; }
.islamnow-dashboard-sidecard {
	position: relative;
	min-height: 190px;
	box-sizing: border-box;
	border: 1px solid rgba(201,162,75,.28) !important;
	border-radius: 16px !important;
	padding: 26px 26px !important;
	background: linear-gradient(145deg,#0b1713,#101b16) !important;
	box-shadow: 0 18px 45px rgba(0,0,0,.22);
	margin-bottom: 16px;
	overflow: hidden;
}
.islamnow-dashboard-sidecard::after,
.islamnow-feature-card::after,
.islamnow-explore-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 90% 10%, rgba(201,162,75,.08), transparent 25%);
	pointer-events: none;
}
.islamnow-dashboard-sidecard p:not(.islamnow-dashboard-kicker):not(.islamnow-source):not(.islamnow-quote-mark) { position: relative; z-index: 1; font-family: Georgia,serif; font-size: 1.05rem; line-height: 1.65; color: #d8dcdf !important; }
.islamnow-dashboard-sidecard .islamnow-source { color: #8d9a94 !important; }
.islamnow-quote-mark { color: var(--islamnow-gold) !important; font-size: 3rem !important; line-height: .7; margin: 10px 0 0 !important; }
.islamnow-dashboard-dua { min-height: 220px; border-color: rgba(214,218,224,.16) !important; }
.islamnow-dashboard-dua .islamnow-arabic { color: var(--islamnow-gold-light) !important; font-family: var(--islamnow-font-arabic); font-size: 1.65rem; line-height: 1.8; margin: 18px 0 8px; }
.islamnow-mini-badge { display:inline-block; margin-left:6px; padding:3px 7px; border-radius:5px; font-size:.58rem; background:rgba(214,218,224,.07); color:#9fa9a6; vertical-align:middle; letter-spacing:.06em; }

.islamnow-quick-nav { margin: 0 0 18px !important; border:1px solid rgba(201,162,75,.20); border-radius:14px; background:rgba(5,20,15,.82); padding: 10px !important; }
.islamnow-quick-nav-grid { display:grid; grid-template-columns:repeat(6,1fr); }
.islamnow-quick-link { display:flex; align-items:center; gap:11px; padding:13px 14px; text-decoration:none !important; border-right:1px solid rgba(214,218,224,.08); transition:.18s ease; }
.islamnow-quick-link:last-child { border-right:0; }
.islamnow-quick-link:hover { background:rgba(201,162,75,.07); transform:translateY(-1px); }
.islamnow-quick-icon { width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(201,162,75,.5); border-radius:10px; color:var(--islamnow-gold); font-size:1.05rem; flex:0 0 auto; }
.islamnow-quick-link strong { display:block; color:#d8dcdf; font-size:.78rem; }
.islamnow-quick-link small { display:block; color:#75847d; font-size:.62rem; margin-top:2px; }

.islamnow-lower-grid { gap:18px !important; margin-bottom:18px !important; }
.islamnow-feature-card { position:relative; height:100%; min-height:175px; box-sizing:border-box; border:1px solid rgba(201,162,75,.22); border-radius:15px; padding:23px !important; background:linear-gradient(145deg,#0b1914,#101d17); overflow:hidden; }
.islamnow-card-link { color:#84928c; font-size:.65rem; font-weight:700; letter-spacing:.08em; }
.islamnow-prayer-mirror { position:relative; z-index:1; margin-top:16px; min-height:70px; }
.islamnow-prayer-mirror .islamnow-topbar-prayer { display:flex; flex-wrap:wrap; gap:10px; }
.islamnow-prayer-mirror .islamnow-prayer-item { display:flex; flex-direction:column; min-width:52px; padding:7px 8px; border-radius:8px; background:rgba(255,255,255,.025); }
.islamnow-prayer-mirror .islamnow-prayer-label { color:#788780; font-size:.6rem; margin:0; }
.islamnow-prayer-mirror .islamnow-prayer-time { color:#dfe2e3; font-size:.78rem; }
.islamnow-prayer-mirror .islamnow-prayer-countdown { color:var(--islamnow-gold); font-size:.58rem; }
.islamnow-inspiration-quote { position:relative; z-index:1; font-family:Georgia,serif; font-size:1.02rem; line-height:1.65; color:#d8dcdf !important; margin-top:24px !important; }
.islamnow-inspiration-card .islamnow-source { position:relative; z-index:1; color:var(--islamnow-gold) !important; }
.islamnow-streak-row { position:relative; z-index:1; display:flex; align-items:baseline; gap:8px; margin:24px 0 16px; }
.islamnow-streak-flame { color:var(--islamnow-gold); font-size:1.6rem; }
.islamnow-streak-row strong { font-size:2rem; color:#e3e5e6; }
.islamnow-streak-row span:last-child { color:#7d8b85; font-size:.65rem; }
.islamnow-progress { position:relative; z-index:1; height:7px; border-radius:99px; background:#1a2922; overflow:hidden; }
.islamnow-progress span { display:block; width:25%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9c742b,#e2bf5f); box-shadow:0 0 14px rgba(201,162,75,.25); transition:width .35s ease; }
.islamnow-progress-label { position:relative; z-index:1; color:#75847d !important; font-size:.65rem; margin-top:9px !important; }

.islamnow-explore-panel { position:relative; border:1px solid rgba(201,162,75,.18); border-radius:15px; padding:24px !important; background:rgba(8,24,18,.72); margin-bottom:18px !important; overflow:hidden; }
.islamnow-explore-panel .islamnow-section-title { color:#d8dcdf !important; margin:0; }
.islamnow-explore-panel .islamnow-section-link a { color:var(--islamnow-gold) !important; }
.islamnow-explore-panel .islamnow-topics { background:transparent; border:0; padding:20px 0 0 !important; position:relative; z-index:1; }
.islamnow-explore-panel .islamnow-topics-grid { grid-template-columns:repeat(8,1fr); gap:8px; }
.islamnow-explore-panel .islamnow-topic-link { color:#bac2c0; padding:12px 6px; border-radius:12px; }
.islamnow-explore-panel .islamnow-topic-link:hover { background:rgba(201,162,75,.06); }
.islamnow-explore-panel .islamnow-topic-icon { border-color:rgba(201,162,75,.45); color:var(--islamnow-gold); width:48px; height:48px; }
.islamnow-explore-panel .islamnow-topic-label { font-size:.72rem; }

.islamnow-learning-band { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px !important; border:1px solid rgba(201,162,75,.24); border-radius:14px; background:linear-gradient(90deg,#0b1e17,#10271f); }
.islamnow-learning-band > div { display:flex; align-items:center; gap:14px; }
.islamnow-learning-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(201,162,75,.4); border-radius:9px; color:var(--islamnow-gold); }
.islamnow-learning-band strong { display:block; color:#d6dadd; font-family:Georgia,serif; font-weight:500; font-size:.92rem; }
.islamnow-learning-band small { display:block; color:#77857f; font-size:.65rem; margin-top:3px; }
.islamnow-learning-band > a { background:var(--islamnow-gold); color:#091b15 !important; padding:11px 18px; border-radius:8px; text-decoration:none; font-weight:800; font-size:.75rem; }

/* Give the dashboard page a consistent premium shell even when Avanam wraps it. */
.islamnow-dashboard-page .wp-block-columns { margin-bottom:0; }
.islamnow-dashboard-page .wp-block-group:not(.islamnow-dashboard-page):not(.islamnow-dashboard-shell) { box-sizing:border-box; }
@media (max-width: 1100px) {
	.islamnow-quick-nav-grid { grid-template-columns:repeat(3,1fr); }
	.islamnow-quick-link:nth-child(3) { border-right:0; }
	.islamnow-quick-link:nth-child(n+4) { border-top:1px solid rgba(214,218,224,.08); }
	.islamnow-explore-panel .islamnow-topics-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 782px) {
	.islamnow-dashboard-page { padding:12px 10px 30px; }
	.islamnow-welcome-bar { align-items:flex-start; }
	.islamnow-date-actions { width:100%; justify-content:space-between; margin-top:10px; }
	.islamnow-main-grid .wp-block-column { flex-basis:100% !important; }
	.islamnow-main-grid .islamnow-highlight { min-height:0; }
	.islamnow-highlight-side { min-width:0; }
	.islamnow-quick-nav-grid { grid-template-columns:repeat(2,1fr); }
	.islamnow-quick-link:nth-child(3) { border-right:1px solid rgba(214,218,224,.08); }
	.islamnow-quick-link:nth-child(even) { border-right:0; }
	.islamnow-lower-grid .wp-block-column { flex-basis:100% !important; }
	.islamnow-explore-panel .islamnow-topics-grid { grid-template-columns:repeat(2,1fr); }
	.islamnow-learning-band { align-items:flex-start; flex-direction:column; }
	.islamnow-learning-band > a { width:100%; text-align:center; box-sizing:border-box; }
}

/* ==========================================================================
   Premium dashboard — sidebar, donut ring, week row, hero illustration
   Added after visually comparing the pattern against the reference mockup:
   these four pieces existed in the reference image but not in the first
   pass of the pattern above.
   ========================================================================== */

/* -- Left sidebar navigation ----------------------------------------------
   Fixed full-height rail. Only makes sense edge-to-edge, so it assumes
   this dashboard page uses a blank/full-width template (no parent theme
   header above it) — same assumption the rest of this dashboard already
   makes with min-height:100vh on .islamnow-dashboard-page. If Avanam's
   own header still renders above this pattern, pick its "blank canvas" /
   "no header footer" page template for whichever Page you insert this
   pattern into. */
.islamnow-dashboard-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 96px;
	background: #050f0c;
	border-right: 1px solid rgba(201,162,75,.16);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 22px 0 18px;
	z-index: 40;
	box-sizing: border-box;
}
.islamnow-sidebar-mark {
	font-family: var(--islamnow-font-arabic);
	font-size: 2rem;
	color: var(--islamnow-gold);
	margin-bottom: 20px;
	line-height: 1;
}
.islamnow-sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.islamnow-sidebar-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 11px 4px;
	margin: 0 10px;
	border-radius: 12px;
	color: #7d8b85;
	text-decoration: none !important;
	font-size: .6rem;
	font-weight: 600;
	border: 1px solid transparent;
	box-sizing: border-box;
}
.islamnow-sidebar-nav a svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.islamnow-sidebar-nav a:hover {
	color: var(--islamnow-gold-light);
	background: rgba(201,162,75,.06);
}
.islamnow-sidebar-nav a:focus-visible {
	outline: 2px solid var(--islamnow-gold);
	outline-offset: 2px;
}
.islamnow-sidebar-nav a.is-active {
	color: var(--islamnow-gold);
	background: rgba(201,162,75,.10);
	border-color: rgba(201,162,75,.4);
}
.islamnow-sidebar-nav-bottom {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(214,218,224,.08);
}
.islamnow-sidebar-darkmode {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: .56rem;
	color: #7d8b85;
}
.islamnow-sidebar-darkmode .islamnow-theme-toggle {
	width: 44px;
	height: 24px;
	border-radius: 999px;
	border: 1px solid rgba(201,162,75,.35);
	background: rgba(201,162,75,.1);
}

@media (min-width: 900px) {
	.islamnow-dashboard-page { padding-left: 116px; }
}
@media (max-width: 899px) {
	.islamnow-dashboard-sidebar { display: none; }
}

/* -- Hero illustration: stylised mosque silhouette + crescent moon --------
   Original SVG shapes (not a photo), positioned behind the verse text so
   it reads as ambient texture rather than competing with the quote. */
.islamnow-highlight-illustration {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34%;
	max-width: 320px;
	z-index: 0;
	pointer-events: none;
}
.islamnow-highlight-illustration svg { width: 100%; height: auto; display: block; }
.islamnow-highlight-slider,
.islamnow-highlight-cta,
.islamnow-highlight-side { position: relative; z-index: 2; }

/* -- Streak card: flame+count next to a donut ring, then a week row ------- */
.islamnow-streak-split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
}
.islamnow-streak-row { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.islamnow-streak-flame { color: var(--islamnow-gold); display: inline-flex; }
.islamnow-streak-flame svg { width: 22px; height: 22px; fill: currentColor; }
.islamnow-streak-row strong { font-size: 1.9rem; color: #e3e5e6; }
.islamnow-streak-row > span:last-child { color: #7d8b85; font-size: .64rem; }

.islamnow-donut-wrap { position: relative; width: 78px; height: 78px; flex: 0 0 auto; }
.islamnow-donut { width: 100%; height: 100%; }
.islamnow-donut-track { fill: none; stroke: #1a2922; stroke-width: 8; }
.islamnow-donut-value {
	fill: none;
	stroke: var(--islamnow-gold);
	stroke-width: 8;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .5s ease;
}
.islamnow-donut-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.1;
}
.islamnow-donut-label strong { font-size: 1.15rem; color: #e3e5e6; }
.islamnow-donut-pct { display: block; }
.islamnow-donut-unit { font-size: .68rem; color: #e3e5e6; margin-left: 1px; }
.islamnow-donut-caption { display: block; font-size: .56rem; color: #7d8b85; margin-top: 3px; }

.islamnow-week-row {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
	gap: 4px;
}
.islamnow-week-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: .58rem;
	color: #7d8b85;
}
.islamnow-week-check {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(201,162,75,.3);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.islamnow-week-check.is-done {
	background: var(--islamnow-gold);
	border-color: var(--islamnow-gold);
}
.islamnow-week-check svg { width: 13px; height: 13px; stroke: #091b15; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.islamnow-progress--hidden,
.islamnow-progress-label--hidden { display: none !important; }

@media (max-width: 782px) {
	.islamnow-streak-split { flex-direction: column; align-items: flex-start; }
}

/* -- Suppress Avanam's own header/footer on the premium dashboard page ----
   See islamnow_dashboard_body_class() in inc/block-patterns.php for why
   this targets #wrapper's direct children structurally instead of
   Avanam's own class names. */
body.islamnow-has-premium-dashboard #wrapper > *:not(#inner-wrap) {
	display: none !important;
}
body.islamnow-has-premium-dashboard #inner-wrap {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ==========================================================================
   Standalone dashboard template (page-islamnow-dashboard.php) — layout
   rules that used to come from Gutenberg's own is-layout-flex utility
   classes, now that the dashboard is plain PHP/HTML instead of block
   markup. Same visual result as before, just not dependent on the
   block editor's generated classes.
   ========================================================================== */
.islamnow-welcome-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.islamnow-date-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.islamnow-main-grid > div:first-child { flex: 1 1 60%; min-width: 320px; }
.islamnow-main-grid > div:last-child { flex: 1 1 30%; min-width: 260px; }

@media (max-width: 782px) {
	.islamnow-main-grid { flex-direction: column; }
	.islamnow-lower-grid { flex-direction: column; }
}

/* -- Suppress Avanam's #primary-menu leftover on the standalone
   dashboard template -------------------------------------------------
   This menu ("Blog" / "Home" links) isn't printed by header.php (which
   this template deliberately skips — see page-islamnow-dashboard.php)
   but by something else in Avanam hooked to a global action like
   wp_body_open, which still fires regardless of which template is
   used. Not present anywhere in this child theme's own files, so it
   can't be unhooked cleanly from here — hiding it by ID is the
   pragmatic fix. Scoped to the dashboard page only via the body class
   set in page-islamnow-dashboard.php, so the rest of the site (where
   this menu is presumably supposed to show) is unaffected. */
.islamnow-dashboard-standalone #primary-menu {
	display: none !important;
}

/* ==========================================================================
   Dashboard blog section — CSS scroll-snap slider (no custom JS) + grid
   ========================================================================== */
.islamnow-blog-section { margin-bottom: 18px; }
.islamnow-section-title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}
.islamnow-blog-section .islamnow-section-title {
	font-weight: 800;
	color: #e3e5e6;
	font-size: 1.15rem;
}
.islamnow-blog-empty {
	border: 1px dashed rgba(201,162,75,.3);
	border-radius: 14px;
	padding: 28px;
	text-align: center;
	color: #8a988c;
	font-size: .85rem;
}

.islamnow-blog-slider {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	margin: 0 0 20px;
	-webkit-overflow-scrolling: touch;
}
.islamnow-blog-slider::-webkit-scrollbar { height: 6px; }
.islamnow-blog-slider::-webkit-scrollbar-thumb { background: rgba(201,162,75,.35); border-radius: 999px; }

.islamnow-blog-card {
	scroll-snap-align: start;
	flex: 0 0 280px;
	display: block;
	text-decoration: none !important;
	border: 1px solid rgba(201,162,75,.22);
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(145deg,#0b1914,#101d17);
	box-shadow: 0 14px 32px rgba(0,0,0,.2);
}
.islamnow-blog-card-media { aspect-ratio: 16/10; overflow: hidden; background: #0c1a14; }
.islamnow-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.islamnow-blog-card-media-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--islamnow-font-arabic);
	font-size: 2.4rem;
	color: rgba(201,162,75,.35);
}
.islamnow-blog-card-body { padding: 14px 16px 16px; }
.islamnow-blog-card-category {
	display: inline-block;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--islamnow-gold);
	margin-bottom: 6px;
}
.islamnow-blog-card-title {
	margin: 0 0 8px;
	font-size: .95rem;
	line-height: 1.4;
	color: #e3e5e6;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.islamnow-blog-card-date { font-size: .68rem; color: #7d8b85; }

.islamnow-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.islamnow-blog-grid-item {
	display: block;
	text-decoration: none !important;
	border: 1px solid rgba(201,162,75,.16);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255,255,255,.02);
}
.islamnow-blog-grid-media { aspect-ratio: 16/10; overflow: hidden; background: #0c1a14; }
.islamnow-blog-grid-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.islamnow-blog-grid-title {
	margin: 10px 12px 4px;
	font-size: .82rem;
	line-height: 1.35;
	color: #d8dcdf;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.islamnow-blog-grid-item .islamnow-blog-card-date { margin: 0 12px 12px; display: block; }

@media (max-width: 1100px) {
	.islamnow-blog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
	.islamnow-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.islamnow-blog-card { flex-basis: 240px; }
}