/**
 * MM Contact Portal Suite — Shared Design System
 * Brand-aligned with moosemediafsj.ca
 *
 * Style: Moose Media Sales CRM
 * Palette: Warm Brown + Terracotta CTA + Deep Indigo accent
 * Typography: Inter (Google Fonts)
 *
 * Design tokens (Moose Media brand):
 *   --mm-primary:      #513528 (warm brown — headings, nav, dark text)
 *   --mm-accent:       #ED845E (terracotta — CTA buttons, links, active)
 *   --mm-accent-hover: #D8704C (terracotta dark — hover states)
 *   --mm-accent-light: #FDF0EB (terracotta tint — light backgrounds)
 *   --mm-deep:         #272973 (deep indigo — stat highlights, badges)
 *   --mm-deep-light:   #EDEDF8 (indigo tint)
 *   --mm-success:      #16A34A (green / completed)
 *   --mm-warning:      #D97706 (amber / due soon)
 *   --mm-danger:       #DC2626 (red / overdue, delete)
 *   --mm-sand:         #DEC7B6 (warm sand — subtle fills)
 *   --mm-sand-light:   #F5EDE7 (light sand — page background)
 *   --mm-gray-50:      #FAFAF9
 *   --mm-gray-100:     #F5F5F4
 *   --mm-gray-200:     #E7E5E4
 *   --mm-gray-300:     #D6D3D1
 *   --mm-gray-400:     #A8A29E
 *   --mm-gray-500:     #78716C
 *   --mm-gray-600:     #57534E
 *   --mm-gray-700:     #44403C
 *   --mm-gray-800:     #292524
 *   --mm-gray-900:     #1C1917
 *   --mm-radius:       8px
 *   --mm-radius-lg:    12px
 *   --mm-radius-xl:    16px
 */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Brand colors — Moose Media */
    --mm-primary: #513528;
    --mm-accent: #ED845E;
    --mm-accent-hover: #D8704C;
    --mm-accent-light: #FDF0EB;
    --mm-deep: #272973;
    --mm-deep-light: #EDEDF8;

    /* Functional colors */
    --mm-success: #16A34A;
    --mm-success-light: #DCFCE7;
    --mm-warning: #D97706;
    --mm-warning-light: #FEF3C7;
    --mm-danger: #DC2626;
    --mm-danger-light: #FEE2E2;

    /* Warm neutrals (stone scale — matches brand warmth) */
    --mm-sand: #DEC7B6;
    --mm-sand-light: #F5EDE7;
    --mm-gray-50: #FAFAF9;
    --mm-gray-100: #F5F5F4;
    --mm-gray-200: #E7E5E4;
    --mm-gray-300: #D6D3D1;
    --mm-gray-400: #A8A29E;
    --mm-gray-500: #78716C;
    --mm-gray-600: #57534E;
    --mm-gray-700: #44403C;
    --mm-gray-800: #292524;
    --mm-gray-900: #1C1917;

    /* Layout tokens */
    --mm-radius: 8px;
    --mm-radius-lg: 12px;
    --mm-radius-xl: 16px;
    --mm-shadow: 0 1px 3px rgba(81,53,40,.06), 0 1px 2px rgba(81,53,40,.04);
    --mm-shadow-md: 0 4px 6px -1px rgba(81,53,40,.07), 0 2px 4px -2px rgba(81,53,40,.04);
    --mm-shadow-lg: 0 10px 15px -3px rgba(81,53,40,.08), 0 4px 6px -4px rgba(81,53,40,.04);
    --mm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mm-transition: 200ms ease;
}

/* ─── Base Reset for Plugin Containers ─── */

[class*="mmcp-"],
[class*="mmca-"],
[class*="mmct-"],
[class*="mmsw-"],
[class*="mmsr-"],
.mm-plugin-container {
    font-family: var(--mm-font);
    line-height: 1.6;
    color: var(--mm-gray-900);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class*="mmcp-"] *,
[class*="mmca-"] *,
[class*="mmct-"] *,
[class*="mmsw-"] *,
[class*="mmsr-"] *,
.mm-plugin-container * {
    box-sizing: border-box;
}

/* ─── Reduced Motion ─── */

