/* Mobile-specific overrides */

/* Target phones and small devices */
@media (max-width: 576px) {
  /* Reduce header image height */
  .header-image {
    height: 180px !important;
    object-position: center center;
  }

  /* Tighten overlay padding so text sits higher and fits */
  .header-overlay {
    padding: 0.75rem 0.9rem 6rem 6% !important; /* larger bottom padding keeps CTA above navbar */
    justify-content: flex-start !important; /* move content toward top */
  }

  /* Logo smaller */
  .header-logo {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Headline smaller */
  .header-slogan {
    font-size: 0.98rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Subtitle smaller */
  .header-subslogan {
    font-size: 0.85rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.55rem !important;
  }

  /* CTA button more compact */
  .header-button {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.78rem !important;
    margin-bottom: 0 !important; /* spacing handled by overlay bottom padding */
  }

  /* Navbar container should span full width on phones */
  .navbar .container { width: 100% !important; max-width: 100% !important; }
}

/* Small tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .header-image { height: 260px !important; }
  .header-overlay {
    padding: 1rem 1rem 3.25rem 10% !important; /* extra bottom padding for tablets */
  }
  .header-logo {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 1rem !important;
  }
  .header-slogan {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }
  .header-subslogan {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.85rem !important;
  }
  .header-button {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
    margin-bottom: 0 !important;
  }
}