/* Shared scenic header for taxonomy search, detail and tree workspaces. */
#main.taxonomy-unified-hero-page .page-shell {
    margin: 0 auto !important;
    padding-bottom: 28px;
}

/* Keep the workspace below the scenic header on the same 1360px grid as the
   other taxonomy search pages. tax-detail previously added its own horizontal
   padding on top of the max width, making its content frame visibly wider. */
@media only screen and (min-width: 769px) {
    #main.taxonomy-unified-hero-page.taxonomy-search-hero-page .section-block {
        width: min(1360px, calc(100% - 36px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
}

#main.taxonomy-unified-hero-page .hero-wrap {
    position: relative;
    width: 100vw;
    max-width: none;
    min-height: 184px;
    margin: 0 calc(50% - 50vw);
    padding: 17px 24px 30px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #eaf5ff url("../img/taxonomy-tax-search-hero-wide.png") center bottom / cover no-repeat;
    box-shadow: none;
    box-sizing: border-box;
}

#main.taxonomy-unified-hero-page .hero-wrap::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(250, 253, 255, .64) 0%, rgba(250, 253, 255, .26) 54%, rgba(250, 253, 255, .04) 79%, transparent 100%);
    content: "";
    pointer-events: none;
}

#main.taxonomy-unified-hero-page .hero-center {
    position: relative;
    z-index: 1;
    width: min(1360px, calc(100% - 56px));
    max-width: none;
    margin: 0 auto;
    text-align: left;
}

#main.taxonomy-unified-hero-page .hero-center > .crumb-wrap {
    margin: 0 0 25px;
    padding: 0;
    color: #5c7892;
    font-size: 14px;
    line-height: 1.25;
}

#main.taxonomy-unified-hero-page .hero-center > .crumb-wrap .section {
    color: #386b96;
    font-weight: 600;
}

#main.taxonomy-unified-hero-page .hero-center > .crumb-wrap .active.section {
    color: #122130;
    font-weight: 600;
}

#main.taxonomy-unified-hero-page .hero-center > .crumb-wrap .divider.icon {
    color: #8aa6bd;
    opacity: 1;
}

#main.taxonomy-search-hero-page .hero-title {
    display: none;
}

#main.taxonomy-search-hero-page .hero-search,
#main.taxonomy-search-hero-page .search-box {
    width: 100%;
    max-width: 860px;
    margin: 0 0 0 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: left;
}

#main.taxonomy-search-hero-page .hero-search-row,
#main.taxonomy-search-hero-page .search-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

#main.taxonomy-search-hero-page .hero-search-row .search-input,
#main.taxonomy-search-hero-page .search-input-wrap {
    flex: 1 1 auto;
}

#main.taxonomy-search-hero-page .hero-search .ui.action.input {
    width: 100%;
}

#main.taxonomy-search-hero-page .hero-search-row .search-input,
#main.taxonomy-search-hero-page .search-input-wrap input,
#main.taxonomy-search-hero-page .hero-search input,
#main.taxonomy-search-hero-page .search-box input {
    min-width: 0;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #bed8ee !important;
    border-radius: 8px 0 0 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #213b56;
    font-size: 15px;
}

#main.taxonomy-search-hero-page .primary-search-btn,
#main.taxonomy-search-hero-page .reset-search-btn,
#main.taxonomy-search-hero-page .search-btn,
#main.taxonomy-search-hero-page .reset-btn,
#main.taxonomy-search-hero-page .hero-search .ui.action.input > .button {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 19px !important;
    border-radius: 0 8px 8px 0 !important;
    background: #276d9e !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
}

#main.taxonomy-search-hero-page .search-btn,
#main.taxonomy-search-hero-page .primary-search-btn {
    flex: 0 0 auto;
    width: auto !important;
    padding: 0 19px !important;
    border-radius: 0 8px 8px 0 !important;
    background: #276d9e !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
}

#main.taxonomy-search-hero-page .search-button-wrap {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

#main.taxonomy-search-hero-page .reset-search-btn,
#main.taxonomy-search-hero-page .reset-btn {
    flex: 0 0 auto;
    width: auto !important;
    margin-left: 10px !important;
    padding: 0 18px !important;
    border: 1px solid #d5e4ef !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #56718d !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
}

#main.taxonomy-search-hero-page .search-button-wrap .reset-btn {
    margin-left: 0 !important;
}

/* Keep helper copy readable on the light scenic artwork. Individual pages used
   white text when their search area had a dark fill, which no longer applies. */
#main.taxonomy-search-hero-page .search-tip,
#main.taxonomy-search-hero-page .related-row,
#main.taxonomy-search-hero-page .related-row .search-tip {
    color: #36536d;
    font-size: 14px;
    font-weight: 500;
}

#main.taxonomy-search-hero-page .search-tip {
    margin: 8px 0 0 6px;
    line-height: 1.5;
}

#main.taxonomy-search-hero-page .related-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 10px 0 0 6px;
}

#main.taxonomy-search-hero-page .related-row .search-tip {
    margin: 0 9px 0 0;
    font-weight: 600;
}

