/**
 * Fallback Coalition Content Visibility CSS
 * 
 * Provides CSS-only fallback for hiding/showing coalition-specific content
 * based on user body classes. This ensures content targeting works even
 * without JavaScript or when other targeting methods fail.
 * 
 * @package MemberWithCommunityTools
 * @since 1.8.2
 */

/* ==========================================================================
   COALITION CONTENT VISIBILITY FALLBACK
   ========================================================================== */

/**
 * STEP 1: Hide all coalition-specific content by default
 * This ensures content is hidden unless the user has the appropriate coalition
 * Using clean display:none approach to avoid layout interference
 */
.chu-only,
.di-only,
.wc-only,
.campaign-only {
    display: none !important;
}

/**
 * STEP 2: Show content for users with matching coalition body classes
 * Using display:block with layout normalization to ensure proper rendering
 */

/* CHU Coalition Content */
body.chu-user .chu-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
}

/* DI Coalition Content */
body.di-user .di-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
}

/* WithCommunity (unaffiliated) Content */
body.wc-user .wc-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
}

/* Campaign-specific content (any user with campaign body class) */
body[class*="campaign-"] .campaign-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
}

/**
 * STEP 3: Admin override - admins see ALL coalition content
 * Administrators can see content from all coalitions for management purposes
 */
body.admin-user .chu-only,
body.admin-user .di-only,
body.admin-user .wc-only,
body.admin-user .campaign-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
}

/* ==========================================================================
   DIVI MODULE SPECIFIC OVERRIDES
   ========================================================================== */

/**
 * Divi modules with coalition classes
 * Handles both the legacy module classes and new content classes
 * Clean hiding and proper layout normalization for visible content
 */

/* Hide Divi modules with coalition-specific classes */
.et_pb_module.chu-only,
.et_pb_module.di-only,
.et_pb_module.wc-only,
.et_pb_module.campaign-only,
.et_pb_module.campaign-sharing-the-light-only,
.et_pb_module.campaign-protect-only,
.et_pb_module.campaign-special-project-only,
.et_pb_section.chu-only,
.et_pb_section.di-only,
.et_pb_section.wc-only,
.et_pb_section.campaign-only,
.et_pb_section.campaign-sharing-the-light-only,
.et_pb_section.campaign-protect-only,
.et_pb_section.campaign-special-project-only,
.et_pb_row.chu-only,
.et_pb_row.di-only,
.et_pb_row.wc-only,
.et_pb_row.campaign-only,
.et_pb_row.campaign-sharing-the-light-only,
.et_pb_row.campaign-protect-only,
.et_pb_row.campaign-special-project-only {
    display: none !important;
}

/* Show Divi modules for correct coalition users with full layout normalization */
body.chu-user .et_pb_module.chu-only,
body.chu-user .et_pb_section.chu-only,
body.chu-user .et_pb_row.chu-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.di-user .et_pb_module.di-only,
body.di-user .et_pb_section.di-only,
body.di-user .et_pb_row.di-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.wc-user .et_pb_module.wc-only,
body.wc-user .et_pb_section.wc-only,
body.wc-user .et_pb_row.wc-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Show campaign-specific Divi modules for users with matching campaign classes */
body[class*="campaign-"] .et_pb_module.campaign-only,
body[class*="campaign-"] .et_pb_section.campaign-only,
body[class*="campaign-"] .et_pb_row.campaign-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.campaign-sharing_the_light .et_pb_module.campaign-sharing-the-light-only,
body.campaign-sharing_the_light .et_pb_section.campaign-sharing-the-light-only,
body.campaign-sharing_the_light .et_pb_row.campaign-sharing-the-light-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.campaign-protect .et_pb_module.campaign-protect-only,
body.campaign-protect .et_pb_section.campaign-protect-only,
body.campaign-protect .et_pb_row.campaign-protect-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.campaign-special_project .et_pb_module.campaign-special-project-only,
body.campaign-special_project .et_pb_section.campaign-special-project-only,
body.campaign-special_project .et_pb_row.campaign-special-project-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Admin override for Divi modules with full layout normalization */
body.admin-user .et_pb_module.chu-only,
body.admin-user .et_pb_module.di-only,
body.admin-user .et_pb_module.wc-only,
body.admin-user .et_pb_module.campaign-only,
body.admin-user .et_pb_module.campaign-sharing-the-light-only,
body.admin-user .et_pb_module.campaign-protect-only,
body.admin-user .et_pb_module.campaign-special-project-only,
body.admin-user .et_pb_section.chu-only,
body.admin-user .et_pb_section.di-only,
body.admin-user .et_pb_section.wc-only,
body.admin-user .et_pb_section.campaign-only,
body.admin-user .et_pb_section.campaign-sharing-the-light-only,
body.admin-user .et_pb_section.campaign-protect-only,
body.admin-user .et_pb_section.campaign-special-project-only,
body.admin-user .et_pb_row.chu-only,
body.admin-user .et_pb_row.di-only,
body.admin-user .et_pb_row.wc-only,
body.admin-user .et_pb_row.campaign-only,
body.admin-user .et_pb_row.campaign-sharing-the-light-only,
body.admin-user .et_pb_row.campaign-protect-only,
body.admin-user .et_pb_row.campaign-special-project-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   CAMPAIGN-SPECIFIC CONTENT
   ========================================================================== */

/**
 * Campaign-specific classes for targeted content
 * Works with the campaign-{name} body classes generated by body-class-generator.php
 * Clean hiding and proper layout normalization for visible content
 */

