/* ============================================
   ISLAMIC GEOMETRIC PATTERN - NAVBAR & FOOTER ONLY
   Safe Implementation using Child Elements
   ============================================ */

/* ========== HEADER TOP BAR PATTERN ========== */
.header-top {
    position: relative; /* Enable positioning for pseudo-element */
}

.header-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    pointer-events: none; /* Ensure clicks pass through */
    z-index: 0; /* Behind content */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpolygon points='25,5 35,15 35,25 25,35 15,25 15,15' fill='none' stroke='rgba(255,215,0,0.6)' stroke-width='1'/%3E%3Ccircle cx='25' cy='25' r='15' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='0.5'/%3E%3Cpolygon points='25,10 30,20 25,30 20,20' fill='rgba(255,215,0,0.2)'/%3E%3C/svg%3E");
    background-size: 50px 50px;
    background-repeat: repeat;
}

/* Ensure header-info content stays on top */
.header-info {
    position: relative;
    z-index: 1;
}

/* ========== FOOTER CONTENT PATTERN ========== */
.footer-content {
    position: relative !important; /* Enable positioning for pseudo-element */
}

.footer-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    pointer-events: none; /* Ensure clicks pass through */
    z-index: 0; /* Behind content */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpolygon points='25,5 35,15 35,25 25,35 15,25 15,15' fill='none' stroke='rgba(255,215,0,0.6)' stroke-width='1'/%3E%3Ccircle cx='25' cy='25' r='15' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='0.5'/%3E%3Cpolygon points='25,10 30,20 25,30 20,20' fill='rgba(255,215,0,0.2)'/%3E%3C/svg%3E");
    background-size: 50px 50px;
    background-repeat: repeat;
}

/* Ensure footer-section content stays on top */
.footer-section {
    position: relative;
    z-index: 1;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .header-top::before,
    .footer-content::before {
        background-size: 40px 40px; /* Slightly smaller pattern on mobile */
    }
}

@media (max-width: 480px) {
    .header-top::before,
    .footer-content::before {
        background-size: 35px 35px; /* Even smaller on very small screens */
    }
}