/**
 * Hello Middleton - Site Layout System
 * Wider site layout for better screen real estate usage
 *
 * @requires tokens.css
 * @since 2.1.4
 */

/* ==========================================================================
   WIDER SITE LAYOUT - Container Overrides
   ========================================================================== */

/* Override default container width - use more screen space */
.container,
.elementor-section.elementor-section-boxed > .elementor-container,
.site-content .container,
#primary .container,
.content-area .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* Full-width sections should truly be full width */
.elementor-section-full_width,
.elementor-section.elementor-section-full_width > .elementor-container,
.e-con.e-con-full,
[data-settings*="full_width"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   CUSTOM SECTIONS - Wider Layout
   ========================================================================== */

.unified-news-hub,
.community-talk,
.hm-ticker-wrap,
.weather-bar,
.hm-quick-actions,
.hm-stats-mini,
.hm-main-content-row {
    max-width: 1600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Elementor containers in our page should be full width */
.elementor-widget-shortcode {
    width: 100%;
}

/* ==========================================================================
   HEADER & FOOTER - Wider Layout
   ========================================================================== */

/* Site header should also be wider */
.site-header .container,
.masthead .container,
#masthead .container,
.site-header-wrapper .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* Footer should match */
.site-footer .container,
#colophon .container,
footer .container {
    max-width: 1600px !important;
    width: 95% !important;
}

/* ==========================================================================
   GRID ADJUSTMENTS - Large Screens
   ========================================================================== */

/* Adjust news hub grid for wider layout - more columns on large screens */
@media (min-width: 1400px) {
    .unh-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .unh-card-featured {
        grid-column: span 2;
        grid-row: span 2;
    }

    .ct-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1600px) {
    .unh-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .ct-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   MAIN CONTENT ROW - Proportions
   ========================================================================== */

/* Main content row - adjust proportions for wider layout */
@media (min-width: 1200px) {
    .hm-news-hub-column {
        flex: 1 1 75% !important;
    }

    .hm-sidebar-column {
        flex: 0 0 23% !important;
        min-width: 320px;
    }
}

/* ==========================================================================
   BUDDYPRESS / BUDDYX - Wider Layout
   ========================================================================== */

.buddypress-wrap .bp-wrap,
.buddypress-wrap .bp-dir-vert-nav,
.buddypress .bp-wrap {
    max-width: 1600px;
    margin: 0 auto;
}

/* ==========================================================================
   CONTENT AREAS
   ========================================================================== */

/* Content area within pages */
.site-content,
.content-area,
#primary,
#main {
    max-width: 100%;
}

/* Ensure the boxed layout option doesn't constrain us */
body.boxed-layout .container,
body.site-boxed-layout .container {
    max-width: 1600px !important;
}

/* ==========================================================================
   RESPONSIVE - Tablet & Below (max-width: 1200px)
   ========================================================================== */

@media (max-width: 1200px) {
    .container,
    .unified-news-hub,
    .community-talk,
    .hm-ticker-wrap,
    .weather-bar,
    .hm-quick-actions {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==========================================================================
   RESPONSIVE - Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    main,
    .site-main,
    #primary {
        padding: 12px !important;
    }

    .container,
    .site-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .container,
    .site-content .container {
        max-width: 100% !important;
        width: 100% !important;
    }
}