/* ============================================================
   Qualitracker shared platform header + footer
   Included via {% include 'QualitrackApp/_platform_header.html' %}
   and {% include 'QualitrackApp/_platform_footer.html' %}
   on the landing page and topic-list page (not the chat screen).
   Both are direct children of a flex-column shell (.lp-shell /
   .tp-shell) fixed to the viewport height, so flex-shrink: 0 keeps
   them pinned at full size while the shell's content area scrolls.
   ============================================================ */

.ph-header {
  background: #1A3A4A;
  color: #fff;
  flex-shrink: 0;
}

.ph-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ph-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ph-logo { width: 34px; height: 34px; display: block; }

.ph-wordmark {
  font-family: 'Poppins', Lato, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ph-about-btn {
  font-family: 'Poppins', Lato, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.ph-about-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

@media (max-width: 480px) {
  .ph-header-inner { padding: 14px 16px; }
  .ph-wordmark { font-size: 16px; }
  .ph-about-btn { padding: 6px 10px; font-size: 12px; }
}

.ph-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 20px 24px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  background: #1A3A4A;
}

.ph-footer strong { font-weight: 700; color: #fff; }
.ph-footer a { color: #fff; text-decoration: none; }
.ph-footer a:hover { text-decoration: underline; }