/* Flexbox utilities
 * Helper classes for flexbox layouts
 * 
 * @package Brro_Flex_Theme
 */

 /* ========================================
   General utilities
   ======================================== */

/* Images */
img {
      max-width: 100%;
      height: auto;
}
.fullwidth {
   width: 100%;
}
.block {
   display: block;
}
/* Screen reader only text - visually hidden but accessible */
.offscreen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: -1;
}

/* ========================================
   RESPONSIVE DISPLAY UTILITIES
   ======================================== */
/* Do not use display:revert on .only.* — it resets flex/block utilities on the same element.
   Restore display per companion class (.flex, .flex-inline, .block); default fallback is block. */

/* Desktop only (1024px and up) */
@media (min-width: 1024px) {
   .only.desk {
       display: block !important;
   }
   .only.desk.flex {
       display: flex !important;
   }
   .only.desk.flex-inline {
       display: inline-flex !important;
   }
   .only.mob:not(.desk),
   .only.tab:not(.desk) {
       display: none !important;
   }
}

/* Tablet only (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
   .only.tab {
       display: block !important;
   }
   .only.tab.flex {
       display: flex !important;
   }
   .only.tab.flex-inline {
       display: inline-flex !important;
   }
   .only.mob:not(.tab),
   .only.desk:not(.tab) {
       display: none !important;
   }
}

/* Mobile only (767px and down) */
@media (max-width: 767px) {
   .only.mob {
       display: block !important;
   }
   .only.mob.flex {
       display: flex !important;
   }
   .only.mob.flex-inline {
       display: inline-flex !important;
   }
   .only.desk:not(.mob),
   .only.tab:not(.mob) {
       display: none !important;
   }
   .def-width-mob {
       width: var(--def-mob)!important;
       margin:0!important;
       box-sizing: border-box;
   }
   .small-width-mob {
       width: var(--small-mob)!important;
       margin:0!important;
       box-sizing: border-box;
   }
   .wide-width-mob {
       width: var(--wide-mob)!important;
       margin:0!important;
       box-sizing: border-box;
   }
}

/* ========================================
   FLEX CONTAINER WRAPPERS
   ======================================== */
.brro-flex-page {
   position: relative;
}

.outer-flex-wrapper { width: 100%; } /* full-bleed background */

.inner-flex-wrapper {
   box-sizing: border-box;
   width: 100%;
   max-width: var(--content-max-desk);
   margin-inline: auto;
   padding-left: var(--gutter-desktop);
   padding-right: var(--gutter-desktop);
}

@media (max-width: 1023px) {
   .inner-flex-wrapper {
      max-width: var(--content-max-tab);
      padding-left: var(--gutter-tablet);
      padding-right: var(--gutter-tablet);
   }
}
@media (max-width: 767px) {
   .inner-flex-wrapper {
      max-width: var(--content-max-mob);
      padding-left: var(--gutter-mobile);
      padding-right: var(--gutter-mobile);
   }
}

/* ========================================
   FLEX CONTAINER CLASSES
   ======================================== */

/* Flex Container */
.flex { display: flex; gap: 0; }
.flex-inline { display: inline-flex; gap: 0; }

/* ========================================
   FLEX FLOW
   Controls the direction (row = horizontal, col = vertical) and wrapping behavior of flex containers.
   Use these classes to set both flex-direction and flex-wrap properties.
   - row: horizontal direction (left to right by default)
   - col: vertical direction (top to bottom by default)
   - wrap: allows items to wrap onto multiple lines/columns
   - nowrap: prevents wrapping, all items stay on a single line/column
   - reverse: reverses the main axis direction
   Examples:
     .row-nowrap            → flex-direction: row; flex-wrap: nowrap;      (horizontal, no wrap)
     .col-wrap              → flex-direction: column; flex-wrap: wrap;     (vertical, wrap)
     .row-reverse-wrap      → flex-direction: row-reverse; flex-wrap: wrap; (horizontal reversed, wrap)
     .col-reverse-nowrap    → flex-direction: column-reverse; flex-wrap: nowrap; (vertical reversed, no wrap)
   Combine with other flex utility classes for advanced layouts.
   ======================================== */
