/* ==========================================================================
   Mobile hero — the desktop story, in less height
   The phone hero carried its own headline ("Kenya Premium Health Covers")
   directly under the same words used as the eyebrow, then a tall logo block, so
   it ran to two screens before the quote form. These rules keep the eyebrow,
   the two-line headline, the insurer logos, the stats and the journey badge —
   just tighter.

   The selectors carry body[data-mobile="true"] (as the earlier mobile sheets
   do) and the file loads last, so it wins without touching those sheets.
   ========================================================================== */

/* The mobile page is also opened in narrow desktop panels, where its own styles
   switch to a two-column hero, so these rules cover every width up to where the
   page hands over to its full desktop layout. */
@media (max-width: 1100px) {
  /* ===== Dental / Optical: limit and basis on one line =====
     Each row carries two selectors (the limit, then the basis, which reads
     "Standalone" until another basis is offered). They were stacked; on mobile
     they share one row. */
  body[data-mobile="true"] #quote-form .form-row.dental-row .form-group,
  body[data-mobile="true"] #quote-form .form-row.optical-row .form-group {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
  }

  body[data-mobile="true"] #quote-form .form-row.dental-row .limit-scope-wrapper,
  body[data-mobile="true"] #quote-form .form-row.optical-row .limit-scope-wrapper {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) !important;
    column-gap: 0.5rem !important;
    align-items: center !important;
    width: 100% !important;
  }

  body[data-mobile="true"] #quote-form .form-row.dental-row #dentalLimit,
  body[data-mobile="true"] #quote-form .form-row.optical-row #opticalLimit,
  body[data-mobile="true"] #quote-form .form-row.dental-row #dentalBasis,
  body[data-mobile="true"] #quote-form .form-row.optical-row #opticalBasis {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* The limit selector is not allowed to span the row: it shares it with the
     basis selector beside it. (styles.css spans it with :not(:has(...)) rules,
     so the selector here carries enough classes to win.) */
  body[data-mobile="true"] #quote-form .quote-step-benefits .optional-benefit-row.form-row.dental-row #dentalLimit,
  body[data-mobile="true"] #quote-form .quote-step-benefits .optional-benefit-row.form-row.optical-row #opticalLimit {
    grid-column: 1 !important;
  }

  body[data-mobile="true"] #quote-form .quote-step-benefits .optional-benefit-row.form-row.dental-row #dentalBasis,
  body[data-mobile="true"] #quote-form .quote-step-benefits .optional-benefit-row.form-row.optical-row #opticalBasis {
    grid-column: 2 !important;
  }

  /* ===== Light green header on the mobile page =====
     The dark green band becomes a light tint of the same green, so the brand
     and the menu need the darker ink and the buttons a solid ground. */
  body[data-mobile="true"] header {
    background: #e6f1f2 !important;
    border-bottom: 1px solid #cfe2e3 !important;
  }


  /* mobile-quote.css paints the brand name white for the dark band; the light
     band needs the dark ink, so the same selector path is used here. */
  body[data-mobile="true"] header .header-brand .brand-name,
  body[data-mobile="true"] header .header-brand .brand-name span {
    color: #013947 !important;
  }

  body[data-mobile="true"] header .brand-tagline,
  body[data-mobile="true"] header .brand-tagline span {
    color: #01545f !important;
  }

  body[data-mobile="true"] header .nav-links a,
  body[data-mobile="true"] header .nav-links li a,
  body[data-mobile="true"] header nav a {
    color: #013947 !important;
  }

  body[data-mobile="true"] header .nav-links a.active,
  body[data-mobile="true"] header .nav-links a:hover,
  body[data-mobile="true"] header .nav-links li a.active {
    color: #01545f !important;
  }

  body[data-mobile="true"] header .nav-cta .phone {
    background: #ffffff !important;
    border: 1px solid #cfe2e3 !important;
    color: #01545f !important;
  }

  body[data-mobile="true"] header .nav-cta .nav-icon-btn {
    background: #ffffff !important;
    border: 1px solid #cfe2e3 !important;
    color: #01545f !important;
  }

  /* The menu carries one item more than it used to (Guide), and styles.css
     flattens the nav on phones, so the list scrolls sideways instead of
     spilling out of the viewport. */
  body[data-mobile="true"] header .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    /* The row holds five items and four buttons now. The list may shrink inside
       the row - it scrolls if it ever has to - so a long menu can never push
       the buttons past the screen edge. */
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-mobile="true"] header .header-actions {
    min-width: 0 !important;
  }

  /* Four menu items beside four action buttons have to share one line on a
     phone. The row steps down as the screen narrows, so no item is ever cut off
     at the edge and nothing spills past the viewport. The selectors carry the
     nav and the actions wrapper so they outrank the later sheet that sizes this
     row. */
  @media (max-width: 480px) {
    body[data-mobile="true"] header nav .nav-links {
      gap: 8px !important;
    }

    body[data-mobile="true"] header nav .nav-links li a {
      font-size: 14.4px !important;
      padding: 0.32rem 0 !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta {
      gap: 0.26rem !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta .nav-icon-btn {
      width: 23px !important;
      height: 23px !important;
    }
  }

  @media (max-width: 412px) {
    body[data-mobile="true"] header nav .nav-links {
      gap: 7px !important;
    }

    body[data-mobile="true"] header nav .nav-links li a {
      font-size: 13.8px !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta .nav-icon-btn {
      width: 22px !important;
      height: 22px !important;
    }
  }

  @media (max-width: 375px) {
    body[data-mobile="true"] header nav .nav-links {
      gap: 6px !important;
    }

    body[data-mobile="true"] header nav .nav-links li a {
      font-size: 12.8px !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta .nav-icon-btn {
      width: 21px !important;
      height: 21px !important;
    }
  }

  @media (max-width: 345px) {
    body[data-mobile="true"] header nav .nav-links {
      gap: 5px !important;
    }

    body[data-mobile="true"] header nav .nav-links li a {
      font-size: 11.6px !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta .nav-icon-btn {
      width: 20px !important;
      height: 20px !important;
    }
  }

  /* The oldest, narrowest phones: the same line, one notch smaller again. */
  @media (max-width: 330px) {
    body[data-mobile="true"] header nav .nav-links {
      gap: 4px !important;
    }

    body[data-mobile="true"] header nav .nav-links li a {
      font-size: 10.8px !important;
    }

    body[data-mobile="true"] header .header-actions .nav-cta .nav-icon-btn {
      width: 18px !important;
      height: 18px !important;
    }
  }

  body[data-mobile="true"] header .nav-links::-webkit-scrollbar {
    display: none;
  }

  body[data-mobile="true"] header .nav-links li {
    flex: 0 0 auto;
  }

  body[data-mobile="true"] #hero {
    padding-top: 0.85rem !important;
    padding-bottom: 0.95rem !important;
  }

  body[data-mobile="true"] #hero .hero-grid,
  body[data-mobile="true"] #hero .hero-text {
    gap: 0.3rem !important;
  }

  /* In the two-column layout the text column used to stretch to the quote form
     and push the logos to the foot of a tall empty block. */
  body[data-mobile="true"] #hero .hero-text {
    align-content: start !important;
    align-self: start !important;
    justify-content: start !important;
  }

  body[data-mobile="true"] #hero .hero-buy-line {
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
    margin: 0 0 0.1rem !important;
  }

  body[data-mobile="true"] #hero .hero-text h1 {
    /* One line on mobile, so the size steps down to fit "Protect What Matters Most". */
    font-size: clamp(1.05rem, 6vw, 1.55rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    margin: 0.05rem 0 0.4rem !important;
    white-space: nowrap !important;
  }

  body[data-mobile="true"] #hero .hero-text h1 br {
    display: none !important;
  }

  body[data-mobile="true"] #hero .hero-text h1 span {
    display: inline !important;
  }

  body[data-mobile="true"] #hero .hero-text > p:not(.hero-buy-line) {
    font-size: 0.88rem !important;
    line-height: 1.42 !important;
    margin: 0 0 0.5rem !important;
  }

  body[data-mobile="true"] #hero .hero-insurer-grid {
    /* One compact row of logos that can be swiped, instead of two stacked rows. */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.3rem !important;
    margin: 0.2rem 0 0.4rem !important;
    padding-bottom: 2px !important;
  }

  body[data-mobile="true"] #hero .hero-insurer-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-mobile="true"] #hero .hero-text .hero-insurer-tile {
    flex: 0 0 auto !important;
    padding: 0.14rem 0.3rem !important;
    min-height: 0 !important;
    border-radius: 9px !important;
  }

  body[data-mobile="true"] #hero .hero-text .hero-insurer-tile img {
    height: 16px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body[data-mobile="true"] #hero .hero-stats {
    gap: 0.3rem !important;
    margin: 0.1rem 0 0.45rem !important;
  }

  body[data-mobile="true"] #hero .hero-text .stat-card {
    padding: 0.34rem 0.3rem !important;
    border-radius: 11px !important;
  }

  body[data-mobile="true"] #hero .hero-text .stat-card .num {
    font-size: 0.94rem !important;
    line-height: 1.12 !important;
  }

  body[data-mobile="true"] #hero .hero-text .stat-card .label {
    font-size: 0.6rem !important;
    line-height: 1.22 !important;
  }

  body[data-mobile="true"] #hero .hero-journey-badge {
    padding: 0.45rem 0.6rem !important;
  }

  body[data-mobile="true"] #hero .hero-journey-label {
    font-size: 0.64rem !important;
    margin-bottom: 0.1rem !important;
  }

  body[data-mobile="true"] #hero .hero-journey-steps,
  body[data-mobile="true"] #hero .hero-journey-line {
    font-size: 0.7rem !important;
    line-height: 1.32 !important;
  }
}

/* ===== hero-kicker-two-lines =====
   On a phone the kicker reads as two lines: "Kenya Premium" in the same gold as
   "Matters Most" in the headline, then "Health Covers" in white. The halves are
   spans, so on a desktop they still flow on one line and nothing changes. */
@media (max-width: 1100px) {
  body[data-mobile="true"] #hero .hero-text .hero-buy-line {
    display: block !important;
    line-height: 1.3 !important;
  }

  body[data-mobile="true"] #hero .hero-text .hero-buy-line .hero-buy-line-gold,
  body[data-mobile="true"] #hero .hero-text .hero-buy-line .hero-buy-line-white {
    display: block !important;
  }

  body[data-mobile="true"] #hero .hero-text .hero-buy-line .hero-buy-line-gold {
    color: var(--accent-gold, #d4af37) !important;
  }

  body[data-mobile="true"] #hero .hero-text .hero-buy-line .hero-buy-line-white {
    color: #ffffff !important;
  }
}