/* Navigation dropdown styles - EXACTLY matches featuredMenu dropdownStyles */
/* Breakpoints: SMALL = 640px, MEDIUM = 960px */
/* Colors: BLUE100 = #E6FBFF, BLUE900 = #002845, BLUE700 = #004484, WHITE = #FFFFFF */
/* zIndexHeader = 15, VIEW_PORT_MAX_WIDTH = 114rem */

.mjog-dropdown {
    display: none; /* Hidden by default, shown via JavaScript */
    position: fixed;
    box-sizing: border-box;
    min-height: 25rem;
    width: 100vw;
    left: 0;
    background-color: white;
    border-top: 0.5px solid rgb(229, 231, 235);
    box-shadow: 0px 2rem 2rem rgb(0 0 0 / 10%);
    z-index: 15;
    flex-direction: column; /* Use flex layout when displayed */
    overflow: visible; /* Allow content to extend beyond dropdown bounds */
}

/* Ensure menu container can position dropdowns */
.css-174qhie {
    position: relative;
}

.mjog-dropdown-inner {
    display: flex;
    min-height: 25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 114rem;
    margin: 0 auto;
    position: relative;
    overflow: visible; /* Allow content to extend beyond inner container bounds */
}

/* FEATURED_BOX - matches dropdownStyles.FEATURED_BOX exactly */
/* Left blue section extends to left edge, takes 40% of container */
.mjog-dropdown-featured-box {
    box-sizing: border-box;
    flex: 0 0 40%; /* 40% of inner container */
    min-width: 40%;
    padding: 5rem 8rem 5rem 0; /* 0 left padding to start text from further left, aligned with logo */
    background-color: #E6FBFF; /* BLUE100 = BACKGROUND_LIGHT */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Align content to the left */
    position: relative;
    overflow: visible; /* Allow content to extend beyond box boundaries */
}

/* Ensure content wrapper takes full width and aligns left */
.mjog-dropdown-featured-box > div {
    width: 100%;
    text-align: left;
}

/* Extension element for featured box background (created by JavaScript) */
.mjog-featured-extension {
    position: fixed;
    background-color: #E6FBFF;
    z-index: 14;
    pointer-events: none;
}

/* On large screens, adjust the extension */
@media (min-width: 1824px) {
    .mjog-dropdown-featured-box {
        flex: 0 0 calc(114rem * 0.4); /* 40% of 114rem max-width */
        min-width: calc(114rem * 0.4);
    }
}

/* DROPDOWN_NAVIGATION - matches dropdownStyles.DROPDOWN_NAVIGATION exactly */
.mjog-dropdown-navigation {
    background-color: #E6FBFF; /* BACKGROUND_LIGHT on mobile */
    flex-direction: column;
    padding: 2rem 3rem;
    flex: 1;
    display: flex;
    min-width: 0; /* Allow flex item to shrink */
}

@media (min-width: 640px) {
    .mjog-dropdown-navigation {
        padding: 3rem 5rem;
        flex-direction: row;
        background-color: #fff; /* WHITE on desktop (SMALL breakpoint) */
    }
}

/* NAVIGATION - matches dropdownStyles.NAVIGATION exactly */
.mjog-dropdown-nav-section {
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .mjog-dropdown-nav-section {
        margin-right: 8rem; /* SMALL breakpoint */
    }
}

@media (min-width: 960px) {
    .mjog-dropdown-nav-section {
        margin-right: 20rem; /* MEDIUM breakpoint */
    }
}

/* NAVIGATION_LIST - matches dropdownStyles.NAVIGATION_LIST exactly */
.mjog-dropdown-nav-list {
    list-style: none;
    padding-top: 1rem;
    margin: 0;
    word-wrap: normal;
}

/* Intro component styles - matches Intro component */
.mjog-dropdown-title {
    font-weight: 700;
    font-size: 2.6rem; /* Larger size to match live version */
    margin-bottom: 1rem;
    color: #002845; /* BLUE900 */
    font-family: family_bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.3;
    text-align: left;
    padding-left: 6rem; /* Add padding to align with logo start, allowing text to extend left */
    margin-left: -6rem; /* Increased negative margin to shift text further left, aligned with logo */
}

.mjog-dropdown-description {
    color: #002845; /* BLUE900 */
    font-size: 1.8rem; /* Larger body text size to match main website */
    line-height: 1.5;
    font-family: family_regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
    margin-bottom: 0;
    padding-left: 6rem; /* Add padding to align with title, allowing text to extend left */
    margin-left: -6rem; /* Increased negative margin to shift text further left, aligned with logo */
}

/* Featured link - matches Link component with linkPlacement="featuredLink" */
.mjog-dropdown-featured-link {
    color: #004484; /* BLUE700 */
    text-decoration: none;
    font-weight: 400; /* NOT bold - normal weight */
    font-size: 1.6rem; /* One size smaller than title (2.6rem -> 1.6rem) */
    font-family: family_regular, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Regular font, not bold */
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #004484;
    transition: all 0.15s ease-in-out;
}

.mjog-dropdown-featured-link:hover {
    color: #0173BC; /* BLUE600 */
    border-bottom-color: #0173BC;
}

/* Header variant="h5" - matches Header component */
.mjog-dropdown-section-title {
    font-weight: 700;
    font-size: 1.6rem; /* fontSize.H5 */
    margin-bottom: 1rem;
    color: #002845; /* BLUE900 */
    font-family: family_bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.3;
    text-align: left;
}

/* SecondaryLink - matches SecondaryLink component exactly */
.mjog-dropdown-link {
    color: #002845; /* BLUE900 = NAVIGATION_LINK */
    text-decoration: none;
    font-size: 2rem; /* fontSize.DEFAULT */
    font-family: family_regular, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Changed from family_medium to family_regular - NOT bold */
    font-weight: 400; /* Explicitly set to normal weight, not bold */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0.8rem 0; /* Reduced from 2rem to 0.8rem for shorter spacing between options */
    border-radius: 5px;
    transition: color 0.15s ease-in-out;
    padding-left: 2rem; /* Mobile padding */
}

.mjog-dropdown-link:hover {
    color: #004484; /* BLUE700 = NAVIGATION_LINK_ACTIVE */
}

.mjog-dropdown-link:focus-visible {
    outline: 2px solid #002845; /* NAVIGATION_LINK */
}

@media (min-width: 960px) {
    .mjog-dropdown-link {
        font-size: 1.8rem; /* fontSize.MEDIUM */
        padding-left: 0; /* Remove mobile padding on desktop */
        padding: 0.8rem 0; /* Keep reduced spacing on desktop too */
    }
}