/*
 * Global Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Works WITH Gutenberg and FSE — never against them.
 *
 * Load order (via wp_enqueue_style dependencies):
 *   tokens.css   ← custom properties at :root
 *   global.css   ← this file: typography, layout helpers, block style variants
 *   (conditionally) woocommerce.css, learndash.css, animations.css, etc.
 *
 * Specificity is intentionally low — we target Gutenberg's own class
 * structure so styles apply exactly where the block editor expects them.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Paragraph Line Length ─────────────────────────────────────────────── */
/* Scoped to post/page content only — avoids WPForms, LearnDash, WC etc. */
.entry-content > p,
.wp-block-post-content > p {
    text-wrap: pretty;
    max-inline-size: 72ch;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
a {
    transition: color var(--msk-duration-fast) var(--msk-ease-out);
}

/* ── Images ────────────────────────────────────────────────────────────── */
img, video {
    height: auto;       /* Prevent aspect ratio distortion */
    max-inline-size: 100%;
}

/* ── Inline text colour (core text-colour format) ──────────────────────── */
/* Gutenberg's inline "text colour" format wraps the run in a <mark>, whose UA
 * default is a yellow highlight. Reset it so a coloured word isn't highlighted.
 * An intentional inline highlight sets `background-color` inline, which (being
 * an inline style) overrides this — so highlights still work. */
mark.has-inline-color {
    background-color: transparent;
}

/* ── Cover Block Enhancements ──────────────────────────────────────────── */
.wp-block-cover {
    /* Ensure content is always legible over any image */
    isolation: isolate;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: var(--msk-z-raised);
}

/* ── Cover Grid: square tiles + equal heights ──────────────────────────── */
/* Scoped to the Maple Cover Grid pattern via the `msk-cover-grid` class on
 * its outer Group. Three rules work together:
 *
 *  1. `aspect-ratio: 1 / 1` + `min-height: 0` overrides core/cover's baked-in
 *     `min-height: 430px`, so a tile defaults to a perfect square sized to
 *     its column width — at any column count or padding level.
 *
 *  2. `display: flex; flex-direction: column` on each `.wp-block-column`
 *     turns the column into a vertical flex container so the cover inside
 *     can stretch to fill it.
 *
 *  3. `flex: 1 1 auto` on the cover makes it fill its column's height.
 *     `core/columns` is itself a flex row with `align-items: stretch`, so
 *     all columns naturally equalize to the tallest column's height. The
 *     cover then fills that equalized height, so all tiles match — even
 *     when one tile's text forces the row taller than the square baseline. */
.msk-cover-grid .wp-block-cover {
    aspect-ratio: 1 / 1;
    min-height: 0;
    width: 100%;
}

.msk-cover-grid .wp-block-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.msk-cover-grid .wp-block-column > .wp-block-cover {
    flex: 1 1 auto;
}

/* ── Group Block: Card Variant ─────────────────────────────────────────── */
/* Apply class "is-style-card" in the block editor to get a card treatment */
.wp-block-group.is-style-card {
    background: var(--msk-color-surface);
    border-radius: var(--msk-radius-lg);
    box-shadow: var(--msk-shadow-md);
    padding: var(--msk-space-8);
    transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out),
                transform      var(--msk-duration-normal) var(--msk-ease-out);
}

.wp-block-group.is-style-card:hover {
    box-shadow: var(--msk-shadow-lg);
    transform: translateY(-2px);
}

