/* =======================================================
   RESPONSIVE STYLES - Mobile & Tablet Adaptations
   ======================================================= */

/* =======================================================
   HEADER RESPONSIVENESS (Max-width: 921px - Astra Breakpoint)
   ======================================================= */
@media (max-width: 921px) {
  /* 1. Header Container Packaging */
  .site-header .ast-container,
  .ast-main-header-bar .ast-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    height: auto !important;
    min-height: 70px; /* Comfortable touch target size */
  }

  /* 2. Logo Scaling */
  .site-logo img,
  .custom-logo-link img {
    max-width: 140px !important; /* Slightly smaller for mobile */
    height: auto !important;
  }

  /* 3. Mobile Menu Toggle (Hamburger) */
  .ast-mobile-menu-buttons .ast-mobile-menu-trigger-fill {
    fill: var(--primary-blue) !important;
  }

  .ast-button-wrap .menu-toggle {
    border-color: var(--primary-blue) !important;
  }

  .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-blue) !important;
  }

  /* 4. Mobile Menu Dropdown / Off-Canvas */
  .ast-mobile-header-wrap .ast-mobile-header-content,
  .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    background-color: var(--bg-white) !important;
    border-top: 1px solid var(--border-stroke);
  }

  /* Links in Mobile Menu */
  .ast-mobile-header-content .main-header-menu .menu-item a,
  .ast-mobile-popup-drawer .ast-mobile-popup-content .menu-item a {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--deep-navy) !important;
    font-size: 18px !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .ast-mobile-header-content .main-header-menu .menu-item.current-menu-item > a,
  .ast-mobile-popup-drawer
    .ast-mobile-popup-content
    .menu-item.current-menu-item
    > a {
    color: var(--primary-blue) !important;
    background-color: var(--soft-surface);
  }

  /* Search Bar in Mobile Menu */
  .ast-mobile-header-content .ast-search-menu-icon .search-form,
  .ast-mobile-popup-drawer .ast-search-menu-icon .search-form {
    padding: 15px !important;
  }

  .ast-mobile-header-content .search-field,
  .ast-mobile-popup-drawer .search-field {
    border: 1px solid var(--border-stroke) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px !important;
  }

  /* Adjust Home Page Hero Top Padding for Mobile */
  .page-template-page-home .expert-hero {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }

  /* Remove huge watermark on mobile to prevent overflow/mess */
  .hero-watermark {
    display: none !important;
  }
}

/* =======================================================
   MOBILE HEADER (Max-width: 544px)
   ======================================================= */
@media (max-width: 544px) {
  .site-logo img,
  .custom-logo-link img {
    max-width: 120px !important;
  }

  .ast-header-break-point .ast-mobile-menu-buttons {
    margin-right: -10px; /* Align nicer to the right edge */
  }
}