/*
 * Public layout customizer layer.
 * It is loaded after the original styles so saved options adjust the layout
 * without modifying the site's content or the responsive mobile rules.
 */

.site-layout .container {
    max-width: var(--mcbtsi-layout-width);
}

.layout-spacing-80 .section,
.layout-spacing-80 .join-us,
.layout-spacing-80 .events-page {
    padding-block: 80px;
}

.layout-spacing-120 .section,
.layout-spacing-120 .join-us,
.layout-spacing-120 .events-page {
    padding-block: 120px;
}

.layout-spacing-150 .section,
.layout-spacing-150 .join-us,
.layout-spacing-150 .events-page {
    padding-block: 150px;
}

/* Use the chosen primary colour for consistently recognizable interactive elements. */
.layout-primary-custom .section-label,
.layout-primary-custom .event-date,
.layout-primary-custom .hero h1 span,
.layout-primary-custom .stats-card h2,
.layout-primary-custom .about-stat-card h3,
.layout-primary-custom .service-icon,
.layout-primary-custom .join-icon,
.layout-primary-custom .logo span,
.layout-primary-custom .footer span {
    color: var(--mcbtsi-layout-primary) !important;
}

.layout-primary-custom .btn-primary,
.layout-primary-custom .lead-chat__submit,
.layout-primary-custom .event-highlight-card__hint {
    background: var(--mcbtsi-layout-primary) !important;
    border-color: var(--mcbtsi-layout-primary) !important;
    color: var(--mcbtsi-layout-on-primary) !important;
}

.layout-primary-custom .btn-primary:hover,
.layout-primary-custom .btn-primary:focus-visible,
.layout-primary-custom .lead-chat__submit:hover,
.layout-primary-custom .lead-chat__submit:focus-visible {
    filter: brightness(.9);
}

.layout-primary-custom .btn-secondary,
.layout-primary-custom .theme-toggle,
.layout-primary-custom .event-highlight-card {
    border-color: var(--mcbtsi-layout-primary) !important;
}

/* Keep the editable hero badge in sync with the administrator's primary colour. */
.layout-primary-custom .hero-badge {
    background: color-mix(in srgb, var(--mcbtsi-layout-primary) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--mcbtsi-layout-primary) 45%, transparent) !important;
    color: var(--mcbtsi-layout-primary) !important;
}

.layout-primary-custom .stats-card:hover,
.layout-primary-custom .about-stat-card:hover,
.layout-primary-custom .service-card:hover,
.layout-primary-custom .team-card:hover,
.layout-primary-custom .join-card:hover {
    border-color: var(--mcbtsi-layout-primary) !important;
}

/* Keep the original mixed corner design unless a uniform shape is selected. */
.layout-radius-16 .stats-card,
.layout-radius-16 .about-stat-card,
.layout-radius-16 .service-card,
.layout-radius-16 .team-card,
.layout-radius-16 .join-card,
.layout-radius-16 .contact-form,
.layout-radius-16 .event-content,
.layout-radius-16 .event-gallery,
.layout-radius-16 .about-box {
    border-radius: 16px !important;
}

.layout-radius-28 .stats-card,
.layout-radius-28 .about-stat-card,
.layout-radius-28 .service-card,
.layout-radius-28 .team-card,
.layout-radius-28 .join-card,
.layout-radius-28 .contact-form,
.layout-radius-28 .event-content,
.layout-radius-28 .event-gallery,
.layout-radius-28 .about-box {
    border-radius: 28px !important;
}

.layout-radius-40 .stats-card,
.layout-radius-40 .about-stat-card,
.layout-radius-40 .service-card,
.layout-radius-40 .team-card,
.layout-radius-40 .join-card,
.layout-radius-40 .contact-form,
.layout-radius-40 .event-content,
.layout-radius-40 .event-gallery,
.layout-radius-40 .about-box {
    border-radius: 40px !important;
}

/* The secondary colour is deliberately used only for dark surfaces. */
html[data-theme="dark"] body.site-layout.layout-secondary-custom {
    background: var(--mcbtsi-layout-secondary);
}

html[data-theme="dark"] body.site-layout.layout-secondary-custom .navbar,
html[data-theme="dark"] body.site-layout.layout-secondary-custom .footer {
    background: color-mix(in srgb, var(--mcbtsi-layout-secondary) 92%, #000000);
}

html[data-theme="dark"] body.site-layout.layout-secondary-custom .hero {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--mcbtsi-layout-primary) 20%, transparent), transparent 35%),
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--mcbtsi-layout-primary) 14%, transparent), transparent 30%),
        var(--mcbtsi-layout-secondary);
}

/* Let the same primary colour remain visible and readable in light mode. */
html[data-theme="light"] body.layout-primary-custom .section-label,
html[data-theme="light"] body.layout-primary-custom .hero h1 span,
html[data-theme="light"] body.layout-primary-custom .stats-card h2,
html[data-theme="light"] body.layout-primary-custom .about-stat-card h3 {
    color: var(--mcbtsi-layout-primary) !important;
}

