/* OneNav Child - homepage site cards aligned to parent theme defaults. */

body.home .content-card .sites-item,
body.front-page .content-card .sites-item,
body.home .url-card .sites-item,
body.front-page .url-card .sites-item,
body.home .oc-local-hub .sites-item,
body.front-page .oc-local-hub .sites-item,
body.home .oc-home-recent .sites-item,
body.front-page .oc-home-recent .sites-item {
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: var(--theme-border-radius-md, var(--main-radius, 12px)) !important;
    background-color: var(--main-bg-color, #fff) !important;
    box-shadow: none !important;
    transform: none !important;
    isolation: auto;
    transition: box-shadow .3s, background-color .3s, transform .3s ease;
}

body.home .content-card .sites-item,
body.front-page .content-card .sites-item,
body.home .url-card .sites-item,
body.front-page .url-card .sites-item,
body.home .oc-local-hub .sites-item,
body.front-page .oc-local-hub .sites-item,
body.home .oc-home-recent .sites-item,
body.front-page .oc-home-recent .sites-item {
    position: relative !important;
}

body.home .content-card .sites-item .sites-body,
body.front-page .content-card .sites-item .sites-body,
body.home .url-card .sites-item .sites-body,
body.front-page .url-card .sites-item .sites-body,
body.home .oc-local-hub .sites-item .sites-body,
body.front-page .oc-local-hub .sites-item .sites-body,
body.home .oc-home-recent .sites-item .sites-body,
body.front-page .oc-home-recent .sites-item .sites-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-height: 0 !important;
    padding: var(--home-card-padding, 10px) !important;
    color: inherit;
}

body.home .content-card .sites-item .item-header,
body.front-page .content-card .sites-item .item-header,
body.home .url-card .sites-item .item-header,
body.front-page .url-card .sites-item .item-header,
body.home .oc-local-hub .sites-item .item-header,
body.front-page .oc-local-hub .sites-item .item-header,
body.home .oc-home-recent .sites-item .item-header,
body.front-page .oc-home-recent .sites-item .item-header {
    flex: 0 0 auto;
    margin-right: 8px !important;
}

body.home .content-card .sites-item .item-media,
body.front-page .content-card .sites-item .item-media,
body.home .url-card .sites-item .item-media,
body.front-page .url-card .sites-item .item-media,
body.home .oc-local-hub .sites-item .item-media,
body.front-page .oc-local-hub .sites-item .item-media,
body.home .oc-home-recent .sites-item .item-media,
body.front-page .oc-home-recent .sites-item .item-media {
    width: 40px !important;
    padding-bottom: 100% !important;
    border-radius: 40px !important;
    background-color: var(--muted-bg-a-color, rgba(116, 116, 116, .1));
}

body.home .content-card .sites-item .item-image,
body.front-page .content-card .sites-item .item-image,
body.home .url-card .sites-item .item-image,
body.front-page .url-card .sites-item .item-image,
body.home .oc-local-hub .sites-item .item-image,
body.front-page .oc-local-hub .sites-item .item-image,
body.home .oc-home-recent .sites-item .item-image,
body.front-page .oc-home-recent .sites-item .item-image {
    border: 0 !important;
    background: transparent !important;
}

body.home .content-card .sites-item .item-body,
body.front-page .content-card .sites-item .item-body,
body.home .url-card .sites-item .item-body,
body.front-page .url-card .sites-item .item-body,
body.home .oc-local-hub .sites-item .item-body,
body.front-page .oc-local-hub .sites-item .item-body,
body.home .oc-home-recent .sites-item .item-body,
body.front-page .oc-home-recent .sites-item .item-body {
    min-width: 0;
}

