/**
 * 12-plugins-external.css - ITCSS Plugins & External Integrations Layer
 * 
 * ITCSS Layer: Plugins & External
 * Load Order: 12 of 12 (Final Layer)
 * Consolidation: 1 file → 1 file (plugins-external.css)
 * Dependencies: All previous layers (01-11)
 * 
 * Consolidated Files:
 * └── plugin-instagram.css → Instagram Feed Plugin Integration
 * 
 * System Features:
 * • Third-party plugin styling overrides and integrations
 * • External service customizations (Instagram, social feeds)
 * • Plugin compatibility fixes and enhancements
 * • Custom styling for WordPress plugins
 * • Social media widget integrations
 * • Touch-friendly plugin interface adaptations
 * • Accessibility improvements for plugin outputs
 * 
 * Note: Vendor library files (font-awesome.css, bootstrap.min.css, fancyapps.min.css)
 * remain as separate files and are not consolidated here.
 */

/* ========================================================================
   INSTAGRAM FEED PLUGIN INTEGRATION
   ======================================================================== */

/* === INSTAGRAM FEED BASE STYLES === */
.instagram-feed {
    /* Container styling handled by theme */
}

.instagram-feed p,
.instagram-feed span {
    color: var(--color-text-primary) !important;
}

.instagram-feed h1,
.instagram-feed h2,
.instagram-feed h3 {
    color: var(--color-primary) !important;
}

.instagram-feed .header-text,
.instagram-feed .header-text * {
    color: var(--color-primary) !important;
}

/* === INSTAGRAM FEED LAYOUT === */
#sb_instagram {
    width: 100% !important;
    padding-bottom: 0 !important;
}

#sb_instagram #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

#sb_instagram .sbi_item {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === INSTAGRAM FEED IMAGES === */
#sb_instagram .sbi_photo_wrap {
    position: relative !important;
    padding-top: 100% !important;
    width: 100% !important;
    height: 0 !important;
}

#sb_instagram .sbi_photo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
}

#sb_instagram .sbi_photo img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* === INSTAGRAM FEED CONTROLS === */
#sb_instagram .sbi_playbtn {
    z-index: 1 !important;
    margin: auto !important;
    top: 50% !important;
    left: 50% !important;
}

#sb_instagram #sbi_load {
    float: none !important;
    clear: both !important;
    padding: 20px 0 !important;
    text-align: center !important;
}

#sb_instagram .sb_instagram_header {
    padding: 10px !important;
    margin-bottom: 0 !important;
}

/* === INSTAGRAM FEED BUTTONS === */
.instagram-feed .sbi_load_btn {
    background-color: var(--color-bg-primary) !important;
    color: #000033 !important;
    font-weight: 500 !important;
    padding: 12px 24px !important;
    border: 2px solid #000033 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 10px !important;
}

.instagram-feed .sbi_follow_btn a {
    background-color: #000033 !important;
    color: var(--color-bg-primary) !important;
    font-weight: 500 !important;
    padding: 12px 24px !important;
    border: 2px solid #000033 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 10px !important;
}

.instagram-feed .sbi_follow_btn a,
.instagram-feed .sbi_follow_btn a *,
.instagram-feed .sbi_follow_btn a span {
    color: var(--color-bg-primary) !important;
    background-color: #000033 !important;
}

.instagram-feed .sbi_follow_btn a svg,
.instagram-feed .sbi_follow_btn a path {
    fill: var(--color-bg-primary) !important;
}

/* === INSTAGRAM FEED BUTTON INTERACTIONS === */
.instagram-feed .sbi_load_btn:hover {
    background-color: #f5f5f5 !important;
    opacity: 0.9 !important;
}

.instagram-feed .sbi_follow_btn a:hover {
    background-color: #000066 !important;
    opacity: 0.9 !important;
}

/* ========================================================================
   INSTAGRAM FEED SVG ICON FIXES
   ======================================================================== */

/* === INSTAGRAM LOGO ICONS === */
/* Standardize Instagram logo icons to consistent size */
#sb_instagram .sbi_new_logo,
#sb_instagram .sbi_header_img svg,
.instagram-feed .fa-instagram {
    width: var(--card-icon-size, 24px) !important;
    height: var(--card-icon-size, 24px) !important;
    min-width: var(--card-icon-size, 24px) !important;
    min-height: var(--card-icon-size, 24px) !important;
}

