/* ===== Elegant 1.0 — Reorder 'Tags' dropdown safely =====
   Desired order inside the dropdown:
   1) Marvel Phase 6
   2) Marvel Phase 5
   3) Marvel Phase 4
   Others: natural order
   Notes:
   - Your dropdown structure is:
     <a class="nav-link dropdown-toggle" aria-expanded="false">Tags</a>
     <ul class="dropdown-menu">
       <a href="/category/..." class="dropdown-item">...</a>
       ...
     </ul>
   - We ONLY change layout when the menu is actually open.
=========================================================== */

/* When the dropdown is open, lay out items in a column so 'order' works */
.dropdown-menu.show {
  display: flex;            /* Bootstrap sets display:block; flex is fine */
  flex-direction: column;   /* keep the vertical list appearance */
  gap: 0;                   /* keep default tight spacing */
}

/* Also handle the case where Bootstrap toggles via aria-expanded */
.nav-item.dropdown > .nav-link[aria-expanded="true"] + .dropdown-menu {
  display: flex;
  flex-direction: column;
}

/* Priority ordering for your three tags */
.dropdown-menu.show > a[href="/category/marvel-phase-6"],
.nav-item.dropdown > .nav-link[aria-expanded="true"] + .dropdown-menu > a[href="/category/marvel-phase-6"] { order: -30; }

.dropdown-menu.show > a[href="/category/marvel-phase-5"],
.nav-item.dropdown > .nav-link[aria-expanded="true"] + .dropdown-menu > a[href="/category/marvel-phase-5"] { order: -29; }

.dropdown-menu.show > a[href="/category/marvel-phase-4"],
.nav-item.dropdown > .nav-link[aria-expanded="true"] + .dropdown-menu > a[href="/category/marvel-phase-4"] { order: -28; }

/* (Optional) If the site sometimes emits slightly different hrefs,
   keep a contains() fallback too */
.dropdown-menu.show > a[href*="/category/marvel-phase-6"] { order: -30; }
.dropdown-menu.show > a[href*="/category/marvel-phase-5"] { order: -29; }
.dropdown-menu.show > a[href*="/category/marvel-phase-4"] { order: -28; }

/* Optional: visual emphasis that won’t affect behavior */
.dropdown-menu.show > a[href*="/category/marvel-phase-6"],
.dropdown-menu.show > a[href*="/category/marvel-phase-5"],
.dropdown-menu.show > a[href*="/category/marvel-phase-4"]{
  font-weight: 700;
  color: var(--accent);
}
/* ===== Inline hyperlink styling (episode text / descriptions) ===== */

/* Make all in-content links inherit body text colour */
.post p a,
.episode p a,
article p a {
  color: var(--text);         /* same as normal text */
  text-decoration: none;      /* remove default underline */
  border-bottom: 1px dotted var(--muted); /* subtle indicator */
  transition: color .2s ease, border-color .2s ease;
}

/* On hover/focus, highlight with Marvel Red */
.post p a:hover,
.episode p a:hover,
article p a:hover,
.post p a:focus,
.episode p a:focus,
article p a:focus {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* ===== In-content hyperlink color (Elegant 1.0) =======================
   Scope: only the main content area you shared ('.col-md-7 .text')
   Effect: links use normal text colour (no blue), incl. visited
   Safe: does NOT affect nav / dropdown / tag menu links
====================================================================== */

.col-md-7 .text a,
.col-md-7 .text a:visited {
  color: var(--text) !important;   /* same as normal text */
}

/* Optional (keep links looking like text, but still “clickable”): */
.col-md-7 .text a {
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.col-md-7 .text a:hover,
.col-md-7 .text a:focus {
  color: var(--accent);            /* Marvel Red on hover/focus */
  border-bottom-color: var(--accent);
  text-decoration: none;
}