/* Mobile Responsive Fix - Standardizes layout across iPhone 13 & 14 Pro Max */

/* Root scaling for mobile consistency */
html {
  /* Use device width for consistent rendering */
  font-size: 16px;
}

/* Fix background rendering consistency */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent zoom on input focus on iOS */
  touch-action: manipulation;
}

/* Standardize section backgrounds to prevent crop issues */
section {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Mobile-first padding standards (320px - 430px) */
@media (min-width: 320px) and (max-width: 430px) {
  .section-padding {
    padding: 2rem 1rem !important;
  }

  /* Ensure text containers don't exceed viewport */
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl,
  .max-w-md,
  .max-w-lg,
  .max-w-xl {
    padding: 0 1rem;
  }

  /* Optimize spacing for countdown section */
  section[id="countdown"] {
    padding: 2rem 1rem !important;
  }

  /* Standardize gap in flex layouts - but preserve RSVP form spacing */
  .gap-3 {
    gap: 0.75rem !important;
  }

  .gap-4 {
    gap: 1rem !important;
  }

  .gap-6 {
    gap: 1rem !important;
  }

  /* Consistent margins for headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  /* Reduce excess vertical spacing in containers */
  .mb-8 {
    margin-bottom: 1.5rem !important;
  }

  .mb-12 {
    margin-bottom: 2rem !important;
  }

  .mb-16 {
    margin-bottom: 2.5rem !important;
  }

  /* Standardize paragraph spacing */
  p {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  /* Timeline items - consistent spacing */
  .py-1 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-1\.5 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Card spacing uniformity */
  .space-y-5 {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  /* Ensure RSVP form inputs and groups have adequate spacing */
  #rsvp {
    padding: 2rem 1rem !important;
  }

  #rsvp form > div {
    margin-bottom: 1.25rem !important;
  }

  #rsvp .flex.flex-col.gap-3 {
    gap: 1rem !important;
  }
}

/* Intermediate breakpoint: iPhone 6/7/8/SE to iPhone 12 (375px - 390px) */
@media (min-width: 375px) and (max-width: 430px) {
  .section-padding {
    padding: 2.5rem 1.25rem !important;
  }

  .max-w-2xl,
  .max-w-3xl,
  .max-w-md,
  .max-w-xl {
    padding: 0 1.25rem;
  }
}

/* iPhone 14+ Pro (391px - 430px) */
@media (min-width: 391px) and (max-width: 430px) {
  .section-padding {
    padding: 2.5rem 1.5rem !important;
  }

  .max-w-2xl,
  .max-w-3xl,
  .max-w-md,
  .max-w-xl {
    padding: 0 1.5rem;
  }
}

/* Tablet breakpoint - maintain mobile styles until truly tablet size */
@media (min-width: 600px) and (max-width: 767px) {
  .section-padding {
    padding: 3rem 1.5rem !important;
  }
}

/* Ensure backgrounds aren't clipped on small screens */
@media (max-width: 430px) {
  section {
    min-height: 100%;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  /* Prevent content overflow */
  .overflow-hidden {
    overflow: hidden !important;
  }

  /* Prevent text overflow for large headings */
  h1, h2, h3, h4, .font-display, .font-milton {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Standardize image rendering */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Fix gallery/carousel items */
  .flex-shrink-0 {
    flex-shrink: 0 !important;
  }

  /* Timeline vertical line consistency */
  .absolute.left-1\/2.top-3.bottom-3.w-px {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Text scaling on mobile */
  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* Reduce large heading sizes on mobile */
  .text-6xl {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .text-7xl {
    font-size: 2.75rem;
    line-height: 1.1;
  }

  /* Consistent button/link sizing - increased for mobile touch targets */
  button:not([role="radio"]):not([role="checkbox"]),
  a[role="button"],
  .px-4.py-2 {
    min-height: 3rem;
    padding: 0.75rem 1.5rem !important;
  }

  /* Radio button/checkbox sizing for touch */
  input[type="radio"],
  input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: unset !important;
    padding: 0 !important;
    cursor: pointer;
  }

  /* Make radio/checkbox labels easier to tap */
  label {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
}

/* Fix viewport scaling issues */
@media (max-width: 375px) {
  html {
    font-size: 15px;
  }

  .text-6xl {
    font-size: 2rem;
  }

  .text-7xl {
    font-size: 2.25rem;
  }

  .text-4xl {
    font-size: 1.75rem;
  }

  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Prevent layout shifts due to scrollbar */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iPhone/iPad specific */
  body {
    -webkit-user-select: none;
    -webkit-user-select: text;
    user-select: text;
  }

  input,
  textarea,
  select {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Fix iPhone Safe Area */
  @supports (padding: max(0px)) {
    body {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }

    section {
      margin-left: max(0px, env(safe-area-inset-left));
      margin-right: max(0px, env(safe-area-inset-right));
    }
  }
}