/*
 * Eva Völkle — Editorial styles (blog articles + Kristallbrief newsletter)
 *
 * Every rule is scoped to `.eva-prose` (the content wrapper on the front end).
 * The same file is loaded into the block editor, where `.eva-prose` is swapped
 * for the editor canvas (see eva_editorial_editor_styles() in inc/editorial.php),
 * so the client sees the real design while writing.
 *
 * Palette (Ethereal Clarity):
 *   primary #5796cc · on-surface #334e68 · on-surface-variant #486581
 *   outline #829ab1 · outline-variant #bcccdc · surface-low #f4f8fc
 */

/* ── Base text ─────────────────────────────────────────────────────────────── */

.eva-prose {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #486581;
}

.eva-prose p {
    margin: 0 0 1.5rem;
}

.eva-prose p:empty {
    display: none;
}

.eva-prose strong,
.eva-prose b {
    font-weight: 500;
    color: #334e68;
}

.eva-prose em,
.eva-prose i {
    font-style: italic;
}

.eva-prose a {
    color: #5796cc;
    text-decoration: underline;
    text-decoration-color: rgba(87, 150, 204, 0.35);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.2s ease;
}

.eva-prose a:hover {
    text-decoration-color: #5796cc;
}

/* ── Headings ──────────────────────────────────────────────────────────────── */

.eva-prose h2,
.eva-prose h3,
.eva-prose h4 {
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    color: #5796cc;
    line-height: 1.25;
    scroll-margin-top: 6rem;
}

.eva-prose h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 3.5rem 0 1.25rem;
}

.eva-prose h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    margin: 2.5rem 0 1rem;
}

.eva-prose h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5796cc;
    margin: 2rem 0 0.75rem;
}

/* ── Lists & tables ────────────────────────────────────────────────────────── */

.eva-prose ul,
.eva-prose ol {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
}

.eva-prose ul { list-style: none; }
.eva-prose ol { list-style: decimal; }

.eva-prose ul > li {
    position: relative;
}

.eva-prose ul > li::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: 0.8em;
    width: 0.4rem;
    height: 1px;
    background: #5796cc;
}

.eva-prose li + li {
    margin-top: 0.5rem;
}

.eva-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.eva-prose th {
    text-align: left;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5796cc;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid #bcccdc;
}

.eva-prose td {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(188, 204, 220, 0.5);
}

/* ── Images & figures ──────────────────────────────────────────────────────── */

.eva-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.eva-prose figure {
    margin: 2.5rem 0;
}

.eva-prose figcaption,
.eva-prose .wp-caption-text {
    margin-top: 0.75rem;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #829ab1;
    text-align: center;
}

/* Legacy content from the previous theme (classic editor alignments) */
.eva-prose .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.eva-prose .alignleft {
    float: left;
    margin: 0.4rem 2rem 1rem 0;
    max-width: 50%;
}

.eva-prose .alignright {
    float: right;
    margin: 0.4rem 0 1rem 2rem;
    max-width: 50%;
}

.eva-prose .wp-caption {
    max-width: 100%;
}

.eva-prose::after {
    content: '';
    display: table;
    clear: both;
}

/* ── Core quote (default style) ────────────────────────────────────────────── */

.eva-prose blockquote {
    margin: 2.5rem 0;
    padding: 0.25rem 0 0.25rem 1.75rem;
    border-left: 1px solid #5796cc;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #334e68;
}

.eva-prose blockquote p:last-of-type {
    margin-bottom: 0;
}

.eva-prose blockquote cite {
    display: block;
    margin-top: 1rem;
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5796cc;
}

/* ── Core columns / buttons / separator (front end may not load block CSS) ── */

.eva-prose .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 2.5rem 0;
    align-items: flex-start;
}

.eva-prose .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}

.eva-prose .wp-block-column > *:first-child { margin-top: 0; }
.eva-prose .wp-block-column > *:last-child  { margin-bottom: 0; }

@media (max-width: 781px) {
    .eva-prose .wp-block-columns { flex-direction: column; }
    .eva-prose .wp-block-column  { flex-basis: 100%; }
}

.eva-prose .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.eva-prose .wp-block-button__link,
.eva-prose .eva-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border: 1px solid #5796cc;
    border-radius: 0.25rem;
    background: transparent;
    color: #5796cc;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.eva-prose .wp-block-button__link:hover,
.eva-prose .eva-btn:hover {
    background: #5796cc;
    color: #ffffff;
}

