/* UX Improvements - Typography, Spacing & Proportions */

/* ============================================
   TYPOGRAPHY ENHANCEMENTS
   ============================================ */

body {
  font-family: Georgia, 'Garamond', serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
}

/* Headings should NOT be bold */
h1, h2, h3, h4, h5, h6,
*:is(.font-display, [class*="font-display"]) {
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.01em !important;
  font-family: Georgia, 'Garamond', serif !important;
}

/* Keep italic styling where it exists */
*:is(.italic, [class*="italic"]) {
  font-style: italic !important;
}

/* Increase all small text sizes for better readability */
[class*="text-\[11px\]"],
[class*="text-\[13px\]"],
[class*="text-\[10px\]"] {
  font-weight: 500 !important;
}

/* Override Tailwind small text */
*:is(.text-\[11px\], [class*="text-\[11px"]) {
  font-size: 13px !important;
  letter-spacing: 0.26em !important;
  font-weight: 500 !important;
}

*:is(.text-\[13px\], [class*="text-\[13px"]) {
  font-size: 15px !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
}

*:is(.text-\[10px\], [class*="text-\[10px"]) {
  font-size: 12px !important;
  letter-spacing: 0.26em !important;
}

*:is(.text-\[12px\], [class*="text-\[12px"]) {
  font-size: 13px !important;
  letter-spacing: 0.24em !important;
}

*:is(.text-base, [class*="text-base"]) {
  font-size: 17px !important;
  line-height: 1.68 !important;
}

*:is(.text-lg, [class*="text-lg"]) {
  font-size: 19px !important;
  line-height: 1.68 !important;
}

h2, [class*="md:text-6xl"], [class*="md:text-5xl"] {
  line-height: 1.12 !important;
}

/* ============================================
   SPACING REDUCTIONS
   ============================================ */

/* Reduce excessive vertical padding on sections */
*:is([class*="py-24"], [class*="py-32"], [class*="py-36"]) {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media (min-width: 768px) {
  *:is([class*="md:py-24"], [class*="md:py-32"], [class*="md:py-36"]) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

/* Reduce gap sizes */
*:is([class*="gap-12"], [class*="gap-10"]) {
  gap: 2rem !important;
}

@media (min-width: 768px) {
  *:is([class*="md:gap-16"], [class*="md:gap-14"], [class*="md:gap-12"]) {
    gap: 2.5rem !important;
  }
}

/* Better spacing in grid items */
*:is([class*="space-y-5"], [class*="space-y-8"]) {
  gap: 1.5rem !important;
}

/* ============================================
   IMAGE PROPORTION IMPROVEMENTS
   ============================================ */

/* Better aspect ratios for images */
*:is([class*="aspect-\[4/5\]"]) {
  aspect-ratio: 3 / 4 !important;
}

*:is([class*="aspect-\[5/6\]"]) {
  aspect-ratio: 2.5 / 3 !important;
}

*:is([class*="aspect-\[4/3\]"]) {
  aspect-ratio: 4 / 3 !important;
}

/* Optimize image quality */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Better object-fit positioning */
*:is([class*="object-\[65%"]) {
  object-position: 62% center !important;
}

*:is([class*="object-\[70%"]) {
  object-position: 68% center !important;
}

/* ============================================
   TEXT CONTRAST & READABILITY
   ============================================ */

/* Improve text visibility */
*:is([class*="text-foreground"]) {
  opacity: 1 !important;
}

*:is([class*="text-foreground/75"]) {
  opacity: 0.84 !important;
}

*:is([class*="text-foreground/70"]) {
  opacity: 0.8 !important;
}

*:is([class*="leading-relaxed"]) {
  line-height: 1.78 !important;
}

*:is([class*="leading-snug"]) {
  line-height: 1.38 !important;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */

/* Better button/link states */
a,
button,
[role="button"] {
  transition: all 240ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary, #c89b3c) !important;
  outline-offset: 2px !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce padding on mobile for tighter layout */
  *:is([class*="px-6"]) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Smaller text on mobile but still readable */
  *:is([class*="text-base"]) {
    font-size: 16px !important;
  }

  *:is([class*="text-lg"]) {
    font-size: 17px !important;
  }

  /* Tighter mobile spacing */
  *:is([class*="py-24"], [class*="py-32"]) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Reduce gaps on mobile */
  *:is([class*="gap-12"], [class*="gap-10"]) {
    gap: 1.5rem !important;
  }
}
