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

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

/* Images */
.outer-flex-wrapper img,
.inner-flex-wrapper 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;
}

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

.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; }
}