/* ==========================================================================
   GBM Studies — Prototype 01 — mega menu (shared by every page with the site nav)
   Courses · How it works ▾ · For teams · About ▾ · Contact. The two ▾ items
   open a dark panel under the floating nav; the rest are plain links. Phone: the full-screen
   menu gets the same groups as accordions. Built by js/megamenu.js.
   ========================================================================== */

/* ---------- Top-level items ---------- */
.nav__links { position: relative; align-items: center; }
.nav__trigger { display: inline-flex; align-items: center; gap: .42rem; padding: .35rem 0; font: inherit; font-size: .9rem; color: inherit; background: none; opacity: .85; cursor: pointer; transition: opacity .3s; }
.nav__trigger i { font-size: .56rem; transition: transform .4s var(--ease-out); }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"], .nav__trigger.is-current, .nav__links a[aria-current="page"] { opacity: 1; }
.nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__trigger:focus-visible, .nav__links a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 4px; }
.nav__ink { position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; border-radius: 2px; background: var(--grad-gold); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s; }
.nav__ink.is-on { opacity: 1; }

/* ---------- Panel shell ---------- */
.mega { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 2; color: var(--ivory-50); pointer-events: none; opacity: 0; transform: translate3d(0, -10px, 0) scale(.985); transform-origin: 50% 0; transition: opacity .3s var(--ease-out), transform .5s var(--ease-out); }
.mega[hidden] { display: none; }
.mega.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge from nav to panel */
.mega__box { max-height: calc(100vh - 116px); max-height: calc(100svh - 116px); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; border-radius: 28px; background: radial-gradient(130% 150% at 0% 0%, #13432f 0%, #071f16 48%, #04140d 100%); box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(230,211,166,.16); scrollbar-width: thin; scrollbar-color: rgba(230,211,166,.2) transparent; }
.mega__panel[hidden] { display: none; }
.mega__panel { animation: megaIn .45s var(--ease-out); }
@keyframes megaIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.mega-scrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(3,17,11,.38); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); }
.mega-scrim.is-on { opacity: 1; pointer-events: auto; }
.mg-k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.mega :is(a, button):focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }

/* ---------- How it works + About ---------- */
.mg-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: stretch; }
.mg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.mg-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .3rem .9rem; align-items: start; align-content: start; padding: 1rem; border-radius: 16px; transition: background-color .25s, box-shadow .25s; }
.mg-tile > i { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: .9rem; color: var(--gold-300); background: rgba(214,185,124,.1); transition: background-color .3s, color .3s, transform .4s var(--ease-out); }
.mg-tile b { font-weight: 500; font-size: .98rem; }
.mg-tile span { font-size: .8rem; line-height: 1.45; color: rgba(246,238,219,.58); }
.mg-tile:hover, .mg-tile[aria-current="page"] { background: rgba(246,238,219,.06); box-shadow: inset 0 0 0 1px rgba(230,211,166,.14); }
.mg-tile:hover > i { color: var(--emerald-950); background: var(--grad-gold); transform: rotate(-6deg); }
.mg-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 262px; padding: 1.3rem; border-radius: 20px; overflow: hidden; color: var(--ivory-50); background: radial-gradient(120% 100% at 100% 0%, rgba(214,185,124,.35), transparent 55%), linear-gradient(160deg, #1b5a40, #061c14 75%); box-shadow: inset 0 0 0 1px rgba(214,185,124,.3); }
.mg-feature__num { position: absolute; top: .2rem; right: 1rem; font-family: var(--font-display); font-size: 5.6rem; line-height: 1; color: rgba(230,211,166,.85); }
.mg-feature__num small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(230,211,166,.7); }
.mg-feature b { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.1; }
.mg-feature p { margin-top: .4rem; font-size: .84rem; color: rgba(246,238,219,.7); }
.mg-feature__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .84rem; font-weight: 600; color: var(--gold-300); }
.mg-feature:hover .mg-feature__go i { transform: translateX(3px); }
.mg-feature__go i { font-size: .7rem; transition: transform .3s var(--ease-out); }
.mg-contact { display: grid; align-content: start; gap: .5rem; padding: 1.2rem; border-radius: 20px; background: rgba(246,238,219,.04); box-shadow: inset 0 0 0 1px rgba(230,211,166,.12); }
.mg-contact > b { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.mg-contact > p { font-size: .82rem; color: rgba(246,238,219,.6); }
.mg-contact a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 12px; font-size: .88rem; transition: background-color .25s; }
.mg-contact a:hover { background: rgba(246,238,219,.06); }
.mg-contact a i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; color: var(--gold-300); background: rgba(214,185,124,.1); }
.mg-contact a .fa-whatsapp { color: #fff; background: #1f8f55; }
.mg-contact small { margin-top: .2rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,211,166,.55); }