/* Optional navigation treatments keep the original navigation available as a reset-safe choice. */
html[data-theme="dark"] .layout-nav-solid .navbar {
    background: var(--mcbtsi-layout-secondary);
    backdrop-filter: none;
}

html[data-theme="light"] .layout-nav-solid .navbar {
    background: #ffffff;
    box-shadow: 0 3px 16px rgba(15, 23, 42, .08);
}

.layout-nav-glass .navbar {
    backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 8px 30px rgba(2, 6, 23, .12);
}

.layout-nav-compact .nav-container {
    padding-block: 12px;
}

.layout-nav-compact .logo img {
    height: 42px;
}

/* Optional card treatments apply across content cards, while the default keeps their original styling. */
.layout-card-style-outlined .stats-card,
.layout-card-style-outlined .about-stat-card,
.layout-card-style-outlined .service-card,
.layout-card-style-outlined .team-card,
.layout-card-style-outlined .join-card,
.layout-card-style-outlined .contact-form,
.layout-card-style-outlined .event-content {
    border-color: color-mix(in srgb, var(--mcbtsi-layout-primary) 55%, #94a3b8) !important;
}

.layout-card-style-flat .stats-card,
.layout-card-style-flat .about-stat-card,
.layout-card-style-flat .service-card,
.layout-card-style-flat .team-card,
.layout-card-style-flat .join-card,
.layout-card-style-flat .contact-form,
.layout-card-style-flat .event-content {
    box-shadow: none !important;
}

html[data-theme="dark"] .layout-card-style-flat .stats-card,
html[data-theme="dark"] .layout-card-style-flat .about-stat-card,
html[data-theme="dark"] .layout-card-style-flat .service-card,
html[data-theme="dark"] .layout-card-style-flat .team-card,
html[data-theme="dark"] .layout-card-style-flat .join-card,
html[data-theme="dark"] .layout-card-style-flat .contact-form,
html[data-theme="dark"] .layout-card-style-flat .event-content {
    background: color-mix(in srgb, var(--mcbtsi-layout-secondary) 82%, #ffffff) !important;
}

.layout-card-style-glass .stats-card,
.layout-card-style-glass .about-stat-card,
.layout-card-style-glass .service-card,
.layout-card-style-glass .team-card,
.layout-card-style-glass .join-card,
.layout-card-style-glass .contact-form,
.layout-card-style-glass .event-content {
    backdrop-filter: blur(16px) saturate(1.2);
    border-color: color-mix(in srgb, var(--mcbtsi-layout-primary) 45%, #ffffff) !important;
}

html[data-theme="dark"] .layout-card-style-glass .stats-card,
html[data-theme="dark"] .layout-card-style-glass .about-stat-card,
html[data-theme="dark"] .layout-card-style-glass .service-card,
html[data-theme="dark"] .layout-card-style-glass .team-card,
html[data-theme="dark"] .layout-card-style-glass .join-card,
html[data-theme="dark"] .layout-card-style-glass .contact-form,
html[data-theme="dark"] .layout-card-style-glass .event-content {
    background: color-mix(in srgb, var(--mcbtsi-layout-secondary) 74%, transparent) !important;
}

@media (min-width: 993px) {
    /* The selected number of stat cards applies only where there is room. */
    .site-layout .hero-stats {
        grid-template-columns: repeat(var(--mcbtsi-layout-hero-stats), minmax(0, 1fr));
    }

    .layout-hero-centered .hero-grid {
        grid-template-columns: minmax(0, 940px);
        justify-content: center;
    }

    .layout-hero-centered .hero-content,
    .layout-hero-centered .hero-buttons {
        justify-content: center;
        text-align: center;
    }

    .layout-hero-centered .hero-stats {
        margin-inline: auto;
        width: min(100%, 760px);
    }

    .layout-cards-2 .services-grid,
    .layout-cards-2 .team-grid,
    .layout-cards-2 .join-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layout-cards-3 .services-grid,
    .layout-cards-3 .team-grid,
    .layout-cards-3 .join-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .layout-cards-4 .services-grid,
    .layout-cards-4 .team-grid,
    .layout-cards-4 .join-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .layout-footer-center .footer-container {
        justify-content: center;
        text-align: center;
    }

    .layout-footer-left .footer-container {
        justify-content: flex-start;
    }

    .layout-type-compact .hero h1 {
        font-size: 64px;
    }

    .layout-type-compact .section-header h2,
    .layout-type-compact .about-content h2,
    .layout-type-compact .contact-info h2 {
        font-size: 46px;
    }

    .layout-type-large .hero h1 {
        font-size: 80px;
    }

    .layout-type-large .section-header h2,
    .layout-type-large .about-content h2,
    .layout-type-large .contact-info h2 {
        font-size: 58px;
    }
}