@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;
    }
}

/* ─── Shared Card ─── */

.mm-card {
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--mm-shadow);
    transition: box-shadow var(--mm-transition), transform var(--mm-transition);
}

.mm-card:hover, .mmsw-card:hover, .mmcp-queue-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mm-shadow-md);
}

.mm-card--compact {
    padding: 12px 16px;
    border-radius: var(--mm-radius);
}

.mm-card--flush {
    padding: 0;
}

.mm-card--interactive {
    cursor: pointer;
}

.mm-card--interactive:hover {
    box-shadow: var(--mm-shadow-md);
}

/* ─── Shared Buttons ─── */

.mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--mm-radius);
    border: 1px solid var(--mm-accent);
    background: var(--mm-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--mm-font);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--mm-transition);
    white-space: nowrap;
    line-height: 1.4;
    min-height: 36px;
}

.mm-btn:not(.mm-btn--secondary):not(.mm-btn--ghost):not(.mm-btn--accent):not(.mm-btn--success):not(.mm-btn--danger) {
    background: var(--mm-accent);
    border-color: var(--mm-accent);
}

.mm-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--mm-shadow-md);
}

.mm-btn:active {
    transform: translateY(0);
}

.mm-btn:focus-visible {
    outline: 2px solid var(--mm-accent);
    outline-offset: 2px;
}

.mm-btn:disabled,
.mm-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mm-btn--secondary {
    background: #fff;
    color: var(--mm-gray-700);
    border-color: var(--mm-gray-300);
}

.mm-btn--secondary:hover {
    background: var(--mm-gray-50);
    border-color: var(--mm-gray-400);
}

.mm-btn--accent {
    background: var(--mm-accent);
    border-color: var(--mm-accent);
}

.mm-btn--accent:hover {
    background: var(--mm-accent-hover);
    border-color: var(--mm-accent-hover);
}

.mm-btn--success {
    background: var(--mm-success);
    border-color: var(--mm-success);
}

.mm-btn--danger {
    background: var(--mm-danger);
    border-color: var(--mm-danger);
}

.mm-btn--sm {
    padding: 4px 10px;
    font-size: 13px;
    min-height: 28px;
}

.mm-btn--lg {
    padding: 10px 20px;
    font-size: 15px;
    min-height: 44px;
}

.mm-btn--pill {
    border-radius: 20px;
    padding: 6px 16px;
}

.mm-btn--pill.active {
    background: var(--mm-primary);
    color: #fff;
    border-color: var(--mm-primary);
}

.mm-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mm-gray-700);
}

.mm-btn--ghost:hover {
    background: var(--mm-gray-100);
    transform: none;
    box-shadow: none;
}

/* ─── Shared Tables ─── */

.mm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mm-table thead {
    background: var(--mm-gray-50);
}

.mm-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--mm-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--mm-gray-200);
    white-space: nowrap;
    cursor: default;
}

.mm-table th[data-column] {
    cursor: pointer;
    user-select: none;
    transition: color var(--mm-transition);
}

.mm-table th[data-column]:hover {
    color: var(--mm-primary);
}

.mm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mm-gray-100);
    vertical-align: middle;
}

.mm-table tbody tr {
    transition: background var(--mm-transition);
}

.mm-table tbody tr:hover {
    background: var(--mm-gray-50);
    box-shadow: inset 3px 0 0 var(--mm-accent);
}

.mm-table tbody tr[data-clickable] {
    cursor: pointer;
}

.mm-table .mm-empty-cell {
    text-align: center;
    color: var(--mm-gray-500);
    padding: 32px 12px;
}

/* ─── Shared Form Controls ─── */

.mm-input,
.mm-select,
input[class*="mmcp-"],
input[class*="mmca-"],
input[class*="mmsw-"],
select[class*="mmcp-"],
select[class*="mmca-"],
select[class*="mmsw-"] {
    padding: 8px 12px;
    border: 1px solid var(--mm-gray-300);
    border-radius: var(--mm-radius);
    font-size: 14px;
    font-family: var(--mm-font);
    color: var(--mm-gray-900);
    background: #fff;
    transition: border-color var(--mm-transition), box-shadow var(--mm-transition);
    min-height: 36px;
}

