/* ============================================================
   QATAR VISUAL POLISH
   ============================================================ */

/* ─── 1. ISLAMIC PATTERN ─────────────────────────────────── */
body {
    position: relative;
}

.islamic-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

body.dark .islamic-bg { opacity: 0.06; }

/* ─── 2. HERO VIGNETTE ───────────────────────────────────── */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.75) 100%
    ) !important;
}

/* grain texture on location hero image only */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
}

/* ─── 3. FROSTED NAVBAR ──────────────────────────────────── */
.navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease !important;
}
.navbar.scrolled                           { background-color: #6F1F2B !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; }
body.page-nature .navbar.scrolled          { background-color: #2D5016 !important; }
body.page-modern .navbar.scrolled          { background-color: #0D1B2A !important; }
body.page-historical .navbar.scrolled      { background-color: #7A3B2E !important; }
body.dark .navbar.scrolled                 { background-color: #580900 !important; }
body.page-nature.dark .navbar.scrolled     { background-color: #1a3009 !important; }
body.page-modern.dark .navbar.scrolled     { background-color: #070e17 !important; }
body.page-historical.dark .navbar.scrolled { background-color: #4e261e !important; }

/* ─── 4. NAV PANEL Z-INDEX FIX ───────────────────────────── */
.nav-links { z-index: 1003 !important; }

/* ─── 5. ARABESQUE DIVIDERS ──────────────────────────────── */
/* We inject a wrapper span via JS to hold the gem */
.section-divider,
.divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    height: 20px;
    margin: 3rem 0;
    border: none;
    overflow: visible;
}

.section-divider::before,
.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.45), transparent);
}

.divider-gem {
    position: relative;
    z-index: 1;
    color: rgba(201,168,76,0.8);
    font-size: 0.65rem;
    padding: 0 0.75rem;
    line-height: 1;
}

/* ─── 6. GOLD LINE DIAMOND TIP ───────────────────────────── */
.gold-line-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0.75rem 0 1.5rem 0;
}

.gold-line-wrap .gold-line {
    margin: 0 !important;
}

.gold-line-wrap::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: var(--gold, #C9A84C);
    transform: rotate(45deg);
    opacity: 0.7;
    flex-shrink: 0;
}

/* ─── 7. SECTION LABEL STAR ──────────────────────────────── */
.section-label,
.page-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.label-star {
    display: inline-block;
    font-size: 0.55rem;
    color: var(--gold, #C9A84C);
    opacity: 0.85;
    flex-shrink: 0;
}

/* ─── 8. DROP CAP ────────────────────────────────────────── */
.body-text:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display, 'Bebas Neue');
    font-size: 4.2rem;
    line-height: 0.72;
    margin: 0.05rem 0.2rem 0 0;
    color: var(--gold, #C9A84C);
}

/* ─── 9. BUTTON SHIMMER ──────────────────────────────────── */
.explore-btn,
.btn-30sec {
    position: relative !important;
    overflow: hidden !important;
}
.explore-btn::before,
.btn-30sec::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}
.explore-btn:hover::before,
.btn-30sec:hover::before {
    animation: shimmer 0.5s ease forwards;
}
@keyframes shimmer {
    from { left: -80%; }
    to   { left: 130%; }
}

/* ─── 10. CARD TILT (JS does the transform) ─────────────── */
.card { transform-style: preserve-3d; will-change: transform; }

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.6); }

/* ─── SELECTION ──────────────────────────────────────────── */
::selection { background: rgba(201,168,76,0.28); color: inherit; }

/* ─── CATEGORY PAGE HERO — vignette via pseudo-element ──── */
/* Do NOT add overflow:hidden — it breaks background-attachment:fixed */
.page-hero {
    position: relative;
}

/* Dark vignette overlay sits on top of the hero bg image */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* text above the vignette */
.page-hero-inner {
    position: relative;
    z-index: 2;
}

/* ─── ISLAMIC PATTERN COLORS PER PAGE ───────────────────── */
/* index — maroon */
.islamic-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%236F1F2B' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* nature pages — forest green */
body.page-nature .islamic-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%232D5016' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* modern pages — navy blue */
body.page-modern .islamic-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230D1B2A' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* historical pages — terracotta */
body.page-historical .islamic-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%237A3B2E' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* dark mode — always gold */
body.dark .islamic-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='0.9'%3E%3Cpolygon points='40,4 52,14 52,30 40,40 28,30 28,14'/%3E%3Cpolygon points='40,40 52,50 52,66 40,76 28,66 28,50'/%3E%3Cpolygon points='4,22 16,22 22,32 16,42 4,42 -2,32'/%3E%3Cpolygon points='76,22 88,22 94,32 88,42 76,42 70,32'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='40' cy='4' r='1.5'/%3E%3Ccircle cx='40' cy='76' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0.06; }