/* ============================================================
   FinsiderAI — Browser & Mobile Compatibility Addendum
   Loaded AFTER base.css/components.css/calculator.css so it wins
   the cascade on overlapping rules. Intentionally minimal: each
   block fixes one verified browser bug or one mobile edge case.
   Source: D-027 (WCAG 2.2 AA), project-rules.md §11.4 Responsive.

   Do NOT add design overrides here. Visual changes belong in the
   page-specific stylesheets and must follow the design handoff.
   ============================================================ */

/* ------------------------------------------------------------
   1. Backdrop-filter fallback (Firefox < 103, older Safari)
   The sticky site header uses backdrop-filter for the blur effect.
   Browsers without support get a near-opaque background so text
   over the header stays legible.
   ------------------------------------------------------------ */
@supports not (backdrop-filter: blur(12px)) {
  .site-header {
    background: rgba(244, 246, 251, 0.97);
  }
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-header {
    background: var(--c-bg);
  }
}

/* ------------------------------------------------------------
   3. iOS Safari: prevent input-focus zoom
   iOS auto-zooms when a form input has font-size < 16px. Most
   inputs already use --fs-body (16px), but the search box
   placeholder and a few captions sit at 14px. Bump to 16px when
   the input is actually focused on a touch device.
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea {
    font-size: max(16px, 1rem);
  }
  .site-search__input {
    font-size: 16px;
  }
  /* Slider chips already display values; no zoom needed on the
     hidden range input itself, but keep the floor at 16 just in
     case a future input is added. */
}

/* ------------------------------------------------------------
   4. Mobile-Safari range-input thumb visibility fix
   When the parent has overflow:clip/hidden, Safari clips the
   thumb on the extreme ends. Add a tiny shadow-room margin.
   ------------------------------------------------------------ */
@supports (-webkit-touch-callout: none) {
  /* iOS only */
  .slider-row__track {
    contain: layout;
  }
}

/* ------------------------------------------------------------
   5. Grid/flex overflow safety net
   Long unbroken strings (URLs, "supercalifragilistic") inside a
   grid/flex column can blow the container out. Enforce min-width
   on the common content containers used by the calculator. Each
   selector is something currently rendered by the page.
   ------------------------------------------------------------ */
.calc-grid > *,
.results-stats > *,
.mode-grid > *,
.explore-grid > *,
.footer-grid > * {
  min-width: 0;
}

/* Slider chip — value chip can overflow on narrow phones when the
   amount is in the lakh/crore range. Keep it from pushing the
   label out. */
.slider-row__head {
  min-width: 0;
}
.slider-row__chip {
  flex-shrink: 0;
}
.slider-row__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   6. Horizontal-scroll containers — UX polish
   The year-by-year table on mobile (≤ 760px) and the chart card
   on small phones (≤ 600px) scroll horizontally. Make the scroll
   feel native and prevent accidental over-scroll.
   ------------------------------------------------------------ */
.results-chart {
  overscroll-behavior-x: contain;
}

/* ------------------------------------------------------------
   7. Tap-highlight color — match brand on iOS Safari
   Default is a dim grey that looks broken on dark CTAs. The
   global reset in base.css already disables it; this catches
   the buttons that might re-enable via inheritance.
   ------------------------------------------------------------ */
.btn, .mode-card, .quick-link, .faq-item__question, .results-range {
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   8. Focus-visible: WCAG 2.2 — minimum 3:1 contrast on the
   ring against any background. The base focus is indigo-500
   over light surfaces. Strengthen the ring on the dark navy
   footer (newsletter input, footer links).
   ------------------------------------------------------------ */
.site-footer :focus-visible {
  outline: 2px solid var(--c-indigo-300);
  outline-offset: 2px;
  box-shadow: none;
}

/* ------------------------------------------------------------
   9. Print stylesheet
   Renders a clean, ink-friendly version of the calculator or any
   content page. The user can trigger via Ctrl+P or the "Save as
   PDF" button added to the calculator page.
   ------------------------------------------------------------ */
@media print {
  /* Hide chrome and interactive UI */
  .site-header,
  .mobile-drawer,
  .ad-slot,
  .results-actions,
  .currency-toggle,
  .skip-link,
  .results-ranges,
  .site-footer__social,
  .newsletter-band,
  .newsletter-band + *,
  .quick-links,
  .btn-row,
  .mode-grid,
  .mode-section,
  .disclaimer-band,
  .site-footer,
  .adv-toggle,
  .home-hero__actions,
  .home-why,
  nav,
  .mega-panel,
  .mobile-drawer__scrim,
  #newsletter-form,
  .results-chart-head .results-ranges {
    display: none !important;
  }

  /* Page setup */
  @page {
    margin: 20mm 15mm;
    size: A4 portrait;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    font-family: 'Manrope', Arial, sans-serif;
  }

  /* Full-width layout */
  .container {
    max-width: none !important;
    padding-inline: 0 !important;
  }

  /* Calc grid: stack to single column */
  .calc-grid {
    display: block !important;
  }
  .calc-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 16pt;
  }

  /* Results area — full width, preserve numbers */
  .results-hero__num,
  .results-stat__val {
    color: #000 !important;
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  }
  .results-stat__val--gain { color: #0a6640 !important; }

  /* Year-by-year table */
  .table {
    font-size: 9pt;
    break-inside: auto;
  }
  .table tr { break-inside: avoid; }

  /* Chart: hide canvas, show table instead */
  .results-chart { display: none !important; }

  /* Hero */
  .hero { padding-block: 8pt !important; }
  .hero__glow, .home-hero__glow { display: none !important; }

  /* Print URL after links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="/"]::after,
  a[href^="#"]::after {
    content: "";
  }

  /* Page-break helpers */
  h2 { break-after: avoid; }
  .results-stats { break-inside: avoid; }

  /* Brand */
  .site-header__brand,
  .footer-brand { font-weight: bold; }
}