/* Victor Corporation theme overrides. Loaded only when State.IsVictor is true, and loaded
   last so it beats the per-page stylesheets. */

:root {
    --victor-green: #074e50;
}

/* --- Header ---------------------------------------------------------------- */

header.pageHeader.victor {
    background: var(--victor-green);
}

/* Single-colour mark on transparency; flatten to black then invert for white. */
header.pageHeader.victor .navbar-brand img {
    filter: brightness(0) invert(1);
    width: 250px;
}

header.pageHeader.victor .navbar-nav > .nav-item > .nav-link,
header.pageHeader.victor .navbar-nav > .nav-item > .dropdown-toggle,
header.pageHeader.victor .navbar-brand {
    color: #fff;
}

header.pageHeader.victor .navbar-brand {
    max-width: 250px;
}

@media (min-width: 1200px) {
    header.pageHeader.victor .navbar .navbar-nav.brand-nav-centered {
        justify-content: center;
        gap: 2rem;
    }
}

/* Desktop nav appears at 1200 but has no room beside a 250px mark until ~1340. */
@media (min-width: 1200px) and (max-width: 1340px) {
    header.pageHeader.victor .navbar-brand,
    header.pageHeader.victor .navbar-brand img {
        width: 200px;
        max-width: 200px;
    }

    header.pageHeader.victor .navbar .navbar-nav.brand-nav-centered {
        gap: 1rem;
    }
}

/* Dropdown panels are white, so they can't inherit the white above. */
header.pageHeader.victor .dropdown-menu .dropdown-item,
header.pageHeader.victor .dropdown-menu a {
    color: #212529;
}

header .navbar .nav-item.dropdown .dropdown-menu li.current .dropdown-item {
    color: var(--victor-green);
}

    header .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover,
    header .navbar .nav-item.dropdown .dropdown-menu li.current .dropdown-item:hover,
    header.pageHeader.victor .dropdown-toggle:hover {
        color: var(--victor-green);
    }

header.pageHeader.victor .navbar-nav .nav-link.is-current {
    color: #fff !important;
}

header.pageHeader.victor .navbar-nav .nav-item.is-current > .nav-link::before {
    background: #fff;
}

header.pageHeader.victor #user-tools li svg .fill-color {
    fill: #fff;
}

header.pageHeader.victor #user-tools li svg:hover .fill-color {
    fill: #cfe0df;
}

header.pageHeader.victor .navbar-toggler span {
    background-color: #fff;
}

header.pageHeader.victor #searchBar input.searchFormInput:focus {
    border-color: var(--victor-green);
}

header.pageHeader.victor #searchBar.show {
    top: 98px;
}

main {
    padding-top: 120px;
}

/* Tracks the rule above plus the customer bar's 40px, as 2021.css does at 114/154. */
html.has-customer-bar main {
    padding-top: 160px;
}

/* Customer view bar. #e6edee tints the green as #fdf6e8 tints Ostbye's gold (10%). */
header.pageHeader.victor #customer-view-bar.is-active,
header.pageHeader.victor #customer-view-bar.is-busy {
    background: #e6edee;
    border-bottom-color: var(--victor-green);
}

header.pageHeader.victor #customer-view-bar input.customer-view-input:focus {
    border-color: var(--victor-green);
}

header.pageHeader.victor #customer-view-bar .customer-view-spinner {
    border-top-color: var(--victor-green);
}


/* --- Home page category tiles ---------------------------------------------- */
#home #categories .home-feature .feature-tag {
    background: var(--victor-green);
    background-image: none;
    color: #fff;
}

#home #categories .home-feature .feature-tag .title,
#home #categories .home-feature .feature-tag .discover {
    color: #fff;
}

#home #categories .home-feature .feature-tag .title {
    font-family: "EB Garamond", Garamond, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* The br goes with "Discover", or the tile keeps a blank first line. */
#home #categories .home-feature .feature-tag .discover,
#home #categories .home-feature .feature-tag br {
    display: none;
}

#home #categories .home-feature .feature-tag .title::after,
#home #categories .home-feature:hover .feature-tag .title::after {
    content: none;
    display: none;
}

/* --- Product and listing ---------------------------------------------------- */

#product .product-breadcrumb,
#product .product-breadcrumb a,
#product .product-breadcrumb a:hover,
.collection-listing-page .collection-breadcrumb,
.collection-listing-page .collection-breadcrumb a {
    color: var(--victor-green);
}

