/* ============================================
   Templates Base Styles - CONSOLIDATED
   Purposeful Media Design System
   Version: 2.0
   Dependencies: variables-v4.0-20251027.css
   Date: 2025-11-07

   Purpose: Unified template-level layout and background styling
   for all page templates with DesktopPlus containerization

   Consolidates: All 6 individual template CSS files into one
   - templates-pillar-page.css
   - templates-homepage.css
   - templates-interior-page.css
   - templates-about-contact-page.css
   - templates-blog-page.css
   - templates-resource-page.css

   WordPress Migration: Use wp_enqueue_style() to load this file
   for all page templates
   ============================================ */

/* =================================================================
   PAGE WRAPPERS - Content Container Base Styles
   All template wrapper classes share identical behavior
   ================================================================= */

.page-wrapper,
.homepage-wrapper,
.interior-wrapper,
.about-contact-wrapper,
.blog-page-wrapper,
.resource-page-wrapper {
    position: relative;
    width: 100%;
}

/* =================================================================
   DESKTOPPLUS BREAKPOINT (1920px+)
   Containerize content and add background pattern
   ================================================================= */

@media (min-width: 1920px) {
    .page-wrapper,
    .homepage-wrapper,
    .interior-wrapper,
    .about-contact-wrapper,
    .blog-page-wrapper,
    .resource-page-wrapper {
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
    }

    /* Background pattern extending beyond content */
    .page-wrapper::before,
    .homepage-wrapper::before,
    .interior-wrapper::before,
    .about-contact-wrapper::before,
    .blog-page-wrapper::before,
    .resource-page-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background: url('https://purposefulmediapromotions.com/staging/2182/wp-content/uploads/2025/11/Tile-cell-@3x.png') repeat;
        background-size: 200px 200px;
        opacity: 0.15; /* Subtle pattern */
        z-index: -1;
        pointer-events: none;
    }

    /* Ensure all direct children respect the container */
    .page-wrapper > *,
    .homepage-wrapper > *,
    .interior-wrapper > *,
    .about-contact-wrapper > *,
    .blog-page-wrapper > *,
    .resource-page-wrapper > * {
        position: relative;
        z-index: 1;
    }

    /* Preserve sticky positioning for sticky menu */
    .page-wrapper > .pm-sticky-menu {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 1000;
    }
}

/* =================================================================
   FALLBACK for when Tile cell .png doesn't load
   Use a subtle gradient instead
   ================================================================= */

@supports not (background: url('../assets/patterns/Tile cell .png')) {
    @media (min-width: 1920px) {
        .page-wrapper::before,
        .homepage-wrapper::before,
        .interior-wrapper::before,
        .about-contact-wrapper::before,
        .blog-page-wrapper::before,
        .resource-page-wrapper::before {
            background: linear-gradient(
                135deg,
                var(--bg-secondary) 0%,
                var(--bg-primary) 50%,
                var(--bg-secondary) 100%
            );
            opacity: 0.03;
        }
    }
}

/* =================================================================
   OPTIONAL: Alternative background patterns
   Uncomment one of these if you want a different effect
   ================================================================= */

/*
 * Diagonal stripes pattern
 */
/*
@media (min-width: 1920px) {
    .page-wrapper::before,
    .homepage-wrapper::before,
    .interior-wrapper::before,
    .about-contact-wrapper::before,
    .blog-page-wrapper::before,
    .resource-page-wrapper::before {
        background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 20px,
            rgba(27, 20, 100, 0.02) 20px,
            rgba(27, 20, 100, 0.02) 40px
        );
    }
}
*/

/*
 * Dot grid pattern
 */
/*
@media (min-width: 1920px) {
    .page-wrapper::before,
    .homepage-wrapper::before,
    .interior-wrapper::before,
    .about-contact-wrapper::before,
    .blog-page-wrapper::before,
    .resource-page-wrapper::before {
        background-image: radial-gradient(
            circle at 1px 1px,
            rgba(27, 20, 100, 0.05) 1px,
            transparent 0
        );
        background-size: 40px 40px;
    }
}
*/

/* =================================================================
   END OF TEMPLATES BASE STYLES
   ================================================================= */