/**
 * Styles for template-article-single.php ("Article Detail (New)").
 *
 * A clone-and-adapt of css/guide-detail.css, not an edit to it — its own file,
 * its own `article-detail-*` classes throughout, so nothing here can affect
 * the live Guide Detail page and nothing there can affect this. Adds the
 * date/author/read-time meta row that guide-detail.css's own header comment
 * explicitly left out as guide-specific, and the pull-quote pattern the
 * "Articles single page" design spec shows mid-body.
 */

/*
 * Targets Rank Math's actual output (includes/frontend/class-breadcrumbs.php):
 * <nav class="rank-math-breadcrumb"><p><a>Resources</a><span class="separator"> / </span>
 * <a>Articles</a><span class="separator"> / </span>...<span class="last">Current Page</span></p></nav>
 * — every link is a plain <a> with no distinguishing class, so :first-child
 * is what singles out "Resources" for the bold treatment. Same technique as
 * .guide-detail-breadcrumbs.
 */
/*
 * Copies Components/main_nav/style.css's own .tnav__inner recipe verbatim
 * (max-width 1920px, margin 0 auto, padding 0 40px) so this breadcrumb's left
 * edge lines up with the main nav / "Articles / Webinars / Guides..." sub-nav
 * above it at every viewport width — Bootstrap's own .container-fluid (used
 * here before) has a different padding convention and didn't actually match.
 * Confirmed/fixed first on template-webinar-single.php, applied here to match.
 * White background: this graphic is background-attachment:fixed on the
 * ancestor, pinned to the viewport rather than this element's own box, so it
 * can otherwise show through behind this row near the top of the page.
 */
.article-detail-breadcrumbs-nav-match {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px;
    background-color: var(--color-white);
    position: relative;
}

@media (max-width: 575px) {
    .article-detail-breadcrumbs-nav-match {
        padding: 0 15px;
    }
}

.article-detail-breadcrumbs {
    padding: 20px 0 50px;
}

/*
 * Breathing room before whatever's added via the Page Layout field below
 * (#ModularPageBuilderHub, a separate element right after this one) — without
 * it the article's last line of body text ran straight up against the next
 * modular section with no gap at all. Responsive, same 50/40/30 tapering
 * convention as the <hr> section dividers above.
 */
.article-detail-content {
    padding-bottom: 50px;
}

