/* =============================================
   Dropdown Button — frontend + editor styles
   ============================================= */

/*
   Layout goals:
   - The parent button owns the layout width/height.
   - The open menu pops out over the page instead of making the parent cell taller/wider.
   - Child buttons size to their own text.
   - The menu has a hover bridge, so it does not collapse when moving from the parent to the first child.
   - Button text is vertically centered with flexbox, not line-height hacks.
   - TinyMCE/wpautop paragraph wrappers do not create mystery spacing.
*/

.shrs-dropdown-button {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin: 0 10px 20px 0;
    padding: 0;
    vertical-align: top;
    line-height: 1;
    overflow: visible;
}

/* WordPress/TinyMCE/Elementor can sometimes wrap the internal button or links
   in <p> tags. Kill those layout boxes so they cannot add top/bottom space. */
.shrs-dropdown-button > p,
.shrs-dropdown-menu > p {
    display: inline-flex !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.shrs-dropdown-button > p:empty,
.shrs-dropdown-menu > p:empty,
.shrs-dropdown-button br,
.shrs-dropdown-menu br {
    display: none !important;
}

/* If the entire dropdown component is sitting inside an auto-generated
   paragraph, remove the paragraph spacing without touching normal text. */
.entry-content p:has(.shrs-dropdown-button),
.elementor-widget-container p:has(.shrs-dropdown-button),
.elementor-widget-text-editor p:has(.shrs-dropdown-button),
.mce-content-body p:has(.shrs-dropdown-button),
body.mce-content-body p:has(.shrs-dropdown-button) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
}

.shrs-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 0;
    border-radius: 0;
    appearance: none;
    cursor: pointer;
    font-family: "Roboto", Sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.shrs-dropdown-toggle.royal {
    background-color: #003594;
    color: #ffffff;
}

.shrs-dropdown-toggle.royal:hover,
.shrs-dropdown-button.is-open .shrs-dropdown-toggle.royal {
    background-color: #ffb81c;
    color: #003594;
}

.shrs-dropdown-toggle.gold {
    background-color: #ffb81c;
    color: #003594;
}

.shrs-dropdown-toggle.gold:hover,
.shrs-dropdown-button.is-open .shrs-dropdown-toggle.gold {
    background-color: #e7f3fd;
    color: #003594;
}

.shrs-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.2s ease;
}

.shrs-dropdown-button.is-open .shrs-dropdown-icon {
    transform: rotate(180deg);
}

.shrs-dropdown-menu {
    position: absolute;

    /*
       IMPORTANT:
       Do not use top: calc(100% + 5px).
       That creates a dead hover gap between the parent and child buttons.
       Instead, top: 100% keeps the menu touching the parent, and padding-top
       creates a visual gap that is still part of the hoverable menu box.
    */
    top: 100%;
    left: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    width: max-content;
    min-width: 0;
    max-width: min(calc(100vw - 32px), 1000px);

    padding: 5px 0 0;
    margin: 0;
    line-height: 1;
    box-shadow: none;
}

.shrs-dropdown-menu[hidden] {
    display: none !important;
}

.shrs-dropdown-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    max-width: min(calc(100vw - 32px), 1000px);
    min-height: 40px;
    padding: 0 17px;
    border-top: 0;
    background-color: #003594;
    color: #ffffff !important;
    font-family: "Roboto", Sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.shrs-dropdown-item:hover,
.shrs-dropdown-item:focus {
    background-color: #003594;
    color: #ffb81c !important;
}

.shrs-dropdown-item:hover *,
.shrs-dropdown-item:focus * {
    color: #ffb81c !important;
}

.shrs-dropdown-item:focus-visible,
.shrs-dropdown-toggle:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

@supports not selector(:focus-visible) {
    .shrs-dropdown-item:focus,
    .shrs-dropdown-toggle:focus {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shrs-dropdown-icon {
        transition: none;
    }
}

@media (forced-colors: active) {
    .shrs-dropdown-toggle,
    .shrs-dropdown-item {
        border: 1px solid ButtonText;
        forced-color-adjust: auto;
    }

    .shrs-dropdown-item:focus-visible,
    .shrs-dropdown-toggle:focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Touch support comes from JS. Keep the menu absolutely positioned on touch,
   too, so opening the menu does not create a taller layout cell or push content. */
@media (hover: none), (pointer: coarse) {
    .shrs-dropdown-toggle,
    .shrs-dropdown-item {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .shrs-dropdown-button,
    .shrs-dropdown-toggle,
    .shrs-dropdown-menu,
    .shrs-dropdown-item {
        max-width: calc(100vw - 32px);
    }

    .shrs-dropdown-toggle,
    .shrs-dropdown-item {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .shrs-dropdown-toggle {
        padding: 10px 17px !important;
    }

    .shrs-dropdown-item {
        padding: 10px 17px;
    }
}

/* TinyMCE visual preview
   - shows the dropdown menu without needing frontend JS
   - keeps multiple dropdowns aligned side-by-side
   - prevents surrounding editor/list styles from stretching the child buttons */
.mce-content-body .shrs-dropdown-button,
body.mce-content-body .shrs-dropdown-button {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin: 0 16px 18px 0;
    padding: 0;
    vertical-align: top;
    line-height: 1;
    cursor: pointer;
}

.mce-content-body .shrs-dropdown-button .shrs-dropdown-menu,
body.mce-content-body .shrs-dropdown-button .shrs-dropdown-menu {
    position: static;
    z-index: auto;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    gap: 5px;
    padding: 0;
    margin-top: 5px;
    box-shadow: none;
}

.mce-content-body .shrs-dropdown-button .shrs-dropdown-menu[hidden],
body.mce-content-body .shrs-dropdown-button .shrs-dropdown-menu[hidden] {
    display: flex !important;
}

.mce-content-body .shrs-dropdown-button .shrs-dropdown-item,
body.mce-content-body .shrs-dropdown-button .shrs-dropdown-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.mce-content-body .shrs-dropdown-button .shrs-dropdown-toggle,
body.mce-content-body .shrs-dropdown-button .shrs-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    cursor: pointer;
}

/* If a dropdown is accidentally inserted while the cursor is inside an empty
   list item, hide the editor-only bullet so the preview does not look broken. */
.mce-content-body li:has(> .shrs-dropdown-button),
body.mce-content-body li:has(> .shrs-dropdown-button) {
    list-style: none;
}