/* fix-mobile.css — site-wide layout safety overrides.
   ORIGINALLY mobile-only (2026-05-10). EXTENDED 2026-05-12 to repair the
   homepage hero on desktop, which had been laying out its 3 content children
   as horizontal flex columns instead of a single centered stack.
   Loaded AFTER tailwind-prod.css. Surgical overrides only. */

/* 1) Kill horizontal scroll caused by AOS animations and oversized elements */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* 2) Disable horizontal AOS slide animations on mobile — they push elements
      off-viewport before scroll triggers them, causing horizontal scroll and
      a moment of "broken" rendering on initial paint. */
@media (max-width: 768px) {
  [data-aos="fade-left"]:not(.aos-animate),
  [data-aos="fade-right"]:not(.aos-animate),
  [data-aos="slide-left"]:not(.aos-animate),
  [data-aos="slide-right"]:not(.aos-animate),
  [data-aos="zoom-in-left"]:not(.aos-animate),
  [data-aos="zoom-in-right"]:not(.aos-animate) {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* 3) Nav fix: brand text "New Mexico Literacy Project" with whitespace-nowrap
      pushes the hamburger button off-screen on phones. Allow wrap + shrink. */
@media (max-width: 640px) {
  nav span.font-cinzel.whitespace-nowrap,
  nav a[aria-label*="New Mexico Literacy Project"] span.font-cinzel {
    white-space: normal !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    max-width: 9.5rem;
  }
  /* Smaller logo on phones to free horizontal space */
  nav a[aria-label*="New Mexico Literacy Project"] img,
  nav .h-16.w-16 {
    height: 2.75rem !important;
    width: 2.75rem !important;
  }
  /* Reduce nav container padding so hamburger has room */
  nav .max-w-7xl > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 4) Below 380px (smallest phones), hide brand text entirely — logo + hamburger only */
@media (max-width: 379px) {
  nav span.font-cinzel.whitespace-nowrap {
    display: none !important;
  }
}

/* 5) Common mobile overflow culprits — long unbreakable strings, wide grids */
@media (max-width: 640px) {
  /* Allow long phone numbers / emails to wrap if needed */
  .whitespace-nowrap.text-sm,
  .whitespace-nowrap.text-xs {
    white-space: normal !important;
  }
  /* Constrain any oversized inline-block elements */
  img, video, iframe, table {
    max-width: 100% !important;
    height: auto;
  }
  /* Tables that don't shrink — force horizontal scroll inside a wrapper rather than the page */
  table {
    display: block;
    overflow-x: auto;
  }
}

/* 5b) Accessibility contrast bumps (2026-05-13).
       Tailwind text-gray-500 (#6B7280) on cream/white background measures
       ~4.0:1 contrast — fails WCAG AA 4.5:1 for body text. Promote to gray-600
       (#4B5563, ~7.0:1) site-wide. Same for gray-400 on white (very low
       contrast) → at minimum gray-500. */
.text-gray-500:not(.text-gray-500-keep) {
  color: #4B5563 !important;
}
.text-gray-400:not(nav *):not([class*="opacity-"]) {
  color: #6B7280 !important;
}
/* Gold on cream/white at small sizes — promote to text-gold-accessible
   automatically when the gold class lands on a light section. */
.bg-white .text-gold:not(.text-gold-accessible):not([class*="bg-charcoal"]),
.bg-cream .text-gold:not(.text-gold-accessible) {
  color: #8B6914;
}
/* Link underlining standardization — body links should be visibly identifiable
   as links, not rely on color alone (WCAG 1.4.1). */
.essay-body a:not(.btn-primary):not(.btn-secondary):not(.btn-text):not(.trust-chip):not(.archive-card),
article a:not(.btn-primary):not(.btn-secondary):not(.btn-text):not(.trust-chip):not(.archive-card):not(.no-underline) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(46, 139, 139, 0.4);
}
.essay-body a:hover,
article a:hover {
  text-decoration-color: var(--color-turquoise, #2E8B8B);
}

/* 6) AOS scroll-animations disabled site-wide (2026-05-13).
      The library was creating mid-scroll flicker on long pages — elements
      sat at opacity:0 / translateY(100px) until the intersection observer
      fired, which on fast scroll looked like content "appearing" half a
      second late. The fix is to make every [data-aos] element fully visible
      at all times, regardless of AOS's internal state. The library still
      loads and runs but the visible state never changes — net effect:
      static layout, no flicker, no performance cost from scroll listeners
      actually doing anything. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 6b) (Cleanup 2026-05-13) Button + trust chip rules moved back to
       styles.css after confirming they parse correctly there. This block
       previously held !important duplicates to work around a suspected
       parser issue that turned out to be stale browser cache. Restored
       to clean cascade. */

/* 7) CRITICAL — Hero section flex-row → flex-col at ALL viewports.
      The homepage hero is built as a flex container with 3 content children
      (badge+heading+body, CTAs row, proof strip) plus 2 absolutely-positioned
      gradient orbs. With no responsive flex-direction, all 3 content children
      laid out as horizontal columns on desktop AND spilled off-viewport on mobile.
      The fix is to force a vertical stack centered horizontally, at every width.
      Mobile (≤ 767px) gets tighter padding; desktop gets generous breathing room. */
header.flex.items-center.justify-center.bg-charcoal,
header.flex.justify-center.bg-charcoal,
header.bg-charcoal.flex.items-center.justify-center,
header.bg-charcoal.flex.justify-center,
section.flex.items-center.justify-center.bg-charcoal,
header.flex.items-center.justify-center.overflow-hidden.bg-charcoal {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 2.5rem 1.5rem !important;
}
@media (max-width: 767px) {
  header.flex.items-center.justify-center.bg-charcoal,
  header.flex.justify-center.bg-charcoal,
  header.bg-charcoal.flex.items-center.justify-center,
  header.bg-charcoal.flex.justify-center,
  section.flex.items-center.justify-center.bg-charcoal,
  header.flex.items-center.justify-center.overflow-hidden.bg-charcoal {
    gap: 0.5rem !important;
    padding: 1.75rem 1rem !important;
  }
  /* Inner hero columns: full width on mobile */
  header.bg-charcoal > .relative.z-10,
  section.bg-charcoal > .relative.z-10 {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Tighten internal hero element spacing — the badge has mb-4, h1 has mb-4, body has mb-* — collectively too much vertical air on desktop. Tighten just on homepage hero. */
header.bg-charcoal .relative.z-10.text-center .inline-block {
  margin-bottom: 0.75rem !important;
}
header.bg-charcoal h1 {
  margin-bottom: 0.75rem !important;
}
header.bg-charcoal .relative.z-10.text-center > p {
  margin-bottom: 0 !important;
}
/* Pull the entire hero content tighter — reduce the py-6/py-8 inner padding */
header.bg-charcoal > .relative.z-10.text-center {
  padding-top: 0.5rem !important;
  padding-bottom: 0 !important;
}

/* 8) Generic safety: any flex-row container that isn't explicitly flex-col on mobile
      and has wide horizontal children → reflow to column. Scoped to hero/section
      patterns to avoid breaking nav and other intentional flex rows. */
@media (max-width: 640px) {
  /* Sections with center-aligned hero patterns */
  section.flex:not(.flex-col):not(.flex-wrap) > .max-w-4xl.mx-auto + .max-w-3xl.mx-auto,
  section.flex:not(.flex-col):not(.flex-wrap) > .relative.z-10 + .relative.z-10 {
    margin-top: 1rem;
  }
}