@media (max-width: 991px) {
    .article-detail-content {
        padding-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .article-detail-content {
        padding-bottom: 30px;
    }
}

.article-detail-breadcrumbs .rank-math-breadcrumb p {
    display: flex;
    align-items: center;
    /*
     * nowrap, not wrap: with wrap, a long final "current page" segment
     * (the article's own title, often the longest crumb) that doesn't fit
     * the remaining row width drops onto its own new line entirely — reading
     * as "not in line" with the rest of the trail rather than a clean
     * single-row breadcrumb. Truncating that one long segment (below) keeps
     * everything on one line instead.
     */
    flex-wrap: nowrap;
    margin: 0 !important;
}

/* Same icon asset the live Articles breadcrumb already uses
   (css/articlesLayout.min.css) — reused directly rather than a new asset. */
.article-detail-breadcrumbs .rank-math-breadcrumb::before {
    content: '';
    display: block;
    width: 20px;
    height: 17px;
    margin-right: 8px;
    background: url(https://talos360.co.uk/wp-content/uploads/2025/02/Article-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.article-detail-breadcrumbs .rank-math-breadcrumb {
    display: flex;
    align-items: center;
}

.article-detail-breadcrumbs .rank-math-breadcrumb a,
.article-detail-breadcrumbs .rank-math-breadcrumb .last,
.article-detail-breadcrumbs .rank-math-breadcrumb .separator {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.125em !important;
    line-height: 1.2 !important;
    color: var(--color-off-black) !important;
    padding: 0 3px;
    /*
     * Confirmed root cause via dev tools: Rank Math writes its own inline
     * style="margin-bottom: Npx" directly onto each breadcrumb <span> (a
     * different, arbitrary px value per span — 15px on .separator, 13px on
     * .last in the live example). .rank-math-breadcrumb p{margin:0} above
     * only ever reset the parent, never these — and an inline style always
     * beats a plain external rule regardless of !important placement
     * elsewhere, so that per-span margin was completely unopposed. Only
     * !important on an external rule can override a plain (non-!important)
     * inline style, which is what this does.
     */
    margin: 0 !important;
}

.article-detail-breadcrumbs .rank-math-breadcrumb a {
    font-weight: 400 !important;
    text-decoration: none !important;
}

.article-detail-breadcrumbs .rank-math-breadcrumb a:hover {
    text-decoration: underline !important;
}

.article-detail-breadcrumbs .rank-math-breadcrumb a:first-child {
    font-weight: 700 !important;
}

.article-detail-breadcrumbs .rank-math-breadcrumb .separator {
    color: var(--color-grey) !important;
}

/*
 * Colour hierarchy matching the reference style (Directory Profile's own
 * breadcrumb: bold dark first crumb, grey separator, teal current-page
 * segment) — applied consistently across every one of these new-style
 * breadcrumbs, not just here.
 */
.article-detail-breadcrumbs .rank-math-breadcrumb .last {
    color: var(--color-dark-teal) !important;
    font-weight: 400 !important;
    /*
     * Truncates with an ellipsis instead of wrapping/overflowing when the
     * article's own title (this segment) is too long to fit what's left of
     * the row — min-width:0 is required for a flex item to shrink below its
     * content's natural size at all; without it these rules are ignored and
     * the item just overflows the row instead. !important on all of these:
     * pixel-measured live, this segment's text was landing ~15-23px lower
     * than the others — it was actually wrapping onto a second line rather
     * than truncating, meaning something else was winning on at least one of
     * these (unprotected) properties. display:inline-block too, since
     * overflow/text-overflow are unreliable on a plain inline box even once
     * flex "blockifies" it for layout purposes.
     */
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle;
}

/*
 * !important throughout this file's headings: this content sits inside
 * id="ModularPageBuilderArticleDetail" (added for the width fix), which means
 * [id^=ModularPageBuilder] h1/h2/h3 rules (ModularPageBuilderBaseStyles.min.css)
 * apply here too, at a specificity a plain class can't beat — same trap
 * guide-detail.css documents for its own headings.
 */
.article-detail-title {
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 2em !important;
    line-height: 1.2 !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
}

/*
 * Two flex children pushed to opposite ends — date on the left, "Author | X
 * min read" on the right — matching the design spec exactly, rather than one
 * run of text reading left to right in date/author/read-time order.
 * flex-wrap so it stacks cleanly on narrow widths instead of overflowing.
 */
.article-detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375em;
    color: var(--color-off-black);
    margin-bottom: 24px !important;
}

.article-detail-meta-sep {
    padding: 0 8px;
}

.article-detail-body {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-off-black);
}

.article-detail-body p,
.article-detail-body li {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin-bottom: 20px;
}

.article-detail-body ul {
    list-style: disc !important;
    padding-left: 24px !important;
}

.article-detail-body ol {
    list-style: decimal !important;
    padding-left: 24px !important;
}

.article-detail-body ul li,
.article-detail-body ol li {
    display: list-item !important;
}

/*
 * The Block Editor's List block saves as <ul class="wp-block-list">, and
 * list-style alone (above) isn't enough to guarantee its markers actually
 * render — confirmed live (bullets showed in the editor but not on the front
 * end). Same fix already used elsewhere in this theme for the identical
 * problem (css/Testimonials-single.min.css, css/news-single.min.css) —
 * following that established pattern rather than reinventing it.
 */
.article-detail-body .wp-block-list li::marker {
    display: initial !important;
    list-style-type: initial !important;
    color: var(--color-off-black) !important;
}

