/* ===================== Mega-menu (faithful Lovable port) ===================== */

.mega-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* static so the full-width panel anchors to the sticky .batrachos-nav */
.mega-item { position: static; }

.mega-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.mega-trigger:hover,
.mega-trigger:focus-visible,
.mega-item:focus-within .mega-trigger,
.mega-item:hover .mega-trigger {
  background: var(--accent-soft, var(--ukraine-blue-light));
  color: var(--ukraine-blue);
  outline: none;
}

.mega-chevron { font-size: var(--text-xs); transition: transform var(--transition-fast); }
.mega-item:hover .mega-chevron,
.mega-item:focus-within .mega-chevron { transform: rotate(180deg); }

/* full-width dropdown anchored under the whole nav bar */
.mega-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: var(--z-fixed);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: all var(--transition-fast);
}
.mega-item:hover .mega-panel,
.mega-item:focus-within .mega-panel,
.mega-panel.show { opacity: 1; visibility: visible; transform: none; }

.mega-accent {
  display: block; height: 2px;
  max-width: var(--wide-max, 1240px);
  margin-inline: auto;
  background: var(--ukraine-blue);
  position: relative;
}
.mega-accent::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  width: 25%; background: var(--ukraine-yellow);
}

.mega-panel-inner {
  max-width: var(--wide-max, 1240px);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter, var(--space-6));
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* shared bits */
.mega-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-muted);
}
.mega-panel-h {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--academic-navy);
}
.mega-empty-note { color: var(--text-secondary); font-size: var(--text-sm); }

/* ---- Courses panel ---- */
.mega-panel-courses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-6);
}
.mega-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.mega-course {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: var(--text-primary); text-decoration: none;
  transition: all var(--transition-fast);
}
.mega-course:hover, .mega-course:focus-visible {
  border-color: var(--ukraine-blue);
  background: var(--accent-soft, var(--ukraine-blue-light));
  outline: none;
}
.mega-course:hover .mega-course-title { color: var(--ukraine-blue); }
.mega-course-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--academic-navy); color: #fff;
  font-size: 1rem; overflow: hidden;
}
.mega-course-ico img { width: 100%; height: 100%; object-fit: cover; }
.mega-course-title {
  min-width: 0;
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  line-height: 1.25; color: var(--academic-navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.mega-rail { border-left: 1px solid var(--border-light); padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.mega-rail a {
  padding: 0.45rem var(--space-2); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); text-decoration: none;
  transition: all var(--transition-fast);
}
.mega-rail a:hover { background: var(--accent-soft, var(--ukraine-blue-light)); color: var(--ukraine-blue); }

.mega-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);
  margin-top: var(--space-2); padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.mega-strip-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.mega-strip-filters a { color: var(--text-secondary); text-decoration: none; }
.mega-strip-filters a:hover { color: var(--ukraine-blue); }
.mega-strip-filters span { color: var(--text-muted); }
.mega-strip-cta, .mega-link-strong {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--ukraine-blue); text-decoration: none; white-space: nowrap;
}
.mega-strip-cta:hover, .mega-link-strong:hover { color: var(--blue-700); }

/* ---- Materials panel (same architecture as Courses: main grid + rail + strip) ---- */
.mega-panel-materials {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-6);
}
.mega-rail-eyebrow2 { margin-top: var(--space-4); }
/* Type-tinted icons -> parity with the /materials/ hub's type colours */
.mega-course[data-type="lection"] .mega-course-ico { background: var(--ukraine-blue, #0057b7); }
.mega-course[data-type="article"] .mega-course-ico { background: var(--academic-navy, #1a365d); }
.mega-course[data-type="news"] .mega-course-ico { background: #b7791f; }
.mega-course[data-type="wiki_page"] .mega-course-ico { background: #2c7a7b; }
.mega-course[data-type="forum"] .mega-course-ico { background: #6b46c1; }
.mega-course[data-type="book"] .mega-course-ico { background: #1f7a4d; }
.mega-col { display: flex; flex-direction: column; gap: var(--space-1); }
.mega-col a {
  padding: 0.45rem var(--space-2); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); text-decoration: none;
  transition: all var(--transition-fast);
}
.mega-col a:hover { background: var(--accent-soft, var(--ukraine-blue-light)); color: var(--ukraine-blue); }
.mega-collections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-1);
}
.mega-collections-grid a {
  break-inside: avoid;
}

.mega-cta {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--primary-300, rgba(0,87,183,0.3));
  border-radius: var(--radius-xl);
  background: var(--accent-soft, var(--ukraine-blue-light));
  color: var(--academic-navy); text-decoration: none;
  transition: all var(--transition-fast);
}
.mega-cta:hover { border-color: var(--ukraine-blue); color: var(--ukraine-blue); }
.mega-cta-text strong { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold); }
.mega-cta-text small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--text-sm); }
.mega-cta > i { color: var(--ukraine-blue); }

/* ---- Research panel ---- */
.mega-panel-research {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
}
.mega-col--wide { gap: var(--space-2); }
.mega-research-item {
  display: block; padding: var(--space-3);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  text-decoration: none; transition: all var(--transition-fast);
}
.mega-research-item:hover { border-color: var(--ukraine-blue); background: var(--accent-soft, var(--ukraine-blue-light)); }
.mega-research-item strong { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--academic-navy); }
.mega-research-item small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.mega-link-strong { margin-top: var(--space-2); }

/* ---- About panel ---- */
.mega-panel-about {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.mega-section-card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  text-decoration: none; transition: all var(--transition-fast);
}
.mega-section-card:hover { border-color: var(--ukraine-blue); background: var(--accent-soft, var(--ukraine-blue-light)); }
.mega-section-card > i { margin-top: 2px; color: var(--ukraine-blue); font-size: 1rem; }
.mega-section-card strong { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--academic-navy); }
.mega-section-card small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }

/* ===================== Mobile accordion ===================== */
.m-acc-item { border-bottom: 1px solid var(--border-light); }
.m-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border: 0; background: transparent;
  color: var(--text-primary); font: inherit; font-weight: var(--font-semibold); text-align: left;
}
.m-acc-head i { transition: transform var(--transition-fast); }
.m-acc-head[aria-expanded="true"] i { transform: rotate(180deg); }
.m-acc-body { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-1); transition: max-height var(--transition-normal); }
.m-acc-body.open,
.m-acc-head[aria-expanded="true"] + .m-acc-body { max-height: 1200px; padding-bottom: var(--space-3); }
.m-acc-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none;
}
.m-acc-link:hover, .m-acc-link:focus-visible { background: var(--accent-soft, var(--ukraine-blue-light)); color: var(--ukraine-blue); outline: none; }

/* ===================== Breakpoints ===================== */
/* Aligned with batrachos.css: .nav-menu hides + hamburger shows at <=1100px. */
@media (max-width: 1100px) {
  .mega-nav { display: none; }
}
@media (max-width: 760px) {
  .mega-collections-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1101px) {
  .mobile-nav-menu .m-acc-item { display: none; }
}

@media (max-width: 1280px) {
  .mega-courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Material-type items in the mega-menu: icon tile + label (not bare text). */
.mega-type-link { display: flex; align-items: center; gap: 0.6rem; }
.mega-type-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: none;
  border-radius: 7px;
  background: rgba(0, 87, 183, 0.09);
  color: var(--ukraine-blue, #0057b7);
  font-size: 0.8rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.mega-type-link:hover .mega-type-ico { background: var(--ukraine-blue, #0057b7); color: #fff; }

/* Recent-materials fallback in the Materials panel's 3rd column (when no categories). */
.mega-recent { font-size: var(--text-sm, 0.875rem); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }