/* ==========================================================================
   pages.css — PAGE-SPECIFIC STYLES
   Page intro (H1 area), legal pages, contact page.
   Each <body> has a page class: .page-home, .page-diwa-apps, .page-yono-apps,
   .page-contact, .page-privacy-policy, .page-terms, .page-disclaimer
   ========================================================================== */

/* Compact page title area (NOT a large hero/poster banner).
   On the homepage the title stays small so trending apps start immediately. */
.page-intro {
  margin-bottom: var(--space-lg);
}

.page-home .page-intro {
  margin-bottom: var(--space-md);
}

.page-home .page-title {
  font-size: var(--font-size-2xl);
}

.page-title {
  margin-bottom: var(--space-xs);
}

.page-title-highlight {
  background: var(--gradient-neon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-lead {
  max-width: var(--max-width-text);
  font-size: var(--font-size-lg);
}

/* Related-page row under a full category list. Stacked on phones. */
.category-related {
  position: relative;
  margin-top: var(--section-spacing);
  padding-top: var(--space-xl);
}

.category-related::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-divider);
}

.category-related-title {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
}

.category-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-related-list .button {
  width: 100%;
}

/* Breadcrumb  —  <nav class="breadcrumb"> */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--color-text-muted);
}

.breadcrumb-item a {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   LEGAL PAGES  —  .legal-content (privacy policy, terms, disclaimer)
   -------------------------------------------------------------------------- */
.legal-content {
  max-width: var(--max-width-text);
}

.legal-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xl);
}

.legal-content p,
.legal-content ul,
.legal-content ol {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

.legal-content li + li {
  margin-top: var(--space-2xs);
}

.legal-updated {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   CONTACT PAGE  —  #contact-section
   -------------------------------------------------------------------------- */
.contact-content {
  max-width: var(--max-width-text);
}