.article-detail-body h2,
.article-detail-body h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.375em !important;
    line-height: 1.3 !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px !important;
    margin-top: 8px;
}

.article-detail-body a {
    color: var(--color-dark-teal);
    text-decoration: underline;
}

.article-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/*
 * The auto-inserted Featured Image (template-article-single.php) is echoed
 * directly rather than sitting inside a WYSIWYG <figure>/<p> that would
 * otherwise give it natural spacing — this adds an equivalent gap so it
 * doesn't sit flush against the paragraph above or the TOC below it.
 */
.article-detail-featured-image {
    display: block;
    margin: 30px 0;
}

/*
 * ---------- Section dividers (manual <hr> between sections) ----------
 * Editors insert a normal <hr> in the WYSIWYG between major sections — this
 * just styles it, with responsive spacing (50px desktop, tapering down at
 * narrower widths, same 30/50/70-style breakpoint convention the original
 * design spec uses throughout).
 */
.article-detail-body hr {
    border: none;
    border-top: 1px solid var(--color-grey);
    margin: 50px 0;
}

@media (max-width: 991px) {
    .article-detail-body hr {
        margin: 40px 0;
    }
}

@media (max-width: 575px) {
    .article-detail-body hr {
        margin: 30px 0;
    }
}

/* ---------- Table of Contents ([lwptoc] shortcode, LuckyWP TOC plugin) ---------- */
/*
 * Scoped to .article-detail-body throughout so this can't affect [lwptoc]
 * used anywhere else on the site — only restyles the plugin's own markup
 * within an article's body content on this template. Overrides the plugin's
 * own front/assets/main.min.css (.lwptoc/.lwptoc_i/etc.), which ships
 * un-themed default colours/spacing.
 *
 * Position on the page (directly under the opening section) is controlled by
 * the plugin's own "Auto Insert" setting (LuckyWP Table of Contents →
 * Settings → Auto Insert Position) — set to "before the first heading" to
 * match the design, since that's a per-site config choice, not something to
 * hardcode here.
 */
.article-detail-body .lwptoc {
    margin: 50px 0;
    padding-top: 50px;
    padding-bottom: 50px;
    border-top: 1px solid var(--color-grey);
    border-bottom: 1px solid var(--color-grey);
}

.article-detail-body .lwptoc_i {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    /*
     * Neutralises whatever colour scheme the plugin's own per-post/global
     * setting applies (.lwptoc-light/.lwptoc-white/.lwptoc-transparent etc.,
     * front/assets/main.min.css) — .lwptoc-transparent in particular adds a
     * full box border via that class, which is exactly the "boxed in on all
     * sides" look that didn't match the design (which only wants the top/
     * bottom lines already on the outer .lwptoc rule above). This makes the
     * result consistent regardless of that per-post setting, rather than
     * depending on every article happening to have the right scheme picked.
     */
    border: none !important;
    box-shadow: none !important;
}

.article-detail-body .lwptoc_header {
    margin-bottom: 16px !important;
}

/* Plugin wraps the title in a <b> by default (its own titleTag setting) —
   targeting that rather than inventing a title class that doesn't exist in
   its markup. */
.article-detail-body .lwptoc_header b {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1em !important;
    color: var(--color-off-black) !important;
}

.article-detail-body .lwptoc_item {
    position: relative;
    padding-left: 20px !important;
    margin-top: 10px !important;
    font-family: 'Montserrat', sans-serif;
}

/* Plugin's own list items have no marker by default (list-style:none) — this
   adds the bullet dot the design shows, since numbering isn't what's wanted. */
.article-detail-body .lwptoc_item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-dark-teal);
}

