/*
 * CyberMark Agency 2.0 — shared content layer for dark inner pages (body.cm-content)
 * Used by service pages (services.css) and the About / Contact / Blog / guide / legal pages
 * (pages.css). Handles what every pre-2.0 template has in common:
 *   - pre-2.0 button classes (.btn-primary etc., often carrying inline styles)
 *   - rich text from the editor, tables
 *   - the fixed set of light-theme colours hardcoded in inline styles, both in templates
 *     and in HTML saved through the page builder, remapped onto the dark palette.
 */

body.cm-content {
    /* Full-bleed sections with content aligned to the site grid */
    --cm-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    /* Pre-2.0 variables referenced by inline styles and saved content */
    --corporate-accent: var(--accent);
    --corporate-gold: var(--accent);
    --corporate-gray: var(--ink-2);
}

.cm-content strong, .cm-content b { color: var(--white); font-weight: 500; }

/* ---------- Tables ---------- */
.cm-content table {
    width: 100%;
    border-collapse: collapse !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--mute-d);
    font-size: 0.95rem;
}

.cm-content th {
    background: transparent !important;
    color: var(--dim-d) !important;
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left !important;
    padding: 0.9rem 1rem !important;
    border-bottom: 1px solid var(--line-d-strong) !important;
}

.cm-content td {
    background: transparent !important;
    color: var(--mute-d) !important;
    padding: 0.9rem 1rem !important;
    border-bottom: 1px solid var(--line-d) !important;
}

.cm-content td:first-child { color: var(--white) !important; }
.cm-content tr { background: transparent !important; }
.cm-content tr:hover td { background: rgba(255, 255, 255, 0.025) !important; }

/* Table wrappers */
.cm-content div[style*="overflow-x"] { max-width: none !important; margin: 0 !important; border: 1px solid var(--line-d); }

/* ---------- Buttons (pre-2.0 classes, often with inline styles) ---------- */
.cm-content .btn-primary,
.cm-content .btn-secondary,
.cm-content .btn,
.cm-content .btn-outline,
.cm-content .pricing-cta,
.cm-content .about-cta-btn,
.cm-content .form-submit,
.cm-content .blog-back-btn,
.cm-content .case-study-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem !important;
    padding: 1.05rem 1.3rem !important;
    background: var(--white) !important;
    color: var(--black) !important;
    border: 1px solid var(--white) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    width: auto;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cm-content .btn-primary::after,
.cm-content .btn-secondary::after,
.cm-content .btn::after,
.cm-content .btn-outline::after,
.cm-content .pricing-cta::after,
.cm-content .about-cta-btn::after,
.cm-content .form-submit::after {
    content: '→';
    position: static;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    transform: none;
    transition: transform 0.25s ease;
}

.cm-content .btn-primary:hover,
.cm-content .btn:hover,
.cm-content .pricing-cta:hover,
.cm-content .about-cta-btn:hover,
.cm-content .form-submit:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--white) !important; }

.cm-content .btn-primary:hover::after,
.cm-content .btn-secondary:hover::after,
.cm-content .btn:hover::after,
.cm-content .btn-outline:hover::after,
.cm-content .pricing-cta:hover::after,
.cm-content .about-cta-btn:hover::after,
.cm-content .form-submit:hover::after { transform: translateX(5px); width: auto; height: auto; }

/* Secondary / outline / back links: ghost style */
.cm-content .btn-secondary,
.cm-content .btn-outline,
.cm-content .blog-back-btn,
.cm-content .case-study-back-btn { background: transparent !important; color: var(--white) !important; border-color: var(--line-d-strong) !important; }

.cm-content .btn-secondary:hover,
.cm-content .btn-outline:hover,
.cm-content .blog-back-btn:hover,
.cm-content .case-study-back-btn:hover { border-color: var(--white) !important; background: transparent !important; }

/* ---------- Inline colour remap (templates + saved builder HTML) ---------- */
/* Slate body greys → muted text */
.cm-content [style*="#475569" i],
.cm-content [style*="#334155" i],
.cm-content [style*="#64748b" i],
.cm-content [style*="#94a3b8" i] { color: var(--mute-d) !important; }

/* Navy headings → white */
.cm-content [style*="color: #0b1f3b" i],
.cm-content [style*="color:#0b1f3b" i],
.cm-content [style*="color: var(--corporate-blue)"],
.cm-content [style*="color:var(--corporate-blue)"],
.cm-content [style*="color: #0f172a" i],
.cm-content [style*="color:#0f172a" i] { color: var(--white) !important; }

/* Light panels → dark panels */
.cm-content [style*="background: #f8fafc" i], .cm-content [style*="background:#f8fafc" i],
.cm-content [style*="background: #f6f8fb" i], .cm-content [style*="background:#f6f8fb" i],
.cm-content [style*="background: #f1f5f9" i], .cm-content [style*="background:#f1f5f9" i],
.cm-content [style*="background: #fff" i], .cm-content [style*="background:#fff" i],
.cm-content [style*="background: white" i], .cm-content [style*="background:white" i],
.cm-content [style*="background-color: #fff" i], .cm-content [style*="background-color:#fff" i],
.cm-content [style*="background-color: white" i], .cm-content [style*="background-color:white" i],
.cm-content [style*="background: #eff6ff" i], .cm-content [style*="background:#eff6ff" i] {
    background: var(--ink-2) !important;
    border-color: var(--line-d) !important;
}

/* Navy panels → deep ink */
.cm-content [style*="background: var(--corporate-blue)"],
.cm-content [style*="background:var(--corporate-blue)"],
.cm-content [style*="background: #0b1f3b" i],
.cm-content [style*="background:#0b1f3b" i] { background: var(--ink-2) !important; }

/* Solid blue callouts → outlined accent panels */
.cm-content [style*="background: #2563eb" i],
.cm-content [style*="background:#2563eb" i],
.cm-content div[style*="background: var(--corporate-accent)"],
.cm-content div[style*="background:var(--corporate-accent)"] {
    background: rgba(76, 144, 240, 0.08) !important;
    border: 1px solid var(--accent) !important;
    color: var(--white) !important;
}

/* Old blue text → accent */
.cm-content [style*="color: #2563eb" i],
.cm-content [style*="color:#2563eb" i] { color: var(--accent) !important; }

/* Light borders → hairlines (old blue accent borders keep the new accent) */
.cm-content [style*="#e2e8f0" i],
.cm-content [style*="#f1f5f9" i],
.cm-content [style*="#cbd5e1" i] { border-color: var(--line-d) !important; }
.cm-content [style*="border-left: 4px solid #2563eb" i],
.cm-content [style*="border-left:4px solid #2563eb" i] { border-left: 1px solid var(--accent) !important; }

/* Square corners, no drop shadows */
.cm-content [style*="border-radius"]:not([style*="50%"]) { border-radius: 0 !important; }
.cm-content [style*="box-shadow"] { box-shadow: none !important; }

/* Inline-styled grids (templates and saved content) collapse to one column on phones */
@media (max-width: 600px) {
    .cm-content [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .cm-content [style*="max-width"] { max-width: 100% !important; }
}