/* ==========================================================================
   NLPS – District Alerts (alerts.css)
   ========================================================================== */

/* ----------------------------
   Wrap + top-gap hardening
   ---------------------------- */
.dalert-wrap{
  position: relative !important;
  z-index: auto !important;
  display: block !important;

  /* Prevent margin-collapse “ghost gap”; nudge if you want to kiss header border */
  --dalert-nudge-top: -1px; /* set to 0 if no nudge desired */
  margin-top: var(--dalert-nudge-top) !important;
  padding-top: 0.01px; /* invisible; breaks margin-collapsing */
}

/* When dismissed, completely collapse and don’t leave layout gaps */
.dalert-wrap[hidden]{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}
.dalert-wrap[hidden] + *{ margin-top: 0 !important; }

/* ----------------------------
   Container + layout
   ---------------------------- */
.dalert-container{
  position: relative !important;
  background: #f9edd4bd !important;
  color: inherit !important;
  padding: 1rem 4.5rem 1rem 4rem !important; /* room for controls */
  border-bottom: 1px solid #a25e10 !important;
  z-index: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* viewport/track */
.dalert-viewport{
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}
.dalert-track{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  will-change: transform !important;
}

/* ----------------------------
   Slide / article
   ---------------------------- */
.dalert{
  display: flex !important;
  align-items: center !important;   /* ensure icon + body inline */
  flex: 0 0 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 0.7rem !important;
  box-sizing: border-box !important;
}
.dalert__icon{
  flex: 0 0 20px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0.1rem !important;
}
.dalert__icon i{ font-size: 18px !important; line-height: 1 !important; }
.dalert__body{ min-width: 0 !important; width: 100% !important; }

.dalert__heading{
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 0 0.25rem 0 !important;
  flex-wrap: nowrap !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 4 !important; /* taps beat control buttons on mobile */
}
.dalert__date{
  font-size: 12px !important;
  line-height: 1.3 !important;
  opacity: 0.9 !important;
  white-space: nowrap !important;
}
.dalert__title{
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Chevron decorative; hidden on desktop, rotates when expanded */
.dalert__chev{
  display: none !important;
  margin-left: auto !important;
  transition: transform .2s ease !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 5 !important;
}
.dalert.is-expanded .dalert__chev{ transform: rotate(180deg) !important; }

.dalert__content{
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0.25rem 0 0 !important;
}
.dalert__content p{ margin: 0 !important; }
.dalert__content p + p{ margin-top: 0.35rem !important; }

/* ----------------------------
   Controls (prev/next/close)
   ---------------------------- */
.dalert__controls{
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  left: auto !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;

  /* kill any theme floats/clearfixes that could push these left */
  float: none !important;
}
.dalert__controls *{ float: none !important; }

.dalert__navbtn,
.dalert__close{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0.25rem !important;
  line-height: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dalert__navbtn i,
.dalert__close i{ font-size: 18px !important; line-height: 1 !important; display: inline-block !important; }

/* ----------------------------
   Reopen (bullhorn) button
   ---------------------------- */
.dalert-reopen{
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2147483647 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
  background: #fff !important;
  display: none; /* base hidden; shown by rules below or JS */
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}
body.admin-bar .dalert-reopen{ top: 52px !important; }
.dalert-reopen i{ font-size: 20px !important; line-height: 1 !important; }
.dalert-reopen__badge{
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}

/* Show the bullhorn when the section is hidden.
   Use BOTH adjacent (+) and general (~) sibling to tolerate wrapper nodes. */
.dalert-wrap[hidden] + .dalert-reopen,
.dalert-wrap[hidden] ~ .dalert-reopen{
  display: flex !important;
}

/* JS-assisted visibility (bulletproof even if DOM moves) */
.dalert-reopen.is-visible,
.dalert-reopen[data-visible="1"]{
  display: flex !important;
}

/* ==========================================================
   Mobile (<=768px)
   - full-bleed bar
   - controls move to bottom-right
   - chevron shown
   - title wraps (no ellipsis)
   - content collapsed by default
   ========================================================== */
@media (max-width: 768px){

  /* Full-bleed breakout even if shortcode sits in a centered container */
  .dalert-wrap{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .dalert-container{
    padding: 1rem 2.5rem 2.2rem 1rem !important; /* extra bottom space for controls */
  }

  .dalert__icon{
    display: none !important;
    width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
  }

  /* Controls docked bottom-right, styled as chips */
  .dalert__controls{
    top: auto !important;
    bottom: 0.6rem !important;
    right: 0.6rem !important;
    left: auto !important;
    display: flex !important;
    gap: 0.35rem !important;
    z-index: 3 !important;
    align-items: center !important;
    transform: translateZ(0);
  }
  .dalert__navbtn,
  .dalert__close{
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    padding: 0.35rem !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  }
  .dalert__navbtn i,
  .dalert__close i{ font-size: 14px !important; }

  .dalert__date{ display: none !important; }

  /* Ensure heading is easily tappable and never sits under controls */
  .dalert__heading{ gap: 0.35rem !important; padding-right: 64px !important; }

  /* Show FULL title on phones (no ellipsis) */
  .dalert__title{
    font-size: 16px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Chevron visible on phones */
  .dalert__chev{
    display: inline-flex !important;
    align-items: center !important;
  }
  .dalert__chev i{ font-size: 14px !important; line-height: 1 !important; }

  /* Collapsed by default; JS toggles .is-expanded */
  .dalert__content{ display: none !important; }
  .dalert.is-expanded .dalert__content{ display: block !important; }
}