.article-detail-body .lwptoc_i a {
    color: var(--color-dark-teal) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

.article-detail-body .lwptoc_i a:active,
.article-detail-body .lwptoc_i a:focus,
.article-detail-body .lwptoc_i a:hover {
    color: var(--color-off-black) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

.article-detail-body .lwptoc_itemWrap .lwptoc_itemWrap {
    margin-top: 8px !important;
}

/* ---------- Pull-quote, [article_quote] shortcode ---------- */

.article-quote {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 40px 0;
    padding: 40px 15px;
    background: #FAFAFA;
    border-radius: 20px;
}

/*
 * !important on border-radius/height: .article-detail-body img (class+tag,
 * specificity 0,1,1) beats a bare .article-quote-avatar class (0,1,0) on
 * both — the generic rule's border-radius:12px and height:auto were winning
 * over this one's 50%/64px, which is exactly why the avatar was rendering as
 * a rounded square instead of a circle.
 */
.article-quote-avatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
}

.article-quote-text {
    font-size: 1.1875em;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 12px !important;
}

.article-quote-author {
    font-weight: 700;
    font-style: normal;
}

@media (max-width: 575px) {
    .article-quote {
        padding: 24px;
    }
}

/* ---------- Gutenberg Buttons block — Talos style variations ---------- */
/*
 * Matches .btn.basics.btn-{style} (css/ModularPageBuilderBaseStyles.css)
 * exactly — same colours/borders/shadows, reused rather than reinvented, so
 * a button picked here looks identical to one built via Featured Guide/
 * Content Grid/[article_button] elsewhere. See
 * talos_article_register_button_block_styles() (class-article-detail.php)
 * for why these are scoped to .article-detail-body specifically.
 */

/*
 * text-decoration:none explicitly, on all 4 (default + :hover): without it,
 * this still fell through to the general .article-detail-body a rule further
 * below (text-decoration:underline) — that rule never touches these buttons'
 * colour/shadow/etc, but underline is one property neither of these color
 * rules originally set either, so it was the one thing still leaking through.
 */
.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link,
.article-detail-body .wp-block-button.is-style-talos-teal .wp-block-button__link,
.article-detail-body .wp-block-button.is-style-talos-white .wp-block-button__link,
.article-detail-body .wp-block-button.is-style-talos-rainbow .wp-block-button__link,
.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link:hover,
.article-detail-body .wp-block-button.is-style-talos-teal .wp-block-button__link:hover,
.article-detail-body .wp-block-button.is-style-talos-white .wp-block-button__link:hover,
.article-detail-body .wp-block-button.is-style-talos-rainbow .wp-block-button__link:hover {
    text-decoration: none !important;
}

.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link {
    position: relative;
    background: var(--color-pink);
    border: solid 1px white;
    color: white;
    border-radius: 24px;
}

/* Same even rainbow glow as the other pink CTAs site-wide (mega-menu cards,
   [id^="ModularPageBuilder"] .btn.btn-pink, the sub-nav's .snav__btn--pink)
   instead of a flat pink halo. */
.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-teal, #67D1CE), var(--color-yellow, #FFC424), var(--color-pink, #e22b7f));
    filter: blur(10px);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link:hover {
    color: white;
    background: var(--color-pink);
    border: solid 1px white;
    /* Just the crisp ring, not a blurred pink shadow on top of it - a
       blurred shadow here paints in front of the ::before glow and muddies
       it wherever the two overlap. */
    box-shadow: 0 0 0 2px #e22b7f;
}

.article-detail-body .wp-block-button.is-style-talos-pink .wp-block-button__link:hover::before {
    opacity: 0.85;
}

.article-detail-body .wp-block-button.is-style-talos-teal .wp-block-button__link {
    font-weight: bold;
    background: var(--color-light-teal);
    border: solid 1px var(--color-white);
    color: var(--color-off-black);
    box-shadow: inset 0 0 9px var(--color-teal);
    border-radius: 24px;
}

.article-detail-body .wp-block-button.is-style-talos-teal .wp-block-button__link:hover {
    color: var(--color-off-black);
    background: var(--color-teal);
    border: solid 1px var(--color-white);
}

.article-detail-body .wp-block-button.is-style-talos-white .wp-block-button__link {
    font-weight: bold;
    background: var(--color-white);
    border: solid 1px var(--color-teal);
    box-shadow: 0 0 15px 0px var(--color-teal);
    color: var(--color-off-black);
    border-radius: 24px;
}

.article-detail-body .wp-block-button.is-style-talos-white .wp-block-button__link:hover {
    color: var(--color-off-black);
    background: var(--color-white);
    border: solid 1px var(--color-teal);
    box-shadow: 0 0 0 2px #ffffff, 0 0 16px 0px var(--color-teal), inset 0 0 0 0px #fff;
}

.article-detail-body .wp-block-button.is-style-talos-rainbow .wp-block-button__link {
    background-color: white;
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(90deg, #67D1CE, #FFC424, #E22B7F);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--color-off-black);
    border-radius: 24px;
    transition: all 0.3s ease;
}

.article-detail-body .wp-block-button.is-style-talos-rainbow .wp-block-button__link:hover {
    box-shadow: 0 0 0 2px #fff,
        15px 0 15px 5px #ff2fa01f,
        0px 0 15px 5px #ffd4001f,
        -15px 0 15px 5px #00cfff1f;
}

/* ---------- Demo card, [article_demo] / talos/article-demo block ---------- */

.article-demo-card {
    display: flex;
    align-items: stretch;
    background: var(--color-light-teal);
    border-radius: 20px;
    overflow: hidden;
    margin: 40px 0;
}

.article-demo-image {
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
}

.article-demo-image .article-demo-image-el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* overrides the generic .article-detail-body img 12px radius — the card itself already clips this to its own corners. */
}

.article-demo-body {
    flex: 1;
    align-self: center;
    padding: 40px;
}

/*
 * !important: this h4 sits inside id="ModularPageBuilderArticleDetail",
 * meaning [id^=ModularPageBuilder] heading rules (ModularPageBuilderBaseStyles.min.css)
 * apply here too at a specificity a plain class can't beat — same trap this
 * file's other headings already document.
 */
.article-demo-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
}

