/* ==========================================================================
   Responsive Utility Styles
   ONLY using: golden-green (#8B9A46), dark-red (#8B2C2C), pale-yellow (#FFF8DC)
   ========================================================================== */

/* Responsive Breakpoints */
:root {
  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Display Utilities */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

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

.inline {
  display: inline !important;
}

.flex {
  display: flex !important;
}

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

.grid {
  display: grid !important;
}

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

.table {
  display: table !important;
}

.table-cell {
  display: table-cell !important;
}

/* Responsive Display Utilities */
@media (max-width: 639px) {
  .sm-hidden {
    display: none !important;
  }
  
  .xs-block {
    display: block !important;
  }
  
  .xs-flex {
    display: flex !important;
  }
  
  .xs-grid {
    display: grid !important;
  }
}

@media (min-width: 640px) {
  .sm-block {
    display: block !important;
  }
  
  .sm-inline-block {
    display: inline-block !important;
  }
  
  .sm-flex {
    display: flex !important;
  }
  
  .sm-inline-flex {
    display: inline-flex !important;
  }
  
  .sm-grid {
    display: grid !important;
  }
  
  .sm-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md-block {
    display: block !important;
  }
  
  .md-inline-block {
    display: inline-block !important;
  }
  
  .md-flex {
    display: flex !important;
  }
  
  .md-inline-flex {
    display: inline-flex !important;
  }
  
  .md-grid {
    display: grid !important;
  }
  
  .md-hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .lg-block {
    display: block !important;
  }
  
  .lg-inline-block {
    display: inline-block !important;
  }
  
  .lg-flex {
    display: flex !important;
  }
  
  .lg-inline-flex {
    display: inline-flex !important;
  }
  
  .lg-grid {
    display: grid !important;
  }
  
  .lg-hidden {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .xl-block {
    display: block !important;
  }
  
  .xl-inline-block {
    display: inline-block !important;
  }
  
  .xl-flex {
    display: flex !important;
  }
  
  .xl-inline-flex {
    display: inline-flex !important;
  }
  
  .xl-grid {
    display: grid !important;
  }
  
  .xl-hidden {
    display: none !important;
  }
}

/* Flexbox Utilities */
.flex-row {
  flex-direction: row !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.content-around {
  align-content: space-around !important;
}

.content-evenly {
  align-content: space-evenly !important;
}

/* Responsive Flexbox */
@media (min-width: 640px) {
  .sm-flex-row {
    flex-direction: row !important;
  }
  
  .sm-flex-col {
    flex-direction: column !important;
  }
  
  .sm-justify-start {
    justify-content: flex-start !important;
  }
  
  .sm-justify-center {
    justify-content: center !important;
  }
  
  .sm-justify-between {
    justify-content: space-between !important;
  }
  
  .sm-items-start {
    align-items: flex-start !important;
  }
  
  .sm-items-center {
    align-items: center !important;
  }
  
  .sm-items-end {
    align-items: flex-end !important;
  }
}

@media (min-width: 768px) {
  .md-flex-row {
    flex-direction: row !important;
  }
  
  .md-flex-col {
    flex-direction: column !important;
  }
  
  .md-justify-start {
    justify-content: flex-start !important;
  }
  
  .md-justify-center {
    justify-content: center !important;
  }
  
  .md-justify-between {
    justify-content: space-between !important;
  }
  
  .md-items-start {
    align-items: flex-start !important;
  }
  
  .md-items-center {
    align-items: center !important;
  }
  
  .md-items-end {
    align-items: flex-end !important;
  }
}

@media (min-width: 1024px) {
  .lg-flex-row {
    flex-direction: row !important;
  }
  
  .lg-flex-col {
    flex-direction: column !important;
  }
  
  .lg-justify-start {
    justify-content: flex-start !important;
  }
  
  .lg-justify-center {
    justify-content: center !important;
  }
  
  .lg-justify-between {
    justify-content: space-between !important;
  }
  
  .lg-items-start {
    align-items: flex-start !important;
  }
  
  .lg-items-center {
    align-items: center !important;
  }
  
  .lg-items-end {
    align-items: flex-end !important;
  }
}

/* Grid Utilities */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

.grid-cols-auto {
  grid-template-columns: auto !important;
}

.grid-cols-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

.grid-cols-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

/* Responsive Grid */
@media (min-width: 640px) {
  .sm-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  .sm-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .sm-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  .sm-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) {
  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  .md-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  .md-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  
  .md-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .lg-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  
  .lg-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}

/* Gap Utilities */
.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: var(--spacing-1) !important;
}

.gap-2 {
  gap: var(--spacing-2) !important;
}

.gap-3 {
  gap: var(--spacing-3) !important;
}

.gap-4 {
  gap: var(--spacing-4) !important;
}

.gap-5 {
  gap: var(--spacing-5) !important;
}

.gap-6 {
  gap: var(--spacing-6) !important;
}

.gap-8 {
  gap: var(--spacing-8) !important;
}

.gap-10 {
  gap: var(--spacing-10) !important;
}

.gap-12 {
  gap: var(--spacing-12) !important;
}

.gap-16 {
  gap: var(--spacing-16) !important;
}

/* Text Alignment */
.text-left {
  text-align: left !important;
}

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

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

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

/* Responsive Text Alignment */
@media (min-width: 640px) {
  .sm-text-left {
    text-align: left !important;
  }
  
  .sm-text-center {
    text-align: center !important;
  }
  
  .sm-text-right {
    text-align: right !important;
  }
}

@media (min-width: 768px) {
  .md-text-left {
    text-align: left !important;
  }
  
  .md-text-center {
    text-align: center !important;
  }
  
  .md-text-right {
    text-align: right !important;
  }
}

@media (min-width: 1024px) {
  .lg-text-left {
    text-align: left !important;
  }
  
  .lg-text-center {
    text-align: center !important;
  }
  
  .lg-text-right {
    text-align: right !important;
  }
}

/* Spacing Utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-5 { margin: var(--spacing-5) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-8 { margin: var(--spacing-8) !important; }
.m-10 { margin: var(--spacing-10) !important; }
.m-12 { margin: var(--spacing-12) !important; }
.m-16 { margin: var(--spacing-16) !important; }
.m-20 { margin: var(--spacing-20) !important; }
.m-24 { margin: var(--spacing-24) !important; }
.m-auto { margin: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
.mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
.mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
.mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
.mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
.mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
.mx-8 { margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
.my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }
.my-12 { margin-top: var(--spacing-12) !important; margin-bottom: var(--spacing-12) !important; }
.my-16 { margin-top: var(--spacing-16) !important; margin-bottom: var(--spacing-16) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-12 { margin-top: var(--spacing-12) !important; }
.mt-16 { margin-top: var(--spacing-16) !important; }
.mt-20 { margin-top: var(--spacing-20) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-12 { margin-bottom: var(--spacing-12) !important; }
.mb-16 { margin-bottom: var(--spacing-16) !important; }
.mb-20 { margin-bottom: var(--spacing-20) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--spacing-1) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-3 { margin-left: var(--spacing-3) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-6 { margin-left: var(--spacing-6) !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacing-1) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-3 { margin-right: var(--spacing-3) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-6 { margin-right: var(--spacing-6) !important; }
.mr-auto { margin-right: auto !important; }

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-8 { padding: var(--spacing-8) !important; }
.p-10 { padding: var(--spacing-10) !important; }
.p-12 { padding: var(--spacing-12) !important; }
.p-16 { padding: var(--spacing-16) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
.px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
.py-12 { padding-top: var(--spacing-12) !important; padding-bottom: var(--spacing-12) !important; }
.py-16 { padding-top: var(--spacing-16) !important; padding-bottom: var(--spacing-16) !important; }

/* Width Utilities */
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }
.w-1\/2 { width: 50% !important; }
.w-1\/3 { width: 33.333333% !important; }
.w-2\/3 { width: 66.666667% !important; }
.w-1\/4 { width: 25% !important; }
.w-3\/4 { width: 75% !important; }
.w-1\/5 { width: 20% !important; }
.w-2\/5 { width: 40% !important; }
.w-3\/5 { width: 60% !important; }
.w-4\/5 { width: 80% !important; }

/* Max Width Utilities */
.max-w-xs { max-width: 320px !important; }
.max-w-sm { max-width: 384px !important; }
.max-w-md { max-width: 448px !important; }
.max-w-lg { max-width: 512px !important; }
.max-w-xl { max-width: 576px !important; }
.max-w-2xl { max-width: 672px !important; }
.max-w-3xl { max-width: 768px !important; }
.max-w-4xl { max-width: 896px !important; }
.max-w-5xl { max-width: 1024px !important; }
.max-w-6xl { max-width: 1152px !important; }
.max-w-7xl { max-width: 1280px !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen-sm { max-width: 640px !important; }
.max-w-screen-md { max-width: 768px !important; }
.max-w-screen-lg { max-width: 1024px !important; }
.max-w-screen-xl { max-width: 1280px !important; }

/* Container Utilities */
.container-xs { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--spacing-4); }
.container-sm { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--spacing-4); }
.container-md { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--spacing-4); }
.container-lg { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--spacing-4); }
.container-xl { max-width: var(--container-2xl); margin: 0 auto; padding: 0 var(--spacing-4); }

