/* Markaz us Sunnah – styles theme.json can't express. Tokens come from theme.json custom properties. */

:root {
	--mz-arch: var(--wp--custom--radius--arch);
	--mz-frame-gap: 6px;
}

/* Arch: echoes the logo's doorway */
.is-style-arch img,
.wp-block-cover.is-style-arch { border-radius: var(--mz-arch); overflow: hidden; }
.is-style-arch img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Double frame: the logo's two concentric gold rules */
.wp-block-group.is-style-framed {
	border: 1px solid var(--wp--preset--color--gold);
	outline: 1px solid var(--wp--preset--color--gold);
	outline-offset: calc(-1 * var(--mz-frame-gap) - 1px);
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-card {
	background: var(--wp--custom--card--background);
	border: 1px solid var(--wp--custom--card--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
}
.has-charcoal-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

p.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-deep);
}
.has-charcoal-background-color p.is-style-eyebrow,
.has-ink-background-color p.is-style-eyebrow { color: var(--wp--preset--color--gold); }

p.is-style-arabic,
[lang="ar"] { font-family: var(--wp--preset--font-family--arabic); direction: rtl; line-height: 1.9; }

.wp-block-quote.is-style-ayah {
	border: 0;
	padding: 0;
	text-align: center;
}
.wp-block-quote.is-style-ayah [lang="ar"] {
	font-family: var(--wp--preset--font-family--quran);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 2;
}
.wp-block-quote.is-style-ayah cite { font-style: normal; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.06em; }

/* Prayer times: tabular figures so columns line up */
.mz-prayer-times { font-variant-numeric: tabular-nums; }
.mz-prayer-times .mz-time { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1; margin: 0; }

/* Appeal progress bar */
.mz-progress { height: 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.mz-progress > span { display: block; height: 100%; background: var(--wp--preset--color--gold); border-radius: inherit; }

/* Sticky header */
.mz-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .mz-header { top: var(--wp-admin--admin-bar--height, 32px); }

:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--gold-deep); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
	.wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, border-color .2s; }
}

.mz-header { background: var(--wp--custom--surface); border-bottom: 1px solid var(--wp--custom--rule); }

.wp-block-details { border-bottom: 1px solid var(--wp--custom--rule); padding-block: var(--wp--preset--spacing--30); }
.wp-block-details summary { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; cursor: pointer; }
.wp-block-table td { border-color: var(--wp--custom--rule); padding: .75em 0; }
.wp-block-table td:first-child { color: var(--wp--custom--muted); width: 40%; }