/* Wovlab Mobile UI/UX Fixes */

/* ===== Mobile: Hero — show H1 FIRST, widget AFTER ===== */
@media (max-width: 1023px) {
  /* The hero uses order-2 on text and order-1 on widget at mobile.
     Swap them: text first (order-1), widget second (order-2) */
  .order-2.lg\:order-1 {
    order: 1 !important;
  }

  .order-1.lg\:order-2 {
    order: 2 !important;
  }

  /* Shrink the widget panel on tablet */
  .aspect-\[4\/5\] {
    aspect-ratio: 16/10 !important;
    max-height: 320px !important;
  }
}

@media (max-width: 767px) {
  /* Further shrink widget on phone */
  .aspect-\[4\/5\] {
    aspect-ratio: 16/9 !important;
    max-height: 200px !important;
  }

  /* Don't force full-screen height on hero */
  .min-h-screen {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Better touch targets (44px minimum per Apple HIG) */
  button, a {
    min-height: 44px;
  }

  /* Reduce extreme skew on small screens */
  .skew-x-\[-8deg\],
  .skew-x-\[-10deg\],
  .skew-x-\[-12deg\] {
    transform: skewX(-5deg) !important;
  }
  .skew-x-\[8deg\],
  .skew-x-\[10deg\],
  .skew-x-\[12deg\] {
    transform: skewX(5deg) !important;
  }

  /* Fix wide dropdown menus */
  .w-\[90vw\] {
    width: 95vw !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Improve subheading contrast */
  .text-gray-400 {
    color: #a0a0a0 !important;
  }

  /* Tighter mobile padding */
  .px-6 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== Accessibility & Polish ===== */
*:focus-visible {
  outline: 2px solid #ff3300 !important;
  outline-offset: 2px !important;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}