/**
 * Utility Classes
 *
 * Small, reusable helper classes for layout, spacing,
 * visibility, alignment, and common UI patterns.
 *
 * @package TATC
 */


/* -----------------------------------------
   Display
   ----------------------------------------- */

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}


/* -----------------------------------------
   Flexbox
   ----------------------------------------- */

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.align-center {
    align-items: center !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}


/* -----------------------------------------
   Spacing
   ----------------------------------------- */

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: 1rem !important;
}

.mb-3 {
    margin-bottom: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 2rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-6 {
    margin-bottom: 4rem !important;
}

.mb-7 {
    margin-bottom: 6rem !important;
}


.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.5rem !important;
}

.mt-2 {
    margin-top: 1rem !important;
}

.mt-3 {
    margin-top: 1.5rem !important;
}

.mt-4 {
    margin-top: 2rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-6 {
    margin-top: 4rem !important;
}

.mt-7 {
    margin-top: 6rem !important;
}


.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* -----------------------------------------
   Padding
   ----------------------------------------- */

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.5rem !important;
}

.p-2 {
    padding: 1rem !important;
}

.p-3 {
    padding: 1.5rem !important;
}

.p-4 {
    padding: 2rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.p-6 {
    padding: 4rem !important;
}

.px-4 {padding: 0 2rem !important;}


/* -----------------------------------------
   Width
   ----------------------------------------- */

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.max-w-100 {
    max-width: 100% !important;
}


/* -----------------------------------------
   Text Alignment
   ----------------------------------------- */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}


/* -----------------------------------------
   Positioning
   ----------------------------------------- */

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.inset-0 {
    inset: 0 !important;
}


/* -----------------------------------------
   Overflow
   ----------------------------------------- */

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}


/* -----------------------------------------
   Images
   ----------------------------------------- */

.img-fluid {
    display: block;
    width: 100%;
    height: auto;
}

.object-cover {
    object-fit: cover !important;
}

.object-contain {
    object-fit: contain !important;
}


/* -----------------------------------------
   Visibility
   ----------------------------------------- */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* -----------------------------------------
   Borders
   ----------------------------------------- */

.border-none {
    border: 0 !important;
}


/* -----------------------------------------
   Backgrounds
   ----------------------------------------- */

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-blue {
    background-color: var(--color-blue) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-light-blue {
    background-color: var(--color-light-blue) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}


/* -----------------------------------------
   Colors
   ----------------------------------------- */

.text-primary {
    color: var(--color-primary) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-slate {
    color: var(--color-slate) !important;
}


/* -----------------------------------------
   Miscellaneous
   ----------------------------------------- */

.no-decoration {
    text-decoration: none !important;
}

.no-wrap {
    white-space: nowrap !important;
}

.pointer {
    cursor: pointer !important;
}

.full-height {
    height: 100% !important;
}

.min-height-screen {
    min-height: 100vh;
}

/* -----------------------------------------
   Full Bleed Sections
   ----------------------------------------- */

.page-content > .full-bleed {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.page-content > .full-bleed > .wp-block-group__inner-container {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
        width: min(calc(100% - (var(--container-padding) * 2)), var(--container-width));
        margin-inline: auto;
}
.page-content > .full-bleed .wp-block-group__inner-container {
    width: min(calc(100% - (var(--container-padding) * 2)), var(--container-width));
    margin-inline: auto;
}