/* ============================================================
   TamRank Editorial Components
   Shared by pillar pages and supporting blog posts.
   Depends on: variables.css (tokens), global.css (base type).
   Enqueued by functions.php on is_singular('pillar') and
   is_singular('post').
   ============================================================ */

/* === Lead paragraph === */
.lede {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--tr-color-slate-700);
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 640px;
}

/* === Hub link to pillar (top of supporting article) === */
.post-hub-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 32px;
    padding: 12px 16px;
    background: var(--tr-color-primary-light);
    border-radius: 8px;
    font-size: 14px;
}
.post-hub-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tr-color-primary-hover);
}
.post-hub-pillar {
    font-weight: 600;
    color: var(--tr-color-slate-900);
    text-decoration: none;
    transition: color 150ms ease;
}
.post-hub-pillar:hover {
    color: var(--tr-color-primary-hover);
}

/* === Hub link bottom === */
.post-hub-link-bottom {
    margin: 48px 0 24px;
    padding: 20px 24px;
    background: var(--tr-color-surface);
    border-radius: 8px;
    font-size: 14px;
    color: var(--tr-color-slate-700);
    line-height: 1.55;
}
.post-hub-link-bottom a {
    color: var(--tr-color-slate-900);
    text-decoration: underline;
    text-decoration-color: var(--tr-color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.post-hub-link-bottom a:hover {
    color: var(--tr-color-primary-hover);
}

/* === Key takeaways === */
.takeaways {
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-surface);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 0 0 56px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
}
.takeaways::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--tr-color-primary);
}
.takeaways-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tr-color-primary);
    margin-bottom: 16px;
}
.takeaways ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: tk;
}
.takeaways li {
    counter-increment: tk;
    padding: 14px 0 14px 36px;
    border-bottom: 1px solid var(--tr-color-surface);
    position: relative;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tr-color-slate-800);
}
.takeaways li:last-child {
    border-bottom: none;
}
.takeaways li::before {
    content: counter(tk, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tr-color-primary);
    letter-spacing: 0.05em;
}

/* === Pull quote === */
.pull {
    background: var(--tr-color-primary-light);
    border-left: 3px solid var(--tr-color-primary);
    padding: 28px 32px;
    margin: 36px 0;
    border-radius: 0 8px 8px 0;
}
.pull p {
    font-size: 1.375rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--tr-color-slate-900);
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}
.pull .attribution {
    margin-top: 14px;
    font-size: 12px;
    color: var(--tr-color-primary-hover);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* === Definition row === */
.def {
    background: var(--tr-color-white);
    border: 1px solid var(--tr-color-surface);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 16px 0;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
}
.def dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tr-color-slate-500);
    padding-top: 2px;
}
.def dd {
    margin: 0;
    color: var(--tr-color-slate-800);
    font-size: 15px;
    line-height: 1.55;
}
.def dd strong {
    color: var(--tr-color-slate-900);
    font-weight: 600;
}

/* === How TamRank does this (soft CTA) === */
.how-tamrank {
    background: var(--tr-color-surface);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 40px 0;
    border-left: 3px solid var(--tr-color-primary);
}
.how-tamrank-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tr-color-primary-hover);
    margin-bottom: 10px;
}
.how-tamrank p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--tr-color-slate-800);
    margin: 0 0 14px;
}
.how-tamrank-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tr-color-primary-hover);
    text-decoration: none;
    transition: gap 150ms ease;
}
.how-tamrank-link:hover {
    gap: 8px;
}

/* === Next in cluster CTA (dark) === */
.next-cluster {
    background: linear-gradient(135deg, var(--tr-color-slate-800) 0%, var(--tr-color-slate-900) 100%);
    color: var(--tr-color-white);
    border-radius: 16px;
    padding: 36px 40px;
    margin: 56px 0 24px;
    position: relative;
    overflow: hidden;
}
.next-cluster::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tr-color-primary), transparent);
}
.next-cluster .label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tr-color-primary);
    margin-bottom: 14px;
}
.next-cluster h3 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--tr-color-white);
    text-wrap: balance;
}
.next-cluster p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.55;
}
.next-cluster .links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
.next-cluster .link {
    background: rgba(0, 0, 0, 0.2);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--tr-color-white);
    text-decoration: none;
    font-size: 14px;
    transition: background 150ms ease;
}
.next-cluster .link:hover {
    background: rgba(0, 0, 0, 0.4);
}
.next-cluster .link .num {
    color: var(--tr-color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-right: 12px;
}
.next-cluster .link .arrow {
    color: rgba(255, 255, 255, 0.4);
    transition: color 150ms ease;
}
.next-cluster .link:hover .arrow {
    color: var(--tr-color-primary);
}
.next-cluster .cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.next-cluster .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--tr-color-primary);
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 200ms ease;
}
.next-cluster .btn-primary:hover {
    background: var(--tr-color-primary-hover);
    transform: translateY(-1px);
}
.next-cluster .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 200ms ease;
}
.next-cluster .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

/* === FAQ accordion ──
   Styles any <details> element inside editorial content
   (.pillar-content / .blog-content / .docs-content), so authors can
   paste bare <details><summary>...</summary><p>...</p></details>
   blocks into the WP editor without remembering wrapper divs or
   inline SVG chevrons. The .faq class still works as an explicit
   group wrapper if you want extra top/bottom margin around a set. */
