/* ─── AAPS single-guide template ───────────────────────────────────────────
   Styles the editorial content of a guide (the freeform WordPress content the
   author adds, rendered into #singleBlogContent via [guide_content]) plus the
   sidebar rail (Table of Contents, Contributors, Share + copy-link). The layout
   itself is driven by the Elementor "Single Guide" template; this file only
   styles the content markup and the custom shortcode/JS additions so everything
   matches the Figma design. Loaded only on is_singular('guides').

   Design tokens (from the Elementor kit):
     brand font   ABC Diatype Plus Variable Unlicensed Trial
     navy heading #143866   body text #414651   muted #535862
     caption      #717680   link #1F78D1        label blue #1260B7
     orange       #FF9C0A   hairline #D5D7DA     surface #FAFAFA          */

:root {
    --guide-font: 'ABC Diatype Plus Variable Unlicensed Trial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --guide-navy: #143866;
    --guide-text: #414651;
    --guide-muted: #535862;
    --guide-caption: #717680;
    --guide-link: #1F78D1;
    --guide-label: #1260B7;
    --guide-orange: #FF9C0A;
    --guide-hairline: #D5D7DA;
    --guide-surface: #FAFAFA;
}

/* ── Main content column ───────────────────────────────────────────────────
   Scoped to #singleBlogContent so it only touches the rendered guide content,
   never the sidebar or any other widget. */
#singleBlogContent {
    font-family: var(--guide-font);
    color: var(--guide-text);
}

/* Normalise the wrapper Elementor puts around the shortcode output. */
#singleBlogContent .elementor-widget-container > * {
    max-width: 100%;
}

/* Body / normal text — 20px / 30px / 400, #535862 (identical desktop & mobile). */
#singleBlogContent p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 0;
    color: #535862;
    margin: 0 0 24px;
}

#singleBlogContent h1,
#singleBlogContent h2,
#singleBlogContent h3,
#singleBlogContent h4,
#singleBlogContent h5,
#singleBlogContent h6 {
    font-family: var(--guide-font);
    color: #181D27;
    letter-spacing: 0;
    margin: 0 0 16px;
    scroll-margin-top: 120px; /* so TOC anchor jumps clear the sticky header */
}

/* Section headings — 30px / 38px / 400, #181D27 (same desktop & mobile). */
#singleBlogContent h1,
#singleBlogContent h2 { font-size: 30px; line-height: 38px; font-weight: 400; margin-top: 40px; }
/* Sub-headings ("bold" items) — 18px / 28px / 500, #181D27 (same desktop & mobile). */
#singleBlogContent h3,
#singleBlogContent h4,
#singleBlogContent h5,
#singleBlogContent h6 { font-size: 18px; line-height: 28px; font-weight: 500; margin-top: 28px; margin-bottom: 10px; }

/* First heading shouldn't push a big top margin. */
#singleBlogContent .elementor-widget-container > :first-child {
    margin-top: 0;
}

#singleBlogContent a {
    color: var(--guide-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
#singleBlogContent a:hover { color: var(--guide-label); }

#singleBlogContent strong, #singleBlogContent b { font-weight: 500; color: #181D27; }
#singleBlogContent em, #singleBlogContent i { font-style: italic; }

/* Lists — same body type as paragraphs (20px / 30px / 400, #535862). */
#singleBlogContent ul,
#singleBlogContent ol {
    margin: 0 0 24px;
    padding-left: 24px;
}
#singleBlogContent li {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #535862;
    margin-bottom: 10px;
}
#singleBlogContent li::marker { color: var(--guide-muted); }
#singleBlogContent ul ul,
#singleBlogContent ol ol,
#singleBlogContent li > ul,
#singleBlogContent li > ol { margin: 10px 0 0; }

/* Images & captions (classic + Gutenberg image blocks) */
#singleBlogContent img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}
#singleBlogContent figure {
    margin: 0 0 28px;
}
#singleBlogContent figure.wp-block-image,
#singleBlogContent .wp-block-image { margin: 8px 0 28px; }
#singleBlogContent figcaption,
#singleBlogContent .wp-element-caption {
    font-size: 14px;
    line-height: 20px;
    color: var(--guide-caption);
    margin-top: 12px;
    text-align: left;
}
#singleBlogContent figcaption a,
#singleBlogContent .wp-element-caption a { color: var(--guide-link); }

/* Conclusion / callout box — a Gutenberg Group block with a background, a
   blockquote, or anything carrying .guide-callout renders as the soft grey
   rounded card from the design. */
#singleBlogContent blockquote,
#singleBlogContent .guide-callout,
#singleBlogContent .wp-block-group.has-background {
    background: var(--guide-surface);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
    border: 1px solid #F0F1F2;
}
#singleBlogContent blockquote > :last-child,
#singleBlogContent .guide-callout > :last-child,
#singleBlogContent .wp-block-group.has-background > :last-child { margin-bottom: 0; }

/* Conclusion / callout heading — 24px / 32px / 400, #181D27 (same on mobile);
   its body text inherits the normal 20/30/400 #535862 paragraph style. */
#singleBlogContent blockquote :is(h1, h2, h3, h4, h5, h6),
#singleBlogContent .guide-callout :is(h1, h2, h3, h4, h5, h6),
#singleBlogContent .wp-block-group.has-background :is(h1, h2, h3, h4, h5, h6) {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #181D27;
    margin: 0 0 12px;
}
#singleBlogContent blockquote p,
#singleBlogContent .guide-callout p,
#singleBlogContent .wp-block-group.has-background p { color: #535862; }

