/* ==========================================================================
   MathB Events Theme
   Layout
   ========================================================================== */

/* ==========================================================================
   Containers
   ========================================================================== */

.mathb-container {

    width: min(100% - 2rem, var(--mathb-site-width));

    margin-inline: auto;

}

.mathb-container-wide {

    width: min(100% - 2rem, var(--mathb-container-wide));

    margin-inline: auto;

}

.mathb-container-small {

    width: min(100% - 2rem, var(--mathb-container-small));

    margin-inline: auto;

}

.mathb-container-full {

    width: 100%;

    padding-inline: 2rem;

}

/* ==========================================================================
   Sections
   ========================================================================== */

.mathb-section {

    position: relative;

    padding-block: var(--mathb-section-padding);

}

.mathb-section-sm {

    padding-block: 4rem;

}

.mathb-section-lg {

    padding-block: 9rem;

}

.mathb-section-light {

    background: var(--mathb-color-light);

}

.mathb-section-dark {

    color: var(--mathb-color-text-light);

    background: var(--mathb-color-background);

}

.mathb-section-primary {

    color: var(--mathb-color-text-light);

    background: var(--mathb-color-primary);

}

/* ==========================================================================
   Grid
   ========================================================================== */

.mathb-grid {

    display: grid;

    gap: var(--mathb-grid-gap);

}

.mathb-grid-2 {

    grid-template-columns: repeat(2, 1fr);

}

.mathb-grid-3 {

    grid-template-columns: repeat(3, 1fr);

}

.mathb-grid-4 {

    grid-template-columns: repeat(4, 1fr);

}

.mathb-grid-auto {

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

}

/* ==========================================================================
   Flex
   ========================================================================== */

.mathb-flex {

    display: flex;

}

.mathb-flex-wrap {

    flex-wrap: wrap;

}

.mathb-flex-column {

    flex-direction: column;

}

.mathb-items-start {

    align-items: flex-start;

}

.mathb-items-center {

    align-items: center;

}

.mathb-items-end {

    align-items: flex-end;

}

.mathb-justify-start {

    justify-content: flex-start;

}

.mathb-justify-center {

    justify-content: center;

}

.mathb-justify-between {

    justify-content: space-between;

}

.mathb-justify-end {

    justify-content: flex-end;

}

.mathb-gap-sm {

    gap: .75rem;

}

.mathb-gap {

    gap: 1.5rem;

}

.mathb-gap-lg {

    gap: 3rem;

}

/* ==========================================================================
   Columns
   ========================================================================== */

.mathb-col {

    flex: 1;

}

.mathb-col-auto {

    flex: 0 0 auto;

}

.mathb-col-25 {

    flex: 0 0 25%;

}

.mathb-col-33 {

    flex: 0 0 33.333%;

}

.mathb-col-50 {

    flex: 0 0 50%;

}

.mathb-col-66 {

    flex: 0 0 66.666%;

}

.mathb-col-75 {

    flex: 0 0 75%;

}

.mathb-col-100 {

    flex: 0 0 100%;

}

/* ==========================================================================
   Width Utilities
   ========================================================================== */

.w-100 {

    width: 100%;

}

.w-auto {

    width: auto;

}

.max-content {

    width: max-content;

}

/* ==========================================================================
   Height Utilities
   ========================================================================== */

.h-100 {

    height: 100%;

}

.min-vh-100 {

    min-height: 100vh;

}

/* ==========================================================================
   Page Layouts
   ========================================================================== */

.mathb-page {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

.site-main {

    flex: 1;

}

/* ==========================================================================
   Sidebar Layout
   ========================================================================== */

.mathb-content-layout {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: 4rem;

}

.mathb-content {

    min-width: 0;

}

.mathb-sidebar {

    width: 100%;

}

/* ==========================================================================
   Stack
   ========================================================================== */

.mathb-stack > * + * {

    margin-top: var(--mathb-space-xl);

}

.mathb-stack-sm > * + * {

    margin-top: var(--mathb-space-md);

}

.mathb-stack-lg > * + * {

    margin-top: var(--mathb-space-3xl);

}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-1 { margin-top: var(--mathb-space-sm); }
.mt-2 { margin-top: var(--mathb-space-md); }
.mt-3 { margin-top: var(--mathb-space-lg); }
.mt-4 { margin-top: var(--mathb-space-xl); }
.mt-5 { margin-top: var(--mathb-space-2xl); }

.mb-1 { margin-bottom: var(--mathb-space-sm); }
.mb-2 { margin-bottom: var(--mathb-space-md); }
.mb-3 { margin-bottom: var(--mathb-space-lg); }
.mb-4 { margin-bottom: var(--mathb-space-xl); }
.mb-5 { margin-bottom: var(--mathb-space-2xl); }

.pt-1 { padding-top: var(--mathb-space-sm); }
.pt-2 { padding-top: var(--mathb-space-md); }
.pt-3 { padding-top: var(--mathb-space-lg); }
.pt-4 { padding-top: var(--mathb-space-xl); }
.pt-5 { padding-top: var(--mathb-space-2xl); }

.pb-1 { padding-bottom: var(--mathb-space-sm); }
.pb-2 { padding-bottom: var(--mathb-space-md); }
.pb-3 { padding-bottom: var(--mathb-space-lg); }
.pb-4 { padding-bottom: var(--mathb-space-xl); }
.pb-5 { padding-bottom: var(--mathb-space-2xl); }

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.d-none {

    display: none;

}

.d-block {

    display: block;

}

.d-inline {

    display: inline;

}

.d-inline-block {

    display: inline-block;

}

.d-flex {

    display: flex;

}

.d-grid {

    display: grid;

}

/* ==========================================================================
   Position Utilities
   ========================================================================== */

.position-relative {

    position: relative;

}

.position-absolute {

    position: absolute;

}

.position-fixed {

    position: fixed;

}

/* ==========================================================================
   Overflow
   ========================================================================== */

.overflow-hidden {

    overflow: hidden;

}

.overflow-auto {

    overflow: auto;

}

/* ==========================================================================
   Text Alignment
   ========================================================================== */

.text-left {

    text-align: left;

}

.text-center {

    text-align: center;

}

.text-right {

    text-align: right;

}

/* ==========================================================================
   Visibility
   ========================================================================== */

.hidden {

    display: none !important;

}

.visible {

    display: inherit !important;

}

/* ==========================================================================
   Divider
   ========================================================================== */

.mathb-divider {

    width: 100%;

    height: 1px;

    background: var(--mathb-color-border);

}

/* ==========================================================================
   Anchor Offset
   ========================================================================== */

.anchor-offset {

    scroll-margin-top: calc(
        var(--mathb-header-height) + 2rem
    );

}

/* ==========================================================================
   End
   ========================================================================== */