/**
 * Opus site-wide styles (loaded on every front-end page).
 *
 * The header template renders the Opus search box + menu on all pages,
 * but opus-products.css only loads on product routes — these rules keep
 * the header consistent everywhere.
 */

/* ------------------------------------------------------------
   HEADER SEARCH BOX
   The text box fills the white panel on every page (without this,
   non-product pages render it at the browser-default input width).
------------------------------------------------------------ */

.opus-search {
    width: 100%;
    position: relative;
}

.opus-search input {
    font-size: 16px;
    padding: 8px 15px;
    width: 100%;
    border: 1px solid #C7C7CE;
    border-radius: 5px;
    color: #535353;
    font-weight: 500;
    padding-left: 42px;
}

.opus-search input::placeholder {
    color: #C7C7CE;
    opacity: 1; /* Firefox */
}

.opus-search:focus {
    color: #535353;
}

.opus-search::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/></svg>") no-repeat center;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/></svg>") no-repeat center;
    pointer-events: none;
    opacity: 0.6;
}

/* ------------------------------------------------------------
   HEADER MENU BUTTON
   The MENU nav renders at the top of the dark bar (center ~22px in an
   83px bar); this nudges it down so it centers with the bar + logo.
------------------------------------------------------------ */

#nav-menu {
    margin-top: 19px;
}

/* ------------------------------------------------------------
   NAV-REVERSE PAGES (Project Gallery, Blog)
   Those pages add a nav-reverse body class whose custom CSS turns the
   logo and search icon grey — but the header bar still renders dark,
   leaving them grey-on-dark. Force the standard white treatment.
------------------------------------------------------------ */

body.breakdance.nav-reverse .bde-icon-34-205 .bde-icon-icon.breakdance-icon-atom svg:first-child {
    fill: #fff !important;
}

body.nav-reverse #nav-white-logo img {
    filter: invert(0%) !important;
}

body.nav-reverse #nav-search .breakdance-menu-toggle__custom-open-icon {
    filter: invert(0%) !important;
}