.article-demo-text {
    margin-bottom: 20px !important;
}

.article-demo-cta {
    display: inline-block;
}

@media (max-width: 575px) {
    .article-demo-card {
        flex-direction: column;
    }

    .article-demo-image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .article-demo-body {
        padding: 24px;
    }
}

/* ---------- Sidebar lead-gen card ---------- */

.article-detail-form-card {
    background: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

/* Stays in view while the longer content column scrolls past it — actual
   pin/release behaviour is JS (js/article-detail.js), same reasoning
   guide-detail.js documents: the background-graphic wrapper's overflow:hidden
   breaks native position:sticky. */
@media (min-width: 992px) {
    .article-detail-form-card.sticky {
        position: sticky;
        top: 100px;
    }
}

.article-detail-form-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.article-detail-form-body {
    padding: 24px;
}

.article-detail-form-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25em !important;
    line-height: 1.3 !important;
    padding-bottom: 0 !important;
    text-align: center;
    margin-bottom: 20px;
}

.article-detail-form-body iframe {
    display: block;
    width: 100%;
    border: 0;
}

.article-detail-form-legal {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    font-size: 0.75em;
}

.article-detail-form-legal a {
    color: var(--color-dark-teal);
    font-weight: 600;
    text-decoration: none;
}

.article-detail-form-legal a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .article-detail-title {
        font-size: 1.75em;
    }
}

/*
 * The mobile slide-up form (.mobile-form / .mobile-form-link-wrapper, carried
 * over the same as template-guide-single.php does from single-guides.php)
 * relies on the same image-sizing/positioning fixes guide-detail.css already
 * documents — repeated here rather than shared, since this is a fully
 * independent stylesheet.
 */
.mobile-form-img img,
.mobile-form-link-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px;
}

.mobile-form {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    max-height: 100vh;
    overflow-y: auto;
}

.mobile-form .mobile-form-link-wrapper.open {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

@media (max-width: 480px) {
    .mobile-form {
        padding: 24px !important;
    }
}

.mobile-form .mobile-form-link-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}