/** Global layout contract. Based on the Projects content viewport rules.
 * 1200–1600: 1vw unit; 1601–2199: 16px; 2200–2560: 18px;
 * 2561+: 0.703125vw. Content max-width is 100 units, with 2% gutters.
 * Inner banners follow Products: 34.375 units tall, Lora title at 3 units.
 */
:root {
    --site-unit: 16px;
    --site-content-max: calc(100 * var(--site-unit));
    --site-banner-unit: 16px;
    --mh-container: var(--site-content-max);
}
@media (min-width:1025px) and (max-width:1199px) {
    :root { --site-unit: 12px; }
}
@media (min-width:1200px) and (max-width:1600px) {
    :root { --site-unit: 1vw; }
}
@media (min-width:2200px) and (max-width:2560px) {
    :root { --site-unit: 18px; --site-banner-unit: 18px; }
}
@media (min-width:2561px) {
    :root { --site-unit: .703125vw; --site-banner-unit: .703125vw; }
}
@media (min-width:1025px) {
    /* The homepage, menu, dropdowns, footer and dialogs use rem dimensions. */
    html { font-size: var(--site-unit); }
    body main:not(.mh-home) { font-size: var(--site-unit); }
    body :is(main, .mh-header, .mh-footer) :is(.container, .mh-container, .mh-wide, .weiyi-about__container, .weiyi-solutions__container) {
        width: 96%;
        max-width: var(--site-content-max);
        margin-inline: auto;
    }
    body main .container .container { width: 100%; }
}
@media (min-width:2200px) {
    body { font-size: var(--site-unit); }
}
/* WordPress's admin toolbar belongs to core and retains its physical height. */
.admin-bar .mh-header-home,
.admin-bar .mh-header.mh-scrolled { top: 32px; }
@media (max-width:782px) {
    .admin-bar .mh-header-home,
    .admin-bar .mh-header.mh-scrolled { top: 0; }
}
@media (max-width:1335px) { :root { --site-banner-unit: 14px; } }
@media (max-width:680px) { :root { --site-banner-unit: 12px; } }

/* Dedicated classes keep legacy banner overrides out of this component. */
body main .site-inner-banner {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: calc(34.375 * var(--site-banner-unit));
    margin: 0;
    padding: 100px 0 48px;
    border-radius: 0;
    background: #251f1b;
    color: #fff;
    text-align: center;
}
body main .site-inner-banner__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    overflow: hidden;
}
body main .site-inner-banner__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}
body main .site-inner-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / 38%);
    pointer-events: none;
}
body main .site-inner-banner__content {
    width: 96%;
    max-width: var(--site-content-max);
    margin-inline: auto;
    text-shadow: 0 2px 12px #0009;
}
body main .site-inner-banner__title {
    position: static;
    margin: 0;
    padding: 0;
    color: #fff;
    font: 500 calc(3 * var(--site-banner-unit))/1.25 Lora, Georgia, serif;
    text-transform: uppercase;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}
body main .site-breadcrumb { margin-top: calc(1 * var(--site-banner-unit)); }
body main .site-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .45em 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    font: 400 calc(1.125 * var(--site-banner-unit))/1.5 'Google Sans Flex', Arial, sans-serif;
}
body main .site-breadcrumb li { display: inline; max-width: 100%; font: inherit; }
body main .site-breadcrumb li + li::before {
    content: '›';
    display: inline-block;
    margin-inline: .75em;
    color: #f4ca8c;
}
body main .site-breadcrumb :is(a, span) {
    color: inherit;
    font: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
}
body main .site-breadcrumb a:is(:hover, :focus-visible) {
    background-image: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    text-shadow: none;
}
body main .site-breadcrumb a:focus-visible { outline: 2px solid #f4ca8c; outline-offset: 4px; }
@media (max-width:680px) {
    body main .site-inner-banner { min-height: 336px; padding: 88px 0 36px; }
    body main .site-inner-banner__content { width: calc(100% - 36px); }
    body main .site-inner-banner__title { font-size: clamp(26px, 7vw, 36px); }
    body main .site-breadcrumb ol { font-size: 12px; }
    body main .site-breadcrumb li + li::before { margin-inline: .5em; }
}

/* Shared gradient buttons: black hover surface with gradient lettering. */
body :is(
    .mh-button:not(.mh-quote-button, .mh-button-outline, #mh-search .mh-button, .mh-mobile-utilities .mh-button),
    .moyu-block .btn,
    .site-showcase-content .btn,
    .weiyi-solutions__button,
    .mh-inquiry input[type=submit],
    .mh-footer input[type=submit],
    .mh-dialog input[type=submit],
    .moyu-block input[type=submit],
    #contact-inquiry-form input[type=submit]
):is(:hover, :focus-visible) {
    background-color: #000 !important;
    background-image: var(--mh-gradient, linear-gradient(90deg, #c48337, #f4ca8c)), linear-gradient(#000, #000) !important;
    background-clip: text, padding-box !important;
    -webkit-background-clip: text, padding-box !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}