/* ============================================================================
   ShinyVerse — MOBILE EXPERIENCE LAYER
   ----------------------------------------------------------------------------
   Loaded AFTER style.css. EVERY rule in this file lives inside a
   `@media (max-width: 991.98px)` query, so desktop (>=992px) is 100% untouched.

   NOTE: The navbar / burger menu is intentionally NOT styled here — it uses the
   original behaviour defined in style.css. This file only adds non-navigation
   polish (buttons, forms, cards, footer, typography).

   Breakpoint matches Bootstrap's `navbar-expand-lg` boundary (992px).
   ============================================================================ */

@media (max-width: 991.98px) {

  /* ------------------------------------------------------------------ *
   * 1. FOUNDATIONS
   * ------------------------------------------------------------------ */
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body.theme-purple {
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }

  /* Smooth, consistent focus ring for keyboard / switch users */
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .form-control:focus-visible {
    outline: 2px solid var(--sc-accent, #00d1ff);
    outline-offset: 2px;
  }

  /* ------------------------------------------------------------------ *
   * 1b. NAVBAR — balanced logo + compact search (top bar only).
   *     The expandable menu (burger) keeps its original style.css look;
   *     here we only rebalance the logo, search field and toggler so the
   *     bar reads clean and professional. Loaded after style.css so these
   *     win over the many fragmented older navbar rules.
   * ------------------------------------------------------------------ */
  .sv-main-nav.theme-nav {
    width: auto !important;
    margin: 10px 12px 0 !important;
  }

  .sv-main-nav.theme-nav > .container-fluid {
    min-height: 0 !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Logo sits inside the bar, comfortably sized */
  .sv-main-nav .navbar-brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
  }

  .sv-main-nav .brand-logo {
    height: 52px !important;
    width: auto !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22)) !important;
  }

  /* Search: takes the remaining width, clean rounded field */
  .sv-main-nav .nav-search-sm {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  .sv-main-nav .nav-search-sm .form-control {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    padding: .5rem 2.6rem .5rem .95rem !important;
  }

  .sv-main-nav .nav-search-sm .btn.btn-search,
  .sv-main-nav .nav-search-sm .btn-search {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 6px 9px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  /* Hamburger: tidy square, balanced with the field */
  .sv-main-nav .navbar-toggler {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------ *
   * 2. BUTTONS & FORMS — comfortable, tappable
   * ------------------------------------------------------------------ */
  /* Keep the established pill shape / weight from style.css — just guarantee a
     comfortable tap target and tactile press feedback. */
  .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-lg,
  .btn-block,
  .d-grid .btn {
    width: 100%;
  }

  .btn:active:not(.btn-link) {
    transform: scale(.985);
  }

  .form-control,
  .form-select,
  textarea {
    min-height: 46px;
    border-radius: 12px;
    font-size: 16px !important;   /* stops iOS zoom on focus */
  }

  textarea {
    min-height: 110px;
  }

  /* ------------------------------------------------------------------ *
   * 3. CARDS & GRIDS — clean rhythm
   *    (The browse product grid manages its own columns in browse.html.)
   * ------------------------------------------------------------------ */
  .card-fixed {
    max-width: 100%;
    min-height: 0;
  }

  /* ------------------------------------------------------------------ *
   * 4. MISC POLISH
   * ------------------------------------------------------------------ */
  /* Bootstrap alerts / Django messages look like floating toasts */
  main#page-content > .alert {
    border-radius: 14px;
    border: 0;
    box-shadow: 0 8px 24px rgba(15, 10, 35, .14);
  }

  /* Smooth momentum scrolling for any horizontal strips */
  [class*="-track"],
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* ------------------------------------------------------------------ *
   * 5. FOOTER — refined spacing & tap targets (already stacks via style.css)
   * ------------------------------------------------------------------ */
  .sv-site-footer.site-footer {
    padding: 2rem 0 1.4rem !important;
    text-align: left;
  }

  .sv-footer-grid {
    gap: 1.6rem 1.2rem;
  }

  .sv-footer-brand {
    grid-column: 1 / -1;
  }

  .sv-footer-text {
    max-width: none;
  }

  .sv-footer-col a {
    padding: 4px 0;          /* larger touch area on links */
    font-size: 1rem !important;
  }

  .sv-footer-col h6 {
    font-size: 1rem;
    margin-top: .25rem;
  }

  .sv-footer-bottom {
    margin-top: 1.4rem;
    font-size: .85rem;
  }
}

/* ----------------------------------------------------------------------------
   PHONE-ONLY refinements (<= 575.98px)
   ---------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .sv-main-nav .brand-logo {
    height: 48px !important;
  }

  /* Stack generic action button groups full width */
  .d-flex.gap-2 > .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 390px) {
  .sv-main-nav .brand-logo {
    height: 44px !important;
  }

  .sv-main-nav.theme-nav > .container-fluid {
    gap: 8px !important;
    padding: 7px 10px !important;
  }
}