/* Aspect Ratio Utilities */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-4\/3 {
  aspect-ratio: 4 / 3;
}

.aspect-3\/2 {
  aspect-ratio: 3 / 2;
}

/* Position Utilities */
.static { position: static !important; }
.fixed { position: fixed !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.sticky { position: sticky !important; }

/* Overflow Utilities */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* Visibility Utilities */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Screen Reader Only */
.sr-only {
  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;
}

.not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Device-Specific Utilities */
@media (max-width: 767px) {
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
  
  .desktop-only {
    display: block !important;
  }
}

/* Print Utilities */
@media print {
  .print-hidden {
    display: none !important;
  }
  
  .print-block {
    display: block !important;
  }
  
  .print-inline {
    display: inline !important;
  }
  
  .print-inline-block {
    display: inline-block !important;
  }
}

/* Orientation Utilities */
@media (orientation: landscape) {
  .landscape-hidden {
    display: none !important;
  }
  
  .landscape-block {
    display: block !important;
  }
}

@media (orientation: portrait) {
  .portrait-hidden {
    display: none !important;
  }
  
  .portrait-block {
    display: block !important;
  }
}

/* Reduced Motion Utilities */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce-hidden {
    display: none !important;
  }
  
  .motion-safe-hidden {
    display: block !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe-hidden {
    display: none !important;
  }
  
  .motion-reduce-hidden {
    display: block !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .high-contrast-hidden {
    display: none !important;
  }
  
  .high-contrast-block {
    display: block !important;
  }
}

/* Dark Mode Utilities */
@media (prefers-color-scheme: dark) {
  .dark-hidden {
    display: none !important;
  }
  
  .dark-block {
    display: block !important;
  }
}

@media (prefers-color-scheme: light) {
  .light-hidden {
    display: none !important;
  }
  
  .light-block {
    display: block !important;
  }
}

/* Touch Device Utilities */
@media (hover: hover) {
  .hover-enabled-only {
    display: block !important;
  }
  
  .touch-only {
    display: none !important;
  }
}

@media (hover: none) {
  .hover-enabled-only {
    display: none !important;
  }
  
  .touch-only {
    display: block !important;
  }
}

/* Responsive Containers */
@media (min-width: 640px) {
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding: 0 var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding: 0 var(--spacing-8);
  }
}