/* Cross-cutting responsive rules — variable overrides, body-level, section spacing */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  :root {
    --font-hero-title: 1.6rem;
    --font-section-title: 1.3rem;
  }

  /* ── Touch Targets (44px minimum) ── */

  /* Navigation links (inside mobile menu) */
  .navbar__links .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Login button (exclude compact navbar toolbar) */
  .btn-login:not(.btn-login--compact) {
    min-height: 44px;
    padding: 0.6rem 1.3rem;
  }

  /* Gold CTA buttons */
  .btn-gold {
    min-height: 44px;
    padding: 0.65rem 1.6rem;
  }

  /* Generic .btn */
  .btn {
    min-height: 44px;
  }

  /* Package filter pills */
  .pkg-filter {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
  }

  /* Contact form inputs and textarea */
  .form-row input,
  .form-row textarea {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
  }

  /* Contact form (component variant) */
  .form-field__input {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
  }

  /* Contact submit button */
  .contact__submit {
    min-height: 44px;
    padding: 0.7rem 2.5rem;
  }

  /* Search box button (main.css variant) */
  .search-box__btn {
    min-height: 44px;
    padding: 0.7rem 1rem;
  }

  /* Search field inputs */
  .search-field input,
  .search-field select,
  .search-field__input {
    min-height: 44px;
    padding: 0.7rem 0.8rem;
  }

  /* Package card buttons */
  .pkg-card__btn {
    min-height: 44px;
    padding: 0.55rem 1rem;
  }

  /* Package search input */
  .pkg-search input {
    min-height: 44px;
  }

  /* Filter checkbox labels */
  .pkg-filter-check {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Footer social links */
  .footer__social a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Top bar social links */
  .social-icon {
    min-width: auto;
    min-height: auto;
  }
}

/* ── Mobile Spacing & Typography ── */
@media (max-width: 767px) {
  /* Slightly smaller body font for mobile readability */
  body {
    font-size: 0.9rem;
  }

  /* Reduce section vertical padding */
  .section {
    padding: 3rem 0;
  }

  /* Tighter container side padding on small screens */
  .container {
    padding: 0 1rem;
  }

  /* Section head spacing */
  .section__head {
    margin-bottom: 1.75rem;
  }

  /* Contact section */
  .contact {
    padding: 3rem 0;
  }

  /* Footer padding */
  .footer {
    padding: 2rem 0 0;
  }

  .footer__inner {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ── Compact mobile navbar toolbar ── */
@media (max-width: 1023px) {
  .navbar__toolbar .lang-dropdown__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 0.45rem;
    gap: 0.25rem;
    font-size: 0.7rem;
    border-radius: 8px;
    border-width: 1px;
    box-shadow: none;
  }

  .navbar__toolbar .lang-dropdown__btn .fa-globe {
    font-size: 0.9rem;
  }

  .navbar__toolbar .navbar__user-btn {
    min-width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-width: 1px;
    border-radius: 8px;
  }

  .navbar__toolbar .navbar__user-btn i:first-child {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .navbar__toolbar .lang-dropdown__btn span {
    display: none;
  }

  .navbar__toolbar .lang-dropdown__btn {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}