/**
 * Hudbas mobile phase 1 — shared layout fixes (header, touch, overflow, alerts)
 * Breakpoint aligned with JS: max-width 991px = mobile
 */

@media (max-width: 991px) {
  :root {
    --ms-mobile-header-offset: 64px;
    --ms-touch-min: 44px;
  }

  html,
  body {
    overflow-x: clip;
  }

  /* Fixed header — unified content offset (replaces per-page .ppa hacks) */
  .ms_content_wrapper {
    padding-top: var(--ms-mobile-header-offset, 64px) !important;
  }

  .ppa,
  .lp-view-more-page.abl.abl2.ppa,
  div#account-account,
  #product-user,
  .home_container,
  .container_custom,
  #product-album,
  #page-albums .home_container,
  #page-newmusic .home_container,
  #page-lists .home_container,
  #page-reviews .home_container,
  #page-community .home_container {
    padding-top: 0 !important;
  }

  /* Header controls — min 44×44px touch targets */
  .ms_header {
    padding: 10px 12px !important;
  }

  .ms_top_btn {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ms_top_btn .ms_btn,
  .ms_top_btn a.ms_btn,
  .ms_top_btn button.ms_btn {
    width: var(--header-action-size, var(--ms-touch-min)) !important;
    height: var(--header-action-size, var(--ms-touch-min)) !important;
    min-width: var(--header-action-size, var(--ms-touch-min)) !important;
    min-height: var(--header-action-size, var(--ms-touch-min)) !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }

  .ms_nav_close {
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    min-width: var(--ms-touch-min);
    min-height: var(--ms-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
  }

  .search-toggle-btn {
    width: var(--header-action-size, var(--ms-touch-min)) !important;
    height: var(--header-action-size, var(--ms-touch-min)) !important;
    min-width: var(--header-action-size, var(--ms-touch-min)) !important;
    min-height: var(--header-action-size, var(--ms-touch-min)) !important;
    max-width: var(--header-action-size, var(--ms-touch-min)) !important;
    max-height: var(--header-action-size, var(--ms-touch-min)) !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ms_header .search_icon,
  .ms_header .search_icon button {
    min-width: var(--ms-touch-min);
    min-height: var(--ms-touch-min);
  }

  .ms_header input[name="search"],
  .search-panel input[name="search"],
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control,
  #review-form input.cmnt_field,
  #review-form textarea.cmnt_field,
  #review-form .note-editable,
  #review-form .note-placeholder,
  .mp3-comment-form input.cmnt_field,
  .mp3-comment-form textarea.cmnt_field,
  .mp3-comment-form .note-editable,
  .mp3-comment-form .note-placeholder {
    font-size: 16px !important;
  }

  /* Prevent legacy wide track tables from breaking viewport */
  .ms_album_single_wrapper .album_list_wrapper,
  .ms_free_download .album_list_wrapper,
  .review-info-o .album_list_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .album_list_wrapper > ul {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  /* Alerts & cookie — fit narrow screens */
  #alert .alert {
    min-width: 0 !important;
    max-width: calc(100vw - 24px);
    width: auto;
  }

  #cookie {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  #cookie .cookie-btn {
    min-height: var(--ms-touch-min);
    flex: 1;
  }

  /* Horizontal tab bars — touch-friendly */
  .nav-tabs .nav-link,
  .mp3-tabs > li,
  #mp3-tabs-nav > li,
  #artist-tabs-nav > li {
    min-height: var(--ms-touch-min);
    display: inline-flex;
    align-items: center;
  }

  .nav-tabs {
    scrollbar-width: thin;
  }
}

@media (max-width: 576px) {
  .ms_top_btn .ms_btn,
  .ms_top_btn a.ms_btn,
  .ms_top_btn button.ms_btn {
    width: var(--header-action-size, var(--ms-touch-min)) !important;
    height: var(--header-action-size, var(--ms-touch-min)) !important;
  }
}