/* Pahadian post enhancements
   - dark post body + CTA so the blog matches the main site
   - contents list, side images, work-with-us card */

/* ==========================================================
   Dark theme (tokens come from the main site's style.css)
   ========================================================== */

body.single-post article.bg-white {
    background: var(--surface-1, #0b0b0b);
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.single-post .entry-content {
    --accent: #ffffff;
    color: var(--ink-soft, #a3a3a3);
}
.single-post .entry-content > p:first-of-type { color: #d4d4d4; }
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content strong { color: var(--ink, #f5f5f5); }
.single-post .entry-content a {
    color: var(--ink, #f5f5f5);
    text-decoration-color: rgba(255, 255, 255, 0.35);
    transition: text-decoration-color 0.2s ease;
}
.single-post .entry-content a:hover { text-decoration-color: #ffffff; }
.single-post .entry-content blockquote {
    border-left-color: var(--line-strong, rgba(255, 255, 255, 0.18));
    color: #d4d4d4;
}
.single-post .entry-content figcaption { color: var(--ink-dim, #6b6b6b); }
.single-post .entry-content th,
.single-post .entry-content td { border-color: var(--line-strong, rgba(255, 255, 255, 0.18)); }
.single-post .entry-content th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink, #f5f5f5);
}
.single-post .entry-content tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.single-post .entry-content img { border-radius: var(--r-md, 14px); }

/* prev / next */
.single-post .post-footer-nav { border-top-color: var(--line, rgba(255, 255, 255, 0.08)); }
.single-post .post-footer-nav .adjacent-links a {
    border-color: var(--line, rgba(255, 255, 255, 0.08));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
}
.single-post .post-footer-nav .adjacent-links a:hover {
    border-color: var(--line-strong, rgba(255, 255, 255, 0.18));
    background: rgba(255, 255, 255, 0.06);
}
.single-post .post-footer-nav .adjacent-links .direction { color: var(--ink-dim, #6b6b6b); }
.single-post .post-footer-nav .adjacent-links .label { color: var(--ink, #f5f5f5); }

/* "Want more like this?" CTA: was white text on a white card */
body.single-post section[class*="bg-[#f5f5f5]"] { background: var(--bg, #050505); }
body.single-post section[class*="bg-[#f5f5f5]"] > div[class*="bg-white"] {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
        var(--surface-2, #121212);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    box-shadow: none;
}
body.single-post section[class*="bg-[#f5f5f5]"] h2 { color: var(--ink, #f5f5f5); }
body.single-post section[class*="bg-[#f5f5f5]"] p { color: var(--ink-soft, #a3a3a3); }
/* teal button -> the main site's white pill */
body.single-post section[class*="bg-[#f5f5f5]"] a[class*="bg-teal"] {
    background: #ffffff;
    color: #000000;
}
body.single-post section[class*="bg-[#f5f5f5]"] a[class*="bg-teal"]:hover { background: #e5e5e5; }
body.single-post section[class*="bg-[#f5f5f5]"] a[class*="bg-teal"] > span { background: rgba(0, 0, 0, 0.1); }

/* ==========================================================
   Header + footer: the blog theme still had the old blue/teal
   brand colours; the main site is black and white
   ========================================================== */

/* logo: "dian" was a cyan-indigo gradient, main site logo is plain white */
body.single-post .logo-main span[class*="bg-gradient"],
body.single-post footer a[class*="text-2xl"] span[class*="bg-gradient"] {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

/* header WhatsApp button hovered cyan; main site goes light grey */
body.single-post header a[class*="hover:bg-cyan"]:hover {
    background: #e5e5e5;
    border-color: #ffffff;
    color: #000000;
}

/* header sits over the hero and scrolls away with the page
   instead of staying fixed while reading */
body.single-post #mainHead { position: absolute; }

/* header shows just the "Pahadian" pill; hovering (or tabbing into)
   the top bar opens the full menu. Mouse/trackpad screens only:
   touch devices keep the normal bar with the menu button */
@media (min-width: 1024px) and (hover: hover) {
    body.single-post #mainHead nav {
        max-width: 190px;
        overflow: hidden;
        transition: max-width 0.5s var(--ease-lux, cubic-bezier(0.22, 1, 0.36, 1));
    }
    body.single-post #mainHead nav > * { flex-shrink: 0; }
    body.single-post #mainHead nav > div {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }
    body.single-post #mainHead:hover nav,
    body.single-post #mainHead:focus-within nav {
        max-width: 1600px;
    }
    body.single-post #mainHead:hover nav > div,
    body.single-post #mainHead:focus-within nav > div {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease 0.15s, visibility 0s;
    }
}

/* category pill above the title */
body.single-post .page-hero .category { color: #000000; }

/* footer button: teal -> white pill like the main site */
body.single-post footer a[class*="bg-teal"] {
    background: #ffffff;
    color: #000000;
}
body.single-post footer a[class*="bg-teal"]:hover { background: #e5e5e5; }

/* footer contact icons had blue rings */
body.single-post footer .contact-icon-wrap { border-color: rgba(255, 255, 255, 0.2); }

/* hero background when a post has no featured image: drop the blue/purple glow */
body.single-post .pahadian-hero-fallback {
    background:
        radial-gradient(60% 55% at 30% 40%, rgba(255, 255, 255, 0.08), transparent 70%),
        radial-gradient(45% 45% at 78% 60%, rgba(255, 255, 255, 0.05), transparent 70%),
        #050505;
}

/* fixed header would cover headings after a jump */
.entry-content h2[id] { scroll-margin-top: 110px; }

/* ==========================================================
   Images beside the text
   ========================================================== */

.entry-content h2 { clear: both; }
.entry-content .alignright,
.entry-content .alignleft {
    margin: 0.4rem 0 1.5rem;
}
.entry-content .alignright figcaption,
.entry-content .alignleft figcaption { text-align: left; }
@media (min-width: 640px) {
    .entry-content .alignright {
        float: right;
        width: 46%;
        margin: 0.4rem 0 1.25rem 2rem;
    }
    .entry-content .alignleft {
        float: left;
        width: 46%;
        margin: 0.4rem 2rem 1.25rem 0;
    }
}
/* keep the end of the post tidy if text runs out before an image */
.entry-content .pahadian-help,
.entry-content .post-footer-nav { clear: both; }

/* ==========================================================
   Contents list (box above the post on smaller screens)
   ========================================================== */

.entry-content .pahadian-toc {
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-md, 14px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
    padding: 1.1rem 1.25rem;
    margin: 0 0 2.5rem;
}
.entry-content .pahadian-toc__title,
.entry-content .pahadian-help__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim, #6b6b6b);
    margin: 0 0 0.6rem;
}
.entry-content .pahadian-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}
.entry-content .pahadian-toc__list li {
    margin: 0;
    counter-increment: toc;
}
.single-post .entry-content .pahadian-toc__list a {
    display: flex;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink-soft, #a3a3a3);
    text-decoration: none;
    transition: color 0.2s ease;
}
.entry-content .pahadian-toc__list a::before {
    content: counter(toc, decimal-leading-zero);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim, #6b6b6b);
    padding-top: 2px;
}
.single-post .entry-content .pahadian-toc__list a:hover,
.single-post .entry-content .pahadian-toc__list a.is-active { color: var(--ink, #f5f5f5); }
.entry-content .pahadian-toc__list a.is-active { font-weight: 600; }
.entry-content .pahadian-toc__list a.is-active::before { color: #ffffff; }

/* ==========================================================
   Work-with-us card (end of post on smaller screens)
   ========================================================== */

.entry-content .pahadian-help {
    margin: 3rem 0 0;
}
.entry-content .pahadian-help__inner {
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-md, 14px);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
        var(--surface-2, #121212);
    padding: 1.5rem;
}
.entry-content .pahadian-help__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink, #f5f5f5);
    margin: 0 0 0.6rem;
}
.entry-content .pahadian-help__text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.single-post .entry-content .pahadian-help__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    color: #000000;
    border-radius: 999px;
    padding: 0.7rem 1.25rem;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.single-post .entry-content .pahadian-help__btn:hover { background: #e5e5e5; }
.single-post .entry-content .pahadian-help__btn i { font-size: 12px; }
.single-post .entry-content .pahadian-help__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 14px;
    color: var(--ink-soft, #a3a3a3);
    text-decoration: none;
}
.single-post .entry-content .pahadian-help__link:hover { color: var(--ink, #f5f5f5); }

/* ==========================================================
   Wide screens: contents list on the left, card on the right
   text column 868px (820 + padding), side columns sticky
   ========================================================== */

@media (min-width: 1200px) {
    /* overflow:hidden would stop the side columns from sticking */
    article.overflow-hidden:has(.pahadian-toc) {
        overflow: visible;
        overflow-x: clip;
    }

    /* list 240 + gap 32 + text 868, centred as one block */
    .entry-content:has(.pahadian-toc) {
        position: relative;
        max-width: 868px;
        margin-left: calc(50% - 298px);
        margin-right: auto;
    }
    .entry-content .pahadian-toc {
        position: absolute;
        top: 0;
        bottom: 0;
        right: calc(100% + 32px);
        width: 240px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }
    .entry-content .pahadian-toc__inner {
        position: sticky;
        top: 120px;
        padding-left: 1rem;
        border-left: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    }
}

@media (min-width: 1520px) {
    /* list 240 + 32 + text 868 + 32 + card 280 */
    .entry-content:has(.pahadian-toc) { margin-left: calc(50% - 454px); }

    .entry-content .pahadian-help {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% + 32px);
        width: 280px;
        margin: 0;
    }
    .entry-content .pahadian-help__inner {
        position: sticky;
        top: 120px;
    }
}