/* ============================================================
   legal-docs.css
   Shared styles for all legal, consent, FAQ, and policy pages.
   Used with: section-legal (from style.css)
   ============================================================ */

/* --- Document Meta Block ---
   Purple left-border box for effective date, applies-to, contact, etc.
   Usage: <div class="doc-meta"><p>...</p></div>
*/
.doc-meta {
    background: #f8f7fc;
    border-left: 4px solid #6B3FA0;
    padding: 20px 24px;
    margin-bottom: 36px;
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}
.doc-meta p {
    margin-bottom: 6px;
}
.doc-meta a {
    color: #6B3FA0;
    text-decoration: underline;
}

/* --- Table of Contents ---
   Usage: <div class="doc-toc"><h2>Table of Contents</h2><ul>...</ul></div>
*/
.doc-toc {
    background: #f8f7fc;
    border-left: 4px solid #6B3FA0;
    padding: 24px 28px;
    margin-bottom: 40px;
    border-radius: 0 8px 8px 0;
}
.doc-toc h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #6B3FA0;
}
.doc-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.doc-toc ul li {
    margin-bottom: 6px;
}
.doc-toc ul li a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.doc-toc ul li a:hover {
    color: #6B3FA0;
    text-decoration: underline;
}

/* --- Section Headings ---
   Purple underlined headings that divide major sections.
   Usage: <h2 class="doc-section-heading" id="...">...</h2>
*/
.doc-section-heading {
    color: #6B3FA0;
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: 48px;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #6B3FA0;
}

/* --- Content Sections ---
   Generic numbered/titled section blocks.
   Usage: <div class="doc-section"><h2>1) Title</h2><p>...</p></div>
*/
.doc-section {
    margin-bottom: 36px;
}
.doc-section h2 {
    color: #6B3FA0;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 16px;
}
.doc-section p,
.doc-section ul,
.doc-section ol {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}
.doc-section ul,
.doc-section ol {
    padding-left: 24px;
    margin: 12px 0;
}
.doc-section ul li,
.doc-section ol li {
    margin-bottom: 6px;
}

/* --- FAQ Items ---
   Q&A blocks within FAQ pages.
   Usage: <div class="doc-faq-item"><h3>1. Question?</h3><p>Answer</p></div>
*/
.doc-faq-item {
    margin-bottom: 32px;
}
.doc-faq-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}
.doc-faq-item p,
.doc-faq-item ul,
.doc-faq-item ol {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}
.doc-faq-item ul,
.doc-faq-item ol {
    padding-left: 24px;
}
.doc-faq-item ul li,
.doc-faq-item ol li {
    margin-bottom: 4px;
}

/* --- Callout Box ---
   Light purple box for highlighting key info.
   Usage: <div class="doc-callout"><p>...</p></div>
*/
.doc-callout {
    background: #f8f7fc;
    border: 1px solid #e0d8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 16px 0;
}
.doc-callout p {
    margin-bottom: 6px;
}
.doc-callout strong {
    color: #6B3FA0;
}

/* --- Exclusion / Quoted Legal Text ---
   Italic left-bordered block for policy exclusions, legal excerpts.
   Usage: <div class="doc-legal-excerpt">...</div>
*/
.doc-legal-excerpt {
    font-style: italic;
    background: #faf9fd;
    border-left: 3px solid #c4b1de;
    padding: 16px 20px;
    margin: 12px 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
}

/* --- Contact Box (dark / branded) ---
   Purple background contact block.
   Usage: <div class="doc-contact"><h4>Title</h4><p>...</p></div>
*/
.doc-contact {
    background: #6B3FA0;
    color: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    margin: 20px 0;
}
.doc-contact h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}
.doc-contact p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.doc-contact a {
    color: #e0d0f5;
    text-decoration: underline;
}
.doc-contact a:hover {
    color: #fff;
}

/* --- Contact Box (light / outlined) ---
   White background with purple border.
   Usage: <div class="doc-contact-alt"><h4>Title</h4><p>...</p></div>
*/
.doc-contact-alt {
    background: #fff;
    border: 2px solid #6B3FA0;
    border-radius: 10px;
    padding: 28px 32px;
    margin: 20px 0;
}
.doc-contact-alt h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #6B3FA0;
}
.doc-contact-alt p {
    color: #444;
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.doc-contact-alt a {
    color: #6B3FA0;
    text-decoration: underline;
}

/* --- Key Benefits / Feature List ---
   Bold-label list items with optional nested sub-lists.
   Usage: <div class="doc-key-benefits"><ul><li><strong>Label:</strong>...<ul>...</ul></li></ul></div>
*/
.doc-key-benefits ul {
    list-style: none;
    padding: 0;
}
.doc-key-benefits ul > li {
    margin-bottom: 14px;
    padding-left: 0;
}
.doc-key-benefits ul > li > strong {
    color: #6B3FA0;
}
.doc-key-benefits ul ul {
    list-style: disc;
    padding-left: 24px;
    margin-top: 4px;
}

/* --- Stat Cards ---
   Grid of small stat/highlight cards.
   Usage: <div class="doc-stats"><div class="doc-stat"><strong>24/7</strong>Description</div>...</div>
*/
.doc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}
.doc-stat {
    background: #f8f7fc;
    border-radius: 8px;
    padding: 14px 18px;
    flex: 1 1 180px;
    text-align: center;
    font-size: 0.9rem;
    color: #444;
}
.doc-stat strong {
    display: block;
    font-size: 1.15rem;
    color: #6B3FA0;
    margin-bottom: 2px;
}

/* --- State Grid ---
   Compact grid for displaying state abbreviations.
   Usage: <div class="doc-state-grid"><span>AK</span><span>AL</span>...</div>
*/
.doc-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px 10px;
    max-width: 600px;
    margin: 16px 0 12px;
}
.doc-state-grid span {
    background: #f8f7fc;
    padding: 6px 0;
    text-align: center;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

/* --- Footer Legal ---
   Small-print disclaimer at bottom of document pages.
   Usage: <div class="doc-footer-legal"><p>...</p></div>
*/
.doc-footer-legal {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #ddd;
    font-size: 0.8rem;
    color: #888;
    line-height: 1.6;
}
.doc-footer-legal a {
    color: #888;
    text-decoration: underline;
}

/* --- Intro Text ---
   Styled paragraph for the opening blurb on consent/policy pages.
   Usage: <p class="doc-intro">...</p>
*/
.doc-intro {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 36px;
}