.faq { margin: 24px 0; }

.pillar-content details,
.blog-content details,
.docs-content details,
.faq details {
    border-bottom: 1px solid var(--tr-color-surface);
    padding: 20px 0;
    margin: 0;
}
.pillar-content details:first-of-type,
.blog-content details:first-of-type,
.docs-content details:first-of-type,
.faq details:first-child {
    border-top: 1px solid var(--tr-color-surface);
}

.pillar-content details > summary,
.blog-content details > summary,
.docs-content details > summary,
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tr-color-slate-900);
    padding: 0;
    /* hide native disclosure triangle in Safari/Firefox/Chrome */
}
.pillar-content details > summary::-webkit-details-marker,
.blog-content details > summary::-webkit-details-marker,
.docs-content details > summary::-webkit-details-marker,
.faq summary::-webkit-details-marker {
    display: none;
}
.pillar-content details > summary::marker,
.blog-content details > summary::marker,
.docs-content details > summary::marker,
.faq summary::marker {
    content: "";
    font-size: 0;
}

/* Auto-injected chevron via background-image so the user does not
   need to paste an inline SVG in every summary. Inline SVG inside
   data-URI uses emerald primary color. */
.pillar-content details > summary::after,
.blog-content details > summary::after,
.docs-content details > summary::after,
.faq summary .chevron-fallback,
.faq summary::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 200ms ease;
}
.pillar-content details[open] > summary::after,
.blog-content details[open] > summary::after,
.docs-content details[open] > summary::after,
.faq details[open] summary::after {
    transform: rotate(180deg);
}

/* If author DID paste an inline <svg class="chevron">, hide the
   auto-injected one to avoid duplicates. */
.pillar-content details > summary:has(> .chevron)::after,
.blog-content details > summary:has(> .chevron)::after,
.docs-content details > summary:has(> .chevron)::after,
.faq summary:has(> .chevron)::after {
    display: none;
}
.faq summary .chevron {
    flex-shrink: 0;
    color: var(--tr-color-primary);
    transition: transform 200ms ease;
}
.faq details[open] summary .chevron {
    transform: rotate(180deg);
}

/* Answer body: works for both <div> and direct <p> children */
.pillar-content details > div,
.pillar-content details > p,
.blog-content details > div,
.blog-content details > p,
.docs-content details > div,
.docs-content details > p,
.faq details > div,
.faq details > p {
    padding-top: 12px;
    margin: 0;
    font-size: 15px;
    color: var(--tr-color-slate-600);
    line-height: 1.65;
}

/* === Inline link style for editorial content === */
.pillar-content a.inline,
.docs-content a.inline,
.blog-content a.inline {
    color: var(--tr-color-slate-900);
    text-decoration: underline;
    text-decoration-color: var(--tr-color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.pillar-content a.inline:hover,
.docs-content a.inline:hover,
.blog-content a.inline:hover {
    color: var(--tr-color-primary-hover);
}

/* === Tablet / large phone === */
@media (max-width: 768px) {
    .takeaways {
        padding: 24px 22px;
    }
    .takeaways li {
        padding: 12px 0 12px 32px;
        font-size: 14px;
    }
    .pull {
        padding: 24px 22px;
        margin: 28px 0;
    }
    .pull p {
        font-size: 1.125rem;
    }
    .def {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 20px;
    }
    .next-cluster {
        padding: 28px 24px;
    }
    .next-cluster h3 {
        font-size: 1.375rem;
    }
    .next-cluster .link {
        padding: 12px 14px;
        font-size: 13px;
    }
    .next-cluster .cta-row {
        flex-direction: column;
    }
    .next-cluster .btn-primary,
    .next-cluster .btn-ghost {
        width: 100%;
        justify-content: center;
    }
    .how-tamrank {
        padding: 20px 22px;
    }
    .post-hub-link {
        padding: 10px 14px;
        font-size: 13px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .post-hub-link-bottom {
        padding: 18px 20px;
        font-size: 13px;
    }
}

/* === Small phones (~480px and below) === */
@media (max-width: 480px) {
    .takeaways {
        padding: 20px 18px;
        margin-bottom: 40px;
    }
    .takeaways li {
        padding: 10px 0 10px 28px;
        font-size: 13.5px;
    }
    .takeaways li::before {
        top: 12px;
        font-size: 11px;
    }
    .pull {
        padding: 20px 18px;
        margin: 24px 0;
    }
    .pull p {
        font-size: 1.0625rem;
    }
    .def {
        padding: 16px 18px;
        margin: 12px 0;
    }
    .def dd {
        font-size: 14px;
    }
    .how-tamrank {
        padding: 18px 18px;
    }
    .how-tamrank p {
        font-size: 14px;
    }
    .next-cluster {
        padding: 24px 18px;
        margin: 40px 0 20px;
    }
    .next-cluster h3 {
        font-size: 1.1875rem;
    }
    .next-cluster .link {
        padding: 12px 14px;
        font-size: 13px;
        gap: 8px;
    }
    .faq summary {
        font-size: 0.9375rem;
    }
    .faq details > div {
        font-size: 14px;
    }
    .lede {
        font-size: 1rem;
    }
}