/* Mother's Pride — notification bell.
   Self-contained: only .mp-n* classes, so it cannot clash with the
   existing site stylesheets. */

.mp-n-item,
.mp-n-wrap {
  box-sizing: border-box;
}

/* ---------- Bell in the navbar ---------- */

.mp-n-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  list-style: none;
}

/*
 * Desktop: the bell is a direct child of .header-lower (the full-width pink
 * header bar), not of the nav list — see the JS for why. Being outside the
 * nav means it's completely out of the menu's layout: it can never compete
 * with the links for space, never wrap, and never move depending on how
 * wide "Mother's Pride" or "Contact Us" happen to render.
 *
 * `right: 24px` pins it a fixed, small padding from the true right edge of
 * the navbar itself — the actual "top right of the navbar" — regardless of
 * how much empty space sits between the menu links and that edge at any
 * given window width.
 *
 * `top: 15px` centres it in .header-lower's fixed 70px height (70 - 40 = 30,
 * split evenly). That height never changes even when the theme's own menu
 * wraps onto two lines around 768–991px, so this stays correct there too.
 * No `transform` is used for the centring — a plain offset does the job
 * without turning this into a containing block for fixed-position children
 * (which is what traps the dropdown panel on small screens).
 */
@media (min-width: 768px) {
  .mp-n-wrap {
    position: absolute;
    right: 24px;
    top: 15px;
    bottom: auto;
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    float: none;
    transition: none;
    z-index: 20;
  }
}

/* Guarantees the bell has something to anchor to, even if a page's
   stylesheet leaves the nav list statically positioned. Applied from JS only
   when that is actually the case, so existing dropdowns are left alone. */
.mp-n-navhost { position: relative; }

.mp-n-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mp-n-bell:hover,
.mp-n-bell:focus {
  background: rgba(255, 255, 255, .30);
  outline: none;
}

.mp-n-bell svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Small ring animation when there is something unseen */
.mp-n-bell.has-unseen svg {
  transform-origin: 50% 15%;
  animation: mp-n-ring 2.2s ease-in-out 0s 3;
}

@keyframes mp-n-ring {
  0%, 72%, 100% { transform: rotate(0); }
  76% { transform: rotate(11deg); }
  80% { transform: rotate(-9deg); }
  84% { transform: rotate(7deg); }
  88% { transform: rotate(-5deg); }
  92% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-n-bell.has-unseen svg { animation: none; }
}

.mp-n-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e8a33d;
  color: #3a2400;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
  pointer-events: none;
}

/* ---------- Dropdown panel ---------- */

.mp-n-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 10, 40, .28);
  overflow: hidden;
  z-index: 9999;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: left;
  color: #2d2a4a;
}

.mp-n-panel.is-open { display: block; }

.mp-n-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #2d2a4a, #9d3c91 65%, #6d3fa0);
  color: #fff;
}

.mp-n-head strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.mp-n-head span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .72);
  display: block;
  font-weight: 400;
}

.mp-n-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
  flex: 0 0 auto;
}

.mp-n-close:hover { color: #fff; background: rgba(255, 255, 255, .15); }
.mp-n-close svg { width: 16px; height: 16px; display: block; }

.mp-n-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mp-n-item { display: block; border-bottom: 1px solid #f0ecf3; }
.mp-n-item:last-child { border-bottom: 0; }

.mp-n-item > a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}

.mp-n-item > a:hover,
.mp-n-item > a:focus { background: #faf7fc; text-decoration: none; outline: none; }

.mp-n-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mp-n-ico svg { width: 17px; height: 17px; display: block; }
.mp-n-ico.is-video { background: linear-gradient(135deg, #e2426a, #c02b52); }
.mp-n-ico.is-pdf   { background: linear-gradient(135deg, #9d3c91, #6d3fa0); }

.mp-n-body { flex: 1 1 auto; min-width: 0; }

.mp-n-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 2px;
  color: #2d2a4a;
  word-break: break-word;
}

.mp-n-meta {
  display: block;
  font-size: 11.5px;
  color: #8b8b8b;
  line-height: 1.4;
}

.mp-n-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #e8a33d;
  color: #3a2400;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  vertical-align: 1px;
}

.mp-n-empty {
  padding: 34px 20px;
  text-align: center;
  color: #8b8b8b;
  font-size: 13px;
}

.mp-n-foot {
  display: flex;
  border-top: 1px solid #f0ecf3;
  background: #fcfbfd;
}

.mp-n-foot a {
  flex: 1 1 0;
  padding: 11px 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #9d3c91;
  text-decoration: none;
}

.mp-n-foot a + a { border-left: 1px solid #f0ecf3; }
.mp-n-foot a:hover { background: #f6eefa; text-decoration: none; }

/* Highlight pulse when arriving from a notification link */
.mp-n-target {
  animation: mp-n-flash 2.4s ease-out 1;
  border-radius: 12px;
}

@keyframes mp-n-flash {
  0%, 55% { box-shadow: 0 0 0 4px rgba(232, 163, 61, .85); }
  100%    { box-shadow: 0 0 0 4px rgba(232, 163, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-n-target { animation: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 767px) {
  /* The bell is moved next to the hamburger button on phones (see the JS),
     so this class is added to that button's container only while it is
     hosting the bell — it never touches the header otherwise. */
  /* .navbar-header already spans the full header width and is positioned,
     so the bell is pinned to its right edge — opposite the hamburger and
     clear of the logo, which sits on the left. */
  /* Deliberately no `transform` here. A transformed ancestor becomes the
     containing block for position:fixed descendants, which would trap the
     dropdown inside this 40px button instead of letting it span the screen.
     A plain top offset centres it just as well. */
  .navbar-header.mp-n-host .mp-n-wrap {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 30;
  }

  .mp-n-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mp-n-bell {
    background: rgba(0, 0, 0, .08);
    color: #2d2a4a;
  }

  .mp-n-bell:hover,
  .mp-n-bell:focus { background: rgba(0, 0, 0, .16); }

  .mp-n-panel {
    position: fixed;
    top: 84px;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
  }

  .mp-n-list { max-height: 58vh; }
}