.mm-input:focus,
.mm-select:focus,
input[class*="mmcp-"]:focus,
input[class*="mmca-"]:focus,
input[class*="mmsw-"]:focus,
select[class*="mmcp-"]:focus,
select[class*="mmca-"]:focus,
select[class*="mmsw-"]:focus {
    outline: none;
    border-color: var(--mm-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.mm-input::placeholder {
    color: var(--mm-gray-400);
}

.mm-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--mm-gray-700);
    margin-bottom: 4px;
}

/* ─── Shared Filter Bar ─── */

.mm-filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--mm-gray-50);
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius);
    margin-bottom: 16px;
}

.mm-filter-bar .mm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Shared Stat Cards ─── */

.mm-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.mm-stat-card {
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius);
    padding: 16px;
    text-align: center;
    transition: box-shadow var(--mm-transition);
}

.mm-stat-card:hover {
    box-shadow: var(--mm-shadow);
}

.mm-stat-card__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--mm-primary) 0%, var(--mm-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mmsw-card strong, .mmcp-queue-card-value {
    background: linear-gradient(135deg, var(--mm-primary) 0%, var(--mm-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mm-stat-card__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mm-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ─── Shared Pagination ─── */

.mm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius);
    margin-top: 16px;
    font-size: 14px;
    color: var(--mm-gray-500);
}

.mm-pagination button,
.mm-pagination a {
    cursor: pointer;
}

/* ─── Shared Modal ─── */

.mm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.mm-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--mm-radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--mm-shadow-lg);
}

.mm-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mm-gray-200);
}

.mm-modal__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mm-primary);
}

.mm-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--mm-radius);
    color: var(--mm-gray-500);
    font-size: 20px;
    transition: background var(--mm-transition), color var(--mm-transition);
}

.mm-modal__close:hover {
    background: var(--mm-gray-100);
    color: var(--mm-primary);
}

.mm-modal__body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
}

/* ─── Shared Status Badges ─── */

.mm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.mm-badge--subscribed,
.mm-badge--won,
.mm-badge--active { background: #D1FAE5; color: #065F46; }

.mm-badge--unsubscribed,
.mm-badge--lost,
.mm-badge--cancelled { background: #FEE2E2; color: #991B1B; }

.mm-badge--pending,
.mm-badge--in-progress { background: #FEF3C7; color: #92400E; }

.mm-badge--bounced,
.mm-badge--blocked { background: #FECACA; color: #991B1B; }

.mm-badge--draft { background: var(--mm-gray-100); color: var(--mm-gray-700); }

/* ─── Shared Section Headers ─── */

.mm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mm-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mm-primary);
}

.mm-section-subtitle {
    color: var(--mm-gray-500);
    font-size: 14px;
    margin: 4px 0 0 0;
}

/* ─── Shared Empty State ─── */

.mm-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--mm-gray-500);
}

.mm-empty-state__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.mm-empty-state__text {
    font-size: 15px;
    margin: 0;
}

/* ─── Shared Wizard / Steps / Tabs ─── */

.mm-steps {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--mm-gray-200);
}

.mm-step {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mm-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--mm-transition), border-color var(--mm-transition);
}

.mm-step:hover {
    color: var(--mm-gray-700);
}

.mm-step.active {
    color: var(--mm-accent);
    border-bottom-color: var(--mm-accent);
    font-weight: 600;
}

/* ─── Nav Bar (cross-plugin) ─── */

.mm-nav-bar {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--mm-gray-200);
    border-radius: var(--mm-radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--mm-shadow);
    overflow-x: auto;
}

.mm-nav-bar a {
    padding: 8px 16px;
    border-radius: var(--mm-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--mm-gray-500);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--mm-transition);
    cursor: pointer;
}

.mm-nav-bar a:hover {
    color: var(--mm-primary);
    background: var(--mm-gray-50);
}

.mm-nav-bar a.active,
.mm-nav-bar a[aria-current="page"] {
    color: var(--mm-accent);
    background: var(--mm-accent-light);
    font-weight: 600;
}

/* ─── Loading Spinner ─── */

