/* =============================================================
   Cross-Browser Compatibility Fixes — Task #1519758
   Safari + Firefox rendering fixes for top 5 pages.
   Added 2026-05-12.

   Covers:
   1. -webkit-line-clamp fallback for Firefox
   2. backdrop-filter solid fallback for Firefox <103
   3. aspect-ratio fallback for Safari <15
   4. Scrollbar normalization (Firefox scrollbar-width/color)
   5. Safari form input appearance normalization
   6. Firefox button focus-inner border removal
   7. Safari/Firefox font rendering consistency
   8. position:sticky Safari compatibility
   9. Safari gradient prefix coverage
   10. Firefox flexbox gap confirmation (no fix needed — just audit pass)
   ============================================================= */

/* ─── 1. LINE CLAMP — Firefox fallback ─────────────────────── */
/*
   Firefox supports -webkit-line-clamp as of Firefox 68 (2019).
   Modern Firefox (83+) supports line-clamp natively.
   But older Android Firefox and some Samsung Internet need help.
   Force display:block + max-height + overflow fallback via @supports.
*/

/* Ensure line-clamp works in all modern browsers */
.sr-line-clamp-2,
.sr-line-clamp-3,
[class*="line-clamp"] {
  /* Ensure overflow hidden is always set — Firefox needs it */
  overflow: hidden;
}

/* Modern standard line-clamp (Chrome 114+, Firefox 83+, Safari 17+) */
@supports (line-clamp: 2) {
  .sr-line-clamp-2 {
    line-clamp: 2;
  }
  .sr-line-clamp-3 {
    line-clamp: 3;
  }
}

/* Firefox-specific: reinforce via display:block fallback
   when -webkit-box is not supported (very old Firefox) */
@supports not (-webkit-line-clamp: 1) {
  .sr-line-clamp-2,
  .sr-line-clamp-3 {
    display: block;
    overflow: hidden;
    max-height: 4.8em; /* approximate 3-line fallback */
  }
  .sr-line-clamp-2 {
    max-height: 3.2em; /* approximate 2-line fallback */
  }
}

/* ─── 2. BACKDROP-FILTER — Safari prefix + Firefox fallback ── */
/*
   -webkit-backdrop-filter required for Safari.
   Firefox 103+ supports backdrop-filter natively.
   Older Firefox: show solid background instead of blur.
*/

