/*
 * CMC Cloner — V3 (boutique style) page styles.
 *
 * Theme-independent. All rules scoped to `.cmc-v3-page` so they never
 * bleed into the active theme's typography, and the plugin owns the
 * presentation of every V3 page regardless of which theme is active
 * (Woodmart, Flatsome, Astra, GeneratePress, etc.).
 *
 * Enqueued by CMC_Public when the current post has the postmeta
 * `_cmc_skeleton = 'v3'` (set by CMC_Page_Writer when a V3 build saves
 * its output).
 *
 * Visual model: citylimitsomaha.us — narrow content column, warm but
 * restrained typography, clear section hierarchy with hairline
 * dividers, contact-info "card" style for the Who We Are / Business
 * Information blocks.
 *
 * Conventions:
 *  - Spacing scale lives on the wrapper as CSS custom properties so
 *    per-page tweaks stay local.
 *  - Font sizes are in rem so they scale with theme's html font-size.
 *  - Colors use neutrals + an optional accent var (--cmc-v3-accent)
 *    that the plugin can override inline if the operator configures
 *    a brand color in Settings.
 *  - No !important. Specificity controlled by the .cmc-v3-page scope.
 */

/* =====================================================================
 * 1. Design tokens (scoped to the V3 wrapper)
 * ===================================================================== */
.cmc-v3-page {
    --cmc-v3-text:         #111827;
    --cmc-v3-text-muted:   #4b5563;
    --cmc-v3-text-soft:    #6b7280;
    --cmc-v3-border:       #e5e7eb;
    --cmc-v3-border-soft:  #f3f4f6;
    --cmc-v3-accent:       #b45309;        /* warm amber — boutique vibe */
    --cmc-v3-accent-soft:  rgba(180, 83, 9, 0.08);
    --cmc-v3-link:         #b45309;
    --cmc-v3-link-hover:   #92400e;
    --cmc-v3-bg-card:      #fafaf9;
    --cmc-v3-radius:       8px;
    --cmc-v3-radius-lg:    12px;
    --cmc-v3-space-xs:     8px;
    --cmc-v3-space-sm:     16px;
    --cmc-v3-space-md:     24px;
    --cmc-v3-space-lg:     40px;
    --cmc-v3-space-xl:     56px;
    --cmc-v3-max-width:    760px;
    --cmc-v3-line-height:  1.7;
    --cmc-v3-line-height-tight: 1.4;
}

/* =====================================================================
 * 2. Wrapper + container (narrow legal-page column)
 * ===================================================================== */
.cmc-v3-page {
    color: var(--cmc-v3-text);
    line-height: var(--cmc-v3-line-height);
    padding: var(--cmc-v3-space-lg) var(--cmc-v3-space-sm);
    /* Inherit font-family from theme — we want V3 to feel native to
       whatever the user picked (Woodmart Inter, Flatsome system, etc.)
       and only override what we need for layout / hierarchy. */
    font-family: inherit;
}
.cmc-v3-container {
    max-width: var(--cmc-v3-max-width);
    margin: 0 auto;
}
.cmc-v3-page *,
.cmc-v3-page *::before,
.cmc-v3-page *::after {
    box-sizing: border-box;
}

/* =====================================================================
 * 3. Headings — clear hierarchy, no theme bleed
 * ===================================================================== */
.cmc-v3-page h1 {
    font-size: 2rem;
    line-height: var(--cmc-v3-line-height-tight);
    font-weight: 700;
    margin: 0 0 var(--cmc-v3-space-md);
    color: var(--cmc-v3-text);
    letter-spacing: -0.01em;
}
.cmc-v3-page h2 {
    font-size: 1.375rem;
    line-height: var(--cmc-v3-line-height-tight);
    font-weight: 700;
    margin: var(--cmc-v3-space-lg) 0 var(--cmc-v3-space-sm);
    color: var(--cmc-v3-text);
}
.cmc-v3-page h3 {
    font-size: 1.125rem;
    line-height: var(--cmc-v3-line-height-tight);
    font-weight: 600;
    margin: var(--cmc-v3-space-md) 0 var(--cmc-v3-space-xs);
    color: var(--cmc-v3-text);
}

/* =====================================================================
 * 4. Paragraphs + inline emphasis
 * ===================================================================== */
.cmc-v3-page p {
    margin: 0 0 var(--cmc-v3-space-sm);
    font-size: 1rem;
    color: var(--cmc-v3-text);
}
.cmc-v3-page strong {
    font-weight: 700;
    color: var(--cmc-v3-text);
}
.cmc-v3-page em {
    font-style: italic;
}
.cmc-v3-page .cmc-v3-lead {
    font-size: 1.0625rem;
    color: var(--cmc-v3-text-muted);
    margin-bottom: var(--cmc-v3-space-md);
}

/* =====================================================================
 * 5. Links
 * ===================================================================== */
