/* A reading column shared by pages, posts and the Gutenberg canvas. */
.cn-minimal-main {
    width: min(100% - 3rem, var(--wp--style--global--content-size));
    margin-inline: auto;
    padding-block: 1rem 4rem;
    min-height: 50vh;

    & > .wp-block-post-content {
        padding-inline: 0;
    }
}

.cn-minimal-main,
.editor-styles-wrapper {
    & p,
    & li,
    & h1,
    & h2,
    & h3 {
        overflow-wrap: anywhere;
    }

    & .cn-minimal-section {
        margin-block: 0 3.5rem;
    }

    & .cn-home-intro {
        margin-block-end: 4rem;
    }

    & .cn-small,
    & .cn-back-link {
        color: var(--wp--preset--color--muted);
        font-size: 0.8125rem;
    }

    & .cn-back-link {
        margin-block: 0 2.75rem;
    }

    & .cn-articles-query {
        margin-block-start: 1.5rem;
    }

    & .cn-minimal-search {
        width: 100%;
        margin-block: 1.5rem 0;

        & .wp-block-search__inside-wrapper {
            min-height: 44px;
            padding: 0;
            border: 0;
            border-bottom: 1px solid var(--wp--preset--color--grey-200);
            border-radius: 0;
            background: transparent;

            &:focus-within {
                border-color: var(--wp--preset--color--contrast);
            }
        }

        & .wp-block-search__input {
            flex: 1;
            min-width: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--wp--preset--color--contrast);
            font: inherit;
            font-size: 1rem;
            line-height: 1.5;

            &::placeholder {
                color: var(--wp--preset--color--muted);
                opacity: 1;
            }
        }

        & .wp-block-search__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 44px;
            width: 44px;
            min-height: 44px;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--wp--preset--color--muted);
            cursor: pointer;

            &:hover {
                color: var(--wp--preset--color--contrast);
            }

            & svg {
                width: 18px;
                height: 18px;
                fill: currentColor;
            }
        }

        & :is(input, button):focus-visible {
            outline: 2px solid var(--wp--preset--color--contrast);
            outline-offset: 3px;
        }
    }

    & .cn-minimal-search + .cn-articles-query .cn-minimal-filters {
        margin-block-start: 1rem;
    }

    & .cn-text-list {
        list-style: none;
        padding: 0;
        margin: 0;

        & > li {
            margin: 0;
            padding-block: 1.625rem;
            border-bottom: 1px solid var(--wp--preset--color--grey-200);
        }

        & .wp-block-post-title {
            margin-block: 0.3rem 0.5rem;
            font-size: 1rem;
            font-weight: 550;
            line-height: 1.5;
            letter-spacing: -0.015em;

            & a {
                color: var(--wp--preset--color--contrast);
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        & .wp-block-post-excerpt {
            margin: 0;
            color: var(--wp--preset--color--muted);
            font-size: 0.875rem;
            line-height: 1.7;

            & p {
                margin: 0;
            }
        }
    }

    & .cn-entry-date {
        margin: 0;
        color: var(--wp--preset--color--muted);
        font-size: 0.75rem;
        line-height: 1.5;
    }

    & .cn-minimal-filters {
        --one-202x-category-active-background: transparent;
        --one-202x-category-active-color: var(--wp--preset--color--contrast);
        margin-block: 1.75rem 0.5rem;
        padding-block-end: 0.75rem;
        border-bottom: 1px solid var(--wp--preset--color--grey-200);

        & .one-202x-query-filters__options {
            flex-wrap: wrap;
            gap: 0.5rem 1.25rem;
            overflow: visible;
        }

        & .one-202x-query-filters__options :is(a, summary) {
            display: inline-block;
            min-height: 32px;
            padding: 0.375rem 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--wp--preset--color--muted);
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.6;
            text-decoration: none;

            &:hover,
            &[aria-current="true"] {
                color: var(--wp--preset--color--contrast);
                background: transparent;
                text-decoration: underline;
                text-underline-offset: 0.4em;
            }
        }

        & .one-202x-query-filters__options summary {
            display: flex;
            align-items: center;
        }

        /* Decorative category marks use the label colour and add no spoken text. */
        &.is-grouped {
            & summary[data-filter-group="fitness"] {
                --cn-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 12h10M3 8v8M7 6v12M17 6v12M21 8v8M3 12h4M17 12h4'/%3E%3C/svg%3E");
            }

            & summary[data-filter-group="hobbies"] {
                --cn-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c-3-2-6-2-10-1v15c4-1 7-1 10 1 3-2 6-2 10-1V4c-4-1-7-1-10 1Zm0 0v15'/%3E%3C/svg%3E");
            }

            & summary[data-filter-group="technical"] {
                --cn-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 6-5 6 5 6M17 6l5 6-5 6M14 3l-4 18'/%3E%3C/svg%3E");
            }

            & > .one-202x-query-filters__options > li > a[data-filter-value="notes"] {
                --cn-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 5.24a1 1 0 0 0-.29-.71L15.47.29a1 1 0 0 0-.71-.29 1 1 0 0 0-.71.29l-2.83 2.83L.29 14.05a1 1 0 0 0-.29.71V19a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29L16.87 8.78 19.71 6a1.19 1.19 0 0 0 .22-.33c.048-.14.071-.284.07-.43ZM4.83 18H2v-2.83l9.93-9.93 2.83 2.83L4.83 18ZM16.17 6.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z'/%3E%3C/svg%3E");
                display: inline-flex;
                align-items: center;
                gap: 0.375rem;
            }

            & summary[data-filter-group] {
                gap: 0.375rem;
            }

            & :is(summary[data-filter-group="fitness"], summary[data-filter-group="hobbies"], summary[data-filter-group="technical"], .one-202x-query-filters__options > li > a[data-filter-value="notes"])::before {
                content: "";
                flex: 0 0 10px;
                width: 10px;
                height: 10px;
                background-color: currentColor;
                mask-image: var(--cn-category-icon);
                mask-size: contain;
                mask-position: center;
                mask-repeat: no-repeat;
            }

            @media (width <= 361px) {
                /* The final group wraps to the left on narrow reading columns. */
                & > .one-202x-query-filters__options > li:has(.one-202x-query-filters__group):not(:has(~ li .one-202x-query-filters__group)) .one-202x-query-filters__group-options {
                    inset-inline-start: 0;
                    inset-inline-end: auto;
                }
            }
        }

        & summary[data-active="true"] {
            color: var(--wp--preset--color--contrast);
        }

        & .one-202x-query-filters__group-options a {
            display: block;
            min-height: 40px;
            padding-block: 0.5rem;
        }
    }

    & .cn-timeline {
        & > .wp-block-group {
            margin: 0;
            padding-block: 1.5rem;
            border-bottom: 1px solid var(--wp--preset--color--grey-200);
        }
    }

    & .cn-post-byline {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
        margin-block: 0.75rem 2.5rem;
        font-size: 0.8125rem;
        color: var(--wp--preset--color--muted);

        & > * {
            margin: 0;
        }
    }

    & .cn-prose {
        & h2 {
            margin-block-start: 2.5rem;
        }

        & h3 {
            margin-block-start: 1.75rem;
        }

        & p,
        & ul,
        & ol {
            margin-block: 1.25rem;
        }

        & li + li {
            margin-block-start: 0.5rem;
        }

        & .wp-block-code {
            padding: 1rem;
            border: 1px solid var(--wp--preset--color--grey-200);
            border-radius: 0;
            background: var(--wp--preset--color--surface);
            font-size: 0.8125rem;
            line-height: 1.6;
            white-space: pre;
            overflow: auto;
        }

        & :not(pre) > code {
            overflow-wrap: anywhere;
            font-size: 0.9em;
        }

        & figure {
            margin-block: 2rem;
        }

        & img {
            max-width: 100%;
            height: auto;
            border-radius: 0;
        }
    }

    & .cn-author-note {
        margin-block-start: 3rem;
        padding-block-start: 1.5rem;
        border-top: 1px solid var(--wp--preset--color--grey-200);

        & .wp-block-post-author__byline {
            font-size: 0.75rem;
            color: var(--wp--preset--color--muted);
        }

        & .wp-block-post-author__name {
            font-size: 0.9375rem;
            font-weight: 550;
        }

        & .wp-block-post-author__bio {
            color: var(--wp--preset--color--muted);
            font-size: 0.875rem;
            line-height: 1.7;
            margin-block: 0.75rem 0;
        }
    }

    & .cn-related-articles {
        margin-block-start: 3.5rem;

        & > h2 {
            margin: 0;
            font-size: 1.25rem;
        }
    }

    & .cn-tutorial-contents {
        margin-block: 2rem;
        padding-block: 1rem;
        border-block: 1px solid var(--wp--preset--color--grey-200);
        font-size: 0.875rem;
    }

    & .cn-prose .wp-block-code {
        & code {
            display: block;
            white-space: pre;
            overflow-wrap: normal;
            word-break: normal;
        }

        &:focus-visible {
            outline: 2px solid var(--wp--preset--color--contrast);
            outline-offset: 3px;
        }
    }

    & .wp-block-query-pagination {
        margin-block-start: 2rem;
        font-size: 0.8125rem;

        &:empty {
            display: none;
        }
    }
}

