/*
 * Peer Support – responsive & layout styles
 * All base (desktop) layout is defined here with classes.
 * Inline styles on individual cards/elements are left unchanged.
 */

/* =====================
   NAV
   ===================== */

.ps-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.ps-nav-brand {
  grid-column: 1;
  justify-self: start;
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #5a8a6a;
  text-decoration: none;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* All the link items sit in this container */
.ps-nav-links {
  grid-column: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Hamburger: hidden on desktop */
.ps-nav-hamburger {
  display: none;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 18px;
  color: #1f2937;
  line-height: 1;
  margin-left: auto;
}

/* =====================
   PAGE CONTAINERS
   ===================== */

.ps-page {
  padding: 36px 20px;
}

/* =====================
   GRIDS
   ===================== */

.ps-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ps-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Hero: text left, card right (logged-in) */
.ps-grid-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 50px;
}

/* Hero: text left, card right (logged-out) */
.ps-grid-hero-eq {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 70px;
}

/* Sidebar layout: used for group page (340px) and edit profile (300px) */
.ps-grid-sidebar {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

/* =====================
   CHAT
   ===================== */

/* Desktop: centred column, fixed height */
.ps-chat-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
}

/* The outer page div for the conversation view */
.ps-chat-page {
  background: #fafafa;
  min-height: 100vh;
  padding: 40px 20px;
}

/* =====================
   TYPOGRAPHY HELPERS
   ===================== */

.ps-title-xl { font-size: 60px; }
.ps-title-lg { font-size: 52px; }


/* ============================
   TABLET  641px – 1024px
   ============================ */

@media (max-width: 1024px) and (min-width: 641px) {
  .ps-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ps-grid-sidebar {
    grid-template-columns: 260px 1fr;
  }

  .ps-title-xl {
    font-size: 46px;
  }

  .ps-title-lg {
    font-size: 40px;
  }
}


/* ============================
   MOBILE  ≤ 640px
   ============================ */

@media (max-width: 640px) {

  /* --- Nav --- */
  .ps-nav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .ps-nav-brand {
    grid-column: auto;
    flex: 1;
  }

  .ps-nav-hamburger {
    display: block;
  }

  .ps-nav-links {
    grid-column: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 6px 0 8px 0;
    gap: 2px;
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
  }

  .ps-nav-links.ps-open {
    display: flex;
  }

  /* Make every link / form inside the dropdown full-width */
  .ps-nav-links a,
  .ps-nav-links form {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    border-radius: 8px !important;
  }

  .ps-nav-links form button {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }

  /* Show brand on mobile */
  .ps-nav-brand {
    display: block;
  }

  /* --- Page padding --- */
  .ps-page {
    padding: 24px 16px;
  }

  /* --- All grids collapse to single column --- */
  .ps-grid-2,
  .ps-grid-3,
  .ps-grid-hero,
  .ps-grid-hero-eq,
  .ps-grid-sidebar {
    grid-template-columns: 1fr;
  }

  /* Sidebar (group page): show sidebar info above the posts feed */
  .ps-grid-sidebar aside {
    position: static !important;
  }

  /* --- Chat: full-screen WhatsApp/Instagram layout on mobile --- */

  /* Outer page: exactly the remaining viewport after the nav (~56px) */
  .ps-chat-page {
    padding: 0 !important;
    min-height: unset !important;
    height: calc(100vh - 56px);       /* fallback */
    height: calc(100svh - 56px);      /* stable: doesn't resize when URL bar hides */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Inner wrap: fills the outer, clips overflow */
  .ps-chat-page .ps-chat-wrap {
    flex: 1;
    min-height: 0;         /* critical: allows flex child to shrink below content size */
    height: auto;
    padding: 12px 16px 0 16px;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* Header (back arrow + name): never shrinks */
  .ps-chat-page .ps-chat-wrap > div:first-child {
    flex-shrink: 0;
    margin-bottom: 12px !important;
  }

  /* Messages list: takes all remaining space, scrolls */
  .ps-chat-page #messages {
    margin-bottom: 8px !important;
  }

  /* Message form (direct messages): sticks to bottom, never shrinks */
  .ps-chat-page #message-form {
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 12px); /* iPhone home bar */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Group message form: break out of wrap's horizontal padding so it goes edge-to-edge */
  .ps-chat-page #group-message-form {
    flex-shrink: 0;
    margin-left: -16px;
    margin-right: -16px;
    /* width is implicit: block element, stretched by flex parent */
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  /* --- Typography --- */
  .ps-title-xl {
    font-size: 34px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }

  .ps-title-lg {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  /* Generic large h1 inside pages (for pages we didn't add a class to) */
  h1 {
    word-break: break-word;
  }

  /* --- Edit profile: hide the preview sidebar entirely on mobile --- */
  .ps-edit-sidebar {
    display: none !important;
  }

  /* Show the mobile-only back link above the form */
  .ps-edit-back-mobile {
    display: block;
  }
}