/**
 * RightnBrightTheme — theme-layer CSS.
 *
 * Three concerns, all framework-agnostic overrides on top of Blockify:
 *  1. Dark-mode toggle visibility helpers (hide-dark-mode / hide-light-mode).
 *  2. Dark-mode readability for fixed-dark sections (hero overlay, footer).
 *  3. Mobile-responsive rules for every page (header, grids, spacing, media).
 *
 * Enqueued late (wp_enqueue_scripts priority 20) so it lands after Blockify.
 */

/* ==========================================================================
   1. Dark-mode toggle visibility helpers
   --------------------------------------------------------------------------
   Blockify ships these rules in public/css/utilities/dark-mode.css, but that
   stylesheet is not loaded on the front end (verified: 0 matches rendered).
   The header dark-mode toggle buttons carry .hide-dark-mode (moon, shown in
   light) and .hide-light-mode (sun, shown in dark) and depend on these rules,
   so mirror them here as a safety net.
   ========================================================================== */
body.is-style-dark .hide-dark-mode,
body.is-style-dark:not(.is-style-light) .hide-dark-mode {
    display: none;
}

body.is-style-light:not(.is-style-dark) .hide-light-mode,
.default-mode-light:not(.is-style-dark) .hide-light-mode {
    display: none;
}

.default-mode-dark:not(.is-style-light) .hide-dark-mode {
    display: none;
}

/* --- Dark-mode toggle button styling -----------------------------------
   Rendered as a core/html block (verbatim) so the onclick + inline SVG survive
   without Blockify block-support parsing. Styled to match the icon-button
   look the Blockify pattern would have produced. */
.dark-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 0;
}

.dark-toggle {
    background: transparent;
    border: none;
    color: currentColor;
    padding: 6px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background-color 0.15s ease;
}

.dark-toggle:hover,
.dark-toggle:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.dark-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* ==========================================================================
   2. Dark-mode readability for fixed-dark sections
   --------------------------------------------------------------------------
   Blockify auto-inverts the palette (primary-900 dark -> primary-100 light),
   which is correct for body/heading text but breaks sections that use a dark
   primary shade as a BACKGROUND (home/inner hero cover overlay, footer, CTA
   bands): the background flips light while the white/light text on it stays,
   so the text becomes unreadable.
   Scoped variable overrides re-pin those backgrounds to a dark shade AND keep
   the neutral/primary text vars light *within* the section. No !important:
   redefining a CSS variable in scope makes the inline var(--wp--preset--…)
   resolve locally, and the rule is more specific (0,2,0) than Blockify's
   html-scoped dark vars (0,1,1) plus nearer in the tree.
   ========================================================================== */
body.is-style-dark .has-primary-950-background-color,
body.is-style-dark .has-primary-900-background-color,
body.is-style-dark .has-primary-800-background-color,
body.is-style-dark .has-primary-700-background-color,
body.is-style-dark .has-neutral-950-background-color,
body.is-style-dark .has-neutral-900-background-color {
    /* keep the section background dark (its original light-mode dark shade) */
    --wp--preset--color--primary-950: #08323d;
    --wp--preset--color--primary-900: #0a4250;
    --wp--preset--color--primary-800: #0d5566;
    --wp--preset--color--primary-700: #106a7e;
    --wp--preset--color--neutral-950: #030712;
    --wp--preset--color--neutral-900: #111827;
    /* keep text / links / icons sitting on these dark backgrounds light */
    --wp--preset--color--neutral-0:   #ffffff;
    --wp--preset--color--neutral-50:  #f9fafb;
    --wp--preset--color--neutral-100: #f3f4f6;
    --wp--preset--color--neutral-200: #e5e7eb;
    --wp--preset--color--neutral-300: #d1d5db;
    --wp--preset--color--neutral-400: #9ca3af;
    --wp--preset--color--primary-50:  #e6f6f9;
    --wp--preset--color--primary-100: #c8ecf2;
    --wp--preset--color--primary-200: #98d9e5;
    --wp--preset--color--primary-300: #5dc4d6;
    --wp--preset--color--primary-500: #1696ad;
}

