/* ==========================================================================
   Brand Equestrian Background Patterns
   Pure CSS implementation using inline SVG data URIs.
   Zero JavaScript required.
   All pattern opacities at or below 0.08 for text readability.
   ========================================================================== */

/* Horseshoe U-shape repeat pattern
   Warm brown (#8B6914), opacity 0.06 */
.pattern-horseshoe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 45c0-11 5-20 15-20s15 9 15 20' fill='none' stroke='%238B6914' stroke-width='2' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    background-repeat: repeat;
}

/* Horse galloping silhouette pattern
   Warm brown (#8B6914), opacity 0.04 */
.pattern-gallop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 20c-5 0-10 5-15 15s-5 15 0 20c5-5 10-10 15-15s10-10 15-15c-5-5-10-5-15-5z' fill='%238B6914' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    background-repeat: repeat;
}

/* Desert dune wave pattern
   Warm brown (#8B6914), opacity 0.05 */
.pattern-desert {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath d='M0 15 Q25 0 50 15 Q75 30 100 15' fill='none' stroke='%238B6914' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 200px 40px;
    background-repeat: repeat;
}

/* Wheat/grass organic vertical lines pattern
   Warm brown (#8B6914), opacity 0.05 */
.pattern-wheat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 Q22 10 20 20 Q18 30 20 40' fill='none' stroke='%238B6914' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-repeat: repeat;
}

/* Override class to remove any pattern */
.pattern-none {
    background-image: none !important;
}

/* Simplify and reduce patterns on small screens for performance */
@media (max-width: 480px) {
    .pattern-horseshoe {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 45c0-11 5-20 15-20s15 9 15 20' fill='none' stroke='%238B6914' stroke-width='2' opacity='0.03'/%3E%3C/svg%3E");
        background-size: 80px 80px;
    }

    .pattern-gallop {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 20c-5 0-10 5-15 15s-5 15 0 20c5-5 10-10 15-15s10-10 15-15c-5-5-10-5-15-5z' fill='%238B6914' opacity='0.02'/%3E%3C/svg%3E");
        background-size: 100px 100px;
    }

    .pattern-desert {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath d='M0 15 Q25 0 50 15 Q75 30 100 15' fill='none' stroke='%238B6914' stroke-width='1' opacity='0.03'/%3E%3C/svg%3E");
        background-size: 140px 28px;
    }

    .pattern-wheat {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 Q22 10 20 20 Q18 30 20 40' fill='none' stroke='%238B6914' stroke-width='1' opacity='0.03'/%3E%3C/svg%3E");
        background-size: 60px 60px;
    }
}