/* HousingHub shared polish layer
   Loaded after Tailwind on every page. Adds scroll progress,
   back-to-top, reveal-on-scroll, focus rings, sticky-header
   shadow, lift hover, and reduced-motion safety. */

/* ============ Scroll progress (top of viewport) ============ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #2596be, #5ad6ff);
  box-shadow: 0 0 10px rgba(90, 214, 255, 0.55);
  z-index: 100;
  pointer-events: none;
  transition: width 120ms ease-out;
}

/* ============ Skip-to-content (a11y) ============ */
.skip-link {
  position: fixed;
  top: -120px;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: #2596be;
  color: #fff;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.25);
  transition: top 200ms ease-out;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid #5ad6ff;
  outline-offset: 2px;
}

/* ============ Back-to-top button ============ */
#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 9999px;
  background: #2596be;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(37, 150, 190, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease, background 180ms ease;
  z-index: 70;
}
#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-to-top:hover { background: #1f7d9c; }
#back-to-top .material-icons-outlined { font-size: 22px; }
@media (max-width: 480px) {
  #back-to-top { right: 0.85rem; bottom: 0.85rem; width: 2.75rem; height: 2.75rem; }
}

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ============ Sticky header gets a shadow when scrolled ============ */
header.is-scrolled {
  box-shadow: 0 6px 24px rgba(2, 8, 23, 0.08);
}
.dark header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ============ Better focus rings (accessibility) ============ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #5ad6ff;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ============ Card lift on hover (opt-in via .lift) ============ */
.lift {
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.14);
}

/* ============ Lazy-loaded image fade-in ============ */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 350ms ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][data-loaded="true"] {
  opacity: 1;
}

/* ============ Mobile drawer full-width refinement ============ */
@media (max-width: 640px) {
  #directory-drawer { width: 100% !important; }
}

/* ============ Selection accent ============ */
::selection {
  background: rgba(37, 150, 190, 0.28);
  color: inherit;
}

/* ============ Form input polish ============ */
input:not([type="hidden"]),
select,
textarea {
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #2596be !important;
  box-shadow: 0 0 0 4px rgba(37, 150, 190, 0.15) !important;
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  #scroll-progress { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ Print: hide chrome ============ */
@media print {
  header, footer, #scroll-progress, #back-to-top, .skip-link,
  #directory-drawer, #drawer-overlay { display: none !important; }
}

/* ============================================================
   Mobile-first overflow safety
   Long unbroken strings (URLs, names, statements) shouldn't
   push past their container. Apply broadly on small screens.
   ============================================================ */
html, body { max-width: 100%; }

/* Long-content wrap rules — applied site-wide but most useful on mobile */
p, h1, h2, h3, h4, h5, h6, li,
.rounded-xl2, [class*="rounded-xl"],
.text-sm, .text-xs, .text-base, .text-lg, .text-xl,
.font-semibold {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Cards never overflow their grid cell */
[class*="rounded-xl"] { min-width: 0; }

/* Founders/people cards: avatar must not shrink, card must clip */
#founders-grid > div { overflow: hidden; }
#founders-grid img { flex-shrink: 0; }
#founders-grid > div .flex { min-width: 0; }
#founders-grid > div .flex > .min-w-0 { min-width: 0; flex: 1 1 auto; }
#founders-grid p { overflow-wrap: anywhere; word-break: break-word; }

/* Hero headings: tighter sizing on phones */
@media (max-width: 480px) {
  h1[class*="text-4xl"], h1[class*="text-5xl"], h1[class*="text-6xl"] {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  h2[class*="text-3xl"], h2[class*="text-4xl"] {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  /* Slightly tighter section padding on phones */
  section[class*="py-14"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  section[class*="py-20"] { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  /* Tighter container padding (phone) */
  [class*="max-w-"].px-4 { padding-left: 1rem; padding-right: 1rem; }
  /* Buttons full-width on phones for thumb-reach */
  .hero-cta-row > a, .hero-cta-row > button { width: 100%; }
}

/* Phone/tablet text-input safety */
@media (max-width: 640px) {
  /* Forms: ensure inputs and selects have iOS-safe text size (no zoom on focus) */
  input:not([type="hidden"]),
  select, textarea { font-size: 16px !important; }
  /* Header tagline shouldn't push title off-screen */
  header .leading-tight { min-width: 0; }
  header .leading-tight > div:not(.text-lg) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Drawer: smooth iOS scroll */
#directory-drawer { -webkit-overflow-scrolling: touch; }

/* Tap targets: minimum 44x44 on touch devices per WCAG */
@media (hover: none) and (pointer: coarse) {
  button, a[href], [role="button"] { min-height: 44px; }
}

/* Image/SVG safety: never overflow */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Tables: scroll instead of overflow */
table { display: block; max-width: 100%; overflow-x: auto; }