/*
 * Islamic Geometric Pattern Library — Prime Ziyarat Travels
 * All patterns are pure SVG data-URIs: no HTTP requests, no external files.
 *
 * Pattern inventory:
 *   .ipat-star8       — eight-pointed star tile (most iconic Islamic geometry)
 *   .ipat-arabesque   — interlocking arabesque / Khatam-style
 *   .ipat-lattice     — fine Mashrabiya lattice
 *   .ipat-border-top  — single decorative band (pseudo-element, top only)
 *   .ipat-border-both — decorative bands top + bottom
 *
 * Usage:  Add the class to any section wrapper.
 *         The pattern renders on a ::before pseudo-element so it never disrupts
 *         existing content layout or z-index stacking.
 */

/* ─── Shared pseudo-element base ─────────────────────────────────────── */
.ipat-star8::before,
.ipat-arabesque::before,
.ipat-lattice::before,
.ipat-border-top::before,
.ipat-border-both::before,
.ipat-border-both::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Elements with these classes need position:relative so the ::before sits inside */
.ipat-star8,
.ipat-arabesque,
.ipat-lattice {
    position: relative;
    overflow: hidden;
}

/* All direct children float above the pattern layer */
.ipat-star8 > *,
.ipat-arabesque > *,
.ipat-lattice > * {
    position: relative;
    z-index: 1;
}

/* ─── Pattern 1: Eight-pointed star (Khatam Suleimani) ───────────────── */
/*
 * Classic Rub el Hizb / eight-point star formed by two overlapping squares.
 * Tile: 60×60px, gold lines on transparent, tiled at 20% opacity.
 */
.ipat-star8::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='0.8' opacity='0.35'%3E%3C!-- outer square --%3E%3Crect x='10' y='10' width='40' height='40'/%3E%3C!-- rotated square (45deg) --%3E%3Cpolygon points='30,5 55,30 30,55 5,30'/%3E%3C!-- inner octagon --%3E%3Cpolygon points='30,12 42,18 48,30 42,42 30,48 18,42 12,30 18,18'/%3E%3C!-- diagonal cross --%3E%3Cline x1='10' y1='10' x2='50' y2='50'/%3E%3Cline x1='50' y1='10' x2='10' y2='50'/%3E%3C!-- axis cross --%3E%3Cline x1='30' y1='5' x2='30' y2='55'/%3E%3Cline x1='5' y1='30' x2='55' y2='30'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-repeat: repeat;
}

/* ─── Pattern 2: Arabesque / Khatam interlace ────────────────────────── */
/*
 * Six-fold interlocking petals — common in Mamluk / Ottoman decorative arts.
 * Tile: 80×92px (hexagonal repeat), very fine lines at low opacity.
 */
.ipat-arabesque::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='0.7' opacity='0.28'%3E%3C!-- Six-petal flower at centre --%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='40' cy='20' r='20'/%3E%3Ccircle cx='40' cy='60' r='20'/%3E%3Ccircle cx='22.7' cy='30' r='20'/%3E%3Ccircle cx='57.3' cy='30' r='20'/%3E%3Ccircle cx='22.7' cy='50' r='20'/%3E%3Ccircle cx='57.3' cy='50' r='20'/%3E%3C!-- Outer guide square --%3E%3Crect x='5' y='5' width='70' height='70'/%3E%3C!-- Corner triangles --%3E%3Cpolygon points='5,5 25,5 5,25'/%3E%3Cpolygon points='75,5 55,5 75,25'/%3E%3Cpolygon points='5,75 25,75 5,55'/%3E%3Cpolygon points='75,75 55,75 75,55'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-repeat: repeat;
}

/* ─── Pattern 3: Mashrabiya fine lattice ─────────────────────────────── */
/*
 * Small diamond-grid lattice inspired by carved wooden Mashrabiya screens.
 * Very dense, very subtle — best for light sand backgrounds.
 */
.ipat-lattice::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%230C2418' stroke-width='0.5' opacity='0.12'%3E%3C!-- diamond grid --%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z'/%3E%3Cpath d='M0,0 L20,20 M40,0 L20,20 M0,40 L20,20 M40,40 L20,20'/%3E%3C!-- inner diamond --%3E%3Cpath d='M20,10 L30,20 L20,30 L10,20 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-repeat: repeat;
}

/* ─── Pattern 4 & 5: Decorative border bands ─────────────────────────── */
/*
 * A repeating star-and-chevron band — used as a top or top+bottom border
 * on sections. Applied via ::before (top) and ::after (bottom).
 * Height: 8px. Does NOT cover full section — only the border strip.
 */

.ipat-border-top,
.ipat-border-both {
    position: relative;
}

.ipat-border-top > *,
.ipat-border-both > * {
    position: relative;
    z-index: 1;
}

