/* ============================================================================
 * Landing home page — responsive overrides
 * Targets: hero-banner-seven, theme-menu-three (only used on the home page).
 * Loaded after style.min.css and responsive.min.css.
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * Narrow desktop (992–1199): the existing theme leaves the menu and hero
 * un-tuned for this width — nav collides with absolutely-positioned right
 * widget and hero heading breaks one-word-per-line.
 * --------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Menu: reserve room on the right so right-widget doesn't overlap nav links. */
  .theme-menu-three .navbar { margin-right: 26%; }
  .theme-menu-three .navbar-nav .nav-item .nav-link { margin: 0 12px; font-size: 15px; }
  .theme-menu-three .user-login-button li a { font-size: 14px; line-height: 42px; }
  .theme-menu-three .user-login-button .signIn-action img { width: 16px; }
  .theme-menu-three .user-login-button li .signUp-action { padding: 0 16px; margin-left: 16px; }
  .theme-menu-three .user-login-button li .signUp-action img { width: 16px; }

  /* Hero: scale heading + illustration to actually fit the column. */
  .hero-banner-seven { margin-top: 40px; }
  .hero-banner-seven .hero-heading { font-size: 42px; padding-right: 0; line-height: 1.18em; }
  .hero-banner-seven .hero-sub-heading { font-size: 17px; padding: 24px 0 36px; }
  .hero-banner-seven .illustration-container { top: 60px; right: 24px; max-width: 44%; }
  .hero-banner-seven .hero-heading span:before { height: 12px; bottom: 8px; }
}

/* ---------------------------------------------------------------------------
 * Tablet (768–991): navbar is collapsed (hamburger), so the illustration
 * should flow above the text instead of floating absolutely.
 * --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-banner-seven { margin-top: 30px; }
  .hero-banner-seven .illustration-container {
    position: relative;
    top: 0;
    right: auto;
    margin: 0 auto 30px;
    max-width: 55%;
    display: block;
  }
  .hero-banner-seven .illustration-container img { width: 100%; height: auto; }
  .hero-banner-seven .hero-heading { font-size: 40px; padding-right: 0; line-height: 1.18em; }
  .hero-banner-seven .hero-sub-heading { font-size: 17px; padding: 20px 0 30px; }
  .hero-banner-seven .hero-heading span:before { height: 10px; bottom: 8px; }

  /* CTA buttons: allow wrap, equal spacing. */
  .hero-banner-seven .button-group { flex-wrap: wrap; gap: 14px; }
  .hero-banner-seven .button-group > a { margin-right: 0 !important; }
}

/* ---------------------------------------------------------------------------
 * Phone (≤767): everything stacks; buttons go full-width; stats one per row.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-banner-seven { margin-top: 20px; }
  .hero-banner-seven .illustration-container {
    position: relative;
    top: 0;
    right: auto;
    margin: 0 auto 24px;
    max-width: 85%;
    display: block;
  }
  .hero-banner-seven .illustration-container img { width: 100%; height: auto; }
  .hero-banner-seven .hero-heading { font-size: 30px; padding-right: 0; line-height: 1.2em; }
  .hero-banner-seven .hero-sub-heading { font-size: 15px; padding: 16px 0 24px; }
  .hero-banner-seven .term-text { font-size: 14px; }
  .hero-banner-seven .hero-heading span:before { height: 8px; bottom: 4px; }

  .hero-banner-seven .button-group {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .hero-banner-seven .button-group > a {
    width: 100%;
    margin: 0 !important;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * <=575 (xs): hero stats stack one per row instead of wrapping awkwardly.
 * The stats row uses inline-style flex with gap:48px; force single column.
 * --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .hero-stat-item { flex: 0 0 100%; }
}

/* ---------------------------------------------------------------------------
 * Mobile menu (≤991): right-widget becomes static — center its items and
 * allow them to wrap (Logout + Dashboard) instead of overflowing.
 * --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .theme-menu-three .right-widget,
  .theme-menu-three .user-login-button {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
  }
  .theme-menu-three .user-login-button li .signUp-action { margin-left: 0; }
}