/**
 * WP ToolSuite Pro - Frontend CSS
 * FIXED v2 — Mobile tool rendering bug fix
 *
 * CHANGE LOG:
 * - Removed `all: initial` and `all: revert` from .tool-injection-area
 *   These were destroying tool CSS on Safari/Chrome mobile, causing layout
 *   collapse, width shrinkage, and broken structure on any tool with its
 *   own scoped CSS (like #pro-brick-calc, #pro-emi-calc etc.)
 * - Replaced with a clean neutral wrapper that only sets display + isolation
 */

:root {
    --ts-primary: #EF4444;
    --ts-accent: #DC2626;
    --ts-bg: #F8FAFC;
    --ts-btn-color: #EF4444;
    --ts-text-muted: #64748B;
    --ts-text-main: #0F172A;
    --ts-border: #E2E8F0;
}

*, *::before, *::after { box-sizing: border-box; }

.ts-frontend-wrapper {
    background: var(--ts-bg);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ts-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Tool Card ── */
.ts-tool-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 14px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}
.ts-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.09);
    border-color: var(--ts-primary);
    color: inherit;
    text-decoration: none;
}
.ts-tool-icon {
    width: 52px; height: 52px;
    background: rgba(239,68,68,0.1);
    color: var(--ts-primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   TOOL INJECTION AREA — FIXED
   BUG:  `all: initial` + `all: revert` reset ALL inherited CSS
         on mobile browsers, breaking scoped tool stylesheets
         like #pro-brick-calc, #pro-emi-calc etc.
   FIX:  Replace with a clean, neutral wrapper that:
         (a) does NOT reset any properties
         (b) provides unicode-bidi isolation (same as before)
         (c) sets display:block so it behaves as a block container
   NOTE: padding removed from wrapper — each tool manages its
         own internal padding.
   ─────────────────────────────────────────────────────────── */
.tool-injection-area {
    display: block;
    unicode-bidi: isolate;
    color: inherit;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* ── ts-tool-render-wrap: extra safety for tool containers ── */
.ts-tool-render-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

/* ── Calc content in sidebar ── */
.ts-calc-content h2,
.ts-calc-content h3 { font-size: 0.9rem; font-weight: 700; margin: 14px 0 6px 0; color: #0F172A; }
.ts-calc-content p { margin: 0 0 10px 0; line-height: 1.65; }
.ts-calc-content ul, .ts-calc-content ol { padding-left: 18px; margin: 8px 0 12px; }
.ts-calc-content li { margin-bottom: 4px; }
.ts-calc-content strong { color: #0F172A; font-weight: 700; }
.ts-calc-content code { background: #F1F5F9; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }

/* ── Content area ── */
.ts-content-area h2 { font-size: 1.3rem; font-weight: 700; margin: 28px 0 12px; color: #0F172A; }
.ts-content-area h3 { font-size: 1.1rem; font-weight: 700; margin: 22px 0 10px; color: #0F172A; }
.ts-content-area p { margin: 0 0 16px; line-height: 1.75; }
.ts-content-area ul, .ts-content-area ol { padding-left: 22px; margin: 0 0 16px; }
.ts-content-area li { margin-bottom: 6px; }
.ts-content-area table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.ts-content-area th, .ts-content-area td { padding: 10px 14px; border: 1px solid #E2E8F0; font-size: 14px; }
.ts-content-area th { background: #F8FAFC; font-weight: 700; }

/* ── Review form ── */
.ts-review-form-wrap input:focus,
.ts-review-form-wrap textarea:focus {
    outline: none;
    border-color: var(--ts-primary) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}

/* ── Archive hero ── */
.ts-archive-hero { background: white; padding: 70px 20px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 50px; }
.ts-archive-hero h1 { font-size: 3rem; font-weight: 800; color: #0F172A; margin: 0 0 16px; letter-spacing: -0.03em; line-height: 1.15; }

/* ── Sandbox iframe ── */
.ts-sandbox-wrap iframe { border: none; width: 100%; min-height: 450px; display: block; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ts-main-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
    .ts-archive-hero h1 { font-size: 2.1rem !important; }
    .ts-tools-grid { grid-template-columns: 1fr !important; }
}