/* ── Separator: Accent Variant ─────────────────────────────────────────── */
.wp-block-separator.is-style-accent {
    border: none;
    block-size: 3px;
    inline-size: 60px;
    background: var(--msk-gradient-accent);
    border-radius: var(--msk-radius-full);
    margin-inline: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Enhance without overriding theme.json button presets */
.wp-block-button__link {
    transition:
        background-color var(--msk-duration-fast) var(--msk-ease-out),
        box-shadow       var(--msk-duration-fast) var(--msk-ease-out),
        transform        var(--msk-duration-fast) var(--msk-ease-out);
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
    /* Neutral depth shadow — palette-agnostic. Buttons that want a coloured
       glow opt in with the "Accent Glow" block style. */
    box-shadow: var(--msk-shadow-md);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* ── Columns: Balanced Gutters ─────────────────────────────────────────── */
/* FSE generates inline gap styles — this just sets a sensible default */
.wp-block-columns:not([style*="gap"]) {
    gap: var(--msk-space-8);
}

/* ── Block Style: Glass ────────────────────────────────────────────────── */
/* Frosted glass card — pair with a Cover or colored section background */
.wp-block-group.is-style-glass {
    background: color-mix(in oklch, var(--msk-color-surface) 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in oklch, var(--msk-color-border) 50%, transparent);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-8);
    box-shadow: var(--msk-shadow-sm);
}

/* ── Block Style: Hover Lift (Image) ──────────────────────────────────── */
.wp-block-image.is-style-hover-lift img {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
    border-radius: var(--msk-radius-md);
}

.wp-block-image.is-style-hover-lift img:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* ── Block Style: Hover Lift Cards (Columns) ──────────────────────────── */
/* Each column child lifts on hover — great for feature/service grids */
.wp-block-columns.is-style-hover-lift > .wp-block-column {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-6);
}

.wp-block-columns.is-style-hover-lift > .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* ── Block Style: Gradient Overlay (Cover) ────────────────────────────── */
.wp-block-cover.is-style-gradient-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--msk-gradient-hero);
    opacity: 0.6;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ── Block Style: Accent Underline (Heading) ──────────────────────────── */
.wp-block-heading.is-style-accent-underline {
    padding-block-end: var(--msk-space-3);
    border-block-end: 3px solid var(--msk-color-accent);
    display: inline-block;
}

/* ── Block Style: Gradient Text (Heading & Paragraph) ─────────────────── */
.wp-block-heading.is-style-gradient-text,
.is-style-gradient-text {
    background: var(--msk-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Block Style: Accent Glow (Button) ────────────────────────────────── */
.wp-block-button.is-style-accent-glow .wp-block-button__link {
    box-shadow: var(--msk-shadow-accent);
    transition: box-shadow var(--msk-duration-normal) var(--msk-ease-out),
                transform  var(--msk-duration-fast)   var(--msk-ease-out);
}

.wp-block-button.is-style-accent-glow .wp-block-button__link:hover {
    box-shadow:
        var(--msk-shadow-accent),
        0 8px 30px color-mix(in oklch, var(--msk-color-accent) 25%, transparent);
    transform: translateY(-1px);
}

/* ── Utility Classes ───────────────────────────────────────────────────── */
/* Available in the block editor "Additional CSS Class" field */

/* Gradient text effect — works on any inline/block element */
.msk-text-gradient {
    background: var(--msk-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* Subtle text overline / eyebrow label */
.msk-eyebrow {
    display: block;
    font-size: var(--msk-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-widest);
    text-transform: uppercase;
    color: var(--msk-color-accent);
    margin-block-end: var(--msk-space-2);
}

/* Surface tint — gentle background differentiation */
.msk-surface-alt {
    background-color: var(--msk-color-surface-alt);
}

/* Generic hover lift — add to any block for a subtle raise on hover */
.msk-hover-lift {
    transition: transform var(--msk-duration-normal) var(--msk-ease-out),
                box-shadow var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--msk-shadow-lg);
}

/* Gradient border — accent-coloured border via background trick */
.msk-gradient-border {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-origin: border-box;
    position: relative;
    border-radius: var(--msk-radius-lg);
}

.msk-gradient-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--msk-gradient-accent);
    z-index: -1;
}

/* Accent left bar — vertical accent stripe on left edge */
.msk-accent-bar {
    border-inline-start: 4px solid var(--msk-color-accent);
    padding-inline-start: var(--msk-space-6);
}

/* Animated link underlines — expanding underline on hover.              */
/* Excludes buttons and nav links to avoid conflicts.                    */
.msk-animated-links a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-pages-list__item__link) {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size var(--msk-duration-normal) var(--msk-ease-out);
}

.msk-animated-links a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-pages-list__item__link):hover {
    background-size: 100% 2px;
}