/* Ensure both prefixed and standard versions are present site-wide */
.sr-header,
header,
.sr-nav,
nav.sr-nav,
.sr-modal,
.modal,
.sr-drawer,
.drawer,
[class*="glass"],
[class*="frosted"] {
  /* Fallback: slightly opaque background when backdrop-filter not supported */
  background: rgba(255, 255, 255, 0.97);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sr-header,
  header.sr-sticky,
  .sr-nav-sticky {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

/* ─── 3. ASPECT-RATIO — Safari <15 fallback ─────────────────── */
/*
   aspect-ratio supported: Safari 15+ (2021), Firefox 88+ (2021),
   Chrome 88+ (2021). All "modern" browsers support it.
   We add a @supports guard to handle older Safari gracefully.
*/

/* Default: use padding-bottom hack for old Safari */
.sr-img-ratio-16-9,
.sr-blog-card__img-wrap,
.settlement-hero-img-wrap,
.hero-image-wrap {
  position: relative;
  overflow: hidden;
  /* Fallback: 16:9 padding-bottom trick for Safari <15 */
  padding-bottom: 56.25%;
  height: 0;
}

.sr-img-ratio-16-9 > img,
.sr-img-ratio-16-9 > video,
.sr-blog-card__img-wrap > img,
.sr-blog-card__img-wrap > video,
.settlement-hero-img-wrap > img,
.hero-image-wrap > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Override: use aspect-ratio directly in browsers that support it */
@supports (aspect-ratio: 16 / 9) {
  .sr-img-ratio-16-9,
  .sr-blog-card__img-wrap,
  .settlement-hero-img-wrap,
  .hero-image-wrap {
    aspect-ratio: 16 / 9;
    padding-bottom: unset;
    height: unset;
  }

  .sr-img-ratio-16-9 > img,
  .sr-img-ratio-16-9 > video,
  .sr-blog-card__img-wrap > img,
  .sr-blog-card__img-wrap > video,
  .settlement-hero-img-wrap > img,
  .hero-image-wrap > img {
    position: unset;
    top: unset;
    left: unset;
  }
}

/* ─── 4. SCROLLBAR NORMALIZATION ─────────────────────────────── */
/*
   Chrome/Safari: ::-webkit-scrollbar pseudo-elements
   Firefox: scrollbar-width + scrollbar-color (standard)
   We ensure BOTH are always present together.
*/

/* Global thin scrollbar — Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #D1D5DB #F9FAFB;
}

/* Global thin scrollbar — Chrome/Safari/Edge */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F9FAFB;
}

::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Hide scrollbar but keep scrollable — both browsers */
.sr-scrollbar-none,
.scroll-hide {
  -ms-overflow-style: none;    /* IE/Edge legacy */
  scrollbar-width: none;       /* Firefox */
}

.sr-scrollbar-none::-webkit-scrollbar,
.scroll-hide::-webkit-scrollbar {
  display: none;               /* Chrome/Safari */
}

/* ─── 5. FORM INPUT NORMALIZATION — Safari + Firefox ─────────── */
/*
   Safari: renders inputs with rounded corners + inner shadows by default.
   Firefox: adds focus ring that may not match design.
   Both: select arrow styling differs.
*/

/* Remove Safari default input styling */
input,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Safari: remove inner shadow on focused inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Firefox: remove dotted focus ring inside buttons */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* ─── 6. GRADIENT PREFIX COVERAGE ────────────────────────────── */
/*
   Modern browsers support unprefixed gradients.
   Safari 12.1+ and Firefox 16+ support standard syntax.
   No prefixes needed for currently-targeted browsers.
   This section is a no-op audit pass.
*/

/* ─── 7. FONT RENDERING CONSISTENCY ─────────────────────────── */
/*
   Ensure consistent antialiasing across Safari + Firefox.
   These properties are already in sr-global.css but we reinforce here
   to catch any pages that load this file without sr-global.
*/

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

/* ─── 8. POSITION STICKY — Safari ────────────────────────────── */
/*
   Safari requires -webkit-sticky for older versions (Safari <13).
   Modern Safari (13+) supports standard sticky.
   For maximum compatibility we declare both.
*/

.sr-header,
header.sr-sticky,
.sr-sticky-cta,
#sr-sticky-cta,
#stickyFilingBar,
[data-sticky="true"] {
  position: -webkit-sticky; /* Safari <13 */
  position: sticky;
}

/* ─── 9. SAFARI SPECIFIC FIXES ────────────────────────────────── */
/* Fix Safari: select element background color */
select {
  background-color: #fff;
}

/* Fix Safari: date input styling */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix Safari: anchor pseudo-element issues */
a:any-link {
  color: inherit;
}

/* Fix Safari <15: gap in flex containers
   Safari 14.0 had a bug where flex gap was partially supported.
   Fallback using margins for the specific gap-heavy components. */
@supports not (gap: 1px) {
  .sr-flex-gap-8 > * + * { margin-left: 8px; }
  .sr-flex-gap-12 > * + * { margin-left: 12px; }
  .sr-flex-gap-16 > * + * { margin-left: 16px; }
}

/* ─── 10. FIREFOX SPECIFIC FIXES ──────────────────────────────── */
/* Fix Firefox: select arrow */
@-moz-document url-prefix() {
  select {
    text-indent: 0.01px;
    text-overflow: '';
  }
}

/* Fix Firefox: range input styling */
input[type="range"]::-moz-range-thumb {
  background: #00875A;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background: #E5E7EB;
  border-radius: 9999px;
  height: 4px;
}

/* Fix Firefox: placeholder text opacity */
::placeholder {
  opacity: 1; /* Firefox reduces placeholder opacity by default */
  color: #9CA3AF;
}

::-webkit-input-placeholder { color: #9CA3AF; }
::-moz-placeholder { color: #9CA3AF; opacity: 1; }
:-ms-input-placeholder { color: #9CA3AF; }

/* ─── 11. TRANSITION/ANIMATION CONSISTENCY ────────────────────── */
/*
   Ensure transitions degrade gracefully under prefers-reduced-motion.
   Both Safari and Firefox honor this media query.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 12. SAFARI DVH/DVW UNITS ────────────────────────────────── */
/*
   dvh (dynamic viewport height) is Safari 15.4+ and Firefox 101+.
   For full-height elements, provide vh fallback before dvh.
*/

/* Pattern for full-screen elements: */
.sr-full-height,
.full-height,
[class*="vh-100"] {
  min-height: 100vh;          /* Fallback for older browsers */
  min-height: 100dvh;         /* Modern browsers (clips mobile address bar correctly) */
}

/* ─── END ─────────────────────────────────────────────────────── */