/* Cover (hero) text. The dark overlay color sits on a SIBLING
   <span class="wp-block-cover__background"> while the H1/paragraph text lives
   in .wp-block-cover__inner-container — a sibling, not a descendant of the
   span. The override above re-pins the span's background dark, but its light
   text vars never reach the sibling text container, so the text resolves the
   global dark-mode vars (neutral-0 -> neutral-950 = near-black) and vanishes
   on the dark overlay. Scope the light text vars onto the cover itself with
   :has() so they cascade into the inner container. */
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-primary-950-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-primary-900-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-primary-800-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-primary-700-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-neutral-950-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-neutral-900-background-color),
body.is-style-dark .wp-block-cover:has(.wp-block-cover__background.has-neutral-800-background-color) {
    --wp--preset--color--neutral-0:   #ffffff;
    --wp--preset--color--neutral-50:  #f9fafb;
    --wp--preset--color--neutral-100: #f3f4f6;
    --wp--preset--color--neutral-200: #e5e7eb;
    --wp--preset--color--neutral-300: #d1d5db;
    --wp--preset--color--neutral-400: #9ca3af;
    --wp--preset--color--primary-50:  #e6f6f9;
    --wp--preset--color--primary-100: #c8ecf2;
    --wp--preset--color--primary-200: #98d9e5;
    --wp--preset--color--primary-300: #5dc4d6;
    --wp--preset--color--primary-500: #1696ad;
    --wp--preset--color--primary-700: #106a7e;
}

/* Mid-primary teal bands (primary-300..600). These keep a teal background in
   dark mode (500 stays 500; 400->600, 600->400, 300->700) but any white/light
   text on them inverts to a dark shade and disappears against the teal. Force
   the text + icon vars light *within* these bands. (4 such primary-500 + white
   bands exist across home/about/services.) */
body.is-style-dark .has-primary-300-background-color,
body.is-style-dark .has-primary-400-background-color,
body.is-style-dark .has-primary-500-background-color,
body.is-style-dark .has-primary-600-background-color {
    --wp--preset--color--neutral-0:   #ffffff;
    --wp--preset--color--neutral-50:  #f9fafb;
    --wp--preset--color--neutral-100: #f3f4f6;
    --wp--preset--color--neutral-200: #e5e7eb;
    --wp--preset--color--neutral-300: #d1d5db;
    --wp--preset--color--neutral-400: #9ca3af;
    --wp--preset--color--neutral-700: #e5e7eb;
    --wp--preset--color--neutral-800: #f3f4f6;
    --wp--preset--color--neutral-900: #f9fafb;
    --wp--preset--color--primary-700: #ffffff;
    --wp--preset--color--primary-800: #ffffff;
    --wp--preset--color--primary-900: #ffffff;
}

/* White buttons (a neutral-0 background) sitting on a mid-teal band inherit
   the band override just above, which forces primary-700/800/900 → #ffffff.
   The band also pins neutral-0 → #ffffff, so the button's background is white
   too → primary-shade text becomes white-on-white (invisible). The button is
   a light surface, so restore the dark teal text on it — exactly how white
   buttons already render inside the dark primary-900 hero bands (line 96).
   Redefining the vars on the button itself wins over the band's value for the
   button's subtree (nearer in the tree), no !important needed. */
body.is-style-dark .has-primary-300-background-color .wp-block-button__link.has-neutral-0-background-color,
body.is-style-dark .has-primary-400-background-color .wp-block-button__link.has-neutral-0-background-color,
body.is-style-dark .has-primary-500-background-color .wp-block-button__link.has-neutral-0-background-color,
body.is-style-dark .has-primary-600-background-color .wp-block-button__link.has-neutral-0-background-color {
    --wp--preset--color--primary-700: #106a7e;
    --wp--preset--color--primary-800: #0d5566;
    --wp--preset--color--primary-900: #0a4250;
}

/* Muted text & outline icons that use neutral-400 invert to neutral-500
   (#6b7280) in dark mode — too dim to read on a dark background (this is the
   most-used text color site-wide: feature icons, captions, secondary text).
   Keep it at a readable medium-light gray in dark mode. Specificity (0,1,2)
   beats Blockify's html .is-style-dark (0,1,1). */
html body.is-style-dark {
    --wp--preset--color--neutral-400: #9ca3af;
    --wp--preset--color--neutral-500: #9ca3af;
}

