/*!
 * Logos Component - Petcover AU
 * Standalone stylesheet. Every selector is namespaced under .mwLogos so it
 * cannot collide with, or be affected by, any other component in the theme.
 * Not part of the Grunt pipeline - edit this file directly.
 */

/* -------------------------------------------------------------------------
   1. Root / custom property defaults
   ---------------------------------------------------------------------- */

.mwLogos.mwLogos.mwLogos {
    --mwl-per-view: 5;
    --mwl-logo-height: var(--mwl-logo-h-desktop, 60px);
    --mwl-duration: 40s;
    --mwl-pad-top: 80px;
    --mwl-pad-bottom: 80px;
    --mwl-mar-top: 0px;
    --mwl-mar-bottom: 0px;
    --mwl-gap: 40px;
    --mwl-item-width: 200px;
    --mwl-max-width: 1530px;
    --mwl-side-padding: 60px;
    --mwl-caption-gap: 14px;

    background: var(--mwl-background, transparent) !important;
    block-size: auto !important;
    border: 0 !important;
    box-sizing: border-box !important;
    color: var(--mwl-text, inherit);
    display: block !important;
    float: none !important;
    inline-size: 100% !important;
    margin-bottom: var(--mwl-mar-bottom) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: var(--mwl-mar-top) !important;
    min-height: var(--mwl-min-height, 0);
    overflow: hidden !important;
    padding-bottom: var(--mwl-pad-bottom) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: var(--mwl-pad-top) !important;
    position: relative !important;
    visibility: visible !important;
}

/* Neutralise inherited theme rules on every descendant, then rebuild.
   `revert` rolls each property back to the browser default while leaving
   genuinely inherited values (font family, colour) intact. */
.mwLogos.mwLogos :where(div, span, ul, ol, li, a, button, img, picture, p, h2, h3, figure) {
    all: revert;
    box-sizing: border-box;
}

.mwLogos.mwLogos *,
.mwLogos.mwLogos *::before,
.mwLogos.mwLogos *::after {
    box-sizing: border-box;
}

/* Background image + optional overlay ----------------------------------- */

