/* MVZ Roth — Block content styles.
   Enqueued via `enqueue_block_assets`, so this file loads BOTH on the front end
   and inside the (always-iframed, WP 7.1) editor canvas. Everything here must
   therefore be true of block content in either place — nothing editor-only, and
   nothing that depends on the site header/footer chrome.

   Deliberately unlayered: it has to sit alongside core block CSS, which is also
   unlayered. Selectors stay low-specificity so per-block editor settings win. */

/* -------------------------------------------------------------------------
   1. Editorial rhythm for block content
   ---------------------------------------------------------------------- */
.entry-content > * + *,
.content-block > * + * {
    margin-block-start: var(--space-6, 1.5rem);
}

.entry-content > h2,
.content-block > h2 {
    margin-block-start: var(--space-12, 3rem);
}

.entry-content > h3,
.content-block > h3 {
    margin-block-start: var(--space-8, 2rem);
}

/* Lists in prose need their markers back — the theme reset removes them. */
.entry-content ul:not([class*="wp-block"]),
.entry-content .wp-block-list,
.content-block ul:not([class*="wp-block"]) {
    list-style: disc;
    padding-inline-start: 1.35rem;
}
.entry-content ol:not([class*="wp-block"]),
.entry-content ol.wp-block-list,
.content-block ol:not([class*="wp-block"]) {
    list-style: decimal;
    padding-inline-start: 1.35rem;
}
.entry-content li,
.content-block li {
    color: var(--ink-soft, #4a5760);
    line-height: 1.7;
    margin-block-end: 0.4rem;
}

/* -------------------------------------------------------------------------
   2. Core block refinements
   ---------------------------------------------------------------------- */
.wp-block-image img {
    border-radius: var(--r, 14px);
}
.wp-block-image.is-style-rounded img {
    border-radius: 50%;
}
.wp-block-image figcaption {
    color: var(--ink-mute, #626b71);
    font-size: var(--text-sm, 0.9rem);
    text-align: start;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table th,
.wp-block-table td {
    border-bottom: 1px solid var(--line, rgba(26, 36, 38, 0.08));
    padding: 0.75rem 0.5rem;
    text-align: start;
}
.wp-block-table th {
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    color: var(--ink-deep, #0a1518);
}
/* Wide tables scroll inside their own box rather than the page. */
.wp-block-table { overflow-x: auto; }

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--line-teal, rgba(13, 74, 92, 0.14));
    opacity: 1;
}

.wp-block-details summary {
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    color: var(--ink-deep, #0a1518);
    cursor: pointer;
    padding: 0.75rem 0;
}
.wp-block-details[open] summary {
    border-bottom: 1px solid var(--line, rgba(26, 36, 38, 0.08));
    margin-bottom: 0.75rem;
}

/* WP 7.1 stabilised the Tabs block — give it the theme's editorial treatment. */
.wp-block-tabs__tab-label {
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.wp-block-tabs [aria-selected="true"] .wp-block-tabs__tab-label {
    color: var(--teal, #0d4a5c);
}

/* -------------------------------------------------------------------------
   3. Theme block style variations
      Registered in inc/blocks.php via register_block_style().
   ---------------------------------------------------------------------- */

/* Group — "Karte": the theme's standard raised content card. */
.wp-block-group.is-style-mvz-card {
    background: var(--pure-white, #fff);
    border: 1px solid var(--line, rgba(26, 36, 38, 0.08));
    border-radius: var(--r-lg, 22px);
    padding: var(--space-8, 2rem);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(26, 36, 38, 0.04));
}

/* Group — "Petrol-Panel": inverted brand panel. */
.wp-block-group.is-style-mvz-panel {
    background: var(--teal-deep, #062a36);
    color: var(--paper, #faf7f2);
    border-radius: var(--r-lg, 22px);
    padding: var(--space-10, 2.5rem);
}
.wp-block-group.is-style-mvz-panel :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-mvz-panel p,
.wp-block-group.is-style-mvz-panel li {
    color: inherit;
}
.wp-block-group.is-style-mvz-panel a {
    color: var(--teal-pale, #e6eef0);
}

/* Group — "Hinweis": a bordered notice for practice announcements. */
.wp-block-group.is-style-mvz-notice {
    border-inline-start: 3px solid var(--clay, #c8896a);
    background: var(--clay-pale, #faf0e6);
    border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

/* List — "Häkchenliste": checkmark list for service enumerations. */
.wp-block-list.is-style-mvz-check {
    list-style: none;
    padding-inline-start: 0;
}
.wp-block-list.is-style-mvz-check > li {
    position: relative;
    padding-inline-start: 1.9rem;
    margin-block-end: 0.6rem;
}
.wp-block-list.is-style-mvz-check > li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.45em;
    width: 0.7rem;
    height: 0.38rem;
    border-inline-start: 2px solid var(--teal, #0d4a5c);
    border-block-end: 2px solid var(--teal, #0d4a5c);
    transform: rotate(-45deg);
}

/* Heading — "Eyebrow": the small uppercase kicker used across the site. */
.is-style-mvz-eyebrow {
    font-family: var(--font-body, sans-serif) !important;
    font-size: var(--text-xs, 0.78rem) !important;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal, #0d4a5c) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.is-style-mvz-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    flex: 0 0 auto;
}

/* Quote — "Schlicht": drops the rule, keeps the display italic. */
.wp-block-quote.is-style-mvz-plain {
    border: 0;
    padding-inline-start: 0;
}

/* Separator — "Marke": a small centred editorial mark instead of a rule. */
.wp-block-separator.is-style-mvz-mark {
    border: 0;
    height: auto;
    text-align: center;
    max-width: none;
}
.wp-block-separator.is-style-mvz-mark::before {
    content: '✦';
    color: var(--clay, #c8896a);
    font-size: 1.1rem;
    line-height: 1;
}

/* Table — "Sprechzeiten": the two-column opening-hours look. */
.wp-block-table.is-style-mvz-hours table {
    border-collapse: collapse;
}
.wp-block-table.is-style-mvz-hours td:first-child,
.wp-block-table.is-style-mvz-hours th:first-child {
    font-family: var(--font-display, serif);
    font-size: 1.05em;
    color: var(--ink-deep, #0a1518);
    width: 40%;
}
.wp-block-table.is-style-mvz-hours td:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft, #4a5760);
}
.wp-block-table.is-style-mvz-hours tr:last-child td {
    border-bottom: 0;
}

/* Media & Text / Columns — keep the editorial gutter on narrow screens. */
@media (max-width: 600px) {
    .wp-block-columns { gap: var(--space-6, 1.5rem); }
}

/* -------------------------------------------------------------------------
   Link underlines, scoped to prose
   -------------------------------------------------------------------------
   theme.json sets `elements.link` to `text-decoration: none` deliberately. A
   global underline there also hits navigation, buttons, footer columns and
   card links, which looked broken and told a visitor nothing. WCAG 1.4.1 is
   about links *inside running text*, where colour alone is not enough to
   distinguish them from the words around them — so the underline lives here,
   scoped to content.
   ---------------------------------------------------------------------- */
.entry-content :is(p, li, dd, td, blockquote) a:not(.wp-element-button),
.content-block :is(p, li, dd, td, blockquote) a:not(.wp-element-button),
.legal-content :is(p, li, dd, td) a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.entry-content :is(p, li) a:hover,
.content-block :is(p, li) a:hover {
    text-decoration-thickness: 2px;
}

/* =========================================================================
   THEME ICONS
   -------------------------------------------------------------------------
   Stroking is done here rather than with presentation attributes on the paths.
   WordPress 7.1 sanitises every icon registered with `wp_register_icon()`
   through `wp_kses`, and that filter keeps only a small attribute allowlist —
   `stroke`, `stroke-width`, `stroke-linecap` and `stroke-linejoin` are all
   stripped. The icons survived the trip with `fill="none"` and nothing else,
   which renders them perfectly invisible. Styling them in CSS is immune to
   that, works identically for the older inline fallback renderer, and lets a
   single `color` declaration tint any icon.

   Lives in blocks.css so it applies on the front end and inside the editor
   canvas, where the icon picker previews the same markup.
   ========================================================================= */
.mvz-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
.mvz-icon path,
.mvz-icon polygon {
    fill: none;
    stroke: inherit;
    stroke-width: inherit;
    stroke-linecap: inherit;
    stroke-linejoin: inherit;
    vector-effect: non-scaling-stroke;
}

/* -------------------------------------------------------------------------
   Callout groups
   -------------------------------------------------------------------------
   A Group with the constrained layout centres its children at the theme's
   content width. Inside a full-width callout that leaves a wide empty margin
   on both sides of the text — the box looked padded by 120px rather than 24px.
   A callout is a container, not a column, so its children fill it.
   ---------------------------------------------------------------------- */
.wp-block-group:is(.is-style-mvz-notice, .is-style-mvz-card, .is-style-mvz-panel) > * {
    max-width: none;
    margin-inline: 0;
}