/* ═══════════════════════════════════════════════════════════════
   RESONANCE THREADS — Footer Pages Shared Styles
   Ensures consistent duo theme contrast for all informational pages
   (legal, about, contact, shipping, returns, faq, community-rules, etc.)
═══════════════════════════════════════════════════════════════ */

/* ── BASE LEGAL PAGE LAYOUT ── */
.legal-page,
.info-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.legal-page h1,
.info-page h1 {
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  color: var(--rt-text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.legal-meta,
.info-meta {
  color: var(--rt-muted);
  font-size: 13px;
  margin-bottom: 36px;
}

.legal-page h2,
.info-page h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text);
}

.legal-page h3,
.info-page h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
  color: var(--rt-text);
}

.legal-page p,
.info-page p {
  line-height: 1.8;
  color: var(--rt-text-2);
  font-size: 15px;
  margin-bottom: 12px;
}

.legal-page li,
.info-page li {
  line-height: 1.7;
  color: var(--rt-text-2);
  font-size: 15px;
  margin-bottom: 8px;
}

.legal-page ul,
.info-page ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-page ol,
.info-page ol {
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-page strong,
.info-page strong {
  color: var(--rt-text);
  font-weight: 600;
}

.legal-page a,
.info-page a {
  color: var(--rt-pink);
  text-decoration: none;
  transition: opacity .15s;
}

.legal-page a:hover,
.info-page a:hover {
  opacity: 0.8;
}

/* ── LIGHT THEME CONTRAST ── */
[data-theme="light"] .legal-page h1,
[data-theme="light"] .info-page h1,
[data-theme="light"] .legal-page h2,
[data-theme="light"] .info-page h2,
[data-theme="light"] .legal-page h3,
[data-theme="light"] .info-page h3 {
  color: #0a0a18;
}

[data-theme="light"] .legal-page p,
[data-theme="light"] .info-page p,
[data-theme="light"] .legal-page li,
[data-theme="light"] .info-page li {
  color: #2a2a40;
}

[data-theme="light"] .legal-page strong,
[data-theme="light"] .info-page strong {
  color: #0a0a18;
}

[data-theme="light"] .legal-meta,
[data-theme="light"] .info-meta {
  color: #606078;
}

/* ── ABOUT PAGE — SECTIONS & CARDS ── */
.about-section {
  max-width: 1100px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

.about-section h2 {
  color: var(--rt-text);
}

.about-section p {
  color: var(--rt-text-2);
  line-height: 1.85;
}

.about-section p strong {
  color: var(--rt-text);
}

[data-theme="light"] .about-section h2 {
  color: #0a0a18;
}

[data-theme="light"] .about-section p {
  color: #2a2a40;
}

[data-theme="light"] .about-section p strong {
  color: #0a0a18;
}

/* About division cards */
.about-div-card {
  background: var(--rt-surface);
  border: 1.5px solid var(--rt-border);
  color: var(--rt-text);
}

.about-div-card h4 {
  color: var(--rt-text);
}

.about-div-card p {
  color: var(--rt-text-2);
}

[data-theme="light"] .about-div-card {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .about-div-card h4 {
  color: #0a0a18;
}

[data-theme="light"] .about-div-card p {
  color: #2a2a40;
}

/* ── CONTACT PAGE — DUO THEME ── */
.contact-form-wrap {
  background: var(--rt-surface);
  border-color: var(--rt-border);
}

.contact-form-wrap h2 {
  color: var(--rt-text);
}

.contact-channel {
  background: var(--rt-surface);
  border-color: var(--rt-border);
}

.contact-channel-label {
  color: var(--rt-muted);
}

.contact-channel-desc {
  color: var(--rt-muted);
}

.contact-location {
  background: var(--rt-surface);
  border-color: var(--rt-border);
}

.contact-location p {
  color: var(--rt-text-2);
}

[data-theme="light"] .contact-form-wrap {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .contact-channel {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .contact-location {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,0,0,0.10);
}

/* ── BREADCRUMB — CONSISTENT ── */
.about-breadcrumb,
.contact-breadcrumb,
.legal-breadcrumb,
.info-breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 12px;
  color: var(--rt-muted);
}

.about-breadcrumb a,
.contact-breadcrumb a,
.legal-breadcrumb a,
.info-breadcrumb a {
  color: var(--rt-muted);
  text-decoration: none;
  transition: color .15s;
}

.about-breadcrumb a:hover,
.contact-breadcrumb a:hover,
.legal-breadcrumb a:hover,
.info-breadcrumb a:hover {
  color: var(--rt-pink);
}

/* ── SECTION ACCENTS — Gradient text for page headers ── */
.about-hero .eyebrow,
.contact-hero h1 .accent,
.info-page .page-accent {
  background: var(--rt-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 767px) {
  .legal-page,
  .info-page {
    padding: 24px 16px 60px;
  }

  .legal-page h1,
  .info-page h1 {
    font-size: 24px;
  }

  .legal-page h2,
  .info-page h2 {
    font-size: 16px;
    margin: 24px 0 10px;
  }

  .legal-page p,
  .legal-page li,
  .info-page p,
  .info-page li {
    font-size: 14px;
  }

  .about-section {
    padding: 0 16px;
    margin-bottom: 36px;
  }

  .about-hero {
    padding: 36px 16px 32px;
  }

  .contact-page {
    padding: 0 16px 60px;
  }
}

/* ── FOOTER NEWSLETTER MSG ── */
.footer-newsletter-msg {
  font-size: 12px;
  margin-top: 8px;
  padding: 0 60px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  min-height: 18px;
}

.footer-newsletter-msg.success {
  color: #4ade80;
}

.footer-newsletter-msg.error {
  color: #f87171;
}

@media (max-width: 768px) {
  .footer-newsletter-msg {
    padding: 0 20px;
  }
}