#main.taxonomy-search-hero-page .tag-label.ui.label {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #28689d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

#main.taxonomy-search-hero-page .tag-label.ui.label + .tag-label.ui.label::before {
    margin: 0 7px;
    color: #8da9bc;
    content: "|";
}

#main.taxonomy-search-hero-page .search-tip .example-search-link,
#main.taxonomy-search-hero-page .example-search-link {
    padding: 0;
    border: 0;
    border-bottom: 1px dashed rgba(40, 104, 157, .42);
    background: transparent;
    border-bottom-color: rgba(40, 104, 157, .42);
    color: #28689d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#main.taxonomy-search-hero-page .search-tip .example-search-link:hover,
#main.taxonomy-search-hero-page .search-tip .example-search-link:focus-visible,
#main.taxonomy-search-hero-page .example-search-link:hover,
#main.taxonomy-search-hero-page .example-search-link:focus-visible {
    border-bottom-color: #174f7e;
    color: #174f7e;
}

#main.taxonomy-search-hero-page .struct-search-hint,
#main.taxonomy-search-hero-page .search-error,
#main.taxonomy-search-hero-page .search-empty-hint {
    color: #9a4d35;
}

#main.taxonomy-tree-hero-page .hero-wrap {
    min-height: 194px;
    padding-bottom: 24px;
}

#main.taxonomy-tree-hero-page .hero-title {
    display: block;
    margin: 0 auto;
    color: #213b56;
    font-size: 1.55rem;
    font-weight: 700;
    text-align: center;
    transform: translate(-100px, -8px);
}

#main.taxonomy-tree-hero-page .hero-subtitle {
    max-width: 760px;
    margin: 6px auto 0;
    color: #526b82;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    transform: translate(-100px, -8px);
}

#main.taxonomy-tree-hero-page .hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    width: 100%;
    justify-content: center;
    transform: translate(-100px, -8px);
}

#main.taxonomy-tree-hero-page .hero-pill {
    padding: .55em .85em;
    border: 1px solid rgba(93, 139, 177, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .58);
    color: #294d6d;
    font-size: 13px;
    font-weight: 600;
}

/* Level Tree has two inputs: keep their hierarchy legible instead of letting
   the framework's fixed grid widths make them look like unrelated controls. */
#main.taxonomy-level-search-page .hero-search {
    max-width: 920px;
}

#main.taxonomy-level-search-page .hero-search > form > .fields {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0 !important;
}

#main.taxonomy-level-search-page .hero-search > form > .fields > .field {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main.taxonomy-level-search-page .hero-search > form > .fields > .field:nth-child(1) {
    flex: 1 1 auto;
}

#main.taxonomy-level-search-page .hero-search > form > .fields > .field:nth-child(2) {
    flex: 0 0 150px;
}

#main.taxonomy-level-search-page .hero-search > form > .fields input,
#main.taxonomy-level-search-page .hero-search > form > .fields .primary-search-btn,
#main.taxonomy-level-search-page .hero-search > form > .fields .reset-search-btn {
    border-radius: 8px !important;
}

#main.taxonomy-level-search-page .hero-search > form > .fields .primary-search-btn {
    min-width: 108px;
}

#main.taxonomy-level-search-page .hero-search > form > .fields .reset-search-btn {
    min-width: 96px;
    margin-left: 0 !important;
}

@media only screen and (max-width: 991px) {
    #main.taxonomy-unified-hero-page .hero-wrap {
        min-height: 170px;
        padding: 16px 16px 28px;
        background-position: 62% bottom;
    }

    #main.taxonomy-unified-hero-page .hero-wrap::before {
        background: linear-gradient(90deg, rgba(250, 253, 255, .82), rgba(250, 253, 255, .56) 66%, rgba(250, 253, 255, .1));
    }

    #main.taxonomy-unified-hero-page .hero-center {
        width: min(100%, 680px);
    }

    #main.taxonomy-tree-hero-page .hero-title,
    #main.taxonomy-tree-hero-page .hero-subtitle,
    #main.taxonomy-tree-hero-page .hero-meta {
        transform: none;
    }

}

@media only screen and (max-width: 640px) {
    #main.taxonomy-unified-hero-page .hero-wrap {
        min-height: 0;
        padding: 14px 16px 24px;
    }

    #main.taxonomy-search-hero-page .hero-search,
    #main.taxonomy-search-hero-page .search-box {
        max-width: none;
        margin-left: 0;
    }

    #main.taxonomy-search-hero-page .hero-search-row,
    #main.taxonomy-search-hero-page .search-row {
        flex-wrap: wrap;
    }

    #main.taxonomy-search-hero-page .hero-search-row .search-input,
    #main.taxonomy-search-hero-page .search-input-wrap {
        flex: 1 1 100%;
    }

    #main.taxonomy-level-search-page .hero-search > form > .fields {
        flex-wrap: wrap;
    }

    #main.taxonomy-level-search-page .hero-search > form > .fields > .field:nth-child(1),
    #main.taxonomy-level-search-page .hero-search > form > .fields > .field:nth-child(2) {
        flex: 1 1 100%;
    }
}