/* ============================================================
   LEON INSURANCE — Browser Compatibility Stylesheet
   Handles: Chrome, Firefox, Safari, Edge, IE11 fallbacks
   Load AFTER style.css
   ============================================================ */

/* ── Font Rendering ─────────────────────────────────────────
   Safari & Chrome: antialiased text rendering                */
html {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

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

/* ── Smooth Scroll (Safari fallback handled via JS) ─────────*/
html {
  scroll-behavior: smooth;
}

/* ── Box Sizing (IE safety net) ─────────────────────────────*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ── Transitions with vendor prefixes ──────────────────────*/
.btn,
.service-card,
.coverage-card,
.article-card,
.why-item,
.coverage-tag,
.navbar-links a,
.service-link,
.faq-question,
.split-img,
.navbar {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

/* Override with specific transitions where needed */
.navbar {
  -webkit-transition: background 0.4s ease, -webkit-box-shadow 0.4s ease;
          transition: background 0.4s ease, box-shadow 0.4s ease;
}

.navbar-links a {
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.navbar-links a::after {
  -webkit-transition: -webkit-transform 0.3s ease;
          transition: transform 0.3s ease;
}

/* ── Transforms with vendor prefixes ────────────────────────*/
.btn:hover,
.btn-gold:hover,
.btn-outline:hover,
.btn-outline-gold:hover {
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

.service-card:hover,
.coverage-card:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
}

.fade-up {
  opacity: 0;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
          transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/* ── Flexbox gap Safari < 14.1 fix ──────────────────────────
   Browsers that support gap: no-op. Others: margin fallback  */
@supports not (gap: 1px) {
  .navbar-links { margin: 0 -18px; }
  .navbar-links > * { margin: 0 18px; }

  .trust-bar-inner > * + * { margin-left: 20px; }

  .hero-actions > * + * { margin-left: 16px; }
  .hero-stats > * + * { margin-left: 48px; }

  .services-grid > * { margin: 12px; }
  .coverage-grid > * { margin: 14px; }
  .why-grid > * { margin: 16px; }

  .form-grid > * { margin-bottom: 20px; }
  .footer-top > * + * { margin-left: 48px; }

  .cta-actions > * + * { margin-left: 16px; }
  .coverage-strip > * + * { margin-left: 8px; }
}

/* ── Forms — cross-browser reset ────────────────────────────*/
input,
select,
textarea,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  border-radius: 4px;
}

/* Firefox: remove dotted outline on buttons */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Safari: fix date input */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
}

/* Select arrow — cross-browser */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A8B4BC' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
  cursor: pointer;
}

/* ── Focus styles — keyboard accessibility all browsers ─────*/
:focus-visible {
  outline: 2px solid #C9A84C;
  outline-offset: 3px;
}

/* Firefox fallback (doesn't support :focus-visible in older versions) */
@-moz-document url-prefix() {
  :focus {
    outline: 2px solid #C9A84C;
    outline-offset: 3px;
  }
}

/* ── Image rendering ─────────────────────────────────────── */
img {
  max-width: 100%;
  display: block;
  -ms-interpolation-mode: bicubic; /* IE image scaling quality */
}

/* Object-fit IE fallback: use background-image via JS if needed */
.split-img img,
.article-card img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover'; /* IE polyfill hook */
}

/* ── Safari navbar backdrop ─────────────────────────────────*/
.navbar.scrolled {
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  background: rgba(12, 12, 12, 0.97);
}

/* ── Clamp() fallbacks for older Safari/IE ──────────────────*/
.section-title {
  font-size: 28px; /* IE fallback */
  font-size: clamp(28px, 4vw, 44px);
}

.hero h1 {
  font-size: 38px; /* IE fallback */
  font-size: clamp(38px, 6vw, 68px);
}

.page-hero h1 {
  font-size: 32px; /* IE fallback */
  font-size: clamp(32px, 5vw, 56px);
}

/* ── Scrollbar styling (Chrome/Safari/Edge) ─────────────────*/
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1A1A1A; }
::-webkit-scrollbar-thumb { background: #C9A84C; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #DFC17A; }

/* ── Print styles ───────────────────────────────────────────*/
@media print {
  .navbar, .mobile-menu, .hamburger, .cta-banner { display: none !important; }
  body { background: white; color: black; }
  a { color: black; }
}

/* ── IE11 Banner ─────────────────────────────────────────── */
.ie-banner {
  display: none;
  background: #C9A84C;
  color: #0C0C0C;
  text-align: center;
  padding: 14px 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
}

.ie-banner a {
  color: #0C0C0C;
  text-decoration: underline;
  margin-left: 8px;
}

/* Show only in IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ie-banner { display: block; }
  body { padding-top: 50px; }
  /* IE: show all fade-up elements since IntersectionObserver not supported */
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ── Edge legacy (EdgeHTML) fixes ───────────────────────────*/
@supports (-ms-ime-align: auto) {
  .fade-up { opacity: 1; transform: none; }
}

/* ── Firefox-specific fixes ─────────────────────────────────*/
@-moz-document url-prefix() {
  /* Firefox adds extra padding to buttons */
  .btn { padding: 14px 32px; }
  /* Firefox scrollbar */
  * { scrollbar-width: thin; scrollbar-color: #C9A84C #1A1A1A; }
}

/* ── Safari-specific input fixes ────────────────────────────*/
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    input, select, textarea {
      -webkit-appearance: none;
      border-radius: 4px;
    }
  }
}

/* ── High DPI / Retina displays ─────────────────────────────*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .navbar-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}