/**
 * data-page.css
 * Shared CSS for LLM citation-optimized data reference pages.
 * Mobile-first. Extends estimator-page.css base + variables.
 * Breakpoints: 480, 640, 768, 1024 (matches estimator-page.css)
 *
 * All rules scoped under body.data-page to override base
 * estimator-page.css rules (especially section { min-height: 100vh }).
 *
 * Spec: document_storage slug "data-page-spec-2026"
 * Session 582 (2026-03-18)
 */

/* ============================================
   CRITICAL: Kill base section full-viewport rule.
   estimator-page.css sets section { min-height: 100vh; 100dvh;
   display: flex; }. Data pages use natural content height.
   body.data-page section beats section in specificity.
   ============================================ */

body.data-page section {
    min-height: 0;
    min-height: auto;
    display: block;
    padding: 0;
}

/* ============================================
   LINKS
   estimator-page.css: a { color: var(--color-accent) }
   Data pages: inherit text color.
   ============================================ */

body.data-page a,
body.data-page a:visited {
    color: inherit;
    text-decoration: none;
}

body.data-page a:hover {
    opacity: 0.8;
}

/* ============================================
   LAYOUT
   ============================================ */

body.data-page main.container {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
}

/* ============================================
   HEADER / BREADCRUMB
   ============================================ */

.data-page-header {
    padding: var(--space-md) 0 0;
}

.data-breadcrumb {
    font-size: 13px;
    opacity: 0.6;
}

.data-breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}

.data-breadcrumb span[aria-hidden] {
    margin: 0 var(--space-xs);
}

/* ============================================
   SECTIONS
   ============================================ */

.data-section {
    margin-bottom: var(--section-gap);
}

.data-section:last-of-type {
    margin-bottom: var(--space-lg);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.data-section h1 {
    font-family: 'Libre Caslon Text', serif;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    max-width: var(--content-width);
}

.data-section h2 {
    font-family: 'Libre Caslon Text', serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    max-width: var(--content-width);
}

.data-section h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: var(--space-lg) 0 var(--space-sm);
    max-width: var(--content-width);
}

.data-section p {
    font-size: 15px;
    line-height: 1.7;
    max-width: var(--content-width);
    margin-bottom: var(--space-md);
}

/* ============================================
   DIRECT ANSWER BLOCK
   ============================================ */

.data-direct-answer {
    font-size: 16px;
    line-height: 1.7;
    max-width: var(--content-width);
}

.data-source-line {
    font-size: 13px;
    opacity: 0.6;
    margin-top: var(--space-sm);
}

.data-source-line a {
    text-decoration: underline;
}

/* ============================================
   TABLES
   ============================================ */

.data-section .table-container {
    margin: 0;
    max-width: 100%;
}

/* ============================================
   TIER DESCRIPTIONS
   ============================================ */

.data-tier-description {
    font-size: 14px;
    line-height: 1.6;
    margin: var(--space-sm) 0;
    max-width: var(--content-width);
}

/* ============================================
   TABLE / SOURCE NOTES
   ============================================ */

.data-table-note {
    font-size: 13px;
    opacity: 0.6;
    margin-top: var(--space-sm);
    max-width: var(--content-width);
}

/* ============================================
   FAQ ITEMS
   ============================================ */

.data-faq-item {
    margin-bottom: var(--space-lg);
}

.data-faq-item h3 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.data-faq-item p {
    margin-bottom: 0;
}

/* ============================================
   REVIEWED DATE
   ============================================ */

.data-reviewed-date {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.6;
}

/* ============================================
   RELATED TRADES
   ============================================ */

.data-related-list {
    list-style: none;
    padding: 0;
}

.data-related-list li {
    margin-bottom: var(--space-sm);
}

.data-related-list a {
    opacity: 0.8;
    font-size: 15px;
}

.data-related-list a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */

.data-page-footer {
    padding: var(--space-lg) 0;
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border-light);
    font-size: 13px;
    opacity: 0.6;
}

.data-page-footer a {
    margin-left: var(--space-md);
}

/* ============================================
   480px
   ============================================ */

@media (min-width: 480px) {
    .data-breadcrumb {
        font-size: 14px;
    }

    .data-section h1 {
        margin-bottom: var(--space-lg);
    }

    .data-direct-answer {
        font-size: 17px;
    }
}

/* ============================================
   640px
   ============================================ */

@media (min-width: 640px) {
    .data-section {
        margin-bottom: var(--space-xl);
    }

    .data-section p {
        font-size: 16px;
    }

    .data-tier-description {
        font-size: 15px;
    }

    .data-faq-item {
        margin-bottom: var(--space-xl);
    }
}

/* ============================================
   768px
   ============================================ */

@media (min-width: 768px) {
    body.data-page main.container {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-xl);
    }

    .data-page-header {
        padding: var(--space-lg) 0 0;
    }

    .data-section h2 {
        margin-bottom: var(--space-lg);
    }

    .data-faq-item h3 {
        font-size: 16px;
    }

    .data-page-footer {
        padding: var(--space-xl) 0;
    }
}

/* ============================================
   1024px
   ============================================ */

@media (min-width: 1024px) {
    .data-section p {
        font-size: 17px;
    }

    .data-direct-answer {
        font-size: 18px;
    }

    .data-tier-description {
        font-size: 16px;
    }
}