/* ═══════════════════════════════════════════════════════════════════
   MAINTENANCE.CSS — جمعية إرث وحضارة بالقريات
   Full-screen "site closed / under construction" overlay.
   Heritage identity · gold-on-parchment · ornamental motion.
═══════════════════════════════════════════════════════════════════ */

:root {
    --mnt-parchment:   #faf6ed;
    --mnt-parchment-2: #f5ede0;
    --mnt-ink-dark:    #1e1610;
    --mnt-ink:         #3a2a1c;
    --mnt-ink-muted:   #6b4f35;
    --mnt-gold:        #c09a62;
    --mnt-gold-pale:   #e0c896;
    --mnt-amber:       #a07848;
    --mnt-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lock the page behind the overlay */
html.mnt-locked,
body.mnt-locked {
    overflow: hidden !important;
    height: 100% !important;
}

/* While the maintenance flag is being checked, hide the real site
   content so the visitor never sees a flash of the page. The overlay
   element keeps its own visibility:visible (see .mnt-overlay below). */
html.mnt-checking body > *:not(.mnt-overlay) {
    visibility: hidden !important;
}

/* ── Overlay shell ── */
.mnt-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: radial-gradient(ellipse at 50% 28%, #fdfaf2 0%, var(--mnt-parchment) 45%, #f3ead9 100%);
    font-family: 'Almarai', 'Segoe UI', sans-serif;
    direction: rtl;
    overflow: hidden;
    opacity: 0;
    animation: mnt-fade-in 0.9s var(--mnt-ease) forwards;
}

@keyframes mnt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Heritage paper texture */
.mnt-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200" opacity="0.05"><path fill="none" stroke="%23b28b5e" stroke-width="1.2" d="M200 150 L250 120 L300 150 L350 120 L400 150 L450 120 L500 150 L550 120 L600 150 M150 350 L200 320 L250 350 L300 320 L350 350 L400 320 L450 350 M100 550 L150 520 L200 550 L250 520 L300 550 L350 520 L400 550 M180 750 L230 720 L280 750 L330 720 L380 750 L430 720 L480 750 M220 950 L270 920 L320 950 L370 920 L420 950 L470 920 L520 950"/><circle cx="400" cy="500" r="25" stroke="%239c7a4b" fill="none" stroke-width="1.2"/></svg>');
    background-repeat: repeat;
    background-size: 170px;
    pointer-events: none;
    opacity: 0.9;
}

/* Soft rotating gold glow behind the content */
.mnt-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 720px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(192,154,98,0.16) 0%, transparent 60%);
    pointer-events: none;
    animation: mnt-glow 7s ease-in-out infinite;
}

@keyframes mnt-glow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.12); }
}

/* ── Center content ── */
.mnt-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Logo with concentric rotating rings ── */
.mnt-logo-rings {
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.4rem;
    opacity: 0;
    transform: scale(0.85);
    animation: mnt-pop 0.9s var(--mnt-ease) 0.2s forwards;
}

@keyframes mnt-pop {
    to { opacity: 1; transform: scale(1); }
}

/* Outer dashed ring — slow spin */
.mnt-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(192,154,98,0.4);
}
.mnt-ring.r1 { inset: 0;    animation: mnt-spin 26s linear infinite; }
.mnt-ring.r2 { inset: 18px; border-style: solid; border-color: rgba(192,154,98,0.22); animation: mnt-spin 20s linear infinite reverse; }
.mnt-ring.r3 { inset: 34px; border-color: rgba(192,154,98,0.16); }

@keyframes mnt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Orbiting diamonds on the outer ring */
.mnt-orbit {
    position: absolute;
    inset: 0;
    animation: mnt-spin 18s linear infinite;
}
.mnt-orbit i {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--mnt-gold);
    transform: rotate(45deg);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(192,154,98,0.5);
}
.mnt-orbit i:nth-child(1) { top: -3px;  left: 50%; margin-left: -3.5px; }
.mnt-orbit i:nth-child(2) { bottom: -3px; left: 50%; margin-left: -3.5px; opacity: 0.6; }
.mnt-orbit i:nth-child(3) { left: -3px;  top: 50%; margin-top: -3.5px; opacity: 0.8; }
.mnt-orbit i:nth-child(4) { right: -3px; top: 50%; margin-top: -3.5px; opacity: 0.8; }