/* Tables, hr, code — keep them on-brand if an author uses them. */
#singleBlogContent hr {
    border: 0;
    border-top: 1px solid var(--guide-hairline);
    margin: 32px 0;
}
#singleBlogContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15px;
}
#singleBlogContent th,
#singleBlogContent td {
    border: 1px solid var(--guide-hairline);
    padding: 12px 14px;
    text-align: left;
}
#singleBlogContent th { background: var(--guide-surface); color: var(--guide-navy); font-weight: 600; }

#singleBlogContent > .elementor-widget-container > :last-child,
#singleBlogContent p:last-child { margin-bottom: 0; }

/* ── Table of contents (sidebar) ───────────────────────────────────────────
   The standalone blue "Table of contents" heading widget is the visible label,
   so hide the TOC widget's own internal header/separator to avoid a duplicate
   title. Render the auto-generated list as plain text links (no bullets). */
.aaps-single-article .elementor-toc__header { display: none !important; }
.aaps-single-article .elementor-widget-table-of-contents .elementor-toc__spinner-container { display: none; }

.aaps-single-article .elementor-toc__body { padding: 0 !important; }
.aaps-single-article .elementor-toc__list-wrapper,
.aaps-single-article .elementor-toc__list-item .elementor-toc__list-wrapper {
    list-style: none !important;
    padding: 0;
    margin: 0;
}
.aaps-single-article .elementor-toc__list-item {
    margin-bottom: 12px;
    list-style: none !important;
}
.aaps-single-article .elementor-toc__list-item-text {
    font-family: var(--guide-font);
    font-size: 16px;
    line-height: 1.4;
    color: var(--guide-muted);
    text-decoration: none;
    transition: color .15s ease;
}
.aaps-single-article .elementor-toc__list-item-text:hover,
.aaps-single-article .elementor-toc__list-item.elementor-item-active > .elementor-toc__list-item-text,
.aaps-single-article .elementor-toc__list-item-text.elementor-item-active {
    color: var(--guide-label);
}
/* hide the bullet/marker (design has none) */
.aaps-single-article .elementor-toc__list-item-text-wrapper > .elementor-toc__list-item-marker,
.aaps-single-article .elementor-toc__list-item .elementor-toc__list-item-marker { display: none !important; }
/* nested (h3+) items get a small indent */
.aaps-single-article .elementor-toc__list-item .elementor-toc__list-wrapper { margin-top: 12px; padding-left: 14px; }

/* ── Contributors (sidebar) ────────────────────────────────────────────────
   Hide the whole block (heading + list) when the repeater is empty. */
.guide-contributors-block:not(:has(.guide-contributor)) { display: none !important; }

.guide-contributors-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-contributor {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.guide-contributor-name {
    font-family: var(--guide-font);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #181D27;
}
.guide-contributor-role {
    font-family: var(--guide-font);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--guide-muted);
}

/* ── Blog: author avatar (sidebar) ─────────────────────────────────────────
   The author image widget is swapped for [blog_author_avatar]; keep it the same
   40px circle the design uses. */
.blog-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}

/* ── Share article: copy-link button ───────────────────────────────────────
   guide-single.js injects this as the FIRST item in the share row, using the
   widget's own .elementor-share-btn / .elementor-share-btn__icon markup and the
   FontAwesome "link" glyph. That means the box border/radius (the widget's
   custom CSS), the icon size (the widget's icon-size variable) and the orange
   glyph colour (the minimal skin's secondary colour) all apply automatically —
   so it matches the social buttons exactly. We only reset the native <button>
   chrome and add the copied tooltip. */
.guide-copy-link {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: visible;       /* the tooltip can overflow without widening the box */
}
/* The injected <button> doesn't stretch its icon to the full button height the
   way the social <div> buttons do, so the bordered box renders short. Pin the
   icon to the widget's fixed 40px button height so the white/bordered box is the
   same 42×40 as the social icons. */
.aaps-single-article .elementor-widget-share-buttons .guide-copy-link .elementor-share-btn__icon {
    align-self: stretch;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box;
}
/* Belt-and-suspenders: colour the glyph with the widget's own secondary colour
   (falls back to brand orange) in case the skin selector misses the injected svg. */
.guide-copy-link .e-font-icon-svg {
    fill: var(--e-share-buttons-secondary-color, var(--guide-orange));
}
.guide-copy-link:hover { opacity: .85; }
.guide-copy-link:focus-visible { outline: 2px solid var(--guide-link); outline-offset: 2px; border-radius: 8px; }

/* The copy-link adds a 5th item; switch the share grid to a flex row so all five
   icons stay inline (with the same 12px gap the widget uses) instead of wrapping
   into the widget's 4-column grid. */
.aaps-single-article .elementor-widget-share-buttons .elementor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.aaps-single-article .elementor-widget-share-buttons .elementor-grid-item {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}
/* The injected <button> otherwise shrink-wraps oddly (its absolute tooltip +
   skin rules push it wide). Lock its width to the icon box (42px) so it is the
   same size as the social buttons; height is left to the widget so it matches. */
.aaps-single-article .elementor-widget-share-buttons .elementor-share-btn.guide-copy-link {
    width: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
}

.guide-copy-link__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #181D27;
    color: #fff;
    font-family: var(--guide-font);
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.guide-copy-link.is-copied .guide-copy-link__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}