/**
 * ============================================================
 * mw-article.css — The Male Whisperer Insight Post Stylesheet
 * ============================================================
 *
 * Shared structural CSS for every /insights/[slug]/ post page:
 * topbar, breadcrumb, hero, key-takeaways, article body, pull
 * quotes, sutta-quote box, inline tooltips (author byline +
 * canonical citations), tags, CTA, related-articles, footer.
 *
 * USAGE: one line in <head>, replacing the old inline <style> block:
 *   <link rel="stylesheet" href="/css/mw-article.css">
 *
 * CHANGES: edit this ONE file. All post pages update automatically.
 *
 * Note: removed from this version (previously duplicated dead CSS
 * in Article 1 and Part 1, unused since mw-subscribe.js took over
 * rendering the subscribe form with its own .mw-sub-* class names):
 * .mw-subscribe-eyebrow, .mw-subscribe-option, .chaytna-tooltip, etc.
 * ============================================================
 */

        :root {
            --gold: #C8A456;
            --gold-light: #E8D5A3;
            --sandalwood: #8B6914;
            --ochre: #B8860B;
            --cream: #FFF8F0;
            --warm-white: #FFFDF9;
            --parchment: #F5E6D0;
            --deep-brown: #3D2B1F;
            --text-dark: #2C1810;
            --text-medium: #5C4033;
            --text-light: #8B7355;
            --lotus-pink: #E8B4B8;
            --lotus-pink-dark: #C98A90;
        }
		/* === Change Hyperlinks Default Colors to Match Theme === */
		/* 1. Unvisited link state */
		a:link {
		  color: var(--deep-brown); 
		}

		/* 2. Visited link state */
		a:visited {
		  color: var(--gold); 
		}

		/* 3. Hover state (mouse pointer over link) */
		a:hover {
		  color: var(--sandalwood); 
		}

		/* 4. Active state (the moment the link is clicked) */
		a:active {
		  color: var(--ochre); 
		}

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { font-size: 16px; scroll-behavior: smooth; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--warm-white);
            color: var(--text-dark);
            line-height: 1.8;
        }

        /* ── Topbar ── */
        .topbar {
            background: var(--cream);
            border-bottom: 1px solid rgba(200,164,86,0.25);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .topbar-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-dark);
            text-decoration: none;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .topbar-back {
            font-size: 0.82rem;
            color: var(--sandalwood);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid var(--gold-light);
            transition: color 0.2s ease;
        }

        .topbar-back:hover { color: var(--gold); }

        /* ── Article hero ── */
        .article-hero {
            background: linear-gradient(135deg, var(--cream) 0%, var(--parchment) 100%);
            padding: 4rem 2rem 3rem;
            border-bottom: 1px solid rgba(200,164,86,0.2);
        }

        .article-hero-inner {
            max-width: 760px;
            margin: 0 auto;
        }

        .article-meta-top {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .article-category {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--sandalwood);
            text-transform: uppercase;
            letter-spacing: 2px;
            background: rgba(200,164,86,0.12);
            border: 1px solid rgba(200,164,86,0.3);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
        }

        .article-number {
            font-size: 0.72rem;
            color: var(--text-light);
            letter-spacing: 1px;
        }

        .article-hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.9rem, 4.5vw, 2.9rem);
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.25;
            margin-bottom: 0.75rem;
        }

        .article-byline {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: 1.2rem;
            color: var(--gold);
            margin-bottom: 1.5rem;
        }

        .article-meta-bottom {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-size: 0.8rem;
            color: var(--text-light);
            flex-wrap: wrap;
        }

        .article-meta-bottom span { display: flex; align-items: center; gap: 0.35rem; }

        /* ── Key Takeaways (collapsible) ── */
        .takeaways-wrap {
            max-width: 760px;
            margin: 2.5rem auto 0;
            padding: 0 2rem;
        }

        details.takeaways {
            background: var(--cream);
            border: 1px solid rgba(200,164,86,0.3);
            border-radius: 10px;
            overflow: hidden;
        }

        summary.takeaways-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.1rem 1.5rem;
            cursor: pointer;
            list-style: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--sandalwood);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            user-select: none;
            transition: background 0.2s ease;
        }

        summary.takeaways-trigger:hover { background: rgba(200,164,86,0.06); }
        summary.takeaways-trigger::-webkit-details-marker { display: none; }

        .takeaways-arrow {
            font-size: 0.75rem;
            transition: transform 0.25s ease;
            color: var(--gold);
        }

        details.takeaways[open] .takeaways-arrow { transform: rotate(180deg); }

        .takeaways-body {
            padding: 0 1.5rem 1.25rem;
            border-top: 1px solid rgba(200,164,86,0.2);
        }

        .takeaways-body ol {
            padding-left: 1.2rem;
            margin-top: 1rem;
        }

        .takeaways-body li {
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.7;
            margin-bottom: 0.65rem;
            padding-left: 0.25rem;
        }

        .takeaways-body li::marker { color: var(--gold); }

        /* ── Article body ── */
        .article-body {
            max-width: 760px;
            margin: 0 auto;
            padding: 3rem 2rem 2rem;
        }

        /* Opening paragraph */
        .article-body p {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 1.06rem;
            color: var(--text-medium);
            margin-bottom: 1.4rem;
            line-height: 1.8;
        }

        .article-body .opening-line {
            font-size: 1.18rem;
            font-weight: 500;
            color: var(--text-dark);
        }

        /* Section headers */
        .article-body h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.45rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 2.75rem 0 1.1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--gold-light);
            display: inline-block;
        }

        /* Pull quote / key statement */
        .pull-quote {
            border-left: 3px solid var(--gold);
            padding: 1rem 1.5rem;
            margin: 2rem 0;
            background: rgba(200,164,86,0.06);
            border-radius: 0 8px 8px 0;
        }

        .pull-quote p {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.25rem;
            color: var(--text-dark);
            margin-bottom: 0;
        }

        /* Sutta quote block */
        .sutta-quote {
            background: rgba(200,164,86,0.05);
            border: 1px solid rgba(200,164,86,0.25);
            border-radius: 10px;
            padding: 1.5rem 1.75rem;
            margin: 2rem 0;
        }

        .sutta-quote .speaker {
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--sandalwood);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.4rem;
        }

        .sutta-quote p {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: 1.15rem;
            color: var(--text-dark);
            margin-bottom: 0.75rem;
        }

        .sutta-quote p:last-of-type { margin-bottom: 0.4rem; }

        .sutta-citation {
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            color: var(--text-light);
            margin-bottom: 0 !important;
        }

        /* Article divider */
        .article-divider {
            border: none;
            border-top: 1px solid rgba(200,164,86,0.2);
            margin: 2.5rem 0;
        }

        /* ── Inline tooltip (author byline, canonical citations) ── */
        .tooltip-container {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted var(--gold);
            cursor: help;
        }

        .tooltip-container .info-icon {
            font-size: 0.72em;
            color: var(--gold);
            margin-left: 0.15rem;
            vertical-align: super;
        }

        .tooltip-container .tooltip-box {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            left: 50%;
            bottom: calc(100% + 10px);
            transform: translateX(-50%);
            width: 320px;
            max-width: 82vw;
            background: var(--deep-brown);
            color: rgba(255,255,255,0.92);
            font-family: 'Inter', sans-serif;
            font-style: normal;
            font-size: 0.82rem;
            line-height: 1.6;
            padding: 0.9rem 1.1rem;
            border-radius: 8px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.18);
            transition: opacity 0.2s ease;
            z-index: 20;
        }

        /* Dedicated CTA line inside a tooltip (e.g. "Read the full story →").
           Kept as its own block so it doesn't cram inline at the tail end
           of the paragraph above it. */
        .tooltip-box .tooltip-cta {
            display: block;
            margin-top: 0.6rem;
            padding-top: 0.6rem;
            border-top: 1px solid rgba(255,255,255,0.15);
            font-weight: 600;
            color: var(--gold-light);
            text-decoration: none;
            white-space: nowrap;
        }

        .tooltip-box .tooltip-cta:hover { color: var(--gold); }

        .tooltip-container .tooltip-box::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: var(--deep-brown) transparent transparent transparent;
        }

        .tooltip-container:hover .tooltip-box,
        .tooltip-container:focus .tooltip-box,
        .tooltip-container:focus-within .tooltip-box {
            visibility: visible;
            opacity: 1;
        }

        @media (max-width: 600px) {
            .tooltip-container .tooltip-box {
                width: 260px;
                left: auto;
                right: -1rem;
                transform: none;
            }
            .tooltip-container .tooltip-box::after { right: 1.5rem; left: auto; transform: none; }
        }

        /* Downward-opening variant, for tooltips near the top of the page
           (e.g. the byline) where an upward tooltip would clip off-screen */
        .tooltip-below .tooltip-box {
            bottom: auto;
            top: calc(100% + 10px);
        }
        .tooltip-below .tooltip-box::after {
            top: auto;
            bottom: 100%;
            border-color: transparent transparent var(--deep-brown) transparent;
        }
        @media (max-width: 600px) {
            .tooltip-below .tooltip-box { left: -0.5rem; right: auto; }
            .tooltip-below .tooltip-box::after { left: 1.5rem; right: auto; }
        }

        /* ── Tags ── */
        .article-tags {
            max-width: 760px;
            margin: 0 auto;
            padding: 0 2rem 2rem;
        }

        .tags-label {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 0.75rem;
        }

        .tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            font-size: 0.78rem;
            color: var(--sandalwood);
            background: rgba(200,164,86,0.1);
            border: 1px solid rgba(200,164,86,0.25);
            border-radius: 4px;
            padding: 0.25rem 0.65rem;
            text-decoration: none;
            transition: background 0.2s ease;
            cursor: default;
        }

        /* ── CTA block ── */
        .article-cta {
            max-width: 760px;
            margin: 0 auto 3rem;
            padding: 0 2rem;
        }

        .cta-inner {
            background: linear-gradient(135deg, var(--cream) 0%, var(--parchment) 100%);
            border: 1px solid rgba(200,164,86,0.3);
            border-radius: 12px;
            padding: 2rem 2.25rem;
            text-align: center;
        }

        .cta-inner p {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            color: var(--text-medium);
            margin-bottom: 1.25rem;
            font-style: italic;
        }

        .cta-btn {
            display: inline-block;
            background: var(--gold);
            color: var(--cream);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            padding: 0.7rem 1.75rem;
            border-radius: 6px;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: background 0.2s ease;
        }

        .cta-btn:hover { background: var(--sandalwood); }

        /* ── Related articles ── */
        .related-section {
            max-width: 760px;
            margin: 0 auto 2rem;
            padding: 0 0.5rem;
        }

        .related-label {
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1.25rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(200,164,86,0.2);
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
        }

        .related-card {
            background: var(--cream);
            border: 1px solid rgba(200,164,86,0.2);
            border-radius: 8px;
            padding: 1.1rem 1.25rem;
            text-decoration: none;
            transition: border-color 0.2s ease;
        }

        .related-card:hover { border-color: var(--gold); }

        .related-card-category {
            font-size: 0.68rem;
            font-weight: 500;
            color: var(--sandalwood);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 0.5rem;
        }

        .related-card-title {
            font-family: 'Playfair Display', serif;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-dark);
            line-height: 1.4;
        }

        .related-coming {
            font-size: 0.85rem;
            color: var(--text-light);
            font-style: italic;
        }

        /* ── Footer ── */
        .page-footer {
            background: var(--deep-brown);
            color: rgba(255,255,255,0.6);
            text-align: center;
            padding: 1.75rem 2rem;
            font-size: 0.83rem;
        }

        .page-footer a {
            color: var(--gold-light);
            text-decoration: none;
            margin: 0 0.5rem;
        }

        .page-footer a:hover { color: var(--gold); }

        .footer-legal { margin-top: 0.5rem; }

        .footer-legal a { font-size: 0.78rem; opacity: 0.8; }

        /* ── Responsive ── */
        @media (max-width: 600px) {
            .topbar { padding: 0.85rem 1rem; }
            .article-hero { padding: 2.5rem 1rem 2rem; }
            .takeaways-wrap { padding: 0 1rem; }
            .article-body { padding: 2rem 1rem 1.5rem; }
            .article-tags { padding: 0 1rem 1.5rem; }
            .article-cta { padding: 0 1rem; }
            .related-section { padding: 0 1rem; }
        }

        /* ── Breadcrumb (SEO/AEO) ── */
        .breadcrumb { max-width: 760px; margin: 1rem auto 0; padding: 0 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; }
        .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
        .breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
        .breadcrumb li:not(:last-child)::after { content: "\203A"; color: var(--gold); }
        .breadcrumb a { color: var(--text-medium); text-decoration: none; }
        .breadcrumb a:hover { color: var(--sandalwood); }
        .breadcrumb [aria-current="page"] { color: var(--text-light); }
        @media (max-width: 600px) { .breadcrumb { padding: 0 1rem; } }