.cn-article-preview {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 1000;
    width: min(220px, calc(100vw - 24px));
    aspect-ratio: 3 / 2;
    overflow: hidden;
    pointer-events: none;
    background: var(--wp--preset--color--base);

    &[hidden] {
        display: none;
    }

    & img,
    & video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
    }

    & [hidden] {
        display: none;
    }

    /* Older personal photos have white corners baked into the image itself. */
    &.is-gallery img {
        transform: scale(1.12);
    }
}

@media (hover: none), (pointer: coarse) {
    .cn-article-preview {
        display: none;
    }
}

.cn-contact-form {
    --one-form-font: var(--wp--preset--font-family--inter);
    --one-form-font-size: 1rem;
    --one-form-radius: 0;
    --one-form-border: var(--wp--preset--color--grey-600);
    --one-form-label-weight: 400;
    --one-form-height: 2.75rem;
    --one-form-button-hover-background: var(--wp--preset--color--grey-800);
    --one-form-button-hover-text: var(--wp--preset--color--base);

    & .gform_wrapper {
        margin-block: 2.5rem 1.5rem;
    }

    & .gform_required_legend {
        font-size: 0.75rem;
    }

    & .gfield_label {
        font-size: 0.875rem;
    }

    & .gform_confirmation_message {
        padding: 1.5rem 0;
        border-block: 1px solid var(--wp--preset--color--grey-200);
    }
}

@media (max-width: 600px) {
    .cn-minimal-main {
        padding-block: 0.5rem 2rem;
    }
}

/* The native Query Filters remain sticky only inside their own Query Loop. */
.cn-minimal-main .cn-minimal-filters {
    position: sticky;
    top: var(--cn-reading-top, 0px);
    z-index: 60;
    padding-block: 0.5rem 0.75rem;
    background: var(--wp--preset--color--base);

    &.is-stuck {
        padding-block: 0;

        & > .one-202x-query-filters__options {
            gap: 0 0.75rem;

            & > li > a,
            & > li > details > summary {
                min-height: 28px;
                padding-block: 0.25rem;
                letter-spacing: 0;
            }
        }
    }
}

.cn-minimal-main,
.cn-minimal-main :is(h1, h2, h3, h4, [id]) {
    scroll-margin-top: calc(var(--cn-reading-top, 0px) + var(--cn-stuck-filter-height, 0px) + 1rem);
}