/* Desktop mega menus (Meal Plans, Tools) and the Resources dropdown.
   Wide panels are anchored to the header pill, so their edges always line up with it and they can
   never run off-screen. Opens on hover, keyboard focus, or a click/tap (.is-open). */

#nav-container { position: relative; }

.mm-item { position: static; }
.mm-item--rel { position: relative; }

/* --- Panel shell ------------------------------------------------------------------------------ */
.mm-panel {
    position: absolute;
    top: 100%;
    z-index: 60;
    padding-top: 12px;              /* invisible bridge so the pointer can travel from button to panel */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mm-panel--wide { left: 0; right: 0; }
/* Invisible bridge over the header's bottom padding, so the pointer can go from the button down to the
   panel without the menu closing on the way. */
.mm-panel--wide::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
.mm-panel--sm { left: 50%; width: 400px; margin-left: -200px; }

.mm-item:hover > .mm-panel,
.mm-item:focus-within > .mm-panel,
.mm-item.is-open > .mm-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

.mm-card {
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #e3eee9;
    border-radius: 24px;
    box-shadow: 0 32px 70px -30px rgba(16, 68, 68, .38), 0 10px 26px -14px rgba(16, 68, 68, .14);
}

/* Click/tap state and Escape-to-dismiss (WCAG 1.4.13) */
.mm-item.is-open > button { background-color: rgba(243, 244, 246, .5); }
.mm-item.is-open > button > i { transform: rotate(180deg); }
.mm-item.is-dismissed > .mm-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- Body: link columns + featured card --------------------------------------------------------- */
.mm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 28px;
    padding: 26px 26px 22px;
}
.mm-cols { display: grid; column-gap: 22px; align-content: start; }
.mm-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mm-col-title {
    margin: 0 0 8px;
    padding: 0 10px 10px;
    border-bottom: 1px solid #edf4f0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5f8378;
    white-space: nowrap;            /* one line, so every column's first link starts at the same height */
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.mm-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.mm-text { min-width: 0; display: flex; flex-direction: column; }
.mm-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #0f172a; transition: color .15s ease;
    overflow-wrap: anywhere; hyphens: auto; }   /* long words (German) break instead of running under the next column */
.mm-meta {
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #66807a;
    display: -webkit-box;            /* up to two lines, so translated descriptions are not cut off mid-word */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.mm-link:hover, .mm-link:focus-visible { background: #f2faf6; outline: none; }
.mm-link:hover .mm-ico, .mm-link:focus-visible .mm-ico { background: #10b981; color: #fff; transform: scale(1.06); }
.mm-link:hover .mm-name, .mm-link:focus-visible .mm-name { color: #047857; }
.mm-link:focus-visible { box-shadow: 0 0 0 2px #10b981; }

/* --- Featured card ------------------------------------------------------------------------------ */
.mm-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
    padding: 24px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(160deg, #052e24 0%, #064e3b 58%, #0b6b50 100%);
}
.mm-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(16rem 9rem at 0% -8%, rgba(52, 211, 153, .38), transparent 62%);
    pointer-events: none;
}
.mm-feature > * { position: relative; }
.mm-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d1fae5;
}
.mm-feature-title { margin-top: 14px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.mm-feature-text { margin: 8px 0 22px; font-size: 13px; line-height: 1.55; color: rgba(236, 253, 245, .78); }
.mm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    color: #053b2e;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.mm-cta:hover, .mm-cta:focus-visible { background: #ecfdf5; transform: translateY(-1px); outline: none; }
.mm-cta:focus-visible { box-shadow: 0 0 0 3px rgba(167, 243, 208, .7); }
.mm-feature-note { margin-top: 10px; text-align: center; font-size: 11px; color: rgba(209, 250, 229, .62); }

/* --- Footer strip ------------------------------------------------------------------------------- */
.mm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 26px;
    background: #f5faf8;
    border-top: 1px solid #e3eee9;
    font-size: 13px;
    color: #4d6b62;
}
.mm-foot-note { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.mm-foot-note i { color: #10b981; }
.mm-foot-links { display: flex; align-items: center; gap: 22px; }
.mm-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: #047857;
    text-decoration: none;
    transition: color .15s ease;
}
.mm-foot-link i { font-size: 10px; transition: transform .15s ease; }
.mm-foot-link:hover, .mm-foot-link:focus-visible { color: #064e3b; outline: none; }
.mm-foot-link:hover i, .mm-foot-link:focus-visible i { transform: translateX(3px); }
.mm-foot-link:focus-visible { text-decoration: underline; }

/* --- Small dropdown (Resources) ------------------------------------------------------------------ */
.mm-card--sm { padding: 10px; }
.mm-card--sm .mm-col-title { margin-bottom: 4px; }
.mm-card--sm .mm-link { padding: 10px; }
.mm-card--sm .mm-ico { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.mm-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5faf8;
    color: #4d6b62;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease;
}
.mm-banner b { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #047857; font-weight: 700; }
.mm-banner:hover, .mm-banner:focus-visible { background: #ebf6f1; outline: none; }

/* --- Narrower desktop widths --------------------------------------------------------------------- */
@media (max-width: 1179px) {
    .mm-body { grid-template-columns: minmax(0, 1fr) 236px; gap: 20px; padding: 20px 18px 18px; }
    .mm-cols { column-gap: 12px; }
    .mm-link { gap: 10px; padding: 7px 8px; }
    .mm-ico { width: 32px; height: 32px; font-size: 13px; }
    .mm-name { font-size: 13px; }
    .mm-col-title { font-size: 10.5px; letter-spacing: .08em; }
    .mm-feature { padding: 20px; }
    .mm-feature-title { font-size: 18px; }
    .mm-foot { padding: 12px 18px; }
    .mm-foot-links { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-panel, .mm-link, .mm-ico, .mm-cta, .mm-foot-link i { transition: none; }
    .mm-panel { transform: none; }
}

/* The header styles every link to /create-meal-plan as the green "Create Plan" key
   (design-refinement.css, ID-level selectors). The menu button is a white key on the dark card instead. */
#main-nav #nav-container .mm-panel a.mm-cta {
    background: #fff !important;
    color: #053b2e !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 #8cc7b0 !important;
    letter-spacing: 0 !important;
    filter: none;
    transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease !important;
}
#main-nav #nav-container .mm-panel a.mm-cta:hover,
#main-nav #nav-container .mm-panel a.mm-cta:focus-visible { background: #ecfdf5 !important; filter: none; transform: none; }
#main-nav #nav-container .mm-panel a.mm-cta:active { transform: translateY(4px); box-shadow: none !important; }