/*
 * mobile-utilities.css — Mobile utility classes for responsive design
 * Use these classes across your HTML to improve mobile responsiveness
 * Pair with layout.css and mobile.css for complete mobile support
 */

/* ══════════════════════════════════════════════════════════
   DISPLAY UTILITIES — hide/show based on screen size
══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 1400px) {
.site-nav-links {
  gap: 20px;
}

}

@media only screen and (max-width: 1199px) {
.site-nav-links {
  gap: 13px;
}
.site-nav {  
  padding: 0 30px;
}

}
/* Hide on mobile, show on desktop */
.hide-mobile {
  display: none !important;
}

@media (min-width: 769px) {
  .hide-mobile {
    display: block !important;
  }

  .hide-mobile.flex {
    display: flex !important;
  }

  .hide-mobile.grid {
    display: grid !important;
  }

  .hide-mobile.inline {
    display: inline !important;
  }

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

/* Show on mobile, hide on desktop */
@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

/* Hide on tablet/large mobile */
@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .show-tablet {
    display: none !important;
  }
}

/* Hide on very small screens */
@media (max-width: 480px) {
  .hide-small {
    display: none !important;
  }
}

@media (min-width: 481px) {
  .show-small {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   SPACING UTILITIES — responsive margin and padding
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Margin reduction on mobile */
  .m-mobile-0 { margin: 0 !important; }
  .m-mobile-xs { margin: 4px !important; }
  .m-mobile-sm { margin: 8px !important; }
  .m-mobile-md { margin: 12px !important; }
  .m-mobile-lg { margin: 16px !important; }
  .m-mobile-xl { margin: 20px !important; }

  .mt-mobile-0 { margin-top: 0 !important; }
  .mt-mobile-xs { margin-top: 4px !important; }
  .mt-mobile-sm { margin-top: 8px !important; }
  .mt-mobile-md { margin-top: 12px !important; }
  .mt-mobile-lg { margin-top: 16px !important; }
  .mt-mobile-xl { margin-top: 20px !important; }

  .mb-mobile-0 { margin-bottom: 0 !important; }
  .mb-mobile-xs { margin-bottom: 4px !important; }
  .mb-mobile-sm { margin-bottom: 8px !important; }
  .mb-mobile-md { margin-bottom: 12px !important; }
  .mb-mobile-lg { margin-bottom: 16px !important; }
  .mb-mobile-xl { margin-bottom: 20px !important; }

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

  /* Padding reduction on mobile */
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-xs { padding: 4px !important; }
  .p-mobile-sm { padding: 8px !important; }
  .p-mobile-md { padding: 12px !important; }
  .p-mobile-lg { padding: 16px !important; }
  .p-mobile-xl { padding: 20px !important; }

  .px-mobile-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-mobile-sm { padding-left: 8px !important; padding-right: 8px !important; }
  .px-mobile-md { padding-left: 12px !important; padding-right: 12px !important; }
  .px-mobile-lg { padding-left: 16px !important; padding-right: 16px !important; }

  .py-mobile-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-mobile-sm { padding-top: 8px !important; padding-bottom: 8px !important; }
  .py-mobile-md { padding-top: 12px !important; padding-bottom: 12px !important; }
  .py-mobile-lg { padding-top: 16px !important; padding-bottom: 16px !important; }
}

@media (max-width: 480px) {
  /* Extra aggressive spacing reduction on very small screens */
  .m-tiny-0 { margin: 0 !important; }
  .m-tiny-xs { margin: 2px !important; }
  .m-tiny-sm { margin: 4px !important; }
  .m-tiny-md { margin: 8px !important; }
  .m-tiny-lg { margin: 12px !important; }

  .p-tiny-0 { padding: 0 !important; }
  .p-tiny-xs { padding: 2px !important; }
  .p-tiny-sm { padding: 4px !important; }
  .p-tiny-md { padding: 8px !important; }
  .p-tiny-lg { padding: 12px !important; }
}


/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES — responsive text sizing
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .text-mobile-xs { font-size: 0.75rem !important; }
  .text-mobile-sm { font-size: 0.875rem !important; }
  .text-mobile-base { font-size: 1rem !important; }
  .text-mobile-lg { font-size: 1.125rem !important; }

  .leading-mobile-tight { line-height: 1.2 !important; }
  .leading-mobile-normal { line-height: 1.5 !important; }
  .leading-mobile-loose { line-height: 1.75 !important; }

  /* Truncate text on mobile */
  .truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-clamp-mobile-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-mobile-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ══════════════════════════════════════════════════════════
   FLEX & GRID UTILITIES — responsive layout helpers
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Flex utilities */
  .flex-mobile {
    display: flex !important;
  }

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

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

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

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

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

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

  .gap-mobile-0 { gap: 0 !important; }
  .gap-mobile-xs { gap: 4px !important; }
  .gap-mobile-sm { gap: 8px !important; }
  .gap-mobile-md { gap: 12px !important; }
  .gap-mobile-lg { gap: 16px !important; }
  .gap-mobile-xl { gap: 20px !important; }

  /* Grid utilities */
  .grid-mobile {
    display: grid !important;
  }

  .grid-cols-mobile-1 {
    grid-template-columns: 1fr !important;
  }

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

  .auto-rows-mobile {
    grid-auto-rows: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════
   WIDTH & HEIGHT UTILITIES — size helpers for mobile
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .w-mobile-full { width: 100% !important; }
  .w-mobile-auto { width: auto !important; }
  .w-mobile-min { width: min-content !important; }
  .w-mobile-max { width: max-content !important; }
  .w-mobile-fit { width: fit-content !important; }

  .h-mobile-auto { height: auto !important; }
  .h-mobile-min { height: min-content !important; }

  /* Max height for images */
  .max-h-mobile-xs { max-height: 200px !important; }
  .max-h-mobile-sm { max-height: 280px !important; }
  .max-h-mobile-md { max-height: 360px !important; }
  .max-h-mobile-lg { max-height: 420px !important; }

  /* Aspect ratio utilities */
  .aspect-mobile-video { aspect-ratio: 16 / 9 !important; }
  .aspect-mobile-square { aspect-ratio: 1 / 1 !important; }
  .aspect-mobile-portrait { aspect-ratio: 9 / 16 !important; }
}


/* ══════════════════════════════════════════════════════════
   BORDER & RADIUS UTILITIES — mobile styling
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .rounded-mobile-none { border-radius: 0 !important; }
  .rounded-mobile-sm { border-radius: 8px !important; }
  .rounded-mobile-md { border-radius: 12px !important; }
  .rounded-mobile-lg { border-radius: 16px !important; }
  .rounded-mobile-full { border-radius: 9999px !important; }

  .border-mobile-0 { border: 0 !important; }
  .border-mobile { border: 1px solid rgba(210, 196, 180, 0.3) !important; }

  .border-t-mobile { border-top: 1px solid rgba(210, 196, 180, 0.3) !important; }
  .border-b-mobile { border-bottom: 1px solid rgba(210, 196, 180, 0.3) !important; }
  .border-l-mobile { border-left: 1px solid rgba(210, 196, 180, 0.3) !important; }
  .border-r-mobile { border-right: 1px solid rgba(210, 196, 180, 0.3) !important; }
}


/* ══════════════════════════════════════════════════════════
   TOUCH & INTERACTION UTILITIES
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Touch-friendly sizes */
  .touch-target {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  .touch-target-lg {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
  }

  /* Remove tap highlight */
  .no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
  }

  /* Cursor utilities */
  .cursor-pointer-mobile {
    cursor: pointer;
  }

  .cursor-default-mobile {
    cursor: default;
  }

  /* Touch action utilities */
  .touch-action-auto {
    touch-action: auto !important;
  }

  .touch-action-none {
    touch-action: none !important;
  }

  .touch-action-pan {
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}


/* ══════════════════════════════════════════════════════════
   OVERFLOW UTILITIES — prevent unwanted scrolling
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .overflow-x-auto-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

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

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

  /* Smooth scroll on mobile */
  .scroll-smooth-mobile {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}


/* ══════════════════════════════════════════════════════════
   ALIGNMENT & POSITIONING UTILITIES
══════════════════════════════════════════════════════════ */

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

  .mx-auto-mobile { margin-left: auto !important; margin-right: auto !important; }
  .my-auto-mobile { margin-top: auto !important; margin-bottom: auto !important; }

  .absolute-mobile { position: absolute !important; }
  .relative-mobile { position: relative !important; }
  .static-mobile { position: static !important; }

  /* Visibility utilities */
  .visible-mobile { visibility: visible !important; }
  .invisible-mobile { visibility: hidden !important; }

  /* Opacity utilities */
  .opacity-mobile-50 { opacity: 0.5 !important; }
  .opacity-mobile-75 { opacity: 0.75 !important; }
  .opacity-mobile-100 { opacity: 1 !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE CONTAINER — useful for content sections
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .container-mobile {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .container-mobile-sm {
    max-width: 100%;
  }

  .container-mobile-md {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .container-mobile {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ══════════════════════════════════════════════════════════
   PRINT UTILITIES — helpful for print-friendly mobile
══════════════════════════════════════════════════════════ */

@media print {
  .print-hidden {
    display: none !important;
  }

  .print-show {
    display: block !important;
  }

  body {
    font-size: 12pt;
  }

  a {
    text-decoration: underline;
  }
}