body.home .content-card .sites-item .item-title,
body.front-page .content-card .sites-item .item-title,
body.home .url-card .sites-item .item-title,
body.front-page .url-card .sites-item .item-title,
body.home .oc-local-hub .sites-item .item-title,
body.front-page .oc-local-hub .sites-item .item-title,
body.home .oc-home-recent .sites-item .item-title,
body.front-page .oc-home-recent .sites-item .item-title {
    margin: 0 !important;
    color: var(--main-color, #484b4f) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3125rem !important;
}

body.home .content-card .sites-item .item-body > .text-muted,
body.front-page .content-card .sites-item .item-body > .text-muted,
body.home .url-card .sites-item .item-body > .text-muted,
body.front-page .url-card .sites-item .item-body > .text-muted,
body.home .oc-local-hub .sites-item .item-body > .text-muted,
body.front-page .oc-local-hub .sites-item .item-body > .text-muted,
body.home .oc-home-recent .sites-item .item-body > .text-muted,
body.front-page .oc-home-recent .sites-item .item-body > .text-muted {
    margin-top: 0 !important;
    color: var(--muted-color, #93959a) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body.home .content-card .sites-item:hover,
body.front-page .content-card .sites-item:hover,
body.home .url-card .sites-item:hover,
body.front-page .url-card .sites-item:hover,
body.home .oc-local-hub .sites-item:hover,
body.front-page .oc-local-hub .sites-item:hover,
body.home .oc-home-recent .sites-item:hover,
body.front-page .oc-home-recent .sites-item:hover {
    border-color: transparent !important;
    box-shadow: inset 0 0 2px 0 var(--muted-shadow, rgba(116, 116, 116, .1)), 0 20px 25px -10px var(--main-shadow, rgba(0, 0, 0, .1)) !important;
    transform: none !important;
}

body.io-black-mode .content-card .sites-item,
body.io-black-mode .url-card .sites-item,
body.io-black-mode .oc-local-hub .sites-item,
body.io-black-mode .oc-home-recent .sites-item,
html.io-black-mode body .content-card .sites-item,
html.io-black-mode body .url-card .sites-item,
html.io-black-mode body .oc-local-hub .sites-item,
html.io-black-mode body .oc-home-recent .sites-item {
    border-color: transparent !important;
    background-color: var(--main-bg-color, #2d2e2f) !important;
    box-shadow: none !important;
}

/* Preserve the parent theme's direct-link icon. Older child mobile rules hid
 * the whole sites-tags wrapper, which also removed the parent .togo action. */
body.home .content-card .sites-item .sites-tags,
body.front-page .content-card .sites-item .sites-tags,
body.home .url-card .sites-item .sites-tags,
body.front-page .url-card .sites-item .sites-tags,
body.home .oc-local-hub .sites-item .sites-tags,
body.front-page .oc-local-hub .sites-item .sites-tags,
body.home .oc-home-recent .sites-item .sites-tags,
body.front-page .oc-home-recent .sites-item .sites-tags {
    display: block !important;
}

body.home .sites-item.has-oc-favorite-control .sites-tags .togo,
body.front-page .sites-item.has-oc-favorite-control .sites-tags .togo {
    right: 44px;
}

body.home .sites-item .sites-tags .togo,
body.front-page .sites-item .sites-tags .togo {
    display: inline-flex;
    position: absolute;
    z-index: 4;
    min-width: 30px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    color: var(--muted-color2, #66686b);
    opacity: .72 !important;
    transform: none !important;
}

body.home .sites-item .sites-tags .togo:hover,
body.home .sites-item .sites-tags .togo:focus-visible,
body.front-page .sites-item .sites-tags .togo:hover,
body.front-page .sites-item .sites-tags .togo:focus-visible {
    color: var(--theme-color, #f1404b);
    opacity: 1 !important;
}

/* The child favorite action must remain discoverable; the parent card's
 * hover-only opacity rule must not hide it. */
body.home .sites-item.has-oc-favorite-control .oc-favorite-toggle,
body.front-page .sites-item.has-oc-favorite-control .oc-favorite-toggle {
    top: 3px !important;
    right: 3px !important;
    z-index: 5 !important;
    width: 32px !important;
    height: 32px !important;
    opacity: .92 !important;
    pointer-events: auto;
}

body.home .sites-item.has-oc-favorite-control .oc-favorite-toggle i,
body.front-page .sites-item.has-oc-favorite-control .oc-favorite-toggle i {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px;
    font-size: 12px;
}

/* Keep the direct-link action in the card's bottom-right corner. */
body.home .sites-item .sites-tags .togo,
body.front-page .sites-item .sites-tags .togo,
body.home .sites-item.has-oc-favorite-control .sites-tags .togo,
body.front-page .sites-item.has-oc-favorite-control .sites-tags .togo {
    top: auto !important;
    right: 6px !important;
    bottom: 6px !important;
}

@media (max-width: 767px) {
    body.home .content-card .sites-item .sites-body,
    body.front-page .content-card .sites-item .sites-body,
    body.home .url-card .sites-item .sites-body,
    body.front-page .url-card .sites-item .sites-body,
    body.home .oc-local-hub .sites-item .sites-body,
    body.front-page .oc-local-hub .sites-item .sites-body,
    body.home .oc-home-recent .sites-item .sites-body,
    body.front-page .oc-home-recent .sites-item .sites-body {
        padding: 9px !important;
    }

    body.home .content-card .sites-item .item-media,
    body.front-page .content-card .sites-item .item-media,
    body.home .url-card .sites-item .item-media,
    body.front-page .url-card .sites-item .item-media,
    body.home .oc-local-hub .sites-item .item-media,
    body.front-page .oc-local-hub .sites-item .item-media,
    body.home .oc-home-recent .sites-item .item-media,
    body.front-page .oc-home-recent .sites-item .item-media {
        width: 36px !important;
    }

    body.home .content-card .sites-item .item-title,
    body.front-page .content-card .sites-item .item-title,
    body.home .url-card .sites-item .item-title,
    body.front-page .url-card .sites-item .item-title,
    body.home .oc-local-hub .sites-item .item-title,
    body.front-page .oc-local-hub .sites-item .item-title,
    body.home .oc-home-recent .sites-item .item-title,
    body.front-page .oc-home-recent .sites-item .item-title {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    body.home .sites-item .sites-tags .togo,
    body.front-page .sites-item .sites-tags .togo {
        top: auto !important;
        right: 5px !important;
        bottom: 5px !important;
        opacity: .8 !important;
        transform: none !important;
    }

    body.home .sites-item.has-oc-favorite-control .sites-tags .togo,
    body.front-page .sites-item.has-oc-favorite-control .sites-tags .togo {
        right: 5px !important;
    }

    body.home .sites-item.has-oc-favorite-control .oc-favorite-toggle,
    body.front-page .sites-item.has-oc-favorite-control .oc-favorite-toggle {
        top: 2px !important;
        right: 2px !important;
    }

    body.home .content-card .sites-item .item-body > .text-muted,
    body.front-page .content-card .sites-item .item-body > .text-muted,
    body.home .url-card .sites-item .item-body > .text-muted,
    body.front-page .url-card .sites-item .item-body > .text-muted,
    body.home .oc-local-hub .sites-item .item-body > .text-muted,
    body.front-page .oc-local-hub .sites-item .item-body > .text-muted,
    body.home .oc-home-recent .sites-item .item-body > .text-muted,
    body.front-page .oc-home-recent .sites-item .item-body > .text-muted {
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .content-card .sites-item,
    body.front-page .content-card .sites-item,
    body.home .url-card .sites-item,
    body.front-page .url-card .sites-item,
    body.home .oc-local-hub .sites-item,
    body.front-page .oc-local-hub .sites-item,
    body.home .oc-home-recent .sites-item,
    body.front-page .oc-home-recent .sites-item {
        transition: none !important;
    }
}