/* /css/overrides.css
   Purpose: Safe, post-Muse overrides.
   Load this AFTER all other CSS files.
*/

/* ---------- Global safety defaults (non-destructive) ---------- */
html, body { -webkit-text-size-adjust: 100%; }

/* ---------- Muse menu dropdown visibility fixes ---------- */
/* Many Muse menus use .MenuBar, .MenuItemContainer, .SubMenu, .SubMenuView, etc.
   These rules are intentionally broad but still conservative.
*/

/* Ensure dropdown layers appear above page content */
.MenuBar,
.MenuItemContainer,
.SubMenu,
.SubMenuView,
.SubMenu .SubMenuView {
  position: relative;
  z-index: 9999;
}

/* If Muse or theme sets a low z-index on header/nav, lift it */
header, .header, .site-header, nav, .nav, .navigation {
  position: relative;
  z-index: 9998;
}

/* Make dropdown panels readable (fix white-on-white) */
.SubMenu,
.SubMenuView,
.SubMenu .SubMenuView,
.MenuItemContainer .SubMenu,
.MenuItemContainer .SubMenuView {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* Ensure dropdown links are visible */
.SubMenu a,
.SubMenuView a,
.MenuItemContainer .SubMenu a,
.MenuItemContainer .SubMenuView a {
  color: #111827 !important;          /* dark text */
  text-decoration: none;
}

/* Hover/focus states for dropdown links */
.SubMenu a:hover,
.SubMenuView a:hover,
.MenuItemContainer .SubMenu a:hover,
.MenuItemContainer .SubMenuView a:hover,
.SubMenu a:focus,
.SubMenuView a:focus,
.MenuItemContainer .SubMenu a:focus,
.MenuItemContainer .SubMenuView a:focus {
  background: rgba(0,0,0,0.06);
  color: #000000 !important;
  outline: none;
}

/* If Muse sets dropdown item text to white via span/p tags, force dark */
.SubMenu *,
.SubMenuView *,
.MenuItemContainer .SubMenu *,
.MenuItemContainer .SubMenuView * {
  color: inherit;
}

/* ---------- Top-level menu readability (optional but helpful) ---------- */
/* If your top nav is also white-on-white, these rules help without forcing a redesign.
   Comment out if you already like your top nav appearance.
*/
.MenuBar a,
nav a {
  text-shadow: none;
}

/* Improve focus ring for keyboard users (clean, visible) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.65); /* subtle green */
  outline-offset: 2px;
}

/* ---------- Prevent dropdown clipping due to overflow rules ---------- */
/* Some Muse containers clip dropdowns with overflow:hidden */
header, .header, .site-header, nav, .nav, .navigation,
.MenuBar, .MenuItemContainer {
  overflow: visible !important;
}

/* ---------- Mobile tap friendliness ---------- */
@media (max-width: 768px) {
  .SubMenu a,
  .SubMenuView a,
  nav a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---------- Anti-overlap / container safety fixes ---------- */

/* Predictable sizing so padding/borders don’t push elements outside boxes */
*, *::before, *::after { box-sizing: border-box; }

/* Prevent long words/URLs from blowing out cards/containers */
p, li, a, h1, h2, h3, h4, h5, h6, .card, .box, .container {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Images/media should never exceed their container */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* If any section uses fixed heights, this prevents text clipping */
.section, .content, .container, .card, .box, .panel {
  height: auto;
  min-height: 0;
}

/* Prevent flex layouts from forcing overflow on narrow screens */
.row, .flex, .flex-row, .columns, .grid, .cards, .nav, nav ul {
  flex-wrap: wrap;
}

/* Common cause of overlap: absolute positioned text blocks */
.text, .text-block, .caption, .headline, .subhead {
  position: relative;
}

/* If a parent is clipping content, relax it (Muse/themes often do this) */
.container, .content, main, section, header, nav {
  overflow: visible;
}

/* Make sure stacked sections have normal flow spacing */
section, .section, .container, .content {
  clear: both;
}

/* Tables/long rows should not push outside containers */
table { width: 100%; border-collapse: collapse; }
td, th { vertical-align: top; }

/* Mobile: increase line-height slightly to avoid collisions with tight headers */
body { line-height: 1.5; }
h1, h2, h3 { line-height: 1.2; }