/* ============================================================
   Calendar dropdown menu (EW2027)
   Layout: [ options ] [ weekday strip ] [ month 1 ] [ month 2 ]
   ============================================================ */

/* let the calendar dropdown size to its content instead of a fixed nav width,
   and anchor it to the left so it lines up under the logo rather than the button.
   The nav item is not at the far left (the logo is), so pull the panel left to
   align with the logo. Adjust the left value to match your nav's left padding. */
.nav-dropdown.calmenu {
    width: max-content;
    max-width: 96vw;
    left: 0;
    right: auto;
    transform: none;
    margin-left: -200px; /* pull left toward the logo; tune to align exactly */
    background: #1a1a1a; /* always dark, like the screenshots */
    border: 1px solid #2e2e2e;
}

.calmenu .nav-dropdown-link {
    color: #f5f5f5;
}

    .calmenu .nav-dropdown-link:hover {
        color: #ffffff;
    }

/* the dropdown container holds the nav links (Charts/Week/Month) then #MonthCal1 */
.calmenu {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 18px 22px;
    width: max-content;
    max-width: 96vw;
}

    /* left column: Charts / Week / Month links stack vertically */
    .calmenu .nav-dropdown-link {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* the injected calendar lives here; lay its children (Daily + #days + #Cal1 + #Cal2) in a row */
    .calmenu #MonthCal1 {
        display: flex;
        align-items: flex-start;
        gap: 22px;
        flex: 1;
    }

    .calmenu .overviewselect {
        font-weight: 700;
        color: #f5f5f5;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        align-self: stretch;
    }

/* ---------- weekday strip (#days) ---------- */
#days ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#days li {
    list-style: none;
    min-width: 78px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #2a2a2a;
    color: #f5f5f5;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease;
}

    #days li:hover {
        background: #3a3a3a;
    }

    #days li.today {
        outline: 2px solid var(--ew-color, #DDB785);
    }

#days .dayofweek {
    font-size: 13px;
    font-weight: 700;
    color: #f5f5f5;
}

#days .month {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #b0b0b0;
    text-transform: uppercase;
}

#days .day {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0 6px;
    color: #ffffff;
}

#days .allbmo, #days .allamc {
    font-size: 11px;
    color: #b0b0b0;
    white-space: nowrap;
}

/* ---------- month calendars (#Cal1, #Cal2) ---------- */
#Cal1, #Cal2 {
    min-width: 190px;
}

    #Cal1 h1, #Cal2 h1 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 8px;
        color: #f5f5f5;
    }

    #Cal1 .weekhead, #Cal2 .weekhead,
    #Cal1 .week, #Cal2 .week {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* Mon-Fri */
        gap: 2px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        #Cal1 .weekhead li, #Cal2 .weekhead li {
            list-style: none;
            font-size: 11px;
            font-weight: 700;
            color: #b0b0b0;
            text-align: center;
            padding: 2px 0;
        }

        #Cal1 .week li, #Cal2 .week li {
            list-style: none;
            font-size: 12px;
            text-align: center;
            padding: 4px 0;
            border-radius: 5px;
            color: #f5f5f5;
        }

            #Cal1 .week li.past, #Cal2 .week li.past {
                color: #777;
                opacity: 0.6;
            }

            #Cal1 .week li.upcoming, #Cal2 .week li.upcoming,
            #Cal1 .week li.viewing, #Cal2 .week li.viewing {
                cursor: pointer;
            }

                #Cal1 .week li.upcoming:hover, #Cal2 .week li.upcoming:hover {
                    background: rgba(221,183,133,0.20);
                }

            #Cal1 .week li.viewing, #Cal2 .week li.viewing {
                background: rgba(221,183,133,0.18);
                font-weight: 700;
            }

            #Cal1 .week li.today, #Cal2 .week li.today {
                outline: 1.5px solid var(--ew-color, #DDB785);
            }

            #Cal1 .week li a, #Cal2 .week li a {
                color: inherit;
                text-decoration: none;
                display: block;
            }

/* ============================================================
   Responsive: tablet / mobile (hamburger) — reflow to fit narrow menu
   ============================================================ */

/* medium: allow wrapping, drop the logo-alignment offset */
@media (max-width: 1200px) {
    .nav-dropdown.calmenu {
        margin-left: 0;
        max-width: 100vw;
    }

    .calmenu {
        flex-wrap: wrap;
        max-width: 100%;
    }

        .calmenu #MonthCal1 {
            flex-wrap: wrap;
        }
}

/* mobile / hamburger: the dropdown is inside the stacked nav menu.
   Stack the calendar sections vertically and let them fill the width. */
@media (max-width: 860px) {
    .nav-dropdown.calmenu {
        position: static; /* flow inside the open hamburger menu */
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        border: none;
        background: transparent; /* inherit the open menu's panel */
        padding: 0;
    }

    .calmenu {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 8px 4px 16px;
    }

        /* Charts/Week/Month become a horizontal row of chips at the top */
        .calmenu > .nav-dropdown-link {
            width: 100%;
        }

        .calmenu #MonthCal1 {
            flex-direction: column;
            gap: 16px;
            width: 100%;
        }
        /* hide the vertical "Daily" label on mobile — no room for it */
        .calmenu .overviewselect {
            display: none;
        }

    /* week strip: let the day cards wrap across the width instead of one long row */
    #days ul {
        flex-wrap: wrap;
        gap: 6px;
    }

    #days li {
        flex: 1 1 90px;
        min-width: 90px;
    }

    /* months: full width, side by side if they fit, else stacked */
    #Cal1, #Cal2 {
        min-width: 0;
        width: 100%;
    }

        #Cal1 .week li, #Cal2 .week li {
            padding: 8px 0;
        }
    /* bigger tap targets */
}

/* very narrow: force the two months to stack */
@media (max-width: 520px) {
    #days li {
        flex: 1 1 72px;
        min-width: 72px;
    }

    #days .day {
        font-size: 26px;
    }
}