#product .productPhoto .additionalImgs li img.selected-img {
    border: 2px solid var(--victor-green) !important;
}

.collection-listing-page .categoryTitle h1,
#product .product-page-heading {
    color: var(--victor-green);
}

#product .product-collection-intro .collection-name,
#product .product-collection-intro .collection-title,
#product .product-collection-intro .collection-desc {
    color: var(--victor-green) !important;
}

#product .size-choice-list .choice-pill input:checked + span,
#product .color-choice-list .choice-pill input:checked + span,
#product .quality-choice-list .choice-pill input:checked + span {
    background: var(--victor-green);
    border-color: var(--victor-green);
}

.collection-listing-page .productList .productBlock .product-card:hover,
.collection-listing-page .productList .productBlock .product-card:hover::after {
    border-color: var(--victor-green);
    color: var(--victor-green);
}

.collection-listing-page .productList .productBlock .product-card::before {
    background: rgba(7, 78, 80, 0.3);
}

.filter-sidebar-header .filter-title-label,
.filter-sidebar .filterTitle,
.collection-listing-page .option-help-link,
#product .option-help-link {
    color: var(--victor-green);
}

.collection-listing-page .filter-section .filter-section-toggle {
    color: #1f2328;
}

/* Recolours the amber "?" asset; swap the image if this reads muddy. */
.collection-listing-page .option-help-link img,
#product .option-help-link img {
    filter: hue-rotate(125deg) saturate(0.7) brightness(0.75);
}

/* Victor has no collections; still computed server-side and reachable by URL. */
.filter-section[data-filter-key="Collection"] {
    display: none;
}

.search-page h1 {
    color: var(--victor-green);
}

.legend-trigger {
    border: 1px solid var(--victor-green);
    color: var(--victor-green);
}

    .legend-trigger:hover, 
    .legend-trigger:focus {
        background: var(--victor-green);
    }

/* --- About page ------------------------------------------------------------- */

#mission #motto {
    background: var(--victor-green);
}

#mission #mission-core {
    background: rgba(7, 78, 80, 0.05);
}

@media (min-width: 990px) {
    #mission #motto img {
        top: 31%;
    }
}

/* Reclaims the gutter the floated hero image sits in; remove when Tara's image lands. */
#about-100 .content {
    padding-right: 20px !important;
}

/* --- Custom design form ------------------------------------------------------ */

#design #design-instructions {
    background: var(--victor-green);
    background: linear-gradient(180deg, #4e8f91 31%, var(--victor-green) 72%);
}

#design #design-form .intro h1,
#design #design-form .intro .h1 {
    color: var(--victor-green);
}

#design #design-form input.btn-primary {
    background-color: var(--victor-green);
    border-color: var(--victor-green);
}

    #design #design-form input.btn-primary:hover,
    #design #design-form input.btn-primary:focus,
    #design #design-form input.btn-primary:active {
        background-color: #0a6a6d;
        border-color: #0a6a6d;
    }

/* --- Login page ------------------------------------------------------------ */
.sso-form input.sso-login-button {
    background: var(--victor-green);
}

.sso-form input.sso-login-input:focus,
.sso-form input.sso-login-input:active {
    border-bottom: 1px solid var(--victor-green) !important;
    box-shadow: 0 1px 0 0 var(--victor-green) !important;
}

input.sso-login-input:focus + label,
input.sso-login-input:active + label {
    color: var(--victor-green) !important;
}

body main .pageContent a.forgot-password-link {
    color: var(--victor-green);
}

/* --- Sales rep dashboard ----------------------------------------------------- */

.sd-btn {
    background: var(--victor-green);
}

    .sd-btn:hover {
        background: #0a6a6d;
    }

/* --- Footer ----------------------------------------------------------------- */

footer.footer-refresh .footer-contact-row #contact,
footer.footer-refresh .footer-contact-row #contact h4 {
    color: #212529;
}

    footer.footer-refresh .footer-contact-row #contact a {
        color: #212529 !important;
    }

footer.footer-refresh .footer-social-row {
    background: var(--victor-green);
}

footer.footer-refresh .footer-social-links svg .fill-color {
    fill: #fff !important;
}

footer.footer-refresh .footer-social-links a,
footer.footer-refresh .footer-social-links a:hover {
    color: #fff;
}