/* Makes core Gutenberg blocks (used inside department post content) match
   the rest of the site's design instead of WordPress's bare default look.
   Loaded both on the front end and inside the block editor. */

/*
 * WordPress wraps every core/group block's content in an extra
 * .wp-block-group__inner-container div (added by core's block "layout"
 * support, not something this theme's markup asked for). That extra box
 * sits BETWEEN a migrated grid/flex container (e.g. .dental-feature-grid,
 * .detail-hero-grid, .orth-specialists-grid) and its real children
 * (.detail-card, .orth-specialist-card, ...), so `display:grid`/`flex` on
 * the outer class only ever sees ONE child (the wrapper) and every card
 * layout collapses into a plain vertical stack. `display:contents` removes
 * the wrapper's own box while keeping it in the DOM, so its children are
 * promoted to the grid/flex parent exactly as if the wrapper wasn't there.
 */
.wp-block-group__inner-container {
    display: contents;
}

/*
 * Everything below is FALLBACK styling for generic Gutenberg block markup
 * that doesn't carry one of the theme's own original classes (a plain
 * <p>/<figure>/<ul> with no special className). Wrapped in :where(...) so
 * it has ZERO specificity — any of the theme's original, more specific
 * component rules (.detail-hero-bg img, .dp-service, .button-white, ...)
 * must always win. Without this, e.g. a generic ".wp-block-image img"
 * fallback rule can outrank ".detail-hero-bg img" on selector specificity
 * alone and silently break a hero background image's sizing.
 */
:where(.etica-department-content .wp-block-button__link) {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity .18s;
}
:where(.etica-department-content .wp-block-button__link:hover) { opacity: .85; }

:where(.etica-department-content .wp-block-buttons) { gap: 12px; margin: 18px 0; }

:where(.etica-department-content p.eyebrow) {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px;
}

:where(.etica-department-content p.lead) {
    font-size: 18px;
    color: var(--gray);
    line-height: 1.7;
    max-width: 720px;
}

:where(.etica-department-content p.detail-chip) {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--light-red);
    color: var(--red);
    margin-bottom: 10px;
}

:where(.etica-department-content h2.wp-block-heading, .etica-department-content h3.wp-block-heading) {
    font-family: var(--serif);
    margin: 36px 0 12px;
}

:where(.etica-department-content .wp-block-list) {
    margin: 0 0 20px;
    padding-left: 22px;
    line-height: 1.7;
    color: var(--gray);
}

:where(.etica-department-content .wp-block-separator) {
    border: none;
    border-top: 1px solid var(--border);
    margin: 40px 0;
}

:where(.etica-department-content figure.wp-block-image) {
    margin: 20px 0;
    border-radius: var(--radius);
    overflow: hidden;
}
:where(.etica-department-content figure.wp-block-image img) { width: 100%; height: auto; display: block; }