/* 
 * MPS-Agentic Static Pages Stylesheet
 * Shared by: faq.html, privacy.html, terms.html
 */

:root {
  --primary-brown: #8B4513;
  --secondary-brown: #A0522D;
  --accent-tan: #D4A574;
  --light-tan: #F5E6D3;
  --bg-gradient-start: #D4A574;
  --bg-gradient-mid: #B8956A;
  --bg-gradient-end: #A6825C;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
  min-height: 100vh;
  padding: 2rem;
}

.page-container {
  max-width: 900px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-header h1 {
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header p {
  color: rgba(255,255,255,0.9);
}

.content-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  margin-bottom: 2rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  margin-bottom: 1rem;
}

.back-link:hover {
  color: var(--light-tan);
}

.section-title {
  color: var(--primary-brown);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* FAQ-specific: section title with border */
.section-title-bordered {
  color: var(--primary-brown);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-tan);
}

.content-card p, .content-card li {
  color: #555;
  line-height: 1.7;
}

.last-updated {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Privacy page highlight box */
.highlight-box {
  background: var(--light-tan);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* FAQ accordion styling */
.accordion-button {
  color: var(--primary-brown);
  font-weight: 500;
}

.accordion-button:not(.collapsed) {
  background-color: var(--light-tan);
  color: var(--primary-brown);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(212, 165, 116, 0.25);
}

/* FAQ support button */
.btn-support {
  background-color: var(--primary-brown);
  border-color: var(--primary-brown);
  color: white;
}

.btn-support:hover {
  background-color: var(--secondary-brown);
  border-color: var(--secondary-brown);
  color: white;
}

.footer {
  text-align: center;
  margin-top: 2rem;
  color: rgba(255,255,255,0.8);
}

.footer a {
  color: white;
}

/* Header icon styling */
.page-header-icon {
  height: 36px;
  width: 36px;
  margin-right: 12px;
  vertical-align: middle;
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  .content-card {
    padding: 1rem;
    border-radius: 12px;
  }

  /* Pre/code blocks: smaller font, horizontal scroll with indicator */
  pre {
    font-size: 0.75rem !important;
    padding: 8px !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .page-header h1 {
    font-size: 1.4rem;
  }

  .page-header-icon {
    height: 28px;
    width: 28px;
    margin-right: 8px;
  }
}