/* =================================================================
   SYRIAN FLAG BACKGROUND STYLES
   ================================================================= */

/* Syrian Flag Background */
.syrian-flag-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transform: rotate(-3deg) scale(1.2);
    transform-origin: center;
}

.flag-stripe {
    flex: 1;
    position: relative;
    width: 100%;
}

.flag-green {
    background: linear-gradient(135deg, #00a651 0%, #228b22 100%);
}

.flag-white {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.flag-black {
    background: linear-gradient(135deg, #000000 0%, #2c2c2c 100%);
}

/* Flag Stars */
.flag-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8vw;
    position: relative;
    z-index: 2;
}

.flag-star {
    width: 4vw;
    height: 4vw;
    max-width: 50px;
    max-height: 50px;
    min-width: 20px;
    min-height: 20px;
    color: #dc143c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(2vw + 10px);
    position: relative;
}

    /* Use Unicode star character for better mobile compatibility */
    .flag-star::before {
        content: '★';
        color: #dc143c;
        font-size: inherit;
        text-shadow: 0 0 3px rgba(220, 20, 60, 0.5);
    }

/* Fallback: CSS star shape for browsers that support clip-path well */
@supports (clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)) {
    .flag-star {
        background: #dc143c;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

        .flag-star::before {
            content: '';
            background: transparent;
        }
}

/* Alternative Syrian Flag (more subtle, watermark style) */
.enhanced-hero-section.flag-watermark {
    position: relative;
}

    .enhanced-hero-section.flag-watermark::before {
        content: '';
        position: absolute;
        top: 10%;
        right: 5%;
        width: 300px;
        height: 200px;
        background: linear-gradient(to bottom, #00a651 0%, #00a651 33.33%, #ffffff 33.33%, #ffffff 66.66%, #000000 66.66%, #000000 100%);
        opacity: 0.05;
        border-radius: 8px;
        transform: rotate(-15deg);
        z-index: 1;
        pointer-events: none;
    }

    .enhanced-hero-section.flag-watermark::after {
        content: '★ ★ ★';
        position: absolute;
        top: calc(10% + 67px);
        right: calc(5% + 100px);
        color: #dc143c;
        font-size: 16px;
        opacity: 0.1;
        transform: rotate(-15deg);
        z-index: 2;
        pointer-events: none;
        letter-spacing: 20px;
    }

/* Enhanced flag animation */
@keyframes flag-wave {
    0%, 100% {
        transform: rotate(-3deg) scale(1.2) translateY(0);
    }

    25% {
        transform: rotate(-2deg) scale(1.15) translateY(-5px);
    }

    50% {
        transform: rotate(-3.5deg) scale(1.25) translateY(0);
    }

    75% {
        transform: rotate(-2.5deg) scale(1.18) translateY(-3px);
    }
}

.syrian-flag-background {
    animation: flag-wave 20s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .syrian-flag-background {
        height: 50% !important;
        opacity: 0.12; /* Increased visibility on mobile */
        transform: rotate(-2deg) scale(1.3); /* Larger scale for mobile */
    }

    .flag-stars {
        gap: 10vw; /* Closer stars for better visibility */
    }

    .flag-star {
        width: 8vw;
        height: 8vw;
        min-width: 25px; /* Larger minimum size */
        min-height: 25px;
        max-width: 40px;
        max-height: 40px;
    }

    .enhanced-hero-section.flag-watermark::before {
        width: 250px; /* Larger watermark */
        height: 167px;
        top: 10%;
        right: 2%;
        opacity: 0.15; /* More visible */
    }

    .enhanced-hero-section.flag-watermark::after {
        top: calc(10% + 56px);
        right: calc(2% + 83px);
        font-size: 18px; /* Larger stars */
        letter-spacing: 20px;
        opacity: 0.2; /* More visible */
    }
}

@media (max-width: 576px) {
    .syrian-flag-background {
        height: 50% !important;
        opacity: 0.15; /* Even more visible on small screens */
        transform: rotate(-1deg) scale(1.4); /* Even larger */
    }

    .flag-stars {
        gap: 8vw;
    }

    .flag-star {
        width: 10vw;
        height: 10vw;
        min-width: 30px; /* Larger stars on small screens */
        min-height: 30px;
        max-width: 45px;
        max-height: 45px;
    }

    .enhanced-hero-section.flag-watermark::before {
        width: 200px;
        height: 133px;
        opacity: 0.18;
    }

    .enhanced-hero-section.flag-watermark::after {
        font-size: 16px;
        letter-spacing: 15px;
        opacity: 0.25;
    }
}

/* Accessibility - Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .syrian-flag-background {
        animation: none;
        transform: rotate(-3deg) scale(1.2);
    }

    .enhanced-hero-section.flag-watermark::before,
    .enhanced-hero-section.flag-watermark::after {
        transform: rotate(-15deg);
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .syrian-flag-background {
        opacity: 0.02;
   
    }

    .enhanced-hero-section.flag-watermark::before {
        opacity: 0.02;
    }

    .enhanced-hero-section.flag-watermark::after {
        opacity: 0.03;
    }
}