/* === PLAY BUTTON ICONS === */
/* Fix aspect ratio and size for video play buttons */
#sb_instagram .sbi_playbtn svg,
#sb_instagram .sbi_playbtn .fa-play {
    width: var(--card-icon-size-lg, 32px) !important;
    height: var(--card-icon-size-lg, 32px) !important;
    min-width: var(--card-icon-size-lg, 32px) !important;
    min-height: var(--card-icon-size-lg, 32px) !important;
}

/* === UTILITY ICONS === */
/* Copy/share icons - standardize to smaller size */
#sb_instagram svg[viewBox="0 0 512 512"],
.instagram-feed svg[aria-label="Copy"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* === PROFILE IMAGE FIXES === */
#sb_instagram .sbi_header_img {
    width: var(--social-link-size, 40px) !important;
    height: var(--social-link-size, 40px) !important;
    min-width: var(--social-link-size, 40px) !important;
    min-height: var(--social-link-size, 40px) !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: var(--radius-md, 8px) !important;
}

#sb_instagram .sbi_header_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* === GENERAL SVG IMPROVEMENTS === */
#sb_instagram svg {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* === ACCESSIBILITY IMPROVEMENTS === */
/* Ensure proper touch targets for mobile accessibility */
#sb_instagram .sbi_playbtn {
    min-width: var(--touch-target-min-height, 44px) !important;
    min-height: var(--touch-target-min-height, 44px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================================================
   INSTAGRAM FEED MOBILE RESPONSIVE
   ======================================================================== */

@media (max-width: 767px) {
    /* === MOBILE ICON ADJUSTMENTS === */
    /* Slightly smaller icons on mobile for better fit */
    #sb_instagram .sbi_new_logo,
    #sb_instagram .sbi_header_img svg,
    .instagram-feed .fa-instagram {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    #sb_instagram .sbi_playbtn svg,
    #sb_instagram .sbi_playbtn .fa-play {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    #sb_instagram svg[viewBox="0 0 512 512"],
    .instagram-feed svg[aria-label="Copy"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }

    /* === MOBILE GRID ADJUSTMENTS === */
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* === MOBILE BUTTON ADJUSTMENTS === */
    .instagram-feed .sbi_load_btn,
    .instagram-feed .sbi_follow_btn a {
        font-size: 14px !important;
        padding: 10px 20px !important;
        margin: 8px !important;
    }
}

/* ========================================================================
   ADDITIONAL PLUGIN INTEGRATIONS
   ======================================================================== */

/* === GOOGLE REVIEWS WIDGET COMPATIBILITY === */
/* Note: Main Google Reviews styles are integrated into the card system (06-cards-base.css) 
   and responsive fixes (10-responsive.css). This ensures consistent theming. */

/* === WORDPRESS PLUGIN COMPATIBILITY === */
/* Generic plugin container improvements for better theme integration */
body.theme-pt .wp-block-embed,
body.theme-pt .wp-block-embed__wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.theme-pt .wp-block-embed iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
}

/* === SOCIAL MEDIA EMBED IMPROVEMENTS === */
/* Ensure social embeds integrate well with theme styling */
body.theme-pt .wp-block-embed.is-type-video iframe,
body.theme-pt .wp-block-embed.is-type-rich iframe {
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
}

/* ========================================================================
   PLUGIN RESPONSIVE NOTES
   ======================================================================== */

/*
 * Plugin Integration Strategy:
 * - Override plugin default styles to match theme design system
 * - Use CSS custom properties for consistent theming
 * - Ensure accessibility standards are maintained
 * - Provide mobile-responsive adaptations
 * - Maintain plugin functionality while improving appearance
 * 
 * Instagram Feed Plugin:
 * - Custom grid layout overriding plugin defaults
 * - Consistent button styling matching theme buttons
 * - Icon standardization and accessibility improvements
 * - Mobile-responsive grid and touch targets
 * 
 * Future Plugin Integrations:
 * - Add new plugin styles following the same pattern
 * - Use theme CSS variables for consistent styling
 * - Test accessibility and mobile responsiveness
 * - Document plugin-specific customizations
 */