/* ── FishFace content resets ────────────────────────────────────────────────
   main.css resets headings (small-caps), lists (no margin/padding/bullets),
   and paragraphs globally. These rules restore expected rendering inside
   the .container#content wrapper that fishface.html provides.
   ─────────────────────────────────────────────────────────────────────────── */

/* Headings: remove small-caps set by main.css
#content h1,
#content h2,
#content h3,
#content h4 {
  font-variant: normal;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
}
*/
/* Lists: restore browser/Bootstrap 3 defaults that main.css strips */
#content ol,
#content ul {
  margin: 0 0 10px 0;
  padding: 0 0 0 25px;
}

#content ol {
  list-style: decimal;
}

#content ul {
  list-style: disc;
}

#content li {
  display: list-item;
  margin-bottom: 4px;
}

/* Paragraphs: restore bottom margin */
#content p {
  margin: 0 0 10px 0;
}


/* ── FishFace subsite navigation ────────────────────────────────────────────
   CSS-only hover dropdown nav replacing Bootstrap 3 btn-group dropdowns.
   Matches the existing page.html button style used across FaceBase subsites.
   Append to assets/css/main.css  (or add as assets/css/fishface.css and
   reference via custom_css front matter on every fishface page).
   ─────────────────────────────────────────────────────────────────────────── */

.ff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 1.5rem 0;
  padding: 0;
  align-items: flex-start;
}

/* Shared styles for both plain links and dropdown triggers */
.ff-nav-item {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.ff-nav-item:hover,
.ff-nav-item:focus {
  background-color: #e6e6e6;
  border-color: #adadad;
  color: #333;
  text-decoration: none;
  outline: none;
}

/* Dropdown wrapper — position: relative so menu can anchor to it */
.ff-nav-dropdown {
  position: relative;
}

/* Trigger button — remove default button chrome */
.ff-nav-trigger {
  appearance: none;
  -webkit-appearance: none;
}

/* Dropdown caret */
.ff-nav-trigger::after {
  content: " ▾";
  font-size: 10px;
  opacity: 0.7;
}

/* Dropdown menu — hidden by default, shown on hover/focus-within */
.ff-nav-menu {
  list-style: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 220px;
  margin: 2px 0 0 0;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* Show on hover over the wrapper OR when focus is inside it */
.ff-nav-dropdown:hover .ff-nav-menu,
.ff-nav-dropdown:focus-within .ff-nav-menu {
  display: block;
}

.ff-nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-nav-menu li a {
  display: block;
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  clear: both;
}

.ff-nav-menu li a:hover,
.ff-nav-menu li a:focus {
  background-color: #f5f5f5;
  color: #262626;
  text-decoration: none;
}

/* Keep menu visible when moving from trigger to menu items */
.ff-nav-dropdown:hover .ff-nav-trigger,
.ff-nav-dropdown:focus-within .ff-nav-trigger {
  background-color: #e6e6e6;
  border-color: #adadad;
}