.eva-prose .eva-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.eva-prose hr,
.eva-prose .wp-block-separator {
    border: 0;
    border-top: 1px solid #bcccdc;
    margin: 3rem auto;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
 * "Eva" block styles — selectable in the editor under Block → Styles
 * ════════════════════════════════════════════════════════════════════════════ */

/* Einleitung mit Initiale — lead paragraph with a newspaper drop cap */
.eva-prose .is-style-eva-lead {
    font-size: 1.2rem;
    line-height: 1.75;
    color: #334e68;
}

.eva-prose .is-style-eva-lead::first-letter {
    float: left;
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    font-size: 4.4em;
    line-height: 0.82;
    margin: 0.06em 0.12em 0 0;
    color: #5796cc;
}

/* Zeitungsspalten — two newspaper columns with a hairline rule */
@media (min-width: 768px) {
    .eva-prose .is-style-eva-columns {
        column-count: 2;
        column-gap: 3.5rem;
        column-rule: 1px solid rgba(188, 204, 220, 0.7);
    }

    .eva-prose .is-style-eva-columns > * {
        margin-top: 0;
    }

    .eva-prose .is-style-eva-columns h2,
    .eva-prose .is-style-eva-columns h3,
    .eva-prose .is-style-eva-columns h4 {
        break-after: avoid;
        margin-top: 0;
    }

    .eva-prose .is-style-eva-columns figure,
    .eva-prose .is-style-eva-columns blockquote {
        break-inside: avoid;
    }
}

.eva-prose .is-style-eva-columns {
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Zeitungs-Zitat — centred pull quote between hairlines */
.eva-prose .is-style-eva-pullquote {
    position: relative;
    margin: 3.5rem auto;
    max-width: 40rem;
    padding: 2.75rem 1rem 2.25rem;
    border: 0;
    border-top: 1px solid #bcccdc;
    border-bottom: 1px solid #bcccdc;
    text-align: center;
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.45;
    color: #5796cc;
}

.eva-prose .is-style-eva-pullquote::before {
    content: '\201C';
    position: absolute;
    top: -0.62em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0.75rem;
    background: #ffffff;
    font-family: 'Noto Serif', serif;
    font-style: normal;
    font-size: 3.2rem;
    line-height: 1;
    color: #9fb3c8;
}

.eva-prose .is-style-eva-pullquote cite {
    margin-top: 1.25rem;
}

/* Rubrik — section heading in label caps with a hairline running out */
.eva-prose .is-style-eva-kicker {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 3.5rem 0 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5796cc;
}

.eva-prose .is-style-eva-kicker::after {
    content: '';
    flex: 1 1 auto;
    border-top: 1px solid #bcccdc;
}

/* Infobox — soft panel for dates, notes, practice tips */
.eva-prose .is-style-eva-box {
    margin: 2.5rem 0;
    padding: 2rem 2rem 1.5rem;
    background: #f4f8fc;
    border: 1px solid rgba(188, 204, 220, 0.6);
    border-radius: 0.5rem;
}

.eva-prose .is-style-eva-box > *:first-child {
    margin-top: 0;
}

.eva-prose .is-style-eva-box h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5796cc;
    margin: 0 0 1rem;
}

.eva-prose .is-style-eva-box p:last-child,
.eva-prose .is-style-eva-box ul:last-child {
    margin-bottom: 0.5rem;
}

/* Ornament — asterisk between two hairlines */
.eva-prose .is-style-eva-ornament {
    position: relative;
    max-width: 22rem;
    height: 1.5rem;
    margin: 3.5rem auto;
    border: 0;
    background:
        linear-gradient(#bcccdc, #bcccdc) left center / calc(50% - 1.5rem) 1px no-repeat,
        linear-gradient(#bcccdc, #bcccdc) right center / calc(50% - 1.5rem) 1px no-repeat;
    overflow: visible;
}

.eva-prose .is-style-eva-ornament::before {
    content: '\2733';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    line-height: 1;
    color: #5796cc;
}

/* Signatur — handwritten-feeling sign-off */
.eva-prose .is-style-eva-signature {
    margin-top: 3rem;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #5796cc;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Page chrome around the content (front end only — harmless in the editor)
 * ════════════════════════════════════════════════════════════════════════════ */

/* Newspaper double hairline used by the Kristallbrief masthead */
.eva-rule-double {
    border: 0;
    border-top: 3px double #bcccdc;
}

/* Pagination — circles matching the Writings mockup */
.eva-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.eva-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid rgba(188, 204, 220, 0.6);
    border-radius: 9999px;
    background: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    color: #486581;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.eva-pagination a.page-numbers:hover {
    border-color: #5796cc;
    color: #5796cc;
}

.eva-pagination .page-numbers.current {
    border-color: #5796cc;
    background: #5796cc;
    color: #ffffff;
}

.eva-pagination .page-numbers.dots {
    border: 0;
    background: transparent;
}

.eva-pagination .material-symbols-outlined {
    font-size: 1rem;
}

/* Sort dropdown on the blog listing */
.eva-sort[open] .eva-sort-icon {
    transform: rotate(180deg);
}

.eva-sort summary::-webkit-details-marker {
    display: none;
}

/* Visually hidden (honeypot, screen-reader labels) */
.eva-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A column whose image was never uploaded renders empty — let the text take the row */
.eva-prose .wp-block-column:not(:has(*)) {
    display: none;
}

/* Editor only: the post title field matches the front-end headline */
.eva-prose .editor-post-title {
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    color: #5796cc;
}