.col-nowrap { flex-flow: column nowrap; }
.col-wrap { flex-flow: column wrap; }
.col-wrap-reverse { flex-flow: column wrap-reverse; }
.col-reverse-nowrap { flex-flow: column-reverse nowrap; }
.col-reverse-wrap { flex-flow: column-reverse wrap; }
.col-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse; }
.row-nowrap { flex-flow: row nowrap; }   
.row-wrap { flex-flow: row wrap; }
.row-wrap-reverse { flex-flow: row wrap-reverse; }
.row-reverse-nowrap { flex-flow: row-reverse nowrap; }
.row-reverse-wrap { flex-flow: row-reverse wrap; }
.row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse; }

/* ========================================
   JUSTIFY CONTENT 
   Main axis/direction alignment:
    Applies to: The main direction of your flex container
    Examples:
    .flex-row → justify-content controls horizontal alignment
    .flex-col → justify-content controls vertical alignment
   ======================================== */

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* ========================================
   ALIGN CONTENT 
   Multi-line/column alignment:
   Applies to: Multi-line flex containers
   Examples:
   .col-wrap → align-content controls horizontal alignment (main axis: column/vertical)
   .row-wrap → align-content controls vertical alignment (main axis: row/horizontal)
   ======================================== */

.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* ========================================
   ALIGN SELF 
   Individual item alignment:
   Applies to: Individual flex items
   Examples:
   .flex-item → align-self controls individual item alignment
   ======================================== */

.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }

/* ========================================
   ALIGN ITEMS 
   Cross axis/direction alignment:
   Applies to: The cross/counter direction of your flex container
   Examples:
   flex-direction: row → align-items controls vertical alignment
   flex-direction: column → align-items controls horizontal alignment
   ======================================== */

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* ========================================
   ORDER UTILITIES
   ======================================== */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }    
.order-13 { order: 13; }
.order-14 { order: 14; }
.order-15 { order: 15; }
.order-16 { order: 16; }
.order-17 { order: 17; }
.order-18 { order: 18; }
.order-19 { order: 19; }
.order-20 { order: 20; }


/* ========================================
   RESPONSIVE UTILITIES
   Desktop first approach - above classes apply to all screen sizes, use tab: and mob: prefixes for tablet and mobile to override
   ======================================== */


@media (max-width: 1023px) {
    .tab\:flex { display: flex !important; gap: 0 !important; }
    .tab\:flex-inline { display: inline-flex !important; gap: 0 !important; }
    .tab\:col-nowrap { flex-flow: column nowrap !important; }
    .tab\:col-wrap { flex-flow: column wrap !important; }
    .tab\:col-wrap-reverse { flex-flow: column wrap-reverse !important; }
    .tab\:col-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
    .tab\:col-reverse-wrap { flex-flow: column-reverse wrap !important; }
    .tab\:col-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
    .tab\:row-nowrap { flex-flow: row nowrap !important; }   
    .tab\:row-wrap { flex-flow: row wrap !important; }
    .tab\:row-wrap-reverse { flex-flow: row wrap-reverse !important; }
    .tab\:row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
    .tab\:row-reverse-wrap { flex-flow: row-reverse wrap !important; }
    .tab\:row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
    .tab\:justify-start { justify-content: flex-start !important; }
    .tab\:justify-end { justify-content: flex-end !important; }
    .tab\:justify-center { justify-content: center !important; }
    .tab\:justify-between { justify-content: space-between !important; }
    .tab\:justify-around { justify-content: space-around !important; }
    .tab\:justify-evenly { justify-content: space-evenly !important; }
    .tab\:content-start { align-content: flex-start !important; }
    .tab\:content-end { align-content: flex-end !important; }
    .tab\:content-center { align-content: center !important; }
    .tab\:content-between { align-content: space-between !important; }
    .tab\:content-around { align-content: space-around !important; }
    .tab\:content-stretch { align-content: stretch !important; }
    .tab\:self-start { align-self: flex-start !important; }
    .tab\:self-end { align-self: flex-end !important; }
    .tab\:self-center { align-self: center !important; }
    .tab\:self-baseline { align-self: baseline !important; }
    .tab\:self-stretch { align-self: stretch !important; }
    .tab\:items-start { align-items: flex-start !important; }
    .tab\:items-end { align-items: flex-end !important; }
    .tab\:items-center { align-items: center !important; }
    .tab\:items-baseline { align-items: baseline !important; }
    .tab\:items-stretch { align-items: stretch !important; }
    .tab\:order-first { order: -9999 !important; }
    .tab\:order-last { order: 9999 !important; }
    .tab\:order-none { order: 0 !important; }
    .tab\:order-1 { order: 1 !important; }
    .tab\:order-2 { order: 2 !important; }
    .tab\:order-3 { order: 3 !important; }
    .tab\:order-4 { order: 4 !important; }
    .tab\:order-5 { order: 5 !important; }
    .tab\:order-6 { order: 6 !important; }
    .tab\:order-7 { order: 7 !important; }
    .tab\:order-8 { order: 8 !important; }
    .tab\:order-9 { order: 9 !important; }
    .tab\:order-10 { order: 10 !important; }
    .tab\:order-11 { order: 11 !important; }
    .tab\:order-12 { order: 12 !important; }    
    .tab\:order-13 { order: 13 !important; }
    .tab\:order-14 { order: 14 !important; }
    .tab\:order-15 { order: 15 !important; }
    .tab\:order-16 { order: 16 !important; }
    .tab\:order-17 { order: 17 !important; }
    .tab\:order-18 { order: 18 !important; }
    .tab\:order-19 { order: 19 !important; }
    .tab\:order-20 { order: 20 !important; }
}