.mm-loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--mm-gray-200);
    border-top-color: var(--mm-accent);
    border-radius: 50%;
    animation: mm-spin 0.6s linear infinite;
}

.mm-loading--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes mm-spin {
    to { transform: rotate(360deg); }
}

/* ─── Toast / Notifications ─── */

.mm-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--mm-radius);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--mm-primary);
    box-shadow: var(--mm-shadow-lg);
    z-index: 10000;
    animation: mm-slide-in 0.3s ease;
}

.mm-toast--success { background: var(--mm-success); }
.mm-toast--danger { background: var(--mm-danger); }
.mm-toast--warning { background: var(--mm-warning); color: var(--mm-primary); }

@keyframes mm-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Page Content Fade-In ─── */

.mmcp-container, .mmsw-workspace, .mmca-campaign-builder, .mmct-container {
    animation: mm-fade-in 0.3s ease;
}

@keyframes mm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Page Header (Hero Bar) ─── */

.mm-page-header {
    background: linear-gradient(135deg, var(--mm-primary) 0%, var(--mm-accent) 100%);
    color: #fff;
    padding: 32px 0;
    margin: -24px -24px 24px;
    border-radius: 0 0 var(--mm-radius-lg) var(--mm-radius-lg);
}

.mm-page-header h1,
.mm-page-header h2 {
    color: #fff;
    margin: 0;
}

.mm-page-header p {
    color: rgba(255, 255, 255, 0.75);
    margin: 4px 0 0;
}

/* ─── Custom Scrollbar Styling ─── */

[class*="mmcp-"] ::-webkit-scrollbar,
[class*="mmca-"] ::-webkit-scrollbar,
[class*="mmsw-"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[class*="mmcp-"] ::-webkit-scrollbar-track,
[class*="mmca-"] ::-webkit-scrollbar-track,
[class*="mmsw-"] ::-webkit-scrollbar-track {
    background: transparent;
}

[class*="mmcp-"] ::-webkit-scrollbar-thumb,
[class*="mmca-"] ::-webkit-scrollbar-thumb,
[class*="mmsw-"] ::-webkit-scrollbar-thumb {
    background: var(--mm-gray-300);
    border-radius: 3px;
}

[class*="mmcp-"] ::-webkit-scrollbar-thumb:hover,
[class*="mmca-"] ::-webkit-scrollbar-thumb:hover,
[class*="mmsw-"] ::-webkit-scrollbar-thumb:hover {
    background: var(--mm-gray-400);
}

/* ─── Divider Utility ─── */

.mm-divider {
    height: 1px;
    background: var(--mm-gray-200);
    margin: 20px 0;
    border: none;
}

/* ─── Clickable elements — cursor-pointer ─── */

button,
[role="button"],
[data-clickable],
.mm-btn,
.mm-step,
.mm-nav-bar a,
.mm-modal__close,
.mm-pagination button,
.mm-pagination a,
a[class*="mmcp-"],
a[class*="mmca-"],
a[class*="mmsw-"],
button[class*="mmcp-"],
button[class*="mmca-"],
button[class*="mmsw-"] {
    cursor: pointer;
}

/* ─── Focus visible ring (keyboard nav) ─── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mm-accent);
    outline-offset: 2px;
}

/* ─── Checkbox Styling ─── */

input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0;
    border: 1.5px solid var(--mm-gray-300) !important;
    border-radius: 4px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    cursor: pointer;
    position: relative;
    transition: all var(--mm-transition);
    flex-shrink: 0;
    vertical-align: middle;
}

input[type="checkbox"]:checked {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:hover {
    border-color: var(--mm-accent) !important;
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--mm-accent);
    outline-offset: 2px;
}

/* ─── Button Variant Awareness ─── */

/* Delete buttons should be red */
.mmcp-btn[onclick*="delete" i],
.mmcp-btn[onclick*="Delete" i],
button[class*="delete" i],
.mm-btn--danger {
    background: var(--mm-danger) !important;
    border-color: var(--mm-danger) !important;
    color: #fff !important;
}

