/*!
 * Sustainable Cities Co. — Mega Menu Styles
 * Version: 1.0.0 — 2026-05-12
 */
.sc-megamenu { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0 12px; }
.sc-mm-trigger { font: inherit; cursor: pointer; background: transparent; color: #DFEDC8; border: 1px solid rgba(186,213,50,.25); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; transition: background .2s, border-color .2s, color .2s; }
.sc-mm-trigger:hover, .sc-megamenu.is-open .sc-mm-trigger { background: rgba(186,213,50,.12); border-color: #BAD532; color: #BAD532; }
.sc-mm-trigger:focus-visible { outline: 2px solid #E3E41A; outline-offset: 2px; }
.sc-mm-caret { transition: transform .2s; }
.sc-megamenu.is-open .sc-mm-caret { transform: rotate(180deg); }
.sc-mm-bloglink { color: #DFEDC8; text-decoration: none; font-weight: 600; font-size: .92rem; padding: 8px 10px; border-radius: 8px; transition: color .2s, background .2s; }
.sc-mm-bloglink:hover { color: #BAD532; background: rgba(186,213,50,.08); }
.sc-mm-panel { position: absolute; top: calc(100% + 12px); inset-inline-start: 50%; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; width: min(900px, 95vw); background: #0C2817; border: 1.5px solid rgba(186,213,50,.25); border-radius: 14px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(186,213,50,.05); z-index: 9000; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
[dir="rtl"] .sc-mm-panel { transform: translateX(50%) translateY(-6px); }
.sc-megamenu.is-open .sc-mm-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear 0s; }
[dir="rtl"] .sc-megamenu.is-open .sc-mm-panel { transform: translateX(50%) translateY(0); }
.sc-mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sc-mm-col { border-top: 3px solid var(--col-accent, #BAD532); padding-top: 14px; }
.sc-mm-col h3 { margin: 0 0 4px; font-size: 1rem; color: var(--col-accent, #BAD532); font-weight: 700; }
.sc-mm-sub { margin: 0 0 12px; font-size: .82rem; color: rgba(223,237,200,.65); }
.sc-mm-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-mm-col li a { display: block; padding: 7px 8px; font-size: .88rem; color: #DFEDC8; text-decoration: none; border-radius: 6px; transition: background .15s, color .15s, transform .15s; }
.sc-mm-col li a:hover { background: rgba(186,213,50,.08); color: #BAD532; transform: translateX(-3px); }
[dir="rtl"] .sc-mm-col li a:hover { transform: translateX(3px); }
.sc-mm-allcta { margin-top: 6px; color: var(--col-accent, #BAD532) !important; font-weight: 700; border-top: 1px dashed rgba(223,237,200,.15); padding-top: 10px !important; }
@media (max-width: 768px) { .sc-megamenu { display: none; } }
@media (max-width: 1100px) and (min-width: 769px) { .sc-mm-panel { width: min(720px, 92vw); padding: 20px; } .sc-mm-grid { gap: 18px; } }