/* css/mobile.css
   Global responsive overrides (phones, tablets, small desktops)
   Include AFTER style.css on every page.
*/

/* ---------- Baseline: small desktops/tablets ---------- */
@media (max-width: 1024px) {
  .page-wrapper { padding: 0 12px; }

  /* Force header to scroll normally (override any sticky/fixed rules elsewhere) */
  .site-header, .app-header {
    position: relative !important;
    top: auto !important;
  }
}

/* ---------- Tablets / small screens ---------- */
@media (max-width: 820px) {
  /*
    Header layout for tablet/phone:
    Row 1: centered logo
    Row 2: 2x2 nav buttons
    Row 3: bell + avatar centered
  */
  .site-header, .app-header {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
    position: static !important; /* header should scroll with page */
    overflow: visible !important; /* allow dropdowns to show */
    z-index: 10;
  }

  /* Center logo */
  .site-header .logo, .app-header .logo {
    order: 1;
    width: 100% !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Make nav a 2-column grid (Search/Matches/Store/Messages) */
  .site-header .main-nav, .app-header .main-nav {
    order: 2;
    width: 100% !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: stretch;
    align-items: stretch;
    margin: 0 !important;
  }

  .site-header .main-nav a,
  .app-header .main-nav a {
    min-width: 0;
    text-align: center;
    padding: 12px 10px;
    font-size: 16px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Header-right icons centered on their own row */
  .site-header .header-right, .app-header .header-right {
    order: 3;
    width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 !important;
  }

  /* Keep notif + avatar next to each other */
  #notifBtn, #avatarBtn {
    margin: 0 !important;
  }

  /* Dropdowns must not get clipped by header/tabs */
  #notifDropdown, #userDropdown {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Below logo + nav + icons (keeps it above tabs) */
    top: 190px !important;
    width: min(92vw, 420px) !important;
    max-height: 60vh !important;
    overflow: auto !important;
    z-index: 99999 !important;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 520px) {
  .site-header, .app-header { padding: 8px 10px; }

  .main-nav { gap: 8px; }
  .site-header .main-nav a, .app-header .main-nav a {
    padding: 10px 8px;
    font-size: 15px;
  }

  /* Tabs row spacing (My Profile / Edit Profile / Settings) */
  .profile-tabs {
    gap: 14px !important;
    justify-content: center !important;
    padding: 10px 10px 6px !important;
  }
  .profile-tabs a, .profile-tabs button {
    padding: 8px 6px !important;
    font-size: 16px !important;
  }

  /* Ensure dropdowns appear ABOVE tabs */
  #notifDropdown, #userDropdown {
    top: 205px !important;
    z-index: 99999 !important;
  }

  /* Tabs/content should never cover dropdowns */
  .profile-tabs,
  .profile-tabs a,
  .profile-tabs button,
  .profile-card,
  .profile-main {
    position: relative;
    z-index: 1 !important;
  }

  /* Profile picture + border: keep border OUTSIDE the pic (not inside) */
  .profile-pic-wrap {
    /* Tablet default; phones override in the next breakpoint */
    width: min(70vw, 360px) !important;
    height: min(70vw, 360px) !important;
    margin: 10px auto 14px !important;
    position: relative !important;
  }

  /* Your picture (inside the border hole) */
  #profilePic,
  .profile-pic-wrap img#profilePic {
    width: calc(100% * 0.82) !important;
    height: calc(100% * 0.82) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    z-index: 2 !important;
  }

  /* Border overlay: slightly larger than wrap so it fully surrounds the pic */
  #profileBorder,
  .profile-border {
    position: absolute !important;
    inset: -14px !important;
    /* Fill the border asset to the box so it surrounds the photo */
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }
}

/* ---------- Phones (iPhone/Android) ---------- */
@media (max-width: 520px) {
  .site-header .main-nav a, .app-header .main-nav a {
    font-size: 14px !important;
    padding: 10px 8px !important;
  }

  /* Slightly larger photo on phones, but keep it within the viewport */
  .profile-pic-wrap {
    width: min(86vw, 320px) !important;
    height: min(86vw, 320px) !important;
  }

  #profileBorder,
  .profile-border {
    inset: -12px !important;
    background-size: 100% 100% !important;
  }

  /* Dropdowns need to sit under the taller stacked header */
  #notifDropdown, #userDropdown {
    top: 220px !important;
    width: min(94vw, 420px) !important;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .main-nav a { font-size: 14px; padding: 9px 6px; }
  #notifDropdown, #userDropdown { width: 94vw !important; top: 235px !important; }
  .profile-pic-wrap { width: min(86vw, 300px) !important; height: min(86vw, 300px) !important; }
}


/* ---------- Messages page: avoid footer overlay + improve layout ---------- */
@media (max-width: 820px) {
  .app-footer { position: relative !important; }
  body.messages-page { padding-bottom: 12px; }
}