/* ==========================================================================
   Nova Guide System — guide-page.css
   Every selector below is scoped under .guide-page, which the template
   layout override applies only to articles in a configured guide
   category. Nothing here reaches ordinary articles or the rest of the
   site. Cards stay opaque (not glass) on purpose — the site already has
   an ambient cloud-gradient background on <body>, and opaque cards read
   more clearly on top of it than translucent ones do.
   ========================================================================== */

.guide-page {
    --nova-cloud-4: var(--cloud-4, #B8D4F5);
    --nova-cloud-5: var(--cloud-5, #B8E8F5);

    max-width: 46rem;
    margin: 0 auto;
    color: var(--color-ink, #1A1A1A);
}

/* ---- Headings -------------------------------------------------------- */

.guide-page :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-ink, #1A1A1A);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.guide-page .guide-heading {
    scroll-margin-top: 5.5rem;
    margin-top: 2.75rem;
    margin-bottom: 0.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border, #E4E1DB);
    font-size: 1.25rem;
    font-weight: 700;
}

.guide-page .guide-heading:first-of-type {
    margin-top: 1.5rem;
}

/* A <p> promoted to a heading may still contain trailing body text after
   its leading <strong>/<br> (the "Label<br>text…" pattern) — keep that
   text visually distinct from the label. */
.guide-page .guide-heading strong {
    display: block;
    margin-bottom: 0.35rem;
}

.guide-page p.guide-heading {
    font-size: inherit;
    font-weight: 400;
}
.guide-page p.guide-heading > strong {
    font-size: 1.25rem;
    font-weight: 700;
}

/* ---- Body copy --------------------------------------------------------- */

.guide-page :is(h1, h2, h3, h4, h5, h6) + p,
.guide-page p {
    line-height: 1.7;
    color: var(--color-ink-soft, #4A4740);
}

.guide-page mark {
    background: var(--cloud-1, #FFD66F);
    background: color-mix(in srgb, var(--color-accent, #FF5D4E) 20%, #FFFFFF);
    color: var(--color-ink, #1A1A1A);
    border-radius: 0.2em;
    padding: 0.05em 0.2em;
}

/* ---- Hero image --------------------------------------------------------
   Several guides open with a single large graphic that carries the title
   baked into the artwork itself (Joomla's own <h1> still renders above
   it for accessibility/SEO — this just gives the image that follows a
   generous, edge-softened treatment instead of default inline sizing).
   Covers both authoring shapes seen live: a bare <p><img></p> and a
   <p><strong><img></strong></p>. */

.guide-page .com-content-article__body > :is(p:first-child, p:nth-child(2)):has(> img:only-child),
.guide-page .com-content-article__body > :is(p:first-child, p:nth-child(2)):has(> strong:only-child > img:only-child) {
    margin: 0 -0.25rem 1.75rem;
}

.guide-page .com-content-article__body > :is(p:first-child, p:nth-child(2)):has(> img:only-child) img,
.guide-page .com-content-article__body > :is(p:first-child, p:nth-child(2)):has(> strong:only-child > img:only-child) img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.08));
}

/* ---- General images ----------------------------------------------------
   Never crop; let images keep their natural aspect ratio at all sizes. */

.guide-page img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.guide-page p:has(> img + img) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.guide-page p:has(> img + img) img {
    flex: 1 1 220px;
}

/* ---- Nested legend lists -------------------------------------------------
   Guides nest anywhere from 1 to 4+ levels deep (QPets' Menu list runs
   four deep). Levels 1-3 get distinct, deliberate treatments; level 4
   and beyond fall back to a simpler indented style rather than a hard
   cutoff, so depth never breaks the layout. */

.guide-page .com-content-article__body ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.guide-page .com-content-article__body > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.85rem;
}

.guide-page .com-content-article__body > ul > li {
    background: var(--color-paper, #FFFFFF);
    border: 1px solid var(--color-border, #E4E1DB);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.08));
    padding: 1rem 1.1rem;
    font-weight: 600;
}

.guide-page .com-content-article__body > ul > li > ul {
    list-style: disc;
    margin: 0.6rem 0 0 1.1rem;
    font-weight: 400;
}

.guide-page .com-content-article__body > ul > li > ul > li {
    margin-bottom: 0.3rem;
    color: var(--color-ink-soft, #4A4740);
}

.guide-page .com-content-article__body > ul > li > ul > li > ul {
    list-style: circle;
    margin: 0.3rem 0 0.3rem 1.1rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--color-border, #E4E1DB);
}

/* Level 4+: keep indenting and thinning the connector rather than
   inventing a new visual language for every additional depth. */
.guide-page .com-content-article__body ul ul ul ul {
    list-style: '– ';
    margin-left: 0.9rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border, #E4E1DB);
    font-size: 0.95em;
}

.guide-page li {
    line-height: 1.55;
}

/* ---- Data tables ---------------------------------------------------------
   guide_table is used two ways in the live content: a pure image
   reference grid (e.g. zodiac signs) and an icon + description key
   (image cell, label + paragraph cell). Both need to read well without
   assuming which shape a given table is. */

.guide-page table.guide_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0 2rem;
    background: var(--color-paper, #FFFFFF);
    border: 1px solid var(--color-border, #E4E1DB);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    display: block;
    overflow-x: auto;
}

.guide-page table.guide_table tbody {
    display: table;
    width: 100%;
}

.guide-page table.guide_table tr:not(:last-child) td {
    border-bottom: 1px solid var(--color-border, #E4E1DB);
}

.guide-page table.guide_table td {
    padding: 0.9rem 1rem;
    vertical-align: top;
    text-align: left;
}

.guide-page table.guide_table td img {
    display: block;
    border-radius: 10px;
    max-width: none;
    height: auto;
    margin: 0;
}

.guide-page table.guide_table p {
    margin: 0 0 0.4rem;
}

.guide-page table.guide_table p:last-child {
    margin-bottom: 0;
}

.guide-page table.guide_table span[style*='underline'] {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-ink, #1A1A1A);
    display: inline-block;
    margin-bottom: 0.15rem;
}

@media (max-width: 640px) {
    .guide-page table.guide_table,
    .guide-page table.guide_table tbody,
    .guide-page table.guide_table tr,
    .guide-page table.guide_table td {
        display: block;
        width: 100%;
    }

    .guide-page table.guide_table tr {
        padding: 1rem;
    }

    .guide-page table.guide_table tr:not(:last-child) {
        border-bottom: 1px solid var(--color-border, #E4E1DB);
    }

    .guide-page table.guide_table td:not(:last-child) {
        border-bottom: none;
        padding-bottom: 0.5rem;
    }

    .guide-page table.guide_table td img {
        max-width: 100%;
    }
}

/* ---- Table of contents ---------------------------------------------------- */

.guide-toc {
    position: relative;
    background: var(--color-paper, #FFFFFF);
    border: 1px solid var(--color-border, #E4E1DB);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.08));
    padding: 1.25rem 1.4rem 1.4rem;
    margin: 1.75rem 0 2rem;
    overflow: hidden;
}

.guide-toc::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--cloud-1, #FFD66F),
        var(--cloud-2, #FF91C8),
        var(--nova-cloud-4, #B8D4F5),
        var(--nova-cloud-5, #B8E8F5)
    );
}

.guide-toc__heading {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-soft, #4A4740);
}

.guide-toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.45rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-toc__item {
    margin: 0;
}

.guide-toc__item a {
    color: var(--color-ink, #1A1A1A);
    text-decoration: none;
    font-weight: 600;
}

.guide-toc__item a:hover,
.guide-toc__item a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--color-accent, #FF5D4E);
}

.guide-toc__item a:focus-visible {
    outline: 2px solid var(--color-accent, #FF5D4E);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Prev/next navigation --------------------------------------------- */

.guide-siblings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.5rem 0 1rem;
}

.guide-siblings__card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--color-paper, #FFFFFF);
    border: 1px solid var(--color-border, #E4E1DB);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-card, 0 12px 30px rgba(0, 0, 0, 0.08));
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: var(--color-ink, #1A1A1A);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.guide-siblings__card:hover,
.guide-siblings__card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.guide-siblings__card:focus-visible {
    outline: 2px solid var(--color-accent, #FF5D4E);
    outline-offset: 2px;
}

.guide-siblings__card--next {
    text-align: right;
    align-items: flex-end;
}

.guide-siblings__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-soft, #4A4740);
}

.guide-siblings__title {
    font-weight: 700;
}

@media (max-width: 560px) {
    .guide-siblings {
        grid-template-columns: 1fr;
    }

    .guide-siblings__card--next {
        text-align: left;
        align-items: flex-start;
    }
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 560px) {
    .guide-page .com-content-article__body > ul {
        grid-template-columns: 1fr;
    }
}

/* ---- Reduced motion / high contrast --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .guide-siblings__card {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .guide-page .guide-heading,
    .guide-toc,
    .guide-page table.guide_table,
    .guide-page .com-content-article__body > ul > li,
    .guide-siblings__card {
        border-width: 2px;
    }
}

/* Detailed charts must not be cropped or limited to icon-sized images. */
.guide-page--chart { max-width: 76rem; }
.guide-page--chart table.guide_table td img { width: auto; max-width: 100%; }

@media (max-width: 640px) {
    .guide-page--chart table.guide_table { display: block; overflow-x: auto; }
    .guide-page--chart table.guide_table tbody { display: table; width: 100%; }
    .guide-page--chart table.guide_table tr { display: table-row; }
    .guide-page--chart table.guide_table td { display: table-cell; width: auto; }
}
.guide-page .com-content-article__body { min-width: 0; overflow-wrap: anywhere; }
.guide-page .com-content-article__body iframe { max-width: 100%; }
.guide-toc a:focus-visible, .guide-siblings a:focus-visible {
    outline: 2px solid var(--color-accent, #659cf5);
    outline-offset: 4px;
}