.rich-text {
  color: var(--mit-gray);
  line-height: 1.7;
}

.rich-text p {
  margin-top: 0.75rem;
}

.rich-text a {
  color: var(--mit-black);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rich-text ul,
.rich-text ol {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text h2,
.rich-text h3,
.rich-text h4 {
  color: var(--mit-black);
  font-weight: 600;
  margin-top: 1.5rem;
}

.rich-text blockquote {
  border-left: 3px solid var(--mit-silver);
  padding-left: 0.75rem;
  color: var(--mit-gray-dark);
  margin-top: 0.75rem;
}

.mit-button {
  border-radius: var(--mit-button-radius, 999px);
}

/* MIT Red button classes - ensure red buttons display correctly */
/* These are fallbacks in case Tailwind CDN doesn't generate these classes */
.bg-mit-red {
  background-color: #A31F34 !important;
  color: #ffffff !important;
}

.bg-mit-red-dark {
  background-color: #8A1A2B !important;
  color: #ffffff !important;
}

/* Hover states for red buttons */
.bg-mit-red:hover,
.hover\:bg-mit-red-dark:hover,
a.bg-mit-red:hover,
button.bg-mit-red:hover {
  background-color: #8A1A2B !important;
  color: #ffffff !important;
}

/* Ensure text is white on red buttons */
a.bg-mit-red,
button.bg-mit-red,
.bg-mit-red a,
.bg-mit-red button {
  color: #ffffff !important;
}

/* Prevent button text wrapping - keep buttons on one line */
a.bg-mit-red,
button.bg-mit-red {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove Tailwind's default border styles from main-content */
/* Tailwind's preflight adds border-bottom-width: 1px via .border-b class */
/* The .border-b class from Tailwind applies border-bottom-width: 1px */
#main-content,
main#main-content {
  border: none !important;
  border-width: 0 !important;
  border-bottom-width: 0 !important;
  border-style: none !important;
  box-sizing: border-box;
}

/* Ensure red bar at top of header is visible and properly styled */
/* Match the original HTML structure - first div in header with h-1 bg-mit-red */
header.mit-header > div.h-1,
header.mit-header > div.h-1.bg-mit-red,
header.mit-header > div:first-child {
  display: block !important;
  height: 0.25rem !important;
  min-height: 0.25rem !important;
  width: 100% !important;
  background-color: #A31F34 !important;
  background: #A31F34 !important;
  border: none !important;
  border-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Desktop menu dropdown styles */
/* The pt-3 padding on submenu-panel creates a bridge gap for mouse movement */

/* Hide submenu by default */
.submenu-panel {
  display: none;
  visibility: hidden;
}

/* Show when explicitly opened via keyboard (button has aria-expanded="true") */
/* HIGHEST PRIORITY - This must override all other rules */
.group button[aria-expanded="true"] ~ .submenu-panel {
  display: block !important;
  visibility: visible !important;
}

.submenu-panel:not(.hidden) {
  display: block !important;
  visibility: visible !important;
}

/* Show submenu on hover (mouse interaction only) */
/* Only works if not explicitly hidden by keyboard state */
.group:hover .submenu-panel {
  display: block;
  visibility: visible;
}

/* Prevent submenu from showing on focus alone - only show on hover or explicit keyboard activation */
/* This prevents auto-opening when tabbing through menu items */
/* But aria-expanded rule above will override this when keyboard activated */
.group:focus-within:not(:hover) .submenu-panel {
  display: none !important;
  visibility: hidden !important;
}

/* Current menu item styles - MIT red for active pages */
/* These rules ensure WordPress's automatic current menu classes display in MIT red */

/* Desktop menu - top level items */
.current-menu-item a,
.current-menu-ancestor a,
.current-page-ancestor a,
.current-menu-item button,
.current-menu-ancestor button,
.current-page-ancestor button,
a.text-mit-red.underline,
button.text-mit-red.underline {
  color: #A31F34 !important;
}

.current-menu-item a.underline,
.current-menu-ancestor a.underline,
.current-page-ancestor a.underline {
  text-decoration: underline;
}

/* Desktop menu - submenu items */
.submenu-panel .current-menu-item a,
.submenu-panel .current-page-item a {
  color: #A31F34 !important;
}

/* Mobile menu */
/* Only color links that have current-menu-item class directly, or are direct children of current-menu-item */
a.current-menu-item,
a.current-page-item {
  color: #A31F34 !important;
}

/* Mobile menu parent items (details/summary) - only the summary should be red when parent is ancestor */
details.current-menu-item > summary,
details.current-menu-ancestor > summary,
details.current-page-ancestor > summary {
  color: #A31F34 !important;
}

/* Submenu items - only the specific current item link should be red */
/* Use more specific selector to override any ancestor rules */
details div a.current-menu-item,
details div a.current-page-item,
details .current-menu-item.text-mit-red,
details .current-page-item.text-mit-red {
  color: #A31F34 !important;
}

/* Fallback - if text-mit-red class is on a link, it should be red (but only if that specific item is current) */
a.text-mit-red {
  color: #A31F34 !important;
}

/* Important: Prevent ancestor from coloring all children */
/* Only target summary, not all a tags inside */
details.current-menu-ancestor summary,
details.current-page-ancestor summary {
  color: #A31F34 !important;
}

/* But NOT all a tags - those should only be red if they have current-menu-item class */
details.current-menu-ancestor a:not(.current-menu-item):not(.current-page-item),
details.current-page-ancestor a:not(.current-menu-item):not(.current-page-item) {
  color: inherit !important;
}

/* Utility menu current items */
.current-menu-item span,
.current-page-item span {
  color: #A31F34 !important;
}

/* Fallback for any current menu item text */
.text-mit-red {
  color: #A31F34 !important;
}