/* nav.css — dropdown navigation.
   Loaded alongside style.css. Kept separate so the shared menu can be
   restyled without touching the main stylesheet. */

.mast-nav ul { list-style: none; margin: 0; padding: 0; }
.mast-nav > ul { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.mast-nav-item { position: relative; }
.mast-nav-caret { font-size: 0.62em; margin-left: 5px; opacity: 0.75; }

.mast-subnav {
  position: absolute; top: 100%; left: 0; z-index: 200;
  min-width: 250px;
  background: var(--bg, #F4EDE2);
  border: 1px solid var(--rule-warm, #d9cdb8);
  border-top: 3px solid var(--earth, #8b2f1a);
  box-shadow: 0 8px 22px rgba(26,20,16,0.16);
  padding: 6px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mast-nav-item:hover > .mast-subnav,
.mast-nav-item:focus-within > .mast-subnav,
.mast-nav-item.is-open > .mast-subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mast-subnav a {
  display: block; padding: 9px 18px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.95rem; color: var(--ink, #1a1410);
  text-decoration: none; white-space: nowrap;
}
.mast-subnav a:hover, .mast-subnav a:focus {
  background: var(--bg-deep, #efe5d2); color: var(--earth, #8b2f1a);
}

@media (max-width: 860px) {
  .mast-nav > ul { display: block; }
  .mast-subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 3px solid var(--ochre, #c8881f);
    box-shadow: none; background: transparent;
    margin: 0 0 8px 14px; padding: 0;
  }
  .mast-nav-caret { display: none; }
}