/*
 * MFSA Media Centre compatibility layer — Phase 2.
 * All rules are scoped beneath .mfsa-mc-wrapper to prevent collisions with
 * the header search and similarly named classes in other custom plugins.
 */

.mfsa-mc-wrapper {
    color: var(--mfsa-ui-text);
}

.mfsa-mc-wrapper .mfsa-controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--mfsa-ui-gap);
    width: 100%;
    margin: 0 0 30px;
    padding: 14px;
    box-sizing: border-box;
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface-subtle);
    border: 1px solid var(--mfsa-ui-border-light);
    border-radius: var(--mfsa-ui-radius);
}

.mfsa-mc-wrapper .mfsa-select,
.mfsa-mc-wrapper .mfsa-search-input,
.mfsa-mc-wrapper .mfsa-per-page-select {
    min-height: var(--mfsa-ui-control-height);
    margin: 0;
    box-sizing: border-box;
    color: var(--mfsa-ui-text);
    background-color: var(--mfsa-ui-surface);
    border: 1px solid var(--mfsa-ui-border);
    border-radius: var(--mfsa-ui-radius);
    box-shadow: none;
    font: inherit;
    line-height: 1.25;
}

.mfsa-mc-wrapper .mfsa-select {
    flex: 0 1 190px;
    min-width: 135px;
    padding: 8px 38px 8px 12px;
}

.mfsa-mc-wrapper .mfsa-search-wrap {
    display: flex;
    flex: 1 1 300px;
    align-items: stretch;
    min-width: 220px;
    margin: 0;
}

.mfsa-mc-wrapper .mfsa-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--mfsa-ui-radius) 0 0 var(--mfsa-ui-radius);
    border-inline-end: 0;
}

.mfsa-mc-wrapper .mfsa-search-btn,
.mfsa-mc-wrapper .mfsa-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--mfsa-ui-control-height);
    width: var(--mfsa-ui-control-height);
    min-width: var(--mfsa-ui-control-height);
    height: var(--mfsa-ui-control-height);
    min-height: var(--mfsa-ui-control-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
    background: var(--mfsa-ui-teal);
    border: 1px solid var(--mfsa-ui-teal);
    border-radius: var(--mfsa-ui-radius);
    box-shadow: none;
    cursor: pointer;
    opacity: 1;
}

.mfsa-mc-wrapper .mfsa-search-btn {
    border-radius: 0 var(--mfsa-ui-radius) var(--mfsa-ui-radius) 0;
}

.mfsa-mc-wrapper .mfsa-layout-btns {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 4px;
    margin: 0 0 0 var(--mfsa-ui-gap);
}

.mfsa-mc-wrapper .mfsa-view-btn:not(.active) {
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface);
    border-color: var(--mfsa-ui-border);
}

.mfsa-mc-wrapper .mfsa-search-btn:hover,
.mfsa-mc-wrapper .mfsa-search-btn:focus-visible,
.mfsa-mc-wrapper .mfsa-view-btn:hover,
.mfsa-mc-wrapper .mfsa-view-btn:focus-visible,
.mfsa-mc-wrapper .mfsa-view-btn.active {
    color: #ffffff;
    background: var(--mfsa-ui-teal-dark);
    border-color: var(--mfsa-ui-teal-dark);
}

.mfsa-mc-wrapper :is(.mfsa-select, .mfsa-search-input, .mfsa-search-btn, .mfsa-view-btn, .mfsa-per-page-select, .mfsa-btn-nav):focus-visible,
.mfsa-mc-wrapper .mfsa-card:focus-within {
    outline: 3px solid var(--mfsa-ui-focus) !important;
    outline-offset: 2px !important;
}

.mfsa-mc-wrapper .mfsa-layout-cards {
    gap: 24px;
}

.mfsa-mc-wrapper .mfsa-card {
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface);
    border: 1px solid var(--mfsa-ui-border-light);
    border-radius: var(--mfsa-ui-radius);
}

.mfsa-mc-wrapper .mfsa-card:hover,
.mfsa-mc-wrapper .mfsa-card:focus-within {
    border-color: var(--mfsa-ui-teal);
}