/* Secondary/utility buttons should be outlined */
.mmcp-btn.secondary,
.mmcp-btn[id*="reset" i],
.mm-btn--secondary {
    background: #fff;
    color: var(--mm-gray-700);
    border: 1px solid var(--mm-gray-300);
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .mm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .mm-table {
        font-size: 13px;
    }

    .mm-table th,
    .mm-table td {
        padding: 8px;
    }

    .mm-modal {
        width: 95%;
        max-height: 90vh;
    }

    .mm-nav-bar {
        padding: 8px 12px;
    }

    .mm-nav-bar a {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .mm-stat-grid {
        grid-template-columns: 1fr;
    }

    .mm-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Twenty Twenty-One Theme Overrides
   These ensure our plugin pages look professional regardless
   of the active WordPress theme.
   ═══════════════════════════════════════════════════════════ */

/* Warm sand background — matches Moose Media brand */
body.page {
    background: var(--mm-sand-light, #F5EDE7) !important;
}

/* Override Twenty Twenty-One's custom color hue blending — targeted, not blanket.
   Only reset the theme's color-mix bleed on containers, NOT on styled components. */
body.page .entry-content > section,
body.page .entry-content > div:not([class*="mmcp-"]):not([class*="mmca-"]):not([class*="mmsw-"]):not([class*="mmsr-"]):not([class*="mmct-"]):not(.mm-plugin-container) {
    background-color: unset;
}

/* Remove theme's constrained content width — full-width plugins */
body.page .site-content,
body.page .content-area,
body.page .site-main,
body.page .site-main > article,
body.page .entry-content {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override Twenty Twenty-One's child element width constraints
   (it sets max-width via --responsive--aligndefault-width on all
   direct children of .entry-content that aren't alignwide/alignfull) */
body.page .entry-content > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Plugin content padding — responsive full-width with gutter */
body.page .entry-content {
    padding: 0 24px !important;
}

@media (min-width: 1024px) {
    body.page .entry-content {
        padding: 0 40px !important;
    }
}

@media (min-width: 1440px) {
    body.page .entry-content {
        padding: 0 60px !important;
        max-width: 1600px !important;
        margin: 0 auto !important;
    }
}

/* Hide redundant page titles & separators (plugins have their own headers) */
body.page .entry-header {
    display: none !important;
}

body.page .post-title,
body.page .entry-title {
    display: none !important;
}

/* Remove the thick separator line Twenty Twenty-One adds after titles */
body.page .entry-header + .post-inner,
body.page .entry-content::before {
    display: none !important;
}

/* Clean up theme separator */
body.page .site-main > article > hr,
body.page .site-main > article > .wp-block-separator {
    display: none !important;
}

/* Make the site header cleaner — tighter, white background */
.site-header {
    background: #fff !important;
    border-bottom: 1px solid var(--mm-gray-200);
    padding: 12px 24px !important;
}

/* Navigation links — pill-style tabs */
.primary-navigation a {
    font-family: var(--mm-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mm-gray-500) !important;
    text-decoration: none !important;
    transition: all var(--mm-transition) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

.primary-navigation a:hover {
    color: var(--mm-primary) !important;
    background: var(--mm-gray-100) !important;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a {
    color: #fff !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--mm-primary) 0%, var(--mm-accent) 100%) !important;
    box-shadow: var(--mm-shadow) !important;
}

/* Site title — use our design system */
.site-title a,
.site-title {
    font-family: var(--mm-font) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--mm-primary) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

/* Remove Twenty Twenty-One footer — hide widget area, keep minimal footer */
body.page .widget-area,
body.page .footer-widgets-wrapper,
body.page .site-footer .widget-column,
body.page .site-footer .site-info ~ * {
    display: none !important;
}

body.page .site-footer {
    background: var(--mm-gray-50) !important;
    border-top: 1px solid var(--mm-gray-200) !important;
    padding: 16px 24px !important;
    font-size: 13px !important;
    color: var(--mm-gray-400) !important;
}

/* Hide stray edit links on page */
body.page .entry-content > a[href*="wp-admin"],
body.page .post-edit-link,
body.page .edit-link {
    display: none !important;
}

/* Mobile responsive overrides */
@media (max-width: 768px) {
    body.page .entry-content {
        padding: 0 16px !important;
    }

    .site-header {
        padding: 8px 16px !important;
    }
}