/* Full-viewport hero — exact viewport height minus header.             */
/* Requires fullview.js which sets --msk-header-height dynamically.     */
.msk-full-viewport-hero.wp-block-cover {
    height: calc(100svh - var(--msk-header-height, 0px) - var(--wp-admin--admin-bar--height, 0px));
    min-height: 0;
    max-height: calc(100svh - var(--msk-header-height, 0px) - var(--wp-admin--admin-bar--height, 0px));
    overflow: hidden;
}

.msk-full-viewport-hero.wp-block-cover > .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    max-height: 100%;
}

/* Image to edge — removes padding so an image in a column/group        */
/* bleeds to the block edge. Add to the parent Group or Column.         */
.msk-image-to-edge {
    padding-block-end: 0;
    padding-inline-end: 0;
}

.msk-image-to-edge .wp-block-image,
.msk-image-to-edge figure {
    margin: 0;
}

.msk-image-to-edge img {
    display: block;
    margin: 0;
}

/* Column equalization — stretches columns to equal height with          */
/* the last child pushed to the bottom. Add to a Columns block.         */
.msk-equal-columns.wp-block-columns {
    align-items: stretch;
}

.msk-equal-columns > .wp-block-column {
    display: flex;
    flex-direction: column;
}

.msk-equal-columns > .wp-block-column > *:last-child {
    margin-block-start: auto;
}

/* Remove vertical whitespace — zero out block spacing */
.msk-no-gap {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Visually hidden but accessible */
.msk-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
border: 0;
}

/* ── Curved-Bottom Hero Utility ───────────────────────────────────────
 * Applied via `className="msk-curved-hero"` on a core/cover block to
 * carve a smooth concave curve out of the hero's bottom edge — used by
 * the "Maple Curved Hero" pattern. Pure CSS, no JS, and the curve
 * scales with viewport width via `preserveAspectRatio='none'` on the
 * inline SVG mask. Override `--msk-curve-color` in user CSS to match a
 * non-white page background below the hero (e.g., the beige outer
 * wrapper `--msk-curve-color: #f5ebe0`).
 */
.msk-curved-hero {
    position: relative;
}
.msk-curved-hero::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 80px;
    background-color: var(--msk-curve-color, #ffffff);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 Q 600 100 1200 0 L 1200 80 L 0 80 Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M 0 0 Q 600 100 1200 0 L 1200 80 L 0 80 Z' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* ── Footer Health Contact — Editable pattern ───────────────────────────
 * Edge-to-edge red/cream "get started" split (patterns/footer-health-
 * contact-editable.php). This pattern has no backing block, so its scoped
 * rules live here in global.css rather than in a blocks/<x>/style.css.
 *
 * The two halves must butt together (zero column gap) and equalise height
 * so both background panels fill the full section regardless of which side
 * has more content. The `msk-footer-health-contact-split` class sits on the
 * outer full-width group.
 */
.msk-footer-health-contact-split > .wp-block-columns {
    gap: 0;
    align-items: stretch;
}
.msk-footer-health-contact-split > .wp-block-columns > .wp-block-column {
    margin: 0;
}

/* Embedded Maple Forms appointment form. Default Maple Forms appearance is
 * wrapped in `@layer maple-forms`, so these unlayered rules override it
 * cleanly (no !important needed) to match the design: small uppercase muted
 * labels, clean bordered inputs on white, and a full-width black CTA. The
 * field SET (Name / Email / …) is configured in Maple Forms itself; this
 * only governs appearance. */
.msk-footer-health-contact .maple-form__field { margin-block-end: 1.25rem; }
.msk-footer-health-contact .maple-form__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-block-end: 0.5rem;
}
.msk-footer-health-contact .maple-form__input,
.msk-footer-health-contact .maple-form__input--textarea,
.msk-footer-health-contact .maple-form__input--select {
    padding: 0.875rem 1rem;
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #d4d4d8;
    border-radius: 0.375rem;
}
.msk-footer-health-contact .maple-form__input::placeholder,
.msk-footer-health-contact .maple-form__input--textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}
.msk-footer-health-contact .maple-form__input:focus,
.msk-footer-health-contact .maple-form__input--textarea:focus,
.msk-footer-health-contact .maple-form__input--select:focus {
    border-color: #1a1a1a;
    outline: none;
    box-shadow: 0 0 0 1px #1a1a1a;
}
.msk-footer-health-contact .maple-form__input--textarea { min-block-size: 140px; }
.msk-footer-health-contact .maple-form__submit { margin-block-start: 0.5rem; }
.msk-footer-health-contact .maple-form__button {
    inline-size: 100%;
    padding: 1rem 1.5rem;
    font-weight: 700;
    color: #ffffff;
    background: #1a1a1a;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.msk-footer-health-contact .maple-form__button:hover {
    background: #333333;
    opacity: 1;
}

