/*
Theme Name: Madrasa Atlas – قالب المدرسة
Description: قالب كتل عصري ومتجاوب لمدرسة خاصة: ألوان الأرز والزعفران، خطا Alexandria وIBM Plex Sans Arabic محليان، رأس وأسفل قابلان للتعديل الكامل من محرر الموقع، وأنماط جاهزة للصفحة الرئيسية. يتكامل مع إضافة المدرسة الذكية.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madrasa-atlas
Tags: education, rtl-language-support, block-patterns, full-site-editing, custom-colors, custom-logo
*/

/* ---------- Header ---------- */
.ma-topbar { font-size: .88rem; }
.ma-topbar a { color: inherit; text-decoration: none; }
/* No backdrop-filter here: it would trap the mobile menu overlay inside the header. */
.ma-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--white) !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.ma-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 599px) { .ma-topbar { display: none; } }
/* Tablets and small laptops: use the menu button instead of a crowded row of links. */
@media (min-width: 600px) and (max-width: 1199px) {
	.ma-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ma-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.ma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
}
.admin-bar .ma-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ma-header { top: 0; } }
.ma-header .wp-block-site-logo img { max-height: 64px; width: auto; }
.ma-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--white); padding: 1.5rem; }
.ma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.2rem; }
@media (max-width: 599px) { .ma-header-actions .is-style-outline { display: none; } }

/* ---------- Zellige pattern (hero and footer band) ---------- */
.ma-zellige {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='white' stroke-opacity='.14' stroke-width='1.4'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 0l9 9M64 0l-9 9M0 64l9-9M64 64l-9-9M32 0v6M32 58v6M0 32h6M58 32h6'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(135deg, #0a5a47 0%, #0e8a6a 65%, #13a37e 100%) !important;
	background-size: 64px 64px, cover !important;
}
.ma-hero { border-bottom: 8px solid var(--wp--preset--color--saffron); }
.ma-hero h1 { letter-spacing: -.01em; }
.ma-badge { width: fit-content; }

/* Arch frame: the Moroccan doorway shape used for photos. */
.wp-block-image.is-style-arch img, .ma-arch img { border-radius: 999px 999px 28px 28px; aspect-ratio: 5 / 6; object-fit: cover; width: 100%; height: auto; }
.wp-block-image.is-style-arch { position: relative; }
.ma-hero .wp-block-image.is-style-arch img { border: 6px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55); }

/* ---------- Cards ---------- */
.is-style-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; }
.ma-quick a { text-decoration: none; color: var(--wp--preset--color--ink); }
.ma-quick .wp-block-column { transition: border-color .15s ease; }
.ma-quick .wp-block-column:hover { border-color: var(--wp--preset--color--cedar); }
.ma-quick .wp-block-image img { width: 52px; height: 52px; }

.ma-level { position: relative; overflow: hidden; border-radius: 18px; }
.ma-level::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ma-tone, var(--wp--preset--color--cedar)); }
.ma-level-arch { width: 64px; height: 76px; border-radius: 999px 999px 10px 10px; display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--ma-tone, var(--wp--preset--color--cedar)); margin: 0 !important; }
.ma-tone-saffron { --ma-tone: #e09000; }
.ma-tone-rose { --ma-tone: var(--wp--preset--color--rose); }
.ma-tone-sky { --ma-tone: var(--wp--preset--color--sky); }
.ma-tone-cedar { --ma-tone: var(--wp--preset--color--cedar); }

.ma-step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; background: var(--wp--preset--color--saffron); color: var(--wp--preset--color--ink); margin: 0 !important; }

.ma-facts p { margin: 0; }
.ma-fact-value { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; color: var(--wp--preset--color--cedar-deep); }

.ma-check-list { list-style: none; padding: 0; margin: 0; }
.ma-check-list li { position: relative; padding-right: 2rem; margin-bottom: .7rem; }
.ma-check-list li::before { content: ""; position: absolute; right: 0; top: .35em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--wp--preset--color--cedar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* ---------- Posts ---------- */
.ma-post-card { height: 100%; }
.ma-post-card .wp-block-post-featured-image img { border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Footer ---------- */
.ma-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ma-footer a:hover { color: #fff; text-decoration: underline; }
.ma-footer .wp-block-navigation { --navigation-layout-direction: column; }
.ma-footer .wp-block-navigation .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: .4rem; }
.ma-footer .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.ma-footer-band { height: 14px; }

/* ---------- Page title band ---------- */
.ma-title-band { border-bottom: 1px solid var(--wp--preset--color--line); }

/* ---------- Accessibility ---------- */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--saffron); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }