/* ═══════════════════════════════════════════════════════════════════
   MAINTENANCE.CSS — جمعية إرث وحضارة بالقريات
   Full-screen "site closed / under construction" overlay.
   White-surface heritage identity · gold accent on cream · soft depth.
═══════════════════════════════════════════════════════════════════ */

:root {
    --mnt-bg:          #ffffff;
    --mnt-bg-soft:     #f8f7f5;
    --mnt-surface:     #ffffff;
    --mnt-ink:         #1c1a17;
    --mnt-ink-muted:   #5a5650;
    --mnt-ink-faint:   #8a8478;
    --mnt-gold:        #b8883e;
    --mnt-gold-soft:   #d4a855;
    --mnt-gold-pale:   rgba(184, 136, 62, 0.12);
    --mnt-gold-line:   rgba(184, 136, 62, 0.28);
    --mnt-border:      rgba(28, 26, 23, 0.08);
    --mnt-shadow-sm:   0 4px 14px -4px rgba(20, 16, 8, 0.07);
    --mnt-shadow-md:   0 12px 32px -8px rgba(20, 16, 8, 0.10);
    --mnt-shadow-lg:   0 24px 56px -16px rgba(20, 16, 8, 0.14);
    --mnt-shadow-gold: 0 10px 30px -10px rgba(184, 136, 62, 0.30);
    --mnt-ease:        cubic-bezier(0.16, 1, 0.3, 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: 2.5rem 1.5rem;
    background:
        radial-gradient(ellipse 760px 520px at 18% -8%, rgba(184,136,62,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 760px 520px at 84% 108%, rgba(184,136,62,0.06) 0%, transparent 60%),
        var(--mnt-bg);
    font-family: 'Almarai', 'Segoe UI', sans-serif;
    direction: rtl;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    animation: mnt-fade-in 0.9s var(--mnt-ease) forwards;
}

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

/* Faint heritage motif — barely-there geometric weave */
.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="%23b8883e" stroke-width="1.1" 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="%23b8883e" fill="none" stroke-width="1.1"/></svg>');
    background-repeat: repeat;
    background-size: 190px;
    pointer-events: none;
    opacity: 0.55;
}

/* Soft rotating gold glow behind the content */
.mnt-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184,136,62,0.10) 0%, transparent 62%);
    pointer-events: none;
    animation: mnt-glow 8s ease-in-out infinite;
}

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

/* ── Center content card ── */
.mnt-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--mnt-surface);
    border: 1px solid var(--mnt-border);
    border-radius: 28px;
    padding: clamp(2.4rem, 6vw, 4rem) clamp(1.6rem, 6vw, 3.4rem);
    box-shadow: var(--mnt-shadow-lg);
    opacity: 0;
    transform: translateY(22px);
    animation: mnt-card-in 0.9s var(--mnt-ease) 0.05s forwards;
}

@keyframes mnt-card-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Logo with concentric rotating rings ── */
.mnt-logo-rings {
    position: relative;
    width: 184px;
    height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.2rem;
    opacity: 0;
    transform: scale(0.85);
    animation: mnt-pop 0.9s var(--mnt-ease) 0.25s 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 var(--mnt-gold-line);
}
.mnt-ring.r1 { inset: 0;    animation: mnt-spin 26s linear infinite; }
.mnt-ring.r2 { inset: 17px; border-style: solid; border-color: rgba(184,136,62,0.18); animation: mnt-spin 20s linear infinite reverse; }
.mnt-ring.r3 { inset: 33px; border-color: rgba(184,136,62,0.12); }

@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 10px rgba(184,136,62,0.45);
}
.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.55; }
.mnt-orbit i:nth-child(3) { left: -3px;  top: 50%; margin-top: -3.5px; opacity: 0.75; }
.mnt-orbit i:nth-child(4) { right: -3px; top: 50%; margin-top: -3.5px; opacity: 0.75; }

/* Logo disc */
.mnt-logo-disc {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    background: linear-gradient(160deg, #ffffff 0%, var(--mnt-bg-soft) 100%);
    border: 1.5px solid var(--mnt-gold-line);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mnt-shadow-md), 0 0 0 6px #ffffff;
    animation: mnt-breathe 4.5s ease-in-out infinite;
}
.mnt-logo-disc img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    display: block;
}

@keyframes mnt-breathe {
    0%, 100% { box-shadow: var(--mnt-shadow-md), 0 0 0 6px #ffffff, 0 0 0 8px rgba(184,136,62,0.0); }
    50%      { box-shadow: var(--mnt-shadow-md), 0 0 0 6px #ffffff, 0 0 0 12px rgba(184,136,62,0.14); }
}

/* ── Eyebrow ── */
.mnt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mnt-gold);
    background: var(--mnt-gold-pale);
    border: 1px solid var(--mnt-gold-line);
    border-radius: 100px;
    padding: 0.5rem 1.1rem;
    margin-bottom: 1.6rem;
    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);
    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;
    padding-top: 2rem;
    border-top: 1px solid var(--mnt-border);
    width: 100%;
    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, var(--mnt-gold-line));
}
.mnt-foot-line.r { background: linear-gradient(90deg, var(--mnt-gold-line), 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-ink-faint);
}

/* ── 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.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mnt-ink-faint);
}
.mnt-contact-label .ln {
    width: 30px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mnt-gold-line));
}
.mnt-contact-label .ln.r { background: linear-gradient(90deg, var(--mnt-gold-line), 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.75rem 1.3rem;
    background: var(--mnt-bg-soft);
    border: 1px solid var(--mnt-border);
    border-radius: 14px;
    color: var(--mnt-ink);
    font-size: 0.92rem;
    font-weight: 700;
    transition: border-color 0.28s var(--mnt-ease), transform 0.28s var(--mnt-ease), box-shadow 0.28s var(--mnt-ease), background 0.28s var(--mnt-ease);
}
.mnt-contact-item:hover {
    border-color: var(--mnt-gold-line);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--mnt-shadow-gold);
}
.mnt-contact-item i {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--mnt-gold-soft), var(--mnt-gold));
    color: #ffffff;
    font-size: 0.82rem;
    box-shadow: 0 4px 12px -4px rgba(184,136,62,0.45);
}
.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: var(--mnt-bg-soft);
    border: 1px solid var(--mnt-border);
    color: var(--mnt-ink-muted);
    font-size: 1.05rem;
    transition: transform 0.28s var(--mnt-ease), border-color 0.28s var(--mnt-ease), background 0.28s var(--mnt-ease), color 0.28s var(--mnt-ease), box-shadow 0.28s var(--mnt-ease);
}
.mnt-social a:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background: linear-gradient(160deg, var(--mnt-gold-soft), var(--mnt-gold));
    color: #ffffff;
    box-shadow: var(--mnt-shadow-gold);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .mnt-inner { border-radius: 22px; }
    .mnt-contact { margin-top: 2rem; }
    .mnt-contact-item { font-size: 0.85rem; padding: 0.65rem 1.05rem; }
    .mnt-social a { width: 38px; height: 38px; font-size: 0.95rem; }
    .mnt-logo-rings { width: 156px; height: 156px; margin-bottom: 1.8rem; }
    .mnt-logo-disc  { width: 96px; height: 96px; }
    .mnt-logo-disc img { width: 62px; height: 62px; }
    .mnt-overlay::after { width: 480px; height: 480px; }
    .mnt-foot { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mnt-overlay, .mnt-inner, .mnt-logo-rings, .mnt-eyebrow, .mnt-title, .mnt-message, .mnt-contact, .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;
    }
}