/* Two-up field pairing to match the design (First | Last, Email | Phone,
 * Day | Time) with the textarea and submit spanning full width. The form's
 * hidden inputs are display:none and its honeypot is position:absolute, so
 * neither takes a grid cell — only the visible fields + submit flow into the
 * grid. Single-column below 600px. */
@media (min-width: 600px) {
    .msk-footer-health-contact .maple-form__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
        align-items: start;
    }
    .msk-footer-health-contact .maple-form__field--textarea,
    .msk-footer-health-contact .maple-form__submit {
        grid-column: 1 / -1;
    }
}

/* ── Health Slider pattern (patterns/health-slider.php) ──────────────────
 * Two-column hover slider. The left column lists numbered triggers; hovering
 * (or focusing) trigger N reveals panel N in the right column. Panels are
 * stacked in one grid cell and cross-fade — pure CSS via `:has()`, no JS, so
 * it survives editing. Each `__trigger` maps to the `__panel` at the same
 * position. Scoped to `.msk-health-slider`; lives here (not blocks.css)
 * because it backs a pattern, not a block.
 */
.msk-health-slider .wp-block-columns { gap: 0; }

/* Triggers */
.msk-health-slider__triggers { display: flex; flex-direction: column; }
.msk-health-slider__trigger {
    padding-block: 1.1rem;
    border-block-start: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.msk-health-slider__trigger:last-child { border-block-end: 1px solid rgba(0, 0, 0, 0.1); }
.msk-health-slider__num { margin: 0 0 0.3rem; font-size: 0.75rem; letter-spacing: 0.12em; color: #9a9a90; }
.msk-health-slider__title { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 700; color: #1a1a1a; transition: color 200ms ease; }
.msk-health-slider__desc { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #56564f; max-inline-size: 46ch; }
.msk-health-slider__trigger:hover .msk-health-slider__title,
.msk-health-slider__trigger:focus-within .msk-health-slider__title { color: #5e6e4f; }

/* Panels — stacked in one grid cell, cross-fade on switch */
.msk-health-slider__panels {
    position: relative;
    min-block-size: 520px;
    block-size: 100%;
}
/* Panels are absolutely stacked and inset by a uniform gap, so every slide is
 * the exact same box regardless of how its circle text wraps. */
.msk-health-slider__panel {
    position: absolute;
    inset: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease;
    background-size: cover;
    background-position: center;
}
.msk-health-slider__panels > .msk-health-slider__panel:first-child { opacity: 1; visibility: visible; }

.msk-health-slider__pill {
    position: absolute;
    inset-block-start: 1.75rem;
    inset-inline-end: 1.75rem;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 0.875rem;
    padding: 0.6rem 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    line-height: 1.1;
}
/* Hide the pill entirely when both lines are empty, so a cleared pill leaves
 * no empty card. */
.msk-health-slider__pill:empty,
.msk-health-slider__pill:not(:has(.msk-health-slider__pill-num:not(:empty), .msk-health-slider__pill-label:not(:empty))) {
    display: none;
}
/* Inherit colour from the group so the pill's Text-colour control drives both
 * lines; the label is muted via opacity rather than a fixed colour. */
.msk-health-slider__pill-num { margin: 0; font-size: 1.25rem; font-weight: 700; color: inherit; }
.msk-health-slider__pill-label { margin: 0; font-size: 0.7rem; letter-spacing: 0.04em; color: inherit; opacity: 0.65; }

/* Circle: a centred round "button" linking to a per-slide URL (set via the
 * button's link control), with a faint concentric outer ring. */
.msk-health-slider__circle-wrap {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.msk-health-slider__circle .wp-block-button__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    inline-size: clamp(180px, 20vw, 260px);
    aspect-ratio: 1 / 1;
    padding: 1.5rem;
    border-radius: 50%;
    border: 1px solid rgba(94, 110, 79, 0.45);
    background-color: rgba(255, 255, 255, 0.2);
    color: #4f5e42;
    font-family: var(--msk-serif, Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.14rem;
    line-height: 1.4;
    transition: background-color 200ms ease, border-color 200ms ease;
}
.msk-health-slider__circle .wp-block-button__link:hover,
.msk-health-slider__circle .wp-block-button__link:focus {
    background-color: rgba(255, 255, 255, 0.45);
    border-color: rgba(94, 110, 79, 0.75);
}
.msk-health-slider__circle .wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(94, 110, 79, 0.22);
    pointer-events: none;
}

/* Hover/focus a trigger → reveal the panel at the same index. */
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(1):hover) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(1):focus-within) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(2):hover) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(2):focus-within) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(3):hover) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(3):focus-within) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(4):hover) .msk-health-slider__panel,
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(4):focus-within) .msk-health-slider__panel {
    opacity: 0;
    visibility: hidden;
}
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(1):hover) .msk-health-slider__panel:nth-child(1),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(1):focus-within) .msk-health-slider__panel:nth-child(1),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(2):hover) .msk-health-slider__panel:nth-child(2),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(2):focus-within) .msk-health-slider__panel:nth-child(2),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(3):hover) .msk-health-slider__panel:nth-child(3),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(3):focus-within) .msk-health-slider__panel:nth-child(3),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(4):hover) .msk-health-slider__panel:nth-child(4),
.msk-health-slider:has(.msk-health-slider__triggers > :nth-child(4):focus-within) .msk-health-slider__panel:nth-child(4) {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 781px) {
    .msk-health-slider__desc { max-inline-size: none; }
}

