/* ==========================================================================
   Guide content — long-form article styling for .guide-content
   --------------------------------------------------------------------------
   The migrated guides are one Elementor text-editor widget holding classic WP
   HTML, so everything here is plain element styling rather than widget styling.

   Built against what the 16 guides actually contain: h4/h5 section headings
   (with legacy .section-link ids), p, ul/ol, img with align* classes,
   figure.wp-caption, and <details>/<summary> accordions. Table, blockquote and
   hr rules are included for content added later.

   Colours and the type scale come from the Elementor kit so this matches the
   rest of the site: Primary #0073FF, Secondary #1F2023, Text #606876,
   Grey #919CAF, Primary Light #C7E0FF, Primary Lightest #F5FAFF, sofia-pro.
   ========================================================================== */

.guide-content {
    --gc-text:       #606876;
    --gc-heading:    #1F2023;
    --gc-link:       #0073FF;
    --gc-link-hover: #0059C7;
    --gc-muted:      #919CAF;
    --gc-line:       #E4E8EF;
    --gc-tint:       #F5FAFF;
    --gc-tint-line:  #C7E0FF;

    --gc-flow:    20px;   /* gap between consecutive blocks */
    --gc-section: 48px;   /* gap above a new section heading */

    color: var(--gc-text);
    font-size: 16px;
    line-height: 1.7;
}

/* Elementor sets a line-height on .elementor-widget-text-editor, which sits between
   .guide-content and the copy, so inheriting from the wrapper above loses. Set it on
   the text blocks directly. */
.guide-content p,
.guide-content li,
.guide-content dd,
.guide-content td,
.guide-content blockquote {
    line-height: 1.7;
}

/* floats from .alignleft / .alignright must not escape the article */
.guide-content::after {
    content: "";
    display: table;
    clear: both;
}

/* --- vertical rhythm ----------------------------------------------------- */

.guide-content p,
.guide-content ul,
.guide-content ol,
.guide-content dl,
.guide-content table,
.guide-content blockquote,
.guide-content figure,
.guide-content details {
    margin: 0 0 var(--gc-flow);
}

.guide-content h2,
.guide-content h3,
.guide-content h4,
.guide-content h5,
.guide-content h6 {
    margin: var(--gc-section) 0 16px;
    color: var(--gc-heading);
    font-weight: 600;
    line-height: 1.25;
    /* headings carry ids from the old template, so direct #links land here too;
       88px clears the 64px fixed header */
    scroll-margin-top: 88px;
}

.guide-content h5,
.guide-content h6 {
    margin-top: 40px;
}

/* never push the first block away from the top of the column */
.guide-content h2:first-child,
.guide-content h3:first-child,
.guide-content h4:first-child,
.guide-content h5:first-child,
.guide-content h6:first-child {
    margin-top: 0;
}

/* a subheading directly under a heading belongs to it, not to a new section */
.guide-content h2 + h3,
.guide-content h3 + h4,
.guide-content h4 + h5,
.guide-content h5 + h6 {
    margin-top: 24px;
}

.guide-content .elementor-widget-container > :last-child {
    margin-bottom: 0;
}

/* --- lists --------------------------------------------------------------- */

.guide-content ul,
.guide-content ol {
    padding-left: 24px;   /* browser default of 40px is too deep at this measure */
}

.guide-content li {
    margin-bottom: 8px;
}

.guide-content li:last-child {
    margin-bottom: 0;
}

.guide-content li > ul,
.guide-content li > ol {
    margin: 8px 0 0;
}

.guide-content ul li::marker {
    color: var(--gc-muted);
}

.guide-content ol li::marker {
    color: var(--gc-muted);
    font-weight: 600;
}

/* --- inline -------------------------------------------------------------- */

