/*
 * Fixes from the issue list (ISSUES.md) for the older page templates. Loaded after style.css; selectors start with
 * `body` to win over the pages' inline <style> blocks.
 */

/* DP-08 (2026-10-22): the product template (Term, Investment, Home, Cyber) hid its H1 below 992px, so phones (and
   Google's mobile-first index) saw no page title. A compact H1 now sits above the form. */
@media (max-width: 991px) {
  body .hero-section .hero-heading {
    display: flex !important; position: static; left: auto; top: auto; width: auto; max-width: 560px;
    margin: 24px auto 20px; padding: 0 16px; align-items: center; text-align: center;
    font-size: var(--cy-fs-3xl, 24px); line-height: 32px;
  }
  body .hero-section .hero-heading .heading-line-1,
  body .hero-section .hero-heading .heading-line-2 { white-space: normal; }
}
@media (max-width: 991px) {
  /* keep the H1 above the hero's decorative shapes */
  body .hero-section .hero-heading { position: relative; z-index: 3; }
}

/* DP-17 (2026-10-22): on narrow phones the paired fields (DOB / pincode, smoker / income) cut off their placeholders;
   stack them at full width. The Male / Female choice stays side by side. */
@media (max-width: 420px) {
  body .quote-form .row > .col-6:has(.form-field) { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 991px) {
  /* the form card's corner shape is positioned against the card; with the card static on phones it floated up over
     the H1 */
  body .hero-section .quote-form-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
}

/* DP-16 (2026-10-22): the product template's FAQ tabs were cut off on one hidden-scroll row. Desktop: wrap onto two
   lines. Phones: keep one swipeable row, with a fade at the right edge to show it scrolls. */
@media (min-width: 992px) {
  body .faq-legacy #faqTab.nav-tabs { flex-wrap: wrap !important; overflow: visible !important; }
}
@media (max-width: 991px) {
  body .faq-legacy #faqTab.nav-tabs { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 40px; }
}

/* DP-09 (2026-10-22): old-template product pages (/health-insurance, /motor-insurance). On phones the left column
   dissolves so its H1 comes first, then the form, then the benefits (the form used to start ~1,000px down). */
@media (max-width: 767px) {
  body .cy-lead-row > .cy-lead-left { display: contents; }
  body .cy-lead-row > .cy-lead-left > * { order: 2; flex: 0 0 100%; max-width: 100%; padding-inline: 15px; }
  body .cy-lead-row > .cy-lead-left > h1 { order: 0; padding-top: 24px; } /* DP-18: it touched the sticky header */
  body .cy-lead-row > .cy-lead-left > h1 + .journey-prgh { order: 0; }
  body .cy-lead-row > .cy-lead-form { order: 1; margin-bottom: 24px; }
}
/* DP-15 / DP-25: optional labels and the fixed +91 prefix on those forms */
.cy-optional { font-weight: 400; color: #757575; }
.cy-cc { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #f7f7f7; color: #333; }