/* ==========================================================================
   Product pages (Medical Product Catalog plugin) in dark mode
   --------------------------------------------------------------------------
   The plugin styles product cards, the sidebar filter, the spec/info lists,
   the inquiry box and related cards with HARDCODED light colors (#fff cards,
   #6b7177 labels, #e6e8eb borders, #f7f8f9 inquiry box). These do not invert,
   so in dark mode the white cards sit on a dark page while the text on them
   inherits the page's light color -> light text on white = invisible. The
   spec/info <dt> labels are a hardcoded dark gray -> dark on dark = invisible.
   Flip every plugin component to a dark surface with light text. !important is
   required to beat the plugin's own !important inline critical CSS; the
   body.is-style-dark prefix raises specificity above the plugin selectors.
   ========================================================================== */

/* Card + box surfaces -> dark */
body.is-style-dark .mpc-product-card,
body.is-style-dark .mpc-card,
body.is-style-dark .mpc-filters .mpc-filter-group,
body.is-style-dark .mpc-inquiry-box {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

body.is-style-dark .mpc-product-card .wp-block-post-featured-image,
body.is-style-dark .mpc-card__media,
body.is-style-dark .mpc-card__placeholder {
    background: #111827 !important;
}

/* Card + filter text -> light (plugin sets color:inherit, which inherits the
   page's light mode color and vanishes on the now-dark card) */
body.is-style-dark .mpc-product-card .wp-block-post-title,
body.is-style-dark .mpc-product-card .wp-block-post-title a,
body.is-style-dark .mpc-card__title,
body.is-style-dark .mpc-filter-list a {
    color: #f3f4f6 !important;
}

body.is-style-dark .mpc-product-card .wp-block-post-title a:hover,
body.is-style-dark .mpc-card:hover .mpc-card__title {
    color: #5fd07a !important;
}

/* Labels, headings, muted text -> light gray */
body.is-style-dark .mpc-info-list dt,
body.is-style-dark .mpc-spec-list dt,
body.is-style-dark .mpc-filter-heading,
body.is-style-dark .mpc-section-title,
body.is-style-dark .mpc-inquiry-heading,
body.is-style-dark .mpc-no-products {
    color: #d1d5db !important;
}

/* Dividers -> dark border */
body.is-style-dark .mpc-info-list dt,
body.is-style-dark .mpc-spec-list dt,
body.is-style-dark .mpc-info-list dd,
body.is-style-dark .mpc-spec-list dd,
body.is-style-dark .mpc-section-title,
body.is-style-dark .mpc-filter-heading {
    border-bottom-color: #374151 !important;
}

/* Filter chips / counts / active + hover states */
body.is-style-dark .mpc-filter-list .mpc-count {
    color: #9ca3af !important;
    background: #374151 !important;
}

body.is-style-dark .mpc-filter-list a:hover {
    background: #111827 !important;
    color: #5fd07a !important;
}

body.is-style-dark .mpc-filter-list .is-active > a {
    background: rgba(30, 126, 52, 0.22) !important;
    color: #5fd07a !important;
}

/* Green category label stays readable on dark */
body.is-style-dark .mpc-card__cat {
    color: #5fd07a !important;
}

/* Buttons that use a light primary fill + dark primary text inside a fixed-dark
   section still read fine; but a primary-50 fill button on the dark hero would
   invert to a dark fill. Keep light-fill buttons light here. */
body.is-style-dark .has-primary-950-background-color .has-primary-50-background-color,
body.is-style-dark .has-primary-900-background-color .has-primary-50-background-color,
body.is-style-dark .has-primary-800-background-color .has-primary-50-background-color,
body.is-style-dark .has-primary-700-background-color .has-primary-50-background-color,
body.is-style-dark .has-neutral-950-background-color .has-primary-50-background-color,
body.is-style-dark .has-neutral-900-background-color .has-primary-50-background-color {
    --wp--preset--color--primary-50: #e6f6f9;
    --wp--preset--color--primary-700: #106a7e;
}

/* Buttons that set an explicit text color (e.g. has-primary-700-color) but rely
   on the default button background — theme.json's primary-500, which stays
   #1696ad in dark mode — end up with light-teal text on a teal background in
   dark mode (~1.7:1, invisible). The default button style uses literal #fff
   text on that same background, so force these to match: white text on the
   primary-500 fill. Buttons that DO carry a has-background class (header phone,
   "Our Products", "Contact Us") keep their own explicit backgrounds and are
   already readable, so :not(.has-background) excludes them. Default buttons
   (no has-text-color) are already white and are excluded too. */
body.is-style-dark .wp-block-button__link.has-text-color:not(.has-background) {
    color: #ffffff !important;
}

/* ==========================================================================
   Page title hero (redesigned)
   --------------------------------------------------------------------------
   Every content page opens with a primary-50 band holding the page H1:
   core/post-title on pages / posts / single products, core/query-title on
   archives, taxonomies, search and the news index. The visible breadcrumb
   trail is injected (PHP render_block filter) directly after that H1, so it
   sits *inside* the title area, just under the title — not under the nav.
   ========================================================================== */

/* The title band — scoped via :has() on the title block so it only hits the
   hero band, not other primary-50 sections used inside page content. The
   single-product title lives one level deeper (band > wide group >
   post-title), hence the third :has() branch. */
.wp-block-group.has-primary-50-background-color:has(> .wp-block-post-title),
.wp-block-group.has-primary-50-background-color:has(> .wp-block-query-title),
.wp-block-group.has-primary-50-background-color:has(> .wp-block-group > .wp-block-post-title) {
    padding-top: clamp(2.2rem, 5vw, 3.5rem) !important;
    padding-bottom: clamp(1.9rem, 4vw, 2.8rem) !important;
    /* primary-500 stays the same shade in light and dark (500↔500), so a
       low-opacity teal hairline reads on both the light band and its dark
       inverted counterpart. */
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-500, #1696ad) 30%, transparent);
}

/* The H1: fluid size, heavier weight, tighter leading, left-aligned. The
   title block carries an inline style (fixed 40px / 700 / 1.2) and a
   has-text-align-center class (the templates set textAlign:center), so these
   need !important to win. Left-aligning every title (and its breadcrumb) keeps
   the single-product title — already left-aligned in its 72% column —
   consistent with the rest of the site. */
.wp-block-group.has-primary-50-background-color .wp-block-post-title,
.wp-block-group.has-primary-50-background-color .wp-block-query-title {
    font-size: clamp(1.85rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    text-align: left !important;
    margin-bottom: 0.45em !important;
}

/* Widen the title area. The title band uses the constrained layout, which caps
   inner content at content-size (720px) — long titles wrap early. Lift the
   title and its breadcrumb to wide-size (1200px). The constrained layout
   already centers children with margin:auto !important, so only max-width
   needs overriding — class specificity (0,2,0) beats the layout's :where()
   rule (0,0,0), and there is no inline max-width on the title. */
.wp-block-group.has-primary-50-background-color .wp-block-post-title,
.wp-block-group.has-primary-50-background-color .wp-block-query-title,
.wp-block-group.has-primary-50-background-color .breadcrumbs {
    max-width: var(--wp--style--global--wide-size, 1200px);
}

/* ==========================================================================
   Breadcrumbs (visible trail, injected under the page H1)
   --------------------------------------------------------------------------
   Light + dark aware via the palette variables: the primary-50 title band
   auto-inverts to a dark teal in dark mode and the neutral text vars invert
   with it, so the trail stays readable on both.
   ========================================================================== */
.breadcrumbs {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wp--preset--color--neutral-500, #6b7280);
}

.breadcrumbs:empty {
    display: none;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-direction: row; /* beat the global `ol{flex-direction:column}` reset */
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin: 0 0.5em;
    color: var(--wp--preset--color--neutral-400, #9ca3af);
    opacity: 0.85;
}

.breadcrumb-link {
    color: var(--wp--preset--color--neutral-600, #4b5563);
    text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
    color: var(--wp--preset--color--primary-600, #138096);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--wp--preset--color--neutral-700, #374151);
    font-weight: 600;
}

/* The trail follows the (now left-aligned) title, so no centering override is
   needed — .breadcrumb-list defaults to justify-content:flex-start (left). */

@media (max-width: 600px) {
    .breadcrumbs {
        font-size: 12px;
    }
}

/* ==========================================================================
   3. Mobile-responsive rules
   ========================================================================== */

/* --- Header -------------------------------------------------------------
   The header is a sticky flex row: logo | (nav + phone + dark toggle).
   On phones, tighten horizontal padding and drop the phone CTA (the number
   lives in the footer too) so logo + hamburger + toggle fit comfortably. */
@media (max-width: 600px) {
    .site-header {
        padding-left: var(--wp--preset--spacing--xs, 16px) !important;
        padding-right: var(--wp--preset--spacing--xs, 16px) !important;
    }

    .site-header .header-phone {
        display: none;
    }

    /* On phones show the logo only; the site-name text reappears on >=601px. */
    .site-header .site-brand .wp-block-site-title {
        display: none;
    }

    /* Shrink the logo on phones so it never crowds the hamburger + toggle. */
    .site-header .wp-block-site-logo,
    .site-header .wp-block-site-logo a {
        max-width: 120px;
    }

    .site-header .wp-block-site-logo img {
        width: 100%;
        max-width: 120px;
        height: auto;
    }
}

/* --- Layout grids: 2-per-row on phones ---------------------------------
   WP columns default to isStackedOnMobile (100% single column <= 781px) with
   !important, which beats inline flex-basis. That's right for 2-column
   layouts (about 60/40, contact 45/55, product sidebar). But 4/5/6-column
   rows (home brand strip, event galleries, footer widget columns) become one
   very tall column. Use :has() (all modern browsers) to target only column
   groups with 4+ children and lay them out 2-per-row across the whole mobile
   range (<= 781px, the same width where WP stacks them). Specificity (0,4,0)
   beats the core stacking rule (0,3,0), both !important.

   Sizing catch: two 50% columns + the column gap must not exceed 100% or the
   second column wraps to its own line and you're back to one-per-row. The
   default column gap is var(--wp--preset--spacing--sm) = 24px, so
   "50% - 0.5em" (only ~8px of allowance) overflows by ~16px and wraps. Pin the
   gap to a known value (1rem) and size each column to 50% minus half that gap
   (0.5rem), so a pair + one gap = 2*(50% - 0.5rem) + 1rem = 100% exactly.
   flex-shrink stays at its default 1 so any sub-pixel rounding is absorbed by
   shrinking instead of wrapping; flex-grow stays 1 (core default) so an odd
   orphan column fills its row. */
@media (max-width: 781px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(4)),
    .wp-block-columns:has(> .wp-block-column:nth-child(5)),
    .wp-block-columns:has(> .wp-block-column:nth-child(6)) {
        gap: 1rem !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column,
    .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column,
    .wp-block-columns:has(> .wp-block-column:nth-child(6)) > .wp-block-column {
        flex-basis: calc(50% - 0.5rem) !important;
        margin-inline: 0;
    }
}

/* --- Cover photo flush under the page title band -----------------------
   The default page template (templates/page.html) wraps wp:post-content in
   a content group with padding-top: xl (64px). When a page's FIRST content
   block is a full-bleed cover photo (About, Services), that 64px opens an
   empty gap between the page-title band above and the cover banner. Drop the
   top padding only on the content group that wraps a cover-first page, so the
   cover sits flush under the title band. Scoped via :has() to cover-photo
   pages only — pages whose first block isn't a cover keep their spacing.
   The cover's OWN internal top padding is left intact so the hero text stays
   vertically centered in the banner. */
main > .wp-block-group:has(.wp-block-post-content > .wp-block-cover:first-child) {
    padding-top: 0 !important;
}

/* --- Title band: tighten top/bottom padding (all templates) ---------------
   The primary-50 band holding the page/archive H1 is the first direct-child
   group of <main> with a primary-50 background on every template (page, home,
   single + archive product, taxonomy, search, archive, author, date). Done in
   CSS rather than per-template so it covers every template at once, and
   because theme.css is cache-busted (?ver=filemtime) the rule re-fetches even
   against a stale cached page (the inline padding yields to !important). */
main > .wp-block-group.has-primary-50-background-color {
    padding-top: var(--wp--preset--spacing--lg) !important;
    padding-bottom: var(--wp--preset--spacing--sm) !important;
}
/* On phones the title band shrinks a little more (the generic .alignfull
   mobile rule below would otherwise pin it to md/md; this later, equal-
   specificity rule wins on small screens). */
@media (max-width: 600px) {
    main > .wp-block-group.has-primary-50-background-color {
        padding-top: var(--wp--preset--spacing--sm) !important;
        padding-bottom: var(--wp--preset--spacing--xs) !important;
    }
}

/* --- Section spacing ----------------------------------------------------
   Pages use large spacing presets (lg/xl/xxl) for section padding which
   over-pads on phones. Scale the top/bottom padding down on small screens. */
@media (max-width: 600px) {
    .wp-block-cover,
    .wp-block-group.alignfull,
    .wp-block-group.alignwide {
        padding-top: var(--wp--preset--spacing--md, 32px) !important;
        padding-bottom: var(--wp--preset--spacing--md, 32px) !important;
    }
}

/* --- Images / figures / media ------------------------------------------ */
img,
figure img,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.wp-block-image,
figure {
    max-width: 100%;
}

/* Embedded maps (contact page) need a sensible min height on phones. */
@media (max-width: 600px) {
    iframe,
    .wp-block-embed iframe {
        min-height: 320px;
        max-width: 100%;
    }
}

/* --- Product grid (Medical Product Catalog plugin) ----------------------
   The plugin's frontend.css already uses auto-fill minmax(220px, 1fr), which
   reflows responsively. No override needed; this just ensures the container
   never overflows the viewport. */
.mpc-product-grid,
.mp-product-grid {
    max-width: 100%;
    box-sizing: border-box;
}

/* --- Tables (spec tables on single product) ----------------------------- */
@media (max-width: 600px) {
    .wp-block-table,
    .wp-block-table table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* --- Buttons: prevent overflow on small screens ------------------------- */
.wp-block-button .wp-block-button__link {
    white-space: nowrap;
}

/* --- Allow horizontal scroll only where needed, never the page body ----- */
body {
    overflow-x: hidden;
}

/* ==========================================================================
   Featured product carousel (front page)
   --------------------------------------------------------------------------
   The [mpc_product_grid] shortcode is archive-only and renders empty on the
   home page; the theme overrides it on the front page to emit this carousel.
   Cards reuse the plugin's .mpc-card markup + styling (including the dark-mode
   card overrides above), so they match the archive / related grids exactly.
   ========================================================================== */
/* The carousel is a flex row: [prev arrow][scrolling track][next arrow].
   The arrows live OUTSIDE the track (siblings, not overlays), so they never
   cover card content. alignwide breaks the row out of the section's 720px
   content constraint to the 1200px wide size. */
.mpc-carousel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--wp--preset--spacing--lg);
}

.mpc-carousel__nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--wp--preset--color--neutral-200, #e5e7eb);
    background: var(--wp--preset--color--neutral-0, #fff);
    color: var(--wp--preset--color--primary-700, #106a7e);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mpc-carousel__nav:hover {
    background: var(--wp--preset--color--primary-50, #e6f6f9);
    border-color: var(--wp--preset--color--primary-500, #1696ad);
    transform: scale(1.06);
}

/* The scrollable row. min-width:0 lets it shrink within the flex row so it
   scrolls internally instead of pushing the arrows off. No visible scrollbar
   (swipe + arrows handle navigation). */
.mpc-carousel__track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mpc-carousel__track::-webkit-scrollbar {
    display: none;
}

/* Each card is a fixed-width flex item. Sized so ~4-5 sit across the wide
   carousel at desktop, with the next one peeking to signal it scrolls. */
.mpc-carousel__track > .mpc-card {
    flex: 0 0 auto;
    width: clamp(200px, 19vw, 235px);
    scroll-snap-align: start;
}

/* Mobile: hide the arrows (swipe handles scrolling); let cards run a touch
   wider so two sit side by side. */
@media (max-width: 600px) {
    .mpc-carousel__nav {
        display: none;
    }
    .mpc-carousel__track > .mpc-card {
        width: 62vw;
        max-width: 240px;
    }
}

/* Dark mode: pin a dark surface + light teal text so the arrows stay crisp
   over both light and dark cards. */
body.is-style-dark .mpc-carousel__nav {
    background: #1f2937;
    border-color: #374151;
    color: #5dc4d6;
}

body.is-style-dark .mpc-carousel__nav:hover {
    background: #374151;
    border-color: #5dc4d6;
}