.ipat-border-top::before,
.ipat-border-both::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8'%3E%3Cg fill='%23C9A227' opacity='0.6'%3E%3Cpolygon points='16,0 20,3 16,6 12,3'/%3E%3Cpolygon points='0,0 4,3 0,6'/%3E%3Cpolygon points='32,0 28,3 32,6'/%3E%3Cline x1='0' y1='4' x2='32' y2='4' stroke='%23C9A227' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 32px 8px;
    background-repeat: repeat-x;
    background-position: top left;
    height: 8px;
    bottom: auto;
    top: 0;
    left: 0;
    right: 0;
    inset: 0 0 auto 0;
}

.ipat-border-both::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8'%3E%3Cg fill='%23C9A227' opacity='0.6'%3E%3Cpolygon points='16,2 20,5 16,8 12,5'/%3E%3Cpolygon points='0,2 4,5 0,8'/%3E%3Cpolygon points='32,2 28,5 32,8'/%3E%3Cline x1='0' y1='4' x2='32' y2='4' stroke='%23C9A227' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 32px 8px;
    background-repeat: repeat-x;
    background-position: bottom left;
}

/* ─── Utility modifiers ───────────────────────────────────────────────── */

/* Increase pattern visibility on very dark (teal) backgrounds */
.ipat-star8.ipat-on-dark::before,
.ipat-arabesque.ipat-on-dark::before,
.ipat-lattice.ipat-on-dark::before {
    filter: brightness(1.8);
}

/* Reduce for subtle sections */
.ipat-star8.ipat-subtle::before  { opacity: 0.4; }
.ipat-arabesque.ipat-subtle::before { opacity: 0.4; }

/* ─── Card top-accent — geometric gold line on card hover ────────────── */
.card-th {
    border-top: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card-th:hover {
    border-top-color: var(--th-gold, #C9A227);
}

/* ─── Section heading decorative underline ───────────────────────────── */
.display-font-decorated {
    position: relative;
    display: inline-block;
}
.display-font-decorated::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='4'%3E%3Cpolygon points='0,0 8,2 16,0 24,2 32,0 32,4 0,4' fill='%23C9A227' opacity='0.7'/%3E%3C/svg%3E");
    background-size: 32px 4px;
    background-repeat: repeat-x;
}

/* ─── Navbar bottom geometric accent line ────────────────────────────── */
.navbar-th {
    border-bottom-width: 0 !important;
    box-shadow: 0 2px 0 0 rgba(201,162,39,0.25),
                0 3px 8px -4px rgba(12,36,24,0.12);
}

/* ─── Admin sidebar — subtle lattice on hover state ──────────────────── */
.ad-sidebar .nav-link.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='0.4' opacity='0.15'%3E%3Cpath d='M10,0 L20,10 L10,20 L0,10 Z'/%3E%3Cpath d='M10,5 L15,10 L10,15 L5,10 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ─── Pricing / stat cards — arabesque watermark ─────────────────────── */
.stat-card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%230C2418' stroke-width='0.4' opacity='0.04'%3E%3Crect x='10' y='10' width='40' height='40'/%3E%3Cpolygon points='30,5 55,30 30,55 5,30'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-repeat: repeat;
}

/* ─── Lantern background element ─────────────────────────────────────── */
/*
 * Adds the Islamic lantern SVG as a large, centered, faded background
 * decoration inside any hero/section with the .hero-lantern class.
 * The lantern sits absolutely positioned, never disrupts text layout.
 *
 * Usage: add class="... hero-lantern" to the hero wrapper element.
 * Works on both dark (.bg-teal) and light backgrounds — opacity is
 * low enough (12%) to be atmospheric without obscuring text.
 */
.hero-lantern {
    position: relative;
    overflow: hidden;
}

.hero-lantern > * {
    position: relative;
    z-index: 1;
}

.hero-lantern::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 90%);
    height: 140%;
    background-image: url('/images/lantern.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0.13;
    pointer-events: none;
    z-index: 0;
    /* Warm gold tint on dark backgrounds */
    filter: drop-shadow(0 0 40px rgba(201,162,39,0.4));
}

/* On very light/sand backgrounds, reduce further */
.hero-lantern.hero-lantern-light::after {
    opacity: 0.07;
    filter: none;
}

/* Slightly more visible on the homepage carousel slides */
.hero-lantern-carousel::after {
    opacity: 0.16;
}

/* ── Lantern position variants ─────────────────────────────────────────
 * Apply one of these alongside .hero-lantern to shift the lantern
 * position per-section so consecutive sections don't look identical.
 */

/* Shift right — for Umrah/Hajj band */
.hero-lantern-right::after {
    left: 72%;
    opacity: 0.11;
}

/* Shift left — for newsletter strip */
.hero-lantern-left::after {
    left: 28%;
    opacity: 0.11;
}

/* Smaller lantern for footer (less height to fill) */
footer.hero-lantern::after {
    width: min(320px, 60%);
    opacity: 0.09;
}

/* Visa/contact/blog pages — slightly smaller to not dwarf the text */
.hero-lantern-sm::after {
    width: min(320px, 70%);
    opacity: 0.10;
}