/*
 * family-hub.css — /portal/ (page 164, Family Hub).
 *
 * The page renders from patterns/family-hub-content.html. Card backgrounds,
 * accent text colors, borders, and buttons all live in core block attributes
 * (strict-native). The ONLY thing that needs real CSS is the round icon badge
 * above each action card's eyebrow on the three-card grid — house rule: icons
 * go through CSS (::before), never wp:html.
 *
 * Each eyebrow carries .mm-hub-eyebrow + a color modifier (-teal / -grape /
 * -butter); the modifier switches the glyph + badge colors. Swap the `content`
 * glyph freely to change an icon.
 *
 * NOTE: single-dash modifiers on purpose — NOT BEM `--`. This markup lives in
 * page 164's post_content (block-delimiter HTML comments). A `--` is illegal
 * inside an HTML comment, and the `--` escape Gutenberg uses for it
 * gets mangled when content round-trips through the MCP/JSON publish pipeline,
 * which then trips the editor's "invalid content" check. Single-dash class
 * names sidestep the whole problem.
 *
 * Also stretches the two top cards to equal height so the 50/50 row reads as a
 * matched pair (the .mm-hub-top columns block).
 *
 * Enqueued front end on is_page('portal') (inc/enqueue.php) and into the editor
 * canvas via melody_magic_editor_canvas_styles() (inc/setup.php) so the badges
 * preview in the block editor too (wp_enqueue_block_style doesn't reach the iframe).
 */

/* ── Top row: equal-height 50/50 cards ───────────────────────────────── */
.mm-hub-top .wp-block-column {
    display: flex;
}
.mm-hub-top .wp-block-column > .wp-block-group {
    width: 100%;
}

/* ── Action-card icon badges ─────────────────────────────────────────── */
.mm-hub-eyebrow::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.mm-hub-eyebrow-teal::before {
    content: "\266A";      /* ♪  Recital — perform */
    color: #1F7A70;        /* teal-700 */
    background: #C8E8E1;   /* teal-200 */
}

.mm-hub-eyebrow-grape::before {
    content: "\21BB";      /* ↻  Change Request — reschedule */
    color: #5F2C75;        /* grape-700 */
    background: #DDCBE8;   /* soft grape */
}

.mm-hub-eyebrow-butter::before {
    content: "\25F7";      /* ◷  Withdraw — 30-day notice */
    color: #B86A1F;        /* apricot-800 */
    background: #F6E4AE;   /* deep butter */
}