/**
 * Page-Specific Background Decorations
 */

/* Roof tile pattern overlay */
.page-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* Services page - tools pattern */
.services-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%232E5A3C' d='M50 10L60 30H40L50 10zM30 40h40v10H30V40zM35 55h30v5H35v-5zM40 65h20v25H40V65z'/%3E%3C/svg%3E");
    background-size: 150px;
    background-repeat: repeat;
}

/* Contact page - envelope/message pattern */
.contact-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='15' y='25' width='70' height='50' rx='5' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Cpath d='M15 25L50 55L85 25' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 120px;
    background-repeat: repeat;
}

/* Quote page - clipboard pattern */
.quote-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='15' width='60' height='75' rx='5' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Crect x='35' y='10' width='30' height='15' rx='3' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Cline x1='30' y1='40' x2='70' y2='40' stroke='%232E5A3C' stroke-width='2'/%3E%3Cline x1='30' y1='55' x2='70' y2='55' stroke='%232E5A3C' stroke-width='2'/%3E%3Cline x1='30' y1='70' x2='55' y2='70' stroke='%232E5A3C' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100px;
    background-repeat: repeat;
}

/* Gallery page - image frame pattern */
.gallery-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='10' width='80' height='60' rx='3' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Ccircle cx='30' cy='35' r='8' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Cpath d='M10 55L35 40L60 60L75 50L90 70' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 130px;
    background-repeat: repeat;
}

/* About page - people/team pattern */
.about-decoration {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='15' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3Cpath d='M25 90C25 65 35 55 50 55C65 55 75 65 75 90' fill='none' stroke='%232E5A3C' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100px;
    background-repeat: repeat;
}

/* Roof tiles decoration for hero sections */
.hero-roof-tiles {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cellipse cx='40' cy='35' rx='38' ry='15' fill='%23D4A853'/%3E%3Cellipse cx='40' cy='30' rx='35' ry='12' fill='%23c49643'/%3E%3C/svg%3E");
    background-size: 80px 40px;
    background-repeat: repeat-x;
    opacity: 0.15;
    z-index: 1;
}

/* Floating house icon decorations */
.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-icons span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232E5A3C'%3E%3Cpath d='M12 3L2 12h3v9h6v-6h2v6h6v-9h3L12 3z'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.03;
    animation: float-icon 20s infinite ease-in-out;
}

.floating-icons span:nth-child(1) { left: 5%; top: 20%; animation-delay: 0s; }
.floating-icons span:nth-child(2) { left: 15%; top: 60%; animation-delay: 3s; width: 30px; height: 30px; }
.floating-icons span:nth-child(3) { right: 10%; top: 30%; animation-delay: 6s; width: 50px; height: 50px; }
.floating-icons span:nth-child(4) { right: 20%; top: 70%; animation-delay: 9s; }
.floating-icons span:nth-child(5) { left: 40%; top: 10%; animation-delay: 12s; width: 35px; height: 35px; }

@keyframes float-icon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Section divider with roof shape */
.section-roof-divider {
    position: relative;
    height: 50px;
    overflow: hidden;
}

.section-roof-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 100vw solid transparent;
    border-right: 100vw solid transparent;
    border-bottom: 50px solid var(--bg-light, #f5f6fa);
}