/* okitoki-v4 — prose (mock-up v-content): section texts, FAQ answers, tabs, the SEO block,
 * single posts and the classic editor (add_editor_style). Completed with what the mock-up
 * lacked: images, figures, tables, quotes, code, h6. */

.v-content {
    line-height: var(--v-font-line-height);
}
.v-content > :first-child { margin-top: 0; }
.v-content > :last-child { margin-bottom: 0; }

.v-content :is(h1, h2, h3, h4, h5, h6) {
    margin: var(--v-space-lg) 0 var(--v-space-xs);
    line-height: var(--v-font-line-height-heading);
    scroll-margin-top: calc(var(--v-header-height) + var(--v-space-md));
}
.v-content :is(h1, h2) { font-size: var(--v-font-size-xl); }
.v-content h3 { font-size: var(--v-font-size-lg); }
.v-content :is(h4, h5) { font-size: var(--v-font-size); }
.v-content h6 { font-size: var(--v-font-size-sm); text-transform: uppercase; letter-spacing: 1px; }
.v-content p { margin: 0 0 var(--v-space); }
.v-content a {
    color: rgb(var(--v-color-accent));
    font-weight: var(--v-font-weight-bold);
    text-decoration: none;
    transition: color var(--v-duration) var(--v-timing);
}
.v-content a:hover { color: rgb(var(--v-color-primary)); }
.v-content :is(p, ul, ol):last-child { margin-bottom: 0; }

.v-content ul,
.v-content ol {
    margin: 0 0 var(--v-space);
    padding: 0;
    list-style: none;
}
.v-content li {
    position: relative;
    margin-bottom: var(--v-space-xs);
    padding-left: 22px;
}
.v-content ul > li::before {
    content: "";
    position: absolute;
    top: .65em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--v-color-primary)); /* v4: was an off-palette #18d0cd */
}
.v-content ol { counter-reset: v-ol; }
.v-content ol > li { counter-increment: v-ol; }
.v-content ol > li::before {
    content: counters(v-ol, ".") ".";
    position: absolute;
    left: 0;
    color: rgb(var(--v-color-primary));
    font-weight: var(--v-font-weight-bold);
}
.v-content li > :is(ul, ol) { margin: var(--v-space-xs) 0 0; }
/* Legal texts (public offer): ol > li > h2 + ol > li + ol > li, numbered 1. / 1.1. / 1.1.1.
 * Nested items need room for the longer number; a list item that opens with a section
 * heading carries its number on the heading line instead of a second marker beside it. */
.v-content ol ol > li { padding-left: 38px; }
.v-content ol ol ol > li { padding-left: 50px; }
.v-content ol > li:has(> :is(h2, h3):first-child) { padding-left: 0; margin-top: var(--v-space-lg); }
.v-content ol > li:has(> :is(h2, h3):first-child)::before { display: none; }
.v-content ol > li > :is(h2, h3):first-child { margin-top: 0; }
.v-content ol > li > :is(h2, h3):first-child::before {
    content: counters(v-ol, ".") ". ";
    color: rgb(var(--v-color-primary));
}
.v-content ol > li:has(> :is(h2, h3):first-child) > ol > li { padding-left: 38px; }
/* Old editor markup puts style="font-weight: 400" on every span; keep bold terms bold */
.v-content :is(b, strong) { font-weight: var(--v-font-weight-bold); }

.v-content img { height: auto; border-radius: var(--v-radius); }
.v-content figure,
.v-content .wp-caption { max-width: 100%; margin: var(--v-space-lg) auto; }
.v-content figcaption,
.v-content .wp-caption-text {
    margin-top: var(--v-space-xs);
    color: rgb(var(--v-color-text-secondary));
    font-size: var(--v-font-size-sm);
    text-align: center;
}

.v-content blockquote {
    margin: var(--v-space-lg) 0;
    padding: var(--v-space-md) var(--v-space-lg);
    border-left: 4px solid rgb(var(--v-color-primary));
    border-radius: 0 var(--v-radius) var(--v-radius) 0;
    background: rgb(var(--v-color-surface-contrast));
}
.v-content blockquote > :last-child { margin-bottom: 0; }

.v-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: var(--v-space-lg) 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--v-font-size-sm);
}
.v-content :is(th, td) {
    padding: var(--v-space-sm) var(--v-space-md);
    border: 1px solid rgb(var(--v-color-border-element));
    text-align: left;
    vertical-align: top;
}
.v-content th { background: rgb(var(--v-color-surface-contrast)); font-weight: var(--v-font-weight-bold); }

.v-content hr { margin: var(--v-space-xl) 0; border: 0; border-top: 1px solid rgb(var(--v-color-border-element)); }
.v-content :is(code, kbd) {
    padding: 2px 6px;
    border-radius: var(--v-radius-sm);
    background: rgb(var(--v-color-surface-contrast));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}
.v-content pre {
    margin: var(--v-space-lg) 0;
    padding: var(--v-space-md);
    overflow-x: auto;
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-surface-contrast));
}
.v-content pre code { padding: 0; background: none; }