.guide-content a {
    color: var(--gc-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

.guide-content a:hover {
    color: var(--gc-link-hover);
}

.guide-content strong,
.guide-content b {
    color: var(--gc-heading);
    font-weight: 600;
}

.guide-content code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #F2F4F7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    color: var(--gc-heading);
}

/* --- images and figures -------------------------------------------------- */

.guide-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 32px auto;
    border-radius: 10px;
}

.guide-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.guide-content .alignnone {
    margin-left: 0;
    margin-right: auto;
}

.guide-content .alignleft {
    float: left;
    margin: 8px 24px 16px 0;
}

.guide-content .alignright {
    float: right;
    margin: 8px 0 16px 24px;
}

/* figure keeps its inline width from the editor; max-width stops it overflowing */
.guide-content figure {
    max-width: 100%;
    margin: 32px auto;
}

.guide-content figure img {
    margin: 0;
}

.guide-content figcaption,
.guide-content .wp-caption-text {
    margin-top: 12px;
    color: var(--gc-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.5;
    text-align: center;
}

/* --- accordions (<details>/<summary>) ------------------------------------ */

.guide-content details {
    margin-bottom: 8px;         /* a run of them reads as one stack */
    padding: 0 20px;
    border: 1px solid var(--gc-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Close the stack off against whatever follows - details only carry an 8px gap.
   Headings are excluded: they keep their own, larger section margin, and this
   selector would otherwise outrank the heading rule on specificity. */
.guide-content details + :not(details, h2, h3, h4, h5, h6) {
    margin-top: var(--gc-flow);
}

.guide-content details:hover {
    border-color: var(--gc-tint-line);
}

.guide-content details[open] {
    padding-bottom: 16px;
    border-color: var(--gc-tint-line);
    background: var(--gc-tint);
}

.guide-content summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 -20px;            /* full-bleed hit area inside the padded box */
    padding: 14px 20px;
    border-radius: 12px;
    color: var(--gc-heading);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.guide-content summary::-webkit-details-marker {
    display: none;
}

.guide-content summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.4112 6.19305L7.99786 8.77971L10.5845 6.19305C10.8445 5.93305 11.2645 5.93305 11.5245 6.19305C11.7845 6.45305 11.7845 6.87305 11.5245 7.13305L8.46453 10.193C8.20453 10.453 7.78453 10.453 7.52453 10.193L4.46453 7.13305C4.20453 6.87305 4.20453 6.45305 4.46453 6.19305C4.72453 5.93971 5.1512 5.93305 5.4112 6.19305Z' fill='%23606876'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}

.guide-content details[open] summary::after {
    transform: rotate(180deg);
}

.guide-content summary:focus-visible {
    outline: 2px solid var(--gc-link);
    outline-offset: 2px;
}

.guide-content details > summary + * {
    margin-top: 16px;
}

.guide-content details > :last-child {
    margin-bottom: 0;
}

.guide-content details img {
    margin: 16px auto;
}

/* --- tables, quotes, rules (not used yet - here for new content) --------- */

.guide-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.guide-content th,
.guide-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gc-line);
    text-align: left;
    vertical-align: top;
}

.guide-content th {
    background: #FAFBFC;
    color: var(--gc-heading);
    font-weight: 600;
}

.guide-content blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--gc-tint-line);
    color: var(--gc-heading);
}

.guide-content blockquote > :last-child {
    margin-bottom: 0;
}

.guide-content hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--gc-line);
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 767px) {
    .guide-content {
        --gc-section: 36px;
        --gc-flow: 18px;
    }

    .guide-content h4 { font-size: 24px; }
    .guide-content h5 { font-size: 20px; }

    .guide-content img { margin: 24px auto; border-radius: 8px; }

    .guide-content details { padding: 0 16px; }
    .guide-content summary { margin: 0 -16px; padding: 12px 16px; gap: 12px; }

    /* floated images are unreadable in a narrow column */
    .guide-content .alignleft,
    .guide-content .alignright {
        float: none;
        margin: 24px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-content a,
    .guide-content details,
    .guide-content summary::after {
        transition: none;
    }
}