/* ==========================================================================
1. LAYOUT & STRUCTURE
========================================================================== */

.fhd-width {
    width: 100%;
    max-width: 1760px;
    margin: auto;
}

.slide-post {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 0px 0px;
}

.slide-post .poster {
    grid-area: 1 / 1 / 3 / 2;
    z-index: 1;
}

.slide-post .background {
    grid-area: 1 / 1 / 3 / 2;
    opacity: 0.1;
}

.slide-post .info {
    grid-area: 2 / 1 / 3 / 2;
}

/* ==========================================================================
2. HEADER & NAVIGATION
========================================================================== */

#mx-header {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #fff 0%, #fff 50%, #99e7ff 50%, #99e7ff 100%);
}

#main-menu br,
#footer-menu br,
.right-menu br {
    display: none;
}

#main-menu .main-l1 {
    position: relative;
}

#main-menu .main-l1.current {
    box-shadow: inset 0 -2px 0 rgb(var(--gold));
}

#main-menu .current #main-menu .main-sub-menu {
    display: block;
    bottom: auto !important;
}

#main-menu .main-sub-menu .shadow {
    box-shadow: none !important;
}

#main-menu .main-menu-item:not(:last-child) .main-l1::after {
    content: '';
    position: absolute;
    border-right: 1px solid #ffffff96;
    width: 100%;
    height: 50%;
    top: 25%;
    right: 0;
}

#footer-menu .icon {
    display: none;
}

/* ==========================================================================
　3. PAGE STRUCTURE & HEADINGS
========================================================================== */

.page-haeding h1 {
    letter-spacing: .075em;
}

.breadcrumb-item a,
.breadcrumb-item .breadcrumb-divider {
    color: rgb(var(--white));
}

#page h2 {
    margin-bottom: 1em;
    border-left: 5px solid rgb(var(--blue));
    font-family: var(--font-family-serif);
    line-height: 1.25;
    padding: .25em 0 .25em .75em;
}

#page h3 {
    margin-bottom: .5em;
}

h2.embed-title {
    border-left: 0 !important;
}

#mx-main .wp-block-heading:not(:first-of-type) {
    margin-top: 2em;
}

/* ==========================================================================
　4. SECTIONS & COMPONENTS
========================================================================== */

.top-section h2 {
    font-size: 1.2em !important;
    font-weight: 900 !important;
    color: #363106 !important;
    border-left: 0 !important;
    position: relative;
    padding: 1.5rem 1rem !important;
}

.top-section h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: '';
    background-image: repeating-linear-gradient(-45deg, #00000094, #00000094 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    backface-visibility: hidden;
}

.top-search {
    width: clamp(min(100%, 500px), 50vw, 500px);
}

.top-search form button {
    letter-spacing: .3em;
    padding: 0 2em;
}

.top-link-banner {
    display: flex;
    flex-wrap: wrap;
}

.top-link-banner>div {
    flex: 1 0 calc((100% - 1em) / 2);
}

/* ==========================================================================
　5. INTERACTIVE ELEMENTS
========================================================================== */

.link-box:hover {
    background-color: OKLCH(from var(--bg-color) calc(l - 0.02) c h) !important;
}

a.tab-header {
    border-bottom: 0 !important;
}

.tab-wrap {
    --space3: 1.45em;
}

.tab-heading {
    font-size: 1em !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
　6. CONTENT TYPES
========================================================================== */

.journal-cover {
    position: relative;
    --shadow: 5px 5px 15px -10px rgb(var(--black) / .4);
}

.journal-cover::after {
    content: '';
    position: absolute;
    background-image: linear-gradient(to right, #0000002b 0, #00000000 100%);
    width: 50px;
    height: 100%;
    right: -50px;
    clip-path: polygon(0 92%, 0% 100%, 45% 92%);
}

.event-post h3 {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.event-post .wp-block-table td {
    padding: 0 1em .5em 0;
    vertical-align: top;
}

/* ==========================================================================
　7. TABLES
========================================================================== */

.table-committees td.column-1 {
    width: 7em;
}

.table-committees td:has(strong) {
    padding-top: 1.5em;
}

.table-bordered th {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

.table-description {
    border-collapse: separate;
    border-spacing: 5px;
}
.table-description .column-1 {
    font-size: 95%;
    width: 120px;
    background-color: rgb(var(--light));
}

/* ==========================================================================
　8. BACKGROUNDS
========================================================================== */

.bg-logo {
    background: linear-gradient(to right, #fffffffa 0, #ffffffde 100%), url("../images/favicon.svg") center / contain no-repeat fixed;
}

.bg-heading {
    background: linear-gradient(to right, #ffffff 650px, #ffffff00 100%), url("../images/abstract_wave.webp") bottom right / cover no-repeat scroll;
}

/* ==========================================================================
　9. MEDIA QUERIES
========================================================================== */

@media (min-width: 560px) {}

@media (min-width: 1024px) {
    #main-menu .main-sub-menu {
        display: none;
        bottom: -100% !important;
    }

    #main-menu .main-sub-menu .shadow {
        box-shadow: var(--shadow) !important;
    }

    #main-menu br {
        display: inline;
    }

    .top-link-banner>div {
        flex: 1 0 calc((100% - 3em) / 4);
    }
}