/* Hide campaign-specific content by default */
.campaign-sharing-the-light-only,
.campaign-protect-only,
.campaign-special-project-only {
    display: none !important;
}

/* Show for users with matching campaign body classes with full layout normalization */
body.campaign-sharing_the_light .campaign-sharing-the-light-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.campaign-protect .campaign-protect-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

body.campaign-special_project .campaign-special-project-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Admin override for campaign content with full layout normalization */
body.admin-user .campaign-sharing-the-light-only,
body.admin-user .campaign-protect-only,
body.admin-user .campaign-special-project-only {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    margin: revert !important;
    padding: revert !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   RESPONSIVE AND ACCESSIBILITY
   ========================================================================== */

/**
 * Additional Divi-specific display normalization
 * Ensures Divi modules/sections display with their proper flex/grid layouts
 */

/* Divi section normalization - restore flex display for sections when visible */
body.chu-user .et_pb_section.chu-only,
body.di-user .et_pb_section.di-only,
body.wc-user .et_pb_section.wc-only,
body[class*="campaign-"] .et_pb_section.campaign-only,
body.campaign-sharing_the_light .et_pb_section.campaign-sharing-the-light-only,
body.campaign-protect .et_pb_section.campaign-protect-only,
body.campaign-special_project .et_pb_section.campaign-special-project-only,
body.admin-user .et_pb_section.chu-only,
body.admin-user .et_pb_section.di-only,
body.admin-user .et_pb_section.wc-only,
body.admin-user .et_pb_section.campaign-only,
body.admin-user .et_pb_section.campaign-sharing-the-light-only,
body.admin-user .et_pb_section.campaign-protect-only,
body.admin-user .et_pb_section.campaign-special-project-only {
    display: block !important;
}

/* Divi row normalization - restore flex display for rows when visible */
body.chu-user .et_pb_row.chu-only,
body.di-user .et_pb_row.di-only,
body.wc-user .et_pb_row.wc-only,
body[class*="campaign-"] .et_pb_row.campaign-only,
body.campaign-sharing_the_light .et_pb_row.campaign-sharing-the-light-only,
body.campaign-protect .et_pb_row.campaign-protect-only,
body.campaign-special_project .et_pb_row.campaign-special-project-only,
body.admin-user .et_pb_row.chu-only,
body.admin-user .et_pb_row.di-only,
body.admin-user .et_pb_row.wc-only,
body.admin-user .et_pb_row.campaign-only,
body.admin-user .et_pb_row.campaign-sharing-the-light-only,
body.admin-user .et_pb_row.campaign-protect-only,
body.admin-user .et_pb_row.campaign-special-project-only {
    display: flex !important;
}

/* Ensure no layout artifacts remain on hidden content */
.chu-only:not([style*="display: block"]),
.di-only:not([style*="display: block"]),
.wc-only:not([style*="display: block"]),
.campaign-only:not([style*="display: block"]),
.campaign-sharing-the-light-only:not([style*="display: block"]),
.campaign-protect-only:not([style*="display: block"]),
.campaign-special-project-only:not([style*="display: block"]) {
    display: none !important;
}

/* Note: Screen reader accessibility is handled via display: none which is sufficient */

/* ==========================================================================
   DEBUG HELPERS (Only visible when WP_DEBUG is enabled)
   ========================================================================== */

/**
 * Visual indicators for debugging coalition content visibility
 * These classes can be added temporarily for testing purposes
 */
.debug-coalition .chu-only::before { content: "[CHU ONLY] "; color: #ff6b6b; font-weight: bold; }
.debug-coalition .di-only::before { content: "[DI ONLY] "; color: #4ecdc4; font-weight: bold; }
.debug-coalition .wc-only::before { content: "[WC ONLY] "; color: #45b7d1; font-weight: bold; }
.debug-coalition .campaign-only::before { content: "[CAMPAIGN ONLY] "; color: #f9ca24; font-weight: bold; }

/**
 * Usage Instructions:
 * 
 * 1. Add coalition-specific classes to your content:
 *    <div class="chu-only">This content is only for CHU users</div>
 *    <div class="di-only">This content is only for DI users</div>
 *    <div class="wc-only">This content is only for WithCommunity users</div>
 * 
 * 2. For Divi modules, add the class in the CSS Class field:
 *    - Advanced Tab > CSS ID & Classes > CSS Class: "chu-only"
 * 
 * 3. For campaign-specific content:
 *    <div class="campaign-sharing-the-light-only">Sharing the Light campaign content</div>
 * 
 * 4. Admins with admin-user body class will see all content regardless of coalition
 * 
 * 5. For debugging, temporarily add "debug-coalition" class to body element
 * 
 * 6. LAYOUT NORMALIZATION: When content is shown to authorized users, all layout
 *    properties are fully normalized to ensure proper rendering:
 *    - position: static (removes any absolute positioning)
 *    - width/height: auto (restores natural dimensions)
 *    - margins/padding: revert (restores original values)
 *    - overflow: visible (restores content visibility)
 *    - clip/clip-path: none (removes any clipping)
 *    - opacity: 1 (ensures full visibility)
 *    - transform: none (removes any transformations)
 * 
 * 7. CLEAN HIDING: Hidden content uses simple display: none without layout artifacts
 *    - No absolute positioning or off-screen techniques
 *    - No aggressive styling that could interfere with visible content
 *    - Clean separation between hidden and visible states
 */