/* ── Service Index pattern (patterns/service-index.php) ──────────────────
 * Simple emoji-card grid. Card colour/padding/radius come from the blocks
 * themselves; this only adds the subtle card edge and makes the emoji block
 * sit on its own line above the title. */
.msk-service-index__card {
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.msk-service-index__card .msk-emoji {
    display: block;
}
/* "Learn more" text link, pinned to the card foot so links align across a row. */
.msk-service-index__link {
    margin-block-start: auto;
    padding-block-start: 1rem;
    color: var(--msk-sc-accent, #5e6e4f);
}
.msk-service-index__link a { color: inherit; text-decoration: none; }
.msk-service-index__link a:hover { text-decoration: underline; }
/* Reserve 3 lines of description so 2- and 3-line cards keep equal height.
   (WP's flex align-items:stretch does not equalise these column-flex cards,
   so we even out the one variable-height element instead.) */
.msk-service-index__desc {
    min-block-size: 4.5em; /* 3 lines × 1.5 line-height */
}

/* Hero — Featured Specialty split hero (Maple Hero — Featured Specialty
   pattern, scoped .msk-hero-restore). Left/right halves butt edge-to-edge and
   stretch to equal height; the right panel floats a card + two ✓ badge pills. */
.msk-hero-restore.wp-block-columns {
    gap: 0;                   /* halves butt edge-to-edge (wins on source order) */
    align-items: stretch;
    margin-block: 0;
}
.msk-hero-restore.wp-block-columns > .wp-block-column {
    margin: 0;
}
.msk-hero-restore__right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.msk-hero-restore__card {
    inline-size: 100%;
    max-inline-size: 22rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 18px 50px rgba(40, 34, 24, 0.13);
    position: relative;
    z-index: 1;
    transition: transform 280ms ease-out, box-shadow 280ms ease-out;
}
.msk-hero-restore__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(40, 34, 24, 0.18);
}
/* "FEATURED SPECIALTY" label pill */
.msk-hero-restore__tag {
    display: inline-block;
    background: #e7ebe2;
    color: #5e6e4f;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}
/* Tag-pill list (editable core/list rendered as inline pills) */
.msk-hero-restore__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.msk-hero-restore__tags li {
    background: #f2efe9;
    color: #3a3a36;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
}
/* Floating ✓ badge pills, pinned to the panel corners */
.msk-hero-restore__badge {
    position: absolute;
    margin: 0;                 /* defeat WP flow block-gap on absolute children */
    z-index: 2;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}
.msk-hero-restore__badge::before {
    content: "✓";
    color: #5e6e4f;
    font-weight: 700;
    margin-inline-end: 0.5rem;
}
.msk-hero-restore__badge--top    { inset-block-start: 2.5rem; inset-inline-start: 0.5rem; }
.msk-hero-restore__badge--bottom { inset-block-end: 2.5rem; inset-inline-end: 0.5rem; }

@media (max-width: 781px) {
    /* Stacked: let the badges sit inline rather than float over the seam. */
    .msk-hero-restore__badge {
        position: static;
        display: inline-block;
        margin-block: 0.75rem 0;
    }
}

/* Service Page: red-check "what to expect" list (used by the Maple Page —
   Service pattern). list-style is removed in CSS, not via a block attribute,
   so the markup stays a plain editable core/list. */
.msk-service-checklist {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
}
.msk-service-checklist li {
    position: relative;
    padding-inline-start: 1.9rem;
    margin-block-end: 0.75rem;
}
.msk-service-checklist li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: #ae1b23;
    font-weight: 700;
}

/* Service Carousel: horizontal scroll-snap track of the same cards, taller. */
.msk-service-carousel__track {
    display: flex;
    align-items: stretch;           /* all cards match the tallest */
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;          /* Firefox — hide scrollbar */
    -ms-overflow-style: none;       /* old Edge */
}
.msk-service-carousel__track::-webkit-scrollbar { display: none; } /* WebKit */
.msk-service-carousel__track > .msk-service-index__card {
    flex: 0 0 clamp(15rem, 28%, 19rem);
    scroll-snap-align: start;
    min-block-size: 18rem;
    /* Kill WP flow block-gap's margin-block-start on cards 2..N — in a flex
       row it eats into the line height, leaving every card but the first
       shorter. Zeroing it lets align-items:stretch equalise all cards. */
    margin-block: 0;
    position: relative;
}
/* Active-card affordance: a soft, warm dim sits over every card and fades off
   whichever one is snapped nearest the left edge (flagged .is-active by
   js/service-carousel.js). No size/position change — the track stays steady,
   and the dim is gentle enough to read as "in the background", not disabled. */
.msk-service-carousel__track > .msk-service-index__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(40, 34, 24, 0.14);
    pointer-events: none; /* keep the "Learn more" link clickable */
    opacity: 1;
    transition: opacity 240ms ease-out;
}
.msk-service-carousel__track > .msk-service-index__card.is-active::after {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .msk-service-carousel__track > .msk-service-index__card::after { transition: none; }
}