.cmc-v3-page a {
    color: var(--cmc-v3-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 140ms ease;
}
.cmc-v3-page a:hover,
.cmc-v3-page a:focus {
    color: var(--cmc-v3-link-hover);
    text-decoration-thickness: 2px;
}

/* =====================================================================
 * 6. Lists — bullets match City Limits visual rhythm
 * ===================================================================== */
.cmc-v3-page ul,
.cmc-v3-page ol {
    margin: 0 0 var(--cmc-v3-space-sm);
    padding-left: 1.5rem;
}
.cmc-v3-page ul {
    list-style: disc outside;
}
.cmc-v3-page ol {
    list-style: decimal outside;
}
.cmc-v3-page li {
    margin: 0 0 var(--cmc-v3-space-xs);
    line-height: var(--cmc-v3-line-height);
}
.cmc-v3-page li::marker {
    color: var(--cmc-v3-text-soft);
}
.cmc-v3-page li > strong:first-child {
    /* "Label:" style bullets get a slightly bolder color to telegraph
       the prefix at a glance — matches the reference page's emphasis
       pattern (Order Details / Payment Information / etc.). */
    color: var(--cmc-v3-text);
}

/* =====================================================================
 * 7. Dividers — subtle hairline between major sections
 * ===================================================================== */
.cmc-v3-page hr,
.cmc-v3-page .cmc-v3-divider,
.cmc-v3-page hr.cmc-v2-divider {
    /* Allow either the legacy V2 divider class (carried over for now
       while we migrate) or a fresh V3 divider class. Both render the
       same hairline so the migration is a no-op visually. */
    border: 0;
    border-top: 1px solid var(--cmc-v3-border);
    margin: var(--cmc-v3-space-lg) 0;
    height: 0;
    padding: 0;
}

/* =====================================================================
 * 8. Contact / Business Info "card" block
 *    Used by: Privacy §1 Who We Are, About Us §5 Official Business Info
 * ===================================================================== */
.cmc-v3-page .cmc-v3-contact,
.cmc-v3-page .cmc-v3-business-info,
.cmc-v3-page .cmc-contact-list {
    /* `.cmc-contact-list` carried for back-compat with the legacy V2
       templates while V3 migrates. Drop after migration is complete. */
    list-style: none;
    padding: var(--cmc-v3-space-sm) var(--cmc-v3-space-md);
    margin: 0 0 var(--cmc-v3-space-sm);
    background: var(--cmc-v3-bg-card);
    border: 1px solid var(--cmc-v3-border-soft);
    border-radius: var(--cmc-v3-radius);
}
.cmc-v3-page .cmc-v3-contact li,
.cmc-v3-page .cmc-v3-business-info li,
.cmc-v3-page .cmc-contact-list li {
    margin: 0 0 var(--cmc-v3-space-xs);
    padding: 0;
    line-height: var(--cmc-v3-line-height);
}
.cmc-v3-page .cmc-v3-contact li:last-child,
.cmc-v3-page .cmc-v3-business-info li:last-child,
.cmc-v3-page .cmc-contact-list li:last-child {
    margin-bottom: 0;
}
.cmc-v3-page .cmc-v3-contact li::marker,
.cmc-v3-page .cmc-v3-business-info li::marker,
.cmc-v3-page .cmc-contact-list li::marker {
    content: '';
}

/* =====================================================================
 * 9. Store hours block (About Us §6)
 * ===================================================================== */
.cmc-v3-page .cmc-v3-hours {
    margin: var(--cmc-v3-space-xs) 0 var(--cmc-v3-space-sm);
    padding: var(--cmc-v3-space-xs) var(--cmc-v3-space-sm);
    background: var(--cmc-v3-accent-soft);
    border-left: 3px solid var(--cmc-v3-accent);
    border-radius: 0 var(--cmc-v3-radius) var(--cmc-v3-radius) 0;
    font-size: 0.9375rem;
    color: var(--cmc-v3-text-muted);
}

/* =====================================================================
 * 10. About Us page-specific tweaks
 *     (.cmc-v3-page--about wraps the page when slug = about-us so we
 *     can tune typography vs. the policy pages.)
 * ===================================================================== */
.cmc-v3-page--about .cmc-v3-lead {
    /* The Welcome paragraph already sits right under H1 — give it a
       little more breathing room than the policy pages' shorter intro. */
    font-size: 1.125rem;
    margin-bottom: var(--cmc-v3-space-lg);
}

/* =====================================================================
 * 11. Mobile responsive
 * ===================================================================== */
@media (max-width: 640px) {
    .cmc-v3-page {
        padding: var(--cmc-v3-space-md) var(--cmc-v3-space-sm);
    }
    .cmc-v3-page h1 {
        font-size: 1.625rem;
    }
    .cmc-v3-page h2 {
        font-size: 1.1875rem;
        margin-top: var(--cmc-v3-space-md);
    }
    .cmc-v3-page .cmc-v3-lead {
        font-size: 1rem;
    }
    .cmc-v3-page .cmc-v3-contact,
    .cmc-v3-page .cmc-v3-business-info,
    .cmc-v3-page .cmc-contact-list {
        padding: var(--cmc-v3-space-sm);
    }
    .cmc-v3-page hr,
    .cmc-v3-page .cmc-v3-divider,
    .cmc-v3-page hr.cmc-v2-divider {
        margin: var(--cmc-v3-space-md) 0;
    }
}