/* Logo disc */
.mnt-logo-disc {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: linear-gradient(160deg, #fff 0%, var(--mnt-parchment-2) 100%);
    border: 1.5px solid rgba(192,154,98,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 50px -16px rgba(40,25,8,0.3),
                0 0 0 6px rgba(253,250,240,0.9);
    animation: mnt-breathe 4.5s ease-in-out infinite;
}
.mnt-logo-disc img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    display: block;
}

@keyframes mnt-breathe {
    0%, 100% { box-shadow: 0 18px 50px -16px rgba(40,25,8,0.3), 0 0 0 6px rgba(253,250,240,0.9), 0 0 0 8px rgba(192,154,98,0.0); }
    50%      { box-shadow: 0 18px 50px -16px rgba(40,25,8,0.34), 0 0 0 6px rgba(253,250,240,0.92), 0 0 0 11px rgba(192,154,98,0.18); }
}

/* ── Eyebrow ── */
.mnt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mnt-amber);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: mnt-rise 0.8s var(--mnt-ease) 0.5s forwards;
}
.mnt-eyebrow .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--mnt-gold);
    animation: mnt-blink 2.6s ease-in-out infinite;
}
@keyframes mnt-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.6); }
}

/* ── Title ── */
.mnt-title {
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    font-weight: 800;
    color: var(--mnt-ink-dark);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
    opacity: 0;
    animation: mnt-rise 0.8s var(--mnt-ease) 0.62s forwards;
}
.mnt-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin: 1.2rem auto 0;
    background: linear-gradient(90deg, transparent, var(--mnt-gold), transparent);
}

/* ── Message ── */
.mnt-message {
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 2.1;
    color: var(--mnt-ink-muted);
    font-weight: 300;
    max-width: 46ch;
    margin: 0 auto;
    white-space: pre-line;
    opacity: 0;
    animation: mnt-rise 0.8s var(--mnt-ease) 0.74s forwards;
}

@keyframes mnt-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ── Association name footer ── */
.mnt-foot {
    margin-top: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: mnt-rise 0.8s var(--mnt-ease) 0.9s forwards;
}
.mnt-foot-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}
.mnt-foot-line {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,154,98,0.45));
}
.mnt-foot-line.r { background: linear-gradient(90deg, rgba(192,154,98,0.45), transparent); }
.mnt-foot-diamond {
    width: 6px; height: 6px;
    background: var(--mnt-gold);
    transform: rotate(45deg);
}
.mnt-foot-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mnt-ink);
    letter-spacing: -0.01em;
}
.mnt-foot-sub {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mnt-amber);
}

/* ── Contact block under the message ── */
.mnt-contact {
    margin-top: 2.4rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    opacity: 0;
    animation: mnt-rise 0.8s var(--mnt-ease) 0.84s forwards;
}

.mnt-contact-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mnt-amber);
}
.mnt-contact-label .ln {
    width: 30px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,154,98,0.5));
}
.mnt-contact-label .ln.r { background: linear-gradient(90deg, rgba(192,154,98,0.5), transparent); }

/* Direct contact rows (phone + email) */
.mnt-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}
.mnt-contact-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.7rem 1.2rem;
    background: rgba(253, 250, 240, 0.7);
    border: 1px solid rgba(192,154,98,0.28);
    border-radius: 12px;
    color: var(--mnt-ink);
    font-size: 0.92rem;
    font-weight: 700;
    transition: border-color 0.25s var(--mnt-ease), transform 0.25s var(--mnt-ease), box-shadow 0.25s;
}
.mnt-contact-item:hover {
    border-color: rgba(192,154,98,0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(40,25,8,0.25);
}
.mnt-contact-item i {
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--mnt-ink-dark), #2e1e0f);
    color: var(--mnt-gold-pale);
    font-size: 0.82rem;
}
.mnt-contact-item .val { direction: ltr; letter-spacing: 0.01em; }

/* Social icons row */
.mnt-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.mnt-social a {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(253, 250, 240, 0.8);
    border: 1px solid rgba(192,154,98,0.3);
    color: var(--mnt-ink);
    font-size: 1.05rem;
    transition: transform 0.25s var(--mnt-ease), border-color 0.25s, background 0.25s, color 0.25s;
}
.mnt-social a:hover {
    transform: translateY(-3px);
    border-color: rgba(192,154,98,0.6);
    background: var(--mnt-ink-dark);
    color: var(--mnt-gold-pale);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .mnt-contact { margin-top: 2rem; }
    .mnt-contact-item { font-size: 0.85rem; padding: 0.62rem 1rem; }
    .mnt-social a { width: 38px; height: 38px; font-size: 0.95rem; }
    .mnt-logo-rings { width: 160px; height: 160px; margin-bottom: 2rem; }
    .mnt-logo-disc  { width: 98px; height: 98px; }
    .mnt-logo-disc img { width: 64px; height: 64px; }
    .mnt-overlay::after { width: 460px; height: 460px; }
    .mnt-foot { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mnt-overlay, .mnt-logo-rings, .mnt-eyebrow, .mnt-title, .mnt-message, .mnt-foot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mnt-ring, .mnt-orbit, .mnt-logo-disc, .mnt-overlay::after, .mnt-eyebrow .dot {
        animation: none !important;
    }
}