/* Cicero Group Canada - brand overrides on top of v2.css */

/* Logo image (source is black on transparent - inverted to white for the dark header) */
.brand-logo {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none;
    color: #fff;
    line-height: 0;
}
.brand-logo:hover { color: #fff; opacity: 0.9; }

.brand-logo-img {
    height: 34px;
    width: auto;
    transition: opacity .15s ease;
}

/* Mobile hamburger dropdown still uses the dark header treatment, so the
   white logo stays white on both desktop and mobile headers. */
@media (max-width: 768px) {
    .brand-logo-img { height: 30px; }
}

/* --- Product logo treatments --- */

/* Small product logo chip under a hero (e.g. JobAds hero) */
.hero-product-logo {
    display: inline-block;
    margin-bottom: 20px;
    line-height: 0;
    transition: opacity .15s ease;
}
.hero-product-logo img {
    height: 32px;
    width: auto;
}
.hero-product-logo:hover { opacity: 0.85; }

/* Big product showcase card (dark tile with the product logo inside) */
.product-showcase {
    transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s ease;
}
.product-showcase:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -12px rgba(10, 10, 10, 0.25);
    color: #fff;
}

/* Product cards in a grid: show the product logo in black on the
   light card surface (source PNG is white, inverted here via filter) */
.product-card { position: relative; }
.product-card .product-card__badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin-bottom: 22px;
    line-height: 0;
}
.product-card .product-card__badge img {
    height: 100%;
    width: auto;
    display: block;
    filter: brightness(0);
}