/**
 * Theme Name:     Storefront Child
 * Author:         Automattic
 * Template:       storefront
 * Text Domain:	   storefront-child
 * Description:    Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
 */
/* Social login integration with Directories Pro */
.drts-login-form .nsl-container {
    margin-top: 20px;
}

.drts-social-separator {
    text-align: center;
    margin: 20px 0 15px;
    position: relative;
    color: #666;
}

.drts-social-separator:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
}

.drts-social-separator {
    background: #fff;
    padding: 0 10px;
    display: inline-block;
    position: relative;
}

/* Style for Slack button specifically */
.nsl-button-slack {
    background-color: #4A154B !important;
}

.nsl-button-slack:hover {
    background-color: #611f69 !important;
}

/* Modal specific styling */
.drts-modal .nsl-container {
    padding: 0 20px;
}
/* Make thumbnail appear clickable */
.drts-display-element-entity_field_field_thumbnail-1 {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Optional: Add hover effect */
a:hover .drts-display-element-entity_field_field_thumbnail-1 {
    opacity: 0.8;
}
/* Full-height two-column layout */
.sidebar-layout-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left column - page content */
.content-column {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    background: #fff;
}

/* Right column - posts sidebar */
.sidebar-column {
    width: 400px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    background: #f5f5f5;
    border-left: 1px solid #e0e0e0;
    padding: 20px;
    flex-shrink: 0;
}

/* Override Storefront defaults for this template */
.page-template-template-posts-sidebar .site-content,
.page-template-template-posts-sidebar .content-area {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.page-template-template-posts-sidebar .site-main {
    margin: 0;
}

/* Hide sidebar on mobile */
@media (max-width: 768px) {
    .sidebar-layout-container {
        flex-direction: column;
    }
    
    .sidebar-column {
        width: 100%;
        height: auto;
        position: relative;
    }
}