/* Prev/next nav (injected by js/service-carousel.js), right-aligned below the track. */
.msk-service-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-block-start: 1.25rem;
}
.msk-service-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #ffffff;
    color: #1a1a1a;
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
}
.msk-service-carousel__arrow:hover { border-color: #5e6e4f; color: #5e6e4f; }
.msk-service-carousel__arrow:disabled { opacity: 0.3; cursor: default; }

/* ── prefers-reduced-motion ─────────────────────────────────────────────
 * WCAG 2.3.3 — honour users' OS-level motion preference. The 0.01ms
 * duration cancels visible motion while still firing transitionend /
 * animationend events that JS handlers may listen for.
 */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────── App Showcase — top nav pill ────────────────
 * The "App Showcase" pattern's simple text-shortcut nav: a compact, centred,
 * square-cornered pill that sits at the top of the hero (where the eyebrow
 * pill would be). Plain core/group of links — flex-wraps on small screens
 * (never a hamburger) and is one block the site owner can delete to remove.
 */
.msk-app-nav {
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
}
/* App hero screenshot placeholder (right column) — gives the empty image block
   a visible, screenshot-shaped area until a real image is dropped in. */
.msk-app-hero-shot {
    margin: 0;
}
.msk-app-hero-shot img {
    display: block;
    inline-size: 100%;
    min-block-size: 22rem;
    object-fit: cover;
    border-radius: 1rem;
    background: #f0e9dd;
}
.msk-app-nav p { margin-block: 0; }
.msk-app-nav a {
    /* Link colour comes from the block's own link-colour attribute
       (has-link-color), which core applies with the specificity needed to
       beat the theme — no !important here. */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.msk-app-nav a:hover,
.msk-app-nav a:focus-visible { text-decoration: underline; }

/* ───────────────────────── App Showcase — maker avatars ───────────────
 * Circular team-photo placeholders for the "Maple Page — App Showcase"
 * pattern's makers section. Pure CSS so the image blocks stay bare,
 * validation-safe placeholders (no width/height attributes); the circle and
 * cover-crop apply once a photo is dropped in.
 */
.msk-app-maker__avatar {
    max-inline-size: 7rem;
    margin-inline: auto;
}
.msk-app-maker__avatar img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 999px;
}

/* ───────────────────────── Book Showcase — cover + excerpt ────────────
 * Supporting styles for the "Maple Page — Book Showcase" pattern. Pure CSS so
 * the image blocks stay bare, validation-safe placeholders (no width/height);
 * the cover proportions, shadow, and cover-crop apply once art is dropped in.
 */

/* Portrait book/graphic-novel cover with a lifted shadow. */
.msk-book-cover {
    max-inline-size: 22rem;
    margin-inline: auto;
}
.msk-book-cover img {
    inline-size: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.4rem;
    background: #e9e2d6;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.28), 0 0.25rem 0.6rem rgba(0, 0, 0, 0.12);
}

/* Excerpt "page" — a roomier serif measure for the passage. Pair the first
 * paragraph with core's native drop cap (the has-drop-cap class) for the
 * opening-letter flourish; no custom drop-cap CSS needed. */
.msk-excerpt__body {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.85;
    max-inline-size: 40rem;
    margin-inline: auto;
}
.msk-excerpt__body p {
    margin-block: 0 1.2rem;
}

/* ───────────────────────── Editable section width (1200px) ────────────
 * Every MSK *section* block renders its content at a fixed 1200px (faq-section,
 * hero saas, features-calculator, etc. all use max-inline-size:1200px) — that
 * 1200px is the de-facto MSK section width, NOT the theme's wideSize.
 *
 * Editable *patterns* (plain core/groups) instead inherit whatever the theme's
 * align gives them. On a constrained-layout theme an `alignwide` block is
 * handed `max-width: var(--wp--style--global--wide-size)`, which on most of our
 * sites is below 1200px — so at align:wide an editable section looks narrower
 * than the monoblock sections beside it. The `.msk-editable-wide` utility
 * overrides that ceiling to 1200px so any editable section pattern lines up
 * with the rest. Drop it on the pattern's outer group. On viewports under
 * 1200px the block still shrinks to the available content area as normal.
 *
 * `.msk-newsletter-editable` keeps its own selector for backward compatibility
 * with instances placed before the shared utility existed.
 */
.msk-editable-wide.alignwide,
.msk-newsletter-editable.alignwide {
    max-inline-size: 1200px;
}

/* And when align:full is used instead (full-bleed band), keep the inner
 * content centred at the same 1200px — matching the full-bleed MSK bands.
 */
.msk-newsletter-editable.alignfull > .wp-block-columns {
    max-inline-size: 1200px;
    margin-inline: auto;
}

/* ───────────────────────── FAQ — Editable accordion ───────────────────
 * Restyles the native core/details rows inside the "Maple FAQ Section —
 * Editable" pattern to mimic the `faq-section` monoblock: full-width bordered
 * rows, a bold question, a +/− disclosure glyph (closed/open), and a faded
 * closed state. Scoped to `.msk-faq-editable` so other core/details are
 * untouched. Works on the front end and in the editor (global.css loads in
 * both), so the accordion is true WYSIWYG.
 */
.msk-faq-editable .wp-block-details {
    border-block-end: 1px solid rgba(255, 255, 255, 0.3);
}
.msk-faq-editable .wp-block-details:first-of-type {
    border-block-start: 1px solid rgba(255, 255, 255, 0.3);
}
.msk-faq-editable .wp-block-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--msk-space-4, 1rem);
    padding-block: var(--msk-space-6, 1.5rem);
    font-size: clamp(1rem, 2vw, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
}
.msk-faq-editable .wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.msk-faq-editable .wp-block-details > summary::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.msk-faq-editable .wp-block-details[open] > summary::after {
    content: "\2212"; /* minus */
}
.msk-faq-editable .wp-block-details > :not(summary) {
    margin-block-start: 0;
    padding-block-end: var(--msk-space-6, 1.5rem);
    line-height: 1.6;
}