@media (max-width: 1240px) { .mega__box { padding: 1.2rem; } }

/* ---------- Phone / tablet: the full-screen menu ---------- */
.menu.menu--mega { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; padding-top: 6.4rem; }
.menu .mm { display: grid; gap: .1rem; }
.menu .mm__toggle, .menu .mm__link { display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: .35rem 0; font-family: var(--font-display); font-size: clamp(2.1rem, 8.5vw, 3.6rem); line-height: 1.1; text-align: left; color: var(--ivory-50); background: none; }
.menu .mm__toggle > i { margin-left: auto; align-self: center; font-size: 1rem; color: var(--gold-300); transition: transform .4s var(--ease-out); }
.menu .mm__toggle[aria-expanded="true"] > i { transform: rotate(45deg); }
.menu .mm small { font-family: var(--font-mono); font-size: .72rem; color: var(--gold-400); }
.menu .mm__sub { display: grid; gap: .1rem; padding: .3rem 0 1rem 2.4rem; }
.menu .mm__sub[hidden] { display: none; }
.menu .mm__sub a { display: flex; align-items: center; gap: .85rem; padding: .5rem 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.3; color: rgba(246,238,219,.85); }
.menu .mm__sub a > i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: .82rem; color: var(--gold-300); background: rgba(214,185,124,.1); }
.menu .mm__sub img { flex: none; width: 48px; height: 36px; object-fit: cover; border-radius: 8px; }
.menu .mm__sub a span { flex: 1; min-width: 0; }
.menu .mm__sub a b { margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--gold-300); }
.menu .mm__sub .mm__all { margin-top: .3rem; font-weight: 600; color: var(--gold-300); }
.menu .mm__me { display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; padding: .9rem 1rem; border-radius: 16px; font-family: var(--font-sans); font-size: .95rem; color: var(--ivory-50); background: rgba(246,238,219,.06); box-shadow: inset 0 0 0 1px rgba(230,211,166,.16); }
.menu .mm__me i:last-child { margin-left: auto; font-size: .75rem; color: var(--gold-300); }
.menu .mm :is(a, button):focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .mega, .mega__panel, .mega-scrim, .nav__ink { transition: none; animation: none; }
}

/* About panel: the belief line under the tiles */
.mg-quote { display: flex; gap: 1rem; margin-top: 1.1rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: linear-gradient(120deg, rgba(197,161,90,.14), rgba(197,161,90,.02)); box-shadow: inset 0 0 0 1px rgba(214,185,124,.22); transition: box-shadow .3s; }
.mg-quote:hover { box-shadow: inset 0 0 0 1px rgba(214,185,124,.5); }
.mg-quote__mark { font-family: var(--font-display); font-size: 3.4rem; line-height: .8; color: var(--gold-400); }
.mg-quote b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--ivory-50); }
.mg-quote b em { color: var(--gold-300); }
.mg-quote small { display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; font-size: .84rem; font-weight: 600; color: var(--gold-300); }
.mg-quote small i { font-size: .7rem; transition: transform .3s var(--ease-out); }
.mg-quote:hover small i { transform: translateX(3px); }

/* How it works: quick certificate check under the tiles */
.mg-verify { margin-top: 1.1rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: linear-gradient(120deg, rgba(197,161,90,.14), rgba(197,161,90,.02)); box-shadow: inset 0 0 0 1px rgba(214,185,124,.22); }
.mg-verify label b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: var(--ivory-50); }
.mg-verify label small { display: block; margin-top: .2rem; font-size: .82rem; color: rgba(246,238,219,.6); }
.mg-verify__row { display: flex; gap: .5rem; margin-top: .8rem; }
.mg-verify input { flex: 1; min-width: 0; height: 46px; padding: 0 1rem; border: 0; border-radius: 12px; font-family: var(--font-mono); font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ivory-50); background: rgba(3,17,11,.45); box-shadow: inset 0 0 0 1px rgba(230,211,166,.22); outline: none; transition: box-shadow .25s; }
.mg-verify input::placeholder { color: rgba(246,238,219,.35); }
.mg-verify input:focus { box-shadow: inset 0 0 0 1.5px var(--gold-400), 0 0 0 4px rgba(214,185,124,.15); }
.mg-verify button { display: inline-flex; align-items: center; gap: .5rem; height: 46px; padding: 0 1.2rem; border-radius: 12px; font-weight: 600; font-size: .88rem; color: var(--emerald-950); background: var(--grad-gold); cursor: pointer; }
.mg-verify button i { font-size: .8rem; }