.mfsa-mc-wrapper .mfsa-card h3,
.mfsa-mc-wrapper .mfsa-card h3 a {
    color: var(--mfsa-ui-text);
}

.mfsa-mc-wrapper .mfsa-card h3 a:hover,
.mfsa-mc-wrapper .mfsa-card h3 a:focus-visible {
    color: var(--mfsa-ui-teal-dark);
    background: transparent;
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
}

.mfsa-mc-wrapper .mfsa-excerpt {
    color: var(--mfsa-ui-text-muted) !important;
}

.mfsa-mc-wrapper :is(.mfsa-link-style, .mfsa-arrow-icon, .mfsa-pagination-left) {
    color: var(--mfsa-ui-teal-dark);
}

.mfsa-mc-wrapper .mfsa-link-style:hover,
.mfsa-mc-wrapper .mfsa-link-style:focus-visible {
    color: var(--mfsa-ui-teal-dark);
    background: transparent;
    text-decoration: underline !important;
}

.mfsa-mc-wrapper .mfsa-pagination-bar {
    color: var(--mfsa-ui-text);
    border-color: var(--mfsa-ui-border-light);
}

.mfsa-mc-wrapper :is(.mfsa-per-page-wrap, .mfsa-page-info) {
    color: var(--mfsa-ui-text-muted);
}

.mfsa-mc-wrapper .mfsa-btn-nav {
    min-height: 40px;
    padding: 8px 16px;
    color: #ffffff;
    background: var(--mfsa-ui-teal-dark);
    border: 1px solid var(--mfsa-ui-teal-dark);
    border-radius: var(--mfsa-ui-radius);
}

.mfsa-mc-wrapper .mfsa-btn-nav:disabled {
    color: var(--mfsa-ui-text-muted);
    background: var(--mfsa-ui-surface-subtle);
    border-color: var(--mfsa-ui-border);
    cursor: not-allowed;
    opacity: 1;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-controls,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-card,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-card-body,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-pagination-bar {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #ffffff !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper :is(.mfsa-select, .mfsa-search-input, .mfsa-per-page-select) {
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-search-input {
    border-inline-end: 0 !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-search-input::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper :is(.mfsa-search-btn, .mfsa-view-btn.active) {
    color: #000000 !important;
    background: #ffff00 !important;
    border: 2px solid #ffffff !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-view-btn:not(.active) {
    color: #ffffff !important;
    background: #000000 !important;
    border: 2px solid #ffffff !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-view-btn:hover,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-view-btn:focus-visible {
    color: #000000 !important;
    background: #ffff00 !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper :is(.mfsa-card h3, .mfsa-card h3 a, .mfsa-excerpt, .mfsa-per-page-wrap, .mfsa-page-info) {
    color: #ffffff !important;
    background: #000000 !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-card h3 a:hover,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-card h3 a:focus-visible,
body.pojo-a11y-high-contrast .mfsa-mc-wrapper :is(.mfsa-link-style, .mfsa-arrow-icon, .mfsa-pagination-left) {
    color: #00ffff !important;
    background: #000000 !important;
    text-decoration: underline !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-btn-nav:not(:disabled) {
    color: #000000 !important;
    background: #ffff00 !important;
    border: 2px solid #ffffff !important;
}

body.pojo-a11y-high-contrast .mfsa-mc-wrapper .mfsa-btn-nav:disabled {
    color: #ffffff !important;
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    opacity: 0.65 !important;
}

@media (max-width: 1024px) {
    .mfsa-mc-wrapper .mfsa-controls {
        flex-wrap: wrap;
    }

    .mfsa-mc-wrapper .mfsa-select {
        flex: 1 1 calc(33.333% - var(--mfsa-ui-gap));
        max-width: none;
    }

    .mfsa-mc-wrapper .mfsa-search-wrap {
        flex-basis: 100%;
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .mfsa-mc-wrapper .mfsa-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .mfsa-mc-wrapper .mfsa-select,
    .mfsa-mc-wrapper .mfsa-search-wrap {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .mfsa-mc-wrapper .mfsa-layout-btns {
        margin-inline-start: 8px;
    }

    .mfsa-mc-wrapper .mfsa-pagination-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}