/* ───────────────────────── Serif headline utility ─────────────────────
 * Themeable serif for pattern headlines/numerals. Applied as a CLASS, never
 * as a block `fontFamily` style attribute — WordPress escapes the `--` in a
 * saved style attribute to `u002du002d`, which invalidates the block and
 * visually collapses its section in the editor. Override --msk-serif (see
 * tokens.css) to re-point every headline from the cascade.
 */
.msk-serif { font-family: var(--msk-serif, Georgia, 'Times New Roman', serif); }

/* ───────────────────────── Maple Health Trust ─────────────────────────
 * Awards & reputation section (maple-health-trust pattern). Maple-red accents
 * (#8a1622 small text = 9.5:1, #ae1b23 large = ~7:1 — both WCAG AAA on white).
 * Each award plaque holds an editable image block; the 🏆 placeholder shows
 * until a logo is inserted (:has(img[src]) hides it).
 */
.msk-trust__eyebrow { margin: 0 0 1rem; color: var(--msk-trust-accent, #ae1b23); }
.msk-trust__headline { font-family: var(--msk-serif, Georgia, 'Times New Roman', serif); }
.msk-trust__headline em { font-style: italic; color: var(--msk-trust-accent, #ae1b23); }
.msk-trust__intro {
    max-inline-size: 46rem;
    margin-inline: auto;
    margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
}
.msk-trust__award {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ecdcd9;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.msk-trust__award:hover,
.msk-trust__award:focus-within {
    box-shadow: 0 14px 34px rgba(138, 22, 34, 0.12);
    transform: translateY(-3px);
    border-color: #e2c4c2;
}
.msk-trust__plaque {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 120px;
    border-radius: 0.6rem;
    background: #fbf1f0;
    border: 1px dashed #e6c9c7;
    overflow: hidden;
}
.msk-trust__plaque::before {
    content: "🏆";
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.55;
}
/* When an award logo is inserted, drop the placeholder treatment. */
.msk-trust__plaque:has( img[src] )::before { content: none; }
.msk-trust__plaque:has( img[src] ) {
    background: #ffffff;
    border-style: solid;
    border-color: #efe7e2;
}
.msk-trust__logo { margin: 0; position: relative; z-index: 1; max-inline-size: 100%; }
.msk-trust__logo img {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    max-block-size: 110px;
    object-fit: contain;
}
.msk-trust__award-name { color: #1a1a1a; }
.msk-trust__pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;          /* equal-height pillars when a label wraps */
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
    padding-block-start: clamp(2rem, 4vw, 2.75rem);
    border-block-start: 1px solid rgba(0, 0, 0, 0.08);
}
/* Defeat WP flow block-gap: it adds margin-block-start to children 2..N, which
   offsets them vertically inside the flex row and misaligns the stats. */
.msk-trust__pillars > * { margin-block-start: 0; }
.msk-trust__pillar { flex: 1 1 14rem; max-inline-size: 18rem; text-align: center; }
.msk-trust__pillar-stat {
    margin: 0 0 0.35rem;
    font-family: var(--msk-serif, Georgia, 'Times New Roman', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--msk-trust-accent, #ae1b23);
}
.msk-trust__pillar-label { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #56564f; }

/* ───────────────────────── Maple Featured Service ─────────────────────────
 * Sage-tint the checklist ✓ so the featured-service section matches the
 * service family (the base .msk-service-checklist ✓ is Maple red).
 */
.msk-feature-service__check li::before { color: #5e6e4f; }