@media (max-width: 767px) {
    .mob\:flex { display: flex !important; gap: 0 !important; }
    .mob\:flex-inline { display: inline-flex !important; gap: 0 !important; }
    .mob\:col-nowrap { flex-flow: column nowrap !important; }
    .mob\:col-wrap { flex-flow: column wrap !important; }
    .mob\:col-wrap-reverse { flex-flow: column wrap-reverse !important; }
    .mob\:col-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
    .mob\:col-reverse-wrap { flex-flow: column-reverse wrap !important; }
    .mob\:col-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
    .mob\:row-nowrap { flex-flow: row nowrap !important; }   
    .mob\:row-wrap { flex-flow: row wrap !important; }
    .mob\:row-wrap-reverse { flex-flow: row wrap-reverse !important; }
    .mob\:row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
    .mob\:row-reverse-wrap { flex-flow: row-reverse wrap !important; }
    .mob\:row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
    .mob\:justify-start { justify-content: flex-start !important; }
    .mob\:justify-end { justify-content: flex-end !important; }
    .mob\:justify-center { justify-content: center !important; }
    .mob\:justify-between { justify-content: space-between !important; }
    .mob\:justify-around { justify-content: space-around !important; }
    .mob\:justify-evenly { justify-content: space-evenly !important; }
    .mob\:content-start { align-content: flex-start !important; }
    .mob\:content-end { align-content: flex-end !important; }
    .mob\:content-center { align-content: center !important; }
    .mob\:content-between { align-content: space-between !important; }
    .mob\:content-around { align-content: space-around !important; }
    .mob\:content-stretch { align-content: stretch !important; }
    .mob\:self-start { align-self: flex-start !important; }
    .mob\:self-end { align-self: flex-end !important; }
    .mob\:self-center { align-self: center !important; }
    .mob\:self-baseline { align-self: baseline !important; }
    .mob\:self-stretch { align-self: stretch !important; }
    .mob\:items-start { align-items: flex-start !important; }
    .mob\:items-end { align-items: flex-end !important; }
    .mob\:items-center { align-items: center !important; }
    .mob\:items-baseline { align-items: baseline !important; }
    .mob\:items-stretch { align-items: stretch !important; }
    .mob\:order-first { order: -9999 !important; }
    .mob\:order-last { order: 9999 !important; }
    .mob\:order-none { order: 0 !important; }
    .mob\:order-1 { order: 1 !important; }
    .mob\:order-2 { order: 2 !important; }
    .mob\:order-3 { order: 3 !important; }
    .mob\:order-4 { order: 4 !important; }
    .mob\:order-5 { order: 5 !important; }
    .mob\:order-6 { order: 6 !important; }
    .mob\:order-7 { order: 7 !important; }
    .mob\:order-8 { order: 8 !important; }
    .mob\:order-9 { order: 9 !important; }
    .mob\:order-10 { order: 10 !important; }
    .mob\:order-11 { order: 11 !important; }
    .mob\:order-12 { order: 12 !important; }    
    .mob\:order-13 { order: 13 !important; }
    .mob\:order-14 { order: 14 !important; }
    .mob\:order-15 { order: 15 !important; }
    .mob\:order-16 { order: 16 !important; }
    .mob\:order-17 { order: 17 !important; }
    .mob\:order-18 { order: 18 !important; }
    .mob\:order-19 { order: 19 !important; }
    .mob\:order-20 { order: 20 !important; }
}