/*
Theme Name: زفات زفاف v2 (معياري)
Theme URI: https://zfat-zfaf.com/
Author: Zfat Zfaf
Description: قالب عربي RTL فاخر وسريع لعرض وتشغيل الزفات والأغاني بدون موسيقى.
Version: 1.0.0
Text Domain: zfat-zfaf
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
*/

:root {
    color-scheme: dark;
    --zz-bg: #050506;
    --zz-bg-soft: #10100e;
    --zz-surface: rgba(19, 18, 16, 0.88);
    --zz-surface-solid: #151411;
    --zz-surface-2: #202018;
    --zz-border: rgba(224, 193, 113, 0.22);
    --zz-border-strong: rgba(224, 193, 113, 0.42);
    --zz-text: #f9f4e8;
    --zz-muted: #c5baa4;
    --zz-gold: #d8b45f;
    --zz-gold-strong: #f0cf7c;
    --zz-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    --zz-radius: 8px;
    --zz-header-height: 82px;
    --zz-content: 1260px;
}

@media (min-width: 1500px) {
    :root {
        --zz-content: 1480px;
    }
}

@media (min-width: 1800px) {
    :root {
        --zz-content: 1640px;
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    /* Real light mode: white + cool brown (Cool Mocha) — not a dark-mode reflection. */
    --zz-bg: #f7f6f4;
    --zz-bg-soft: #eeece8;
    --zz-surface: rgba(255, 255, 255, 0.86);
    --zz-surface-solid: #ffffff;
    --zz-surface-2: #e9e6e1;
    --zz-border: rgba(111, 88, 68, 0.18);
    --zz-border-strong: rgba(111, 88, 68, 0.34);
    --zz-text: #221f1c;
    --zz-muted: #5f574e;
    --zz-gold: #816751;
    --zz-gold-strong: #6f5238;
    --zz-shadow: 0 22px 56px rgba(74, 58, 44, 0.12);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    direction: rtl;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    position: relative;
    isolation: isolate;
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    padding-top: var(--zz-header-height);
    background:
        radial-gradient(ellipse 80% 48% at 50% -8%, rgba(216, 180, 95, 0.14), transparent 62%),
        radial-gradient(ellipse 54% 100% at 0% 40%, rgba(0, 0, 0, 0.28), transparent 58%),
        radial-gradient(ellipse 54% 100% at 100% 40%, rgba(0, 0, 0, 0.28), transparent 58%),
        linear-gradient(180deg, rgba(216, 180, 95, 0.07), transparent 420px),
        var(--zz-bg);
    color: var(--zz-text);
    font-family: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

:root[data-theme="light"] body {
    background:
        radial-gradient(ellipse 80% 48% at 50% -8%, rgba(111, 88, 68, 0.10), transparent 62%),
        radial-gradient(ellipse 54% 100% at 0% 40%, rgba(95, 89, 79, 0.05), transparent 60%),
        radial-gradient(ellipse 54% 100% at 100% 40%, rgba(95, 89, 79, 0.05), transparent 60%),
        radial-gradient(ellipse 70% 60% at 88% 0%, rgba(129, 103, 81, 0.06), transparent 60%),
        linear-gradient(180deg, #f7f6f4 0%, #f1efeb 46%, #eceae5 100%);
}

body > * {
    position: relative;
    z-index: 1;
}

body.zz-lock-scroll {
    overflow: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zz-site-main {
    position: relative;
    min-height: 60vh;
}

body.home .zz-site-main {
    isolation: isolate;
    overflow: hidden;
}

body.home .zz-site-main > * {
    position: relative;
    z-index: 1;
}

.zz-section {
    width: min(100% - 32px, var(--zz-content));
    margin: 0 auto;
    padding: 64px 0;
}

.zz-section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 28px;
}

.zz-section-heading span,
.zz-archive-hero span,
.zz-tax-hero span,
.zz-single-copy span {
    color: var(--zz-gold-strong);
    font-size: 0.9rem;
    font-weight: 800;
}

.zz-section-heading h2,
.zz-archive-hero h1,
.zz-tax-hero h1,
.zz-single-copy h1,
.zz-page-content h1 {
    margin: 0;
    color: var(--zz-text);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    line-height: 1.25;
}

.zz-empty-state {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius);
    background: var(--zz-surface);
    color: var(--zz-muted);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes zz-desktop-sparkle-drift {
    0% {
        background-position: 0 0, 84px 36px, 160px 112px, 240px 64px, 320px 180px, 420px 130px;
        opacity: 0.34;
    }

    35% {
        opacity: 0.62;
    }

    70% {
        opacity: 0.46;
    }

    100% {
        background-position: -180px -240px, -80px -190px, 20px -130px, 120px -260px, 210px -90px, 310px -220px;
        opacity: 0.3;
    }
}

@media (min-width: 1024px) {
    .zz-section,
    .zz-archive-hero,
    .zz-tax-hero,
    .zz-single-zafah,
    .zz-page,
    .zz-testimonials,
    .zz-site-footer {
        position: relative;
        isolation: isolate;
    }

    .zz-section::before,
    .zz-archive-hero::before,
    .zz-tax-hero::before,
    .zz-single-zafah::before,
    .zz-page::before,
    .zz-testimonials::before,
    .zz-site-footer::before {
        content: "";
        position: absolute;
        inset: -80px -8vw;
        z-index: -1;
        pointer-events: none;
        opacity: 0.42;
        background-image:
            radial-gradient(circle, rgba(255, 244, 204, 0.72) 0 0.8px, transparent 1.8px),
            radial-gradient(circle, rgba(240, 207, 124, 0.56) 0 0.9px, transparent 2px),
            radial-gradient(circle, rgba(216, 180, 95, 0.42) 0 0.7px, transparent 1.9px),
            radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 0.75px, transparent 1.8px),
            radial-gradient(circle, rgba(240, 207, 124, 0.38) 0 0.65px, transparent 1.7px),
            radial-gradient(circle, rgba(255, 244, 204, 0.32) 0 0.75px, transparent 1.9px);
        background-size: 310px 390px, 430px 520px, 540px 460px, 620px 680px, 760px 620px, 900px 720px;
        filter: blur(0.35px) drop-shadow(0 0 7px rgba(240, 207, 124, 0.22));
        transform: translate3d(0, 0, 0);
        animation: zz-desktop-sparkle-drift 34s linear infinite;
        will-change: background-position, opacity;
    }

    :root[data-theme="light"] .zz-section::before,
    :root[data-theme="light"] .zz-archive-hero::before,
    :root[data-theme="light"] .zz-tax-hero::before,
    :root[data-theme="light"] .zz-single-zafah::before,
    :root[data-theme="light"] .zz-page::before,
    :root[data-theme="light"] .zz-testimonials::before,
    :root[data-theme="light"] .zz-site-footer::before {
        opacity: 0.28;
        background-image:
            radial-gradient(circle, rgba(111, 88, 68, 0.42) 0 0.75px, transparent 1.8px),
            radial-gradient(circle, rgba(95, 89, 79, 0.24) 0 0.85px, transparent 2px),
            radial-gradient(circle, rgba(255, 255, 255, 0.48) 0 0.7px, transparent 1.8px),
            radial-gradient(circle, rgba(111, 88, 68, 0.22) 0 0.65px, transparent 1.7px);
        background-size: 340px 420px, 520px 560px, 680px 620px, 880px 760px;
        filter: blur(0.35px) drop-shadow(0 0 5px rgba(111, 88, 68, 0.1));
    }
}

@media (max-width: 760px) {
    :root {
        --zz-header-height: 68px;
    }

    .zz-section {
        width: min(100% - 24px, var(--zz-content));
        padding: 44px 0;
    }
}