/* ═══════════════════════════════════════════════════════════
   SICIP — header menus (standard dropdowns, Training mega,
   Contact mega). Loaded after styles.css so it wins.
   ═══════════════════════════════════════════════════════════ */

/* ── shared panel chrome ───────────────────────────────────── */
.dropdown,
.mega-wrap {
  border-top: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 50px -18px rgba(26, 23, 78, .35), 0 0 0 1px rgba(26, 23, 78, .07) !important;
  overflow: hidden;
  transform: translateY(10px) scale(.985);
  transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .22s;
}
.nav-item:hover > .dropdown,
.nav-item:hover > .mega-wrap { transform: translateY(0) scale(1); }

/* gradient cap on top of every panel */
.dropdown::after,
.mega-wrap::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), #FFC46B 55%, var(--navy-light));
  z-index: 3;
}

/* ── standard dropdown ─────────────────────────────────────── */
.dropdown { min-width: 250px; padding: .45rem; background: #fff; }
.dropdown .dd-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); padding: .7rem .75rem .55rem; border-bottom: 1px solid var(--gray-100);
  margin-bottom: .3rem;
}
.dropdown .dd-head::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); }

.dropdown a {
  position: relative;
  display: flex !important; align-items: center; gap: .65rem;
  padding: .58rem .75rem !important; border-radius: 10px; border-bottom: 0 !important;
  font-size: .8rem; font-weight: 600; color: var(--navy); text-decoration: none;
  transition: background .18s, color .18s, transform .18s;
}
.dropdown a + a { margin-top: 1px; }
.dropdown a:hover {
  background: linear-gradient(90deg, rgba(243, 117, 42, .12), rgba(243, 117, 42, .03)) !important;
  color: var(--orange) !important; transform: translateX(3px);
}
/* icon tile in front of each item – tone classes give each item its own colour */
.dropdown a .dd-ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-soft, var(--gray-100)); color: var(--tone, var(--navy)); font-size: .8rem;
  box-shadow: inset 0 0 0 1px var(--tone-line, transparent);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.dropdown a:hover .dd-ic {
  background: var(--tone, var(--orange)); color: #fff;
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 6px 14px -6px var(--tone, var(--orange));
}