.mwLogos.mwLogos--hasImage {
    background-image: var(--mwl-background-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mwLogos.mwLogos--hasImage::before {
    background: var(--mwl-overlay, transparent);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.mwLogos .mwLogos__inner {
    margin: 0 auto;
    max-width: var(--mwl-max-width);
    padding-left: var(--mwl-side-padding);
    padding-right: var(--mwl-side-padding);
    position: relative;
    width: 100%;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   2. Title
   ---------------------------------------------------------------------- */

.mwLogos .mwLogos__title {
    color: inherit;
    font-size: clamp(2rem, 2.6vw, 3rem);
    line-height: 1.25;
    margin: 0 0 1.5em;
    text-align: center;
}

/* -------------------------------------------------------------------------
   3. Frame, viewport and track
   ---------------------------------------------------------------------- */

.mwLogos .mwLogos__frame {
    align-items: center;
    display: flex;
    gap: 12px;
    position: relative;
    width: 100%;
}

.mwLogos .mwLogos__viewport {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 100%;
}

.mwLogos .mwLogos__track {
    align-items: center;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mwLogos .mwLogos__item {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0 calc(var(--mwl-gap) / 2);
}

.mwLogos .mwLogos__item::before,
.mwLogos .mwLogos__item::marker {
    content: none;
}

/* Logo itself ------------------------------------------------------------ */

.mwLogos .mwLogos__logo {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 4px;
    color: inherit;
    display: flex;
    font: inherit;
    justify-content: center;
    margin: 0;
    max-width: 100%;
    padding: 4px;
    text-decoration: none;
}

.mwLogos .mwLogos__logo--link,
.mwLogos .mwLogos__logo--popup {
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mwLogos .mwLogos__logo--link:hover,
.mwLogos .mwLogos__logo--popup:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.mwLogos .mwLogos__logo--link:focus-visible,
.mwLogos .mwLogos__logo--popup:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.mwLogos .mwLogos__image {
    display: block;
    height: var(--mwl-logo-height);
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    width: auto;
}

.mwLogos.mwLogos--greyscale .mwLogos__image {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.mwLogos.mwLogos--greyscale .mwLogos__logo:hover .mwLogos__image,
.mwLogos.mwLogos--greyscale .mwLogos__logo:focus-visible .mwLogos__image {
    filter: grayscale(0);
}

.mwLogos .mwLogos__srOnly {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* -------------------------------------------------------------------------
   3b. Captions - logo title and short description
   ---------------------------------------------------------------------- */

.mwLogos.mwLogos.mwLogos .mwLogos__media {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.mwLogos.mwLogos.mwLogos .mwLogos__caption {
    display: block;
    margin-top: var(--mwl-caption-gap);
    max-width: 100%;
    text-align: center;
    width: 100%;
}

.mwLogos.mwLogos.mwLogos .mwLogos__captionTitle {
    color: inherit;
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.mwLogos.mwLogos.mwLogos .mwLogos__captionText {
    color: inherit;
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.45;
    margin-top: 4px;
    opacity: 0.85;
    overflow-wrap: break-word;
    white-space: pre-line;
}

/* With captions the items must align to the top so uneven text lengths do
   not push the logos out of line with each other. */
/* The track and each item run as rows, so flex-start here means "align to
   the top" - correct for keeping logos on a line when captions differ in
   height. */
.mwLogos.mwLogos--hasCaptions .mwLogos__track,
.mwLogos.mwLogos--hasCaptions .mwLogos__item {
    align-items: flex-start;
}

/* The logo itself is a COLUMN, so its cross axis is horizontal - align-items
   must be center here or the caption is pushed to the left edge. */
.mwLogos.mwLogos--hasCaptions .mwLogos__logo {
    align-items: center;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
}

.mwLogos.mwLogos--hasCaptions .mwLogos__media {
    height: var(--mwl-logo-height);
}

/* -------------------------------------------------------------------------
   4. Static grid mode
   ---------------------------------------------------------------------- */

.mwLogos.mwLogos--grid .mwLogos__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--mwl-gap);
}

.mwLogos.mwLogos--grid .mwLogos__item {
    flex: 0 0 calc(100% / var(--mwl-per-view));
    max-width: calc(100% / var(--mwl-per-view));
}

/* -------------------------------------------------------------------------
   5. Arrows mode
   ---------------------------------------------------------------------- */

.mwLogos.mwLogos--arrows .mwLogos__viewport {
    -ms-overflow-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mwLogos.mwLogos--arrows .mwLogos__viewport::-webkit-scrollbar {
    display: none;
}

.mwLogos.mwLogos--arrows .mwLogos__viewport:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.mwLogos.mwLogos--arrows .mwLogos__item {
    flex: 0 0 calc(100% / var(--mwl-per-view));
    max-width: calc(100% / var(--mwl-per-view));
    scroll-snap-align: start;
}

.mwLogos .mwLogos__nav {
    align-items: center;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    width: 44px;
}

.mwLogos .mwLogos__nav:hover:not([disabled]) {
    opacity: 0.7;
}

.mwLogos .mwLogos__nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.mwLogos .mwLogos__nav[disabled] {
    cursor: default;
    opacity: 0.3;
}

.mwLogos .mwLogos__navIcon {
    display: block;
    height: 20px;
    pointer-events: none;
    width: 20px;
}

/* Hidden when everything already fits ------------------------------------ */

.mwLogos.mwLogos--noScroll .mwLogos__nav {
    display: none;
}

/* The nav buttons and pause control are now always present in the markup so
   the display mode can change per device at runtime. Hide whichever the
   current mode does not use. JS owns the mode class on the root. */
.mwLogos.mwLogos--marquee .mwLogos__nav,
.mwLogos.mwLogos--grid .mwLogos__nav {
    display: none;
}

.mwLogos.mwLogos--grid .mwLogos__controls {
    display: none;
}

/* Grid must never inherit scroll or transform state from a mode the viewport
   was previously in - a resize can switch modes on the same element. */
.mwLogos.mwLogos--grid .mwLogos__viewport {
    overflow: visible;
}

.mwLogos.mwLogos--noScroll .mwLogos__track {
    justify-content: center;
}

/* -------------------------------------------------------------------------
   6. Marquee mode
   ---------------------------------------------------------------------- */

.mwLogos.mwLogos--marquee .mwLogos__viewport {
    overflow: hidden;
}

.mwLogos.mwLogos--marquee .mwLogos__item {
    flex: 0 0 var(--mwl-item-width);
    max-width: var(--mwl-item-width);
}

.mwLogos .mwLogos__marquee {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

.mwLogos.mwLogos--marquee .mwLogos__marquee {
    cursor: grab;
    touch-action: pan-y;
    /* Without this, dragging the strip selects the caption text and the
       logo images, which is what produced the blue highlight boxes. */
    -webkit-user-select: none;
    user-select: none;
}

.mwLogos.mwLogos--marquee.is-dragging .mwLogos__marquee {
    cursor: grabbing;
    user-select: none;
}

.mwLogos.mwLogos--marquee.is-dragging .mwLogos__image {
    pointer-events: none;
}

/* Before JS runs, and when JS is unavailable, keep it usable ------------- */

.mwLogos.mwLogos--marquee:not(.is-ready) .mwLogos__viewport {
    overflow-x: auto;
}

/* Pause / play control --------------------------------------------------- */

.mwLogos .mwLogos__controls {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

/* The pause control is hidden from sight but kept in the accessibility tree
   and the tab order. WCAG 2.2 SC 2.2.2 requires a way to stop motion that
   runs longer than five seconds; removing the control outright would fail
   that, so instead it is visually hidden and reveals itself on keyboard
   focus, exactly like a skip link. Motion still pauses on hover and on
   keyboard focus regardless. */
.mwLogos .mwLogos__pause:not(:focus):not(:focus-visible) {
    block-size: 1px;
    border: 0 !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0 !important;
    position: absolute;
    white-space: nowrap;
}

.mwLogos .mwLogos__controls:focus-within {
    margin-top: 24px;
}

.mwLogos .mwLogos__pause {
    align-items: center;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 100px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.4rem;
    gap: 8px;
    line-height: 1;
    padding: 8px 16px;
    transition: opacity 0.25s ease;
}

.mwLogos .mwLogos__pause:hover {
    opacity: 0.75;
}

.mwLogos .mwLogos__pause:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.mwLogos .mwLogos__pauseIcon {
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
}

.mwLogos .mwLogos__pauseIcon--play,
.mwLogos.mwLogos.is-paused .mwLogos__pauseIcon--pause {
    display: none;
}

.mwLogos.mwLogos.is-paused .mwLogos__pauseIcon--play {
    display: block;
}

.mwLogos .mwLogos__controls:not(.is-visible) {
    display: none;
}

/* -------------------------------------------------------------------------
   7. Popup / modal
   ---------------------------------------------------------------------- */

html.mwLogos-modalOpen {
    overflow: hidden;
}

.mwLogos .mwLogos__modal[hidden] {
    display: none;
}

.mwLogos .mwLogos__modal {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100000;
}

.mwLogos .mwLogos__modalOverlay {
    background: rgba(0, 0, 0, 0.65);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.mwLogos .mwLogos__modalDialog {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    color: #262626;
    max-height: calc(100vh - 40px);
    max-width: 520px;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    text-align: center;
    width: 100%;
}

.mwLogos .mwLogos__modalDialog:focus {
    outline: none;
}

.mwLogos .mwLogos__modalDialog:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mwLogos .mwLogos__modalClose {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
}

.mwLogos .mwLogos__modalClose:hover {
    opacity: 0.7;
}

.mwLogos .mwLogos__modalClose:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mwLogos .mwLogos__modalBody {
    display: block;
}

.mwLogos .mwLogos__popupImage {
    display: block;
    height: auto;
    margin: 0 auto 20px;
    max-height: 90px;
    max-width: 220px;
    object-fit: contain;
    width: auto;
}

.mwLogos .mwLogos__popupTitle {
    color: inherit;
    font-size: 2.2rem;
    line-height: 1.3;
    margin: 0 0 12px;
}

.mwLogos .mwLogos__popupText {
    font-size: 1.6rem;
    line-height: 1.6;
}

.mwLogos .mwLogos__popupText > *:first-child {
    margin-top: 0;
}

.mwLogos .mwLogos__popupText > *:last-child {
    margin-bottom: 0;
}

.mwLogos .mwLogos__popupButton {
    border: 1px solid currentColor;
    border-radius: 4px;
    display: inline-block;
    margin-top: 24px;
    padding: 12px 24px;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.mwLogos .mwLogos__popupButton:hover {
    opacity: 0.75;
}

/* -------------------------------------------------------------------------
   8. Responsive - values step down automatically
   ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .mwLogos.mwLogos {
        --mwl-gap: 32px;
        --mwl-side-padding: 40px;
    }
}

@media (max-width: 768px) {
    .mwLogos.mwLogos {
        --mwl-gap: 24px;
        --mwl-side-padding: 20px;

    }

    .mwLogos .mwLogos__modalDialog {
        padding: 32px 20px;
    }

    .mwLogos .mwLogos__nav {
        height: 38px;
        width: 38px;
    }
}

@media (max-width: 480px) {
    .mwLogos.mwLogos {
        --mwl-gap: 16px;
    }

    .mwLogos .mwLogos__title {
        margin-bottom: 1em;
    }
}

/* Per-device sizing.
   Breakpoints: mobile <= 767px, tablet 768-1023px, desktop >= 1024px.
   The JS mirrors these exact breakpoints via matchMedia, so the two can never
   disagree. JS writes --mwl-per-view inline, which wins over the rules below;
   they exist so the component is still correct before JS runs and when JS is
   unavailable. Logo height is left entirely to CSS. */

@media (max-width: 1023px) {
    .mwLogos.mwLogos.mwLogos {
        --mwl-logo-height: var(--mwl-logo-h-tablet, var(--mwl-logo-h-desktop, 60px));

        margin-bottom: var(--mwl-mar-bottom-tablet, var(--mwl-mar-bottom)) !important;
        margin-top: var(--mwl-mar-top-tablet, var(--mwl-mar-top)) !important;
        padding-bottom: var(--mwl-pad-bottom-tablet, var(--mwl-pad-bottom)) !important;
        padding-top: var(--mwl-pad-top-tablet, var(--mwl-pad-top)) !important;
    }

    .mwLogos.mwLogos.mwLogos:not(.is-ready) {
        --mwl-per-view: var(--mwl-per-view-tablet, 3);
    }
}

@media (max-width: 767px) {
    .mwLogos.mwLogos.mwLogos {
        --mwl-logo-height: var(--mwl-logo-h-mobile, var(--mwl-logo-h-tablet, var(--mwl-logo-h-desktop, 60px)));

        margin-bottom: var(--mwl-mar-bottom-mobile, var(--mwl-mar-bottom)) !important;
        margin-top: var(--mwl-mar-top-mobile, var(--mwl-mar-top)) !important;
        padding-bottom: var(--mwl-pad-bottom-mobile, var(--mwl-pad-bottom)) !important;
        padding-top: var(--mwl-pad-top-mobile, var(--mwl-pad-top)) !important;
    }

    .mwLogos.mwLogos.mwLogos:not(.is-ready) {
        --mwl-per-view: var(--mwl-per-view-mobile, 2);
    }
}

/* -------------------------------------------------------------------------
   9. Reduced motion
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mwLogos.mwLogos--marquee .mwLogos__viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .mwLogos.mwLogos--arrows .mwLogos__viewport {
        scroll-behavior: auto;
    }

    .mwLogos.mwLogos--marquee .mwLogos__item {
        scroll-snap-align: start;
    }

    .mwLogos .mwLogos__logo--link,
    .mwLogos .mwLogos__logo--popup,
    .mwLogos .mwLogos__image {
        transition: none;
    }

    .mwLogos .mwLogos__logo--link:hover,
    .mwLogos .mwLogos__logo--popup:hover {
        transform: none;
    }
}