/*
 * Site-wide additions to the precompiled styles.css.
 *
 * Typography for HTML typed into page builder rich-text fields.
 * Template markup always carries classes, so :not([class]) only targets
 * the editor-authored lists, paragraphs, headings and links.
 */
[class*="page-theme-"] {
    --rich-accent: var(--counselling-deep);
}

.page-theme-training {
    --rich-accent: var(--training-deep);
}

[class*="page-theme-"] p:not([class]) + p:not([class]),
[class*="page-theme-"] p:not([class]) + ul:not([class]),
[class*="page-theme-"] ul:not([class]) + p:not([class]),
[class*="page-theme-"] h4:not([class]) + p:not([class]) {
    margin-top: 0.75rem;
}

[class*="page-theme-"] ul:not([class]) {
    list-style: disc;
    padding-left: 1.25rem;
}

[class*="page-theme-"] ul:not([class]) > li + li {
    margin-top: 0.375rem;
}

[class*="page-theme-"] ul:not([class]) > li::marker {
    color: hsl(var(--rich-accent));
}

[class*="page-theme-"] h4:not([class]) {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

[class*="page-theme-"] * + h4:not([class]) {
    margin-top: 1.5rem;
}

[class*="page-theme-"] a:not([class]) {
    color: hsl(var(--rich-accent));
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[class*="page-theme-"] a:not([class]):hover {
    text-decoration-thickness: 2px;
}

[class*="page-theme-"] blockquote:not([class]) {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

/* Logo — larger than the old PNG; the fixed nav grows with it, so the main offset follows. */
.site-logo-header {
    height: 56px;
    width: auto;
}

.site-logo-footer {
    height: 72px;
    width: auto;
}

.site-main {
    padding-top: 116px;
}

@media (min-width: 768px) {
    .site-logo-header {
        height: 68px;
    }

    .site-main {
        padding-top: 128px;
    }
}

/* Content with Sidebar block: main column with a sticky aside on large screens. */
.content-sidebar {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .content-sidebar--with-aside {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }

    .content-sidebar-aside {
        position: sticky;
        top: 150px;
    }
}

.content-sidebar:not(.content-sidebar--with-aside) .content-sidebar-main {
    max-width: 56rem;
}

/* Headings, tables, images and buttons typed into rich-text fields. */
[class*="page-theme-"] :is(h2, h3):not([class]) {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: hsl(var(--foreground));
}

[class*="page-theme-"] h2:not([class]) {
    font-size: 1.875rem;
}

[class*="page-theme-"] h3:not([class]) {
    font-size: 1.5rem;
}

[class*="page-theme-"] :is(h5, h6):not([class]) {
    font-weight: 600;
    color: hsl(var(--foreground));
}

[class*="page-theme-"] * + :is(h2, h3):not([class]) {
    margin-top: 2.5rem;
}

[class*="page-theme-"] :is(h2, h3, h4, h5, h6):not([class]) + * {
    margin-top: 0.75rem;
}

[class*="page-theme-"] :is(p, ul, table, img):not([class]) + :is(p, ul, table, img):not([class]) {
    margin-top: 1rem;
}

[class*="page-theme-"] li:not([class]) > p:not([class]) + p:not([class]) {
    margin-top: 0.5rem;
}

[class*="page-theme-"] table:not([class]) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    font-size: 0.9375rem;
}

[class*="page-theme-"] table:not([class]) :is(td, th) {
    padding: 0.875rem 1rem;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
}

[class*="page-theme-"] table:not([class]) tr:last-child > :is(td, th) {
    border-bottom: 0;
}

[class*="page-theme-"] table:not([class]) :is(td, th):first-child {
    width: 32%;
    font-weight: 600;
    color: hsl(var(--foreground));
    background: hsl(var(--rich-accent) / 0.06);
}

[class*="page-theme-"] table:not([class]) :is(td, th) > p:not([class]) + p:not([class]) {
    margin-top: 0.25rem;
}

[class*="page-theme-"] img:not([class]) {
    border-radius: 1rem;
    max-width: 100%;
    height: auto;
}

[class*="page-theme-"] a.rich-button {
    display: inline-flex;
    padding: 0.875rem 1.75rem;
    border-radius: 9999px;
    background: hsl(var(--rich-accent));
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

[class*="page-theme-"] a.rich-button:hover {
    opacity: 0.9;
}

[class*="page-theme-"] p:has(> a.rich-button:only-child) {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Long URLs and wide tables must not stretch the page on phones. */
.content-sidebar > * {
    min-width: 0;
}

[class*="page-theme-"] a:not([class]) {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    [class*="page-theme-"] table:not([class]) {
        display: block;
        overflow-x: auto;
    }

    [class*="page-theme-"] table:not([class]) :is(td, th):first-child {
        width: auto;
        min-width: 9rem;
    }
}