/* ── brand-aligned icon tones (used by .dd-ic, .tm-g-head i, .mi) ── */
.t-orange { --tone: #F3752A; --tone-soft: rgba(243,117,42,.14); --tone-line: rgba(243,117,42,.22); }
.t-navy   { --tone: #2A2670; --tone-soft: rgba(42,38,112,.12); --tone-line: rgba(42,38,112,.2); }
.t-violet { --tone: #6A4CFF; --tone-soft: rgba(106,76,255,.13); --tone-line: rgba(106,76,255,.2); }
.t-gold   { --tone: #D89211; --tone-soft: rgba(216,146,17,.15); --tone-line: rgba(216,146,17,.24); }
.t-teal   { --tone: #0E9C9C; --tone-soft: rgba(14,156,156,.14); --tone-line: rgba(14,156,156,.22); }
.t-rose   { --tone: #D6446E; --tone-soft: rgba(214,68,110,.13); --tone-line: rgba(214,68,110,.2); }
.t-green  { --tone: #10965F; --tone-soft: rgba(16,150,95,.14); --tone-line: rgba(16,150,95,.22); }
.t-blue   { --tone: #0056D6; --tone-soft: rgba(0,86,214,.12); --tone-line: rgba(0,86,214,.2); }
.dropdown a small { font-weight: 500; }
/* arrow that slides in on hover */
.dropdown a::after {
  content: '\f178'; font: 900 .66rem 'Font Awesome 6 Free';
  margin-left: auto; color: var(--orange); opacity: 0; transform: translateX(-5px);
  transition: opacity .18s, transform .18s;
}
.dropdown a:hover::after { opacity: 1; transform: none; }
.dropdown a.is-soon { opacity: .55; }
.dropdown a.is-soon:hover { transform: none; }
.dropdown a.is-soon::after { content: '\f017'; }

/* optional footer strip inside a dropdown */
.dd-foot {
  display: flex !important; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .35rem; padding: .55rem .75rem !important; border-radius: 10px;
  background: var(--gray-50); font-size: .7rem !important; font-weight: 700 !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy) !important;
}
.dd-foot:hover { background: var(--navy) !important; color: #fff !important; transform: none !important; }
.dd-foot::after { display: none !important; }

/* ── TRAINING mega menu ────────────────────────────────────── */
.mega-wrap.train-menu { display: block; padding: 0; min-width: 820px; background: #fff; }
.tm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.1rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-100);
}
.tm-head b { font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.tm-head span { font-size: .66rem; color: var(--gray-400); }
.tm-body { display: grid; grid-template-columns: 1fr 2fr; gap: 0; }
.tm-scheme { padding: .9rem 1rem; }
.tm-scheme + .tm-scheme { border-left: 1px solid var(--gray-100); background: linear-gradient(180deg, rgba(248, 247, 252, .7), #fff); }
.tm-scheme > h4 {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem;
  font-size: .68rem; font-weight: 700; color: var(--gray-600); letter-spacing: .02em;
}
.tm-badge {
  display: inline-flex; align-items: center; white-space: nowrap; padding: .2rem .5rem; border-radius: 6px;
  background: var(--navy); color: #fff; font-size: .58rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.tm-scheme + .tm-scheme .tm-badge { background: var(--orange); }
.tm-groups { display: grid; gap: .5rem; }
.tm-scheme + .tm-scheme .tm-groups { grid-template-columns: 1fr 1fr; }
.tm-group {
  padding: .55rem .6rem; border-radius: 11px; border: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
.tm-group:hover { background: #fff; border-color: rgba(243, 117, 42, .35); box-shadow: 0 10px 22px -14px rgba(26, 23, 78, .5); }
.tm-g-head { display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 700; color: var(--navy); line-height: 1.25; }
.tm-g-head i {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tone-soft, rgba(243,117,42,.13)); color: var(--tone, var(--orange)); font-size: .72rem;
  box-shadow: inset 0 0 0 1px var(--tone-line, transparent);
  transition: background .18s, color .18s, transform .18s;
}
.tm-group:hover .tm-g-head i { background: var(--tone, var(--orange)); color: #fff; transform: scale(1.06); }
.tm-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0 2.1rem; }
.tm-chips a {
  display: inline-flex !important; align-items: center;
  padding: .24rem .55rem !important; border-radius: 999px; border: 1px solid var(--gray-200);
  background: #fff; font-size: .68rem !important; font-weight: 600; color: var(--gray-600) !important;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.tm-chips a:hover { background: var(--orange) !important; border-color: var(--orange); color: #fff !important; transform: translateY(-1px); }
.tm-chips .tm-empty { font-size: .66rem; color: var(--gray-400); font-style: italic; padding: .2rem 0; }

/* ── CONTACT mega menu ─────────────────────────────────────── */
.mega-wrap.contact-menu { display: block; padding: 0; min-width: 380px; background: #fff; }
.cm-head { padding: .8rem 1.1rem .7rem; background: linear-gradient(120deg, var(--navy), var(--navy-light)); color: #fff; }
.cm-head b { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #FFC46B; }
.cm-head span { display: block; margin-top: .2rem; font-family: var(--font-d); font-size: 1.05rem; }
.cm-body { padding: .7rem; }
.cm-row {
  display: flex !important; align-items: flex-start; gap: .7rem;
  padding: .55rem .6rem !important; border-radius: 11px;
  font-size: .78rem; font-weight: 500; color: var(--navy) !important; text-decoration: none;
  line-height: 1.5; transition: background .18s;
}
.cm-row + .cm-row { margin-top: 2px; }
a.cm-row:hover { background: var(--gray-50); }
.cm-row i {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243, 117, 42, .13); color: var(--orange); font-size: .78rem;
}
a.cm-row:hover i { background: var(--orange); color: #fff; }
/* social buttons carry each network's own colour */
.cm-social { display: flex; justify-content: center; gap: .55rem; padding: .5rem .6rem .9rem; }
.cm-social a {
  width: 34px; height: 34px; border-radius: 10px; display: flex !important; align-items: center; justify-content: center;
  background: var(--brand-soft, var(--gray-100)); color: var(--brand, var(--navy)); font-size: .85rem; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--brand-line, transparent);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.cm-social a:hover {
  background: var(--brand, var(--orange)); color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px var(--brand, var(--orange));
}
.cm-social .s-fb { --brand: #1877F2; --brand-soft: rgba(24,119,242,.12); --brand-line: rgba(24,119,242,.2); }
.cm-social .s-yt { --brand: #FF0033; --brand-soft: rgba(255,0,51,.10);   --brand-line: rgba(255,0,51,.2); }
.cm-social .s-li { --brand: #0A66C2; --brand-soft: rgba(10,102,194,.12); --brand-line: rgba(10,102,194,.2); }

/* ── narrower desktops ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .mega-wrap.train-menu { min-width: 640px; }
  .tm-body { grid-template-columns: 1fr 1.4fr; }
  .tm-scheme + .tm-scheme .tm-groups { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown, .mega-wrap, .dropdown a, .tm-chips a, .cm-social a { transition: none; }
}