/* ══════════════════════════════════════════════════════════════
   Site nav — "Readings ▾" dropdown
   Loaded on every page with the full navigation bar.

   Why: with four paid products and two bundles, listing each one in
   the top bar no longer fits. All products live under one "Readings"
   item; Contact moved out of the bar (it remains in the footer and at
   the bottom of the homepage).

   Pure CSS — opens on hover and on keyboard/tap focus (:focus-within).
   On mobile the hamburger overlay clones every <a> inside .nav-links,
   so the four product links appear there as a flat list automatically.
   ══════════════════════════════════════════════════════════════ */

.nav-links li { list-style: none; }
.nav-drop { position: relative; }

.nav-drop-btn {
  font-family: inherit; font-size: 13px; color: var(--dark, #4B2C3F);
  background: none; border: none; padding: 0; cursor: pointer;
  opacity: 0.85; line-height: inherit;
  text-decoration: none; display: inline-block;
}
.nav-drop-btn:hover { text-decoration: underline; }
.nav-drop-btn:hover, .nav-drop:focus-within .nav-drop-btn { opacity: 1; }

.nav-drop-menu {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); padding: 8px; margin-top: 6px;
  min-width: 190px; list-style: none;
  background: rgba(250, 245, 238, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(75, 44, 63, 0.14);
}
/* Bridge the hover gap between button and menu */
.nav-drop-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: block; }

.nav-drop-menu li { margin: 0; list-style: none; }
.nav-drop-menu a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-size: 13px; color: var(--dark, #4B2C3F); text-decoration: none;
  opacity: 0.9; white-space: nowrap;
}
.nav-drop-menu a:hover { background: rgba(155, 92, 112, 0.08); opacity: 1; text-decoration: none; }