/* =========================
   Pasture Picker – Idle Help Popup
   File: /assets/css/pp-idlehelp-popup.css
   ========================= */

.pp-idlehelp[hidden] { display: none !important; }

/* Overlay container */
.pp-idlehelp{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Backdrop */
.pp-idlehelp__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Modal shell */
.pp-idlehelp__modal{
  position: relative;
  width: min(980px, 92vw);
  min-height: 260px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: 320px 1fr;
}

/* Close button */
.pp-idlehelp__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.pp-idlehelp__close:hover{
  background: #fff;
  transform: translateY(-1px);
}

/* Left image panel */
.pp-idlehelp__media{
  background: #f7f7f7;
  border-right: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}
.pp-idlehelp__media img{
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(235, 159, 55,0.35); /* subtle orange accent */
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* Right content panel */
.pp-idlehelp__content{
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.pp-idlehelp__title{
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 800;
  color: #1f3b2f;
}

.pp-idlehelp__copy{
  margin: 0;
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.45;
  max-width: 60ch;
}
.pp-idlehelp__copy p{
  margin: 6px 0 0 0; /* keeps WYSIWYG tidy */
}
.pp-idlehelp__copy p:first-child{
  margin-top: 0;
}

/* Actions: tighter, less blank space */
.pp-idlehelp__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px; /* key: reduces dead space */
}

/* Button base */
.pp-idlehelp__btn{
  appearance: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

/* Primary (green) */
.pp-idlehelp__btn--primary{
  background: #6BA539;
  color: #fff;
  box-shadow: 0 10px 18px rgba(107,165,57,0.25);
}
.pp-idlehelp__btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(107,165,57,0.32);
}

/* Secondary (orange outline) */
.pp-idlehelp__btn--secondary{
  background: transparent;
  color: #EB9F37;
  border-color: #EB9F37;
}
.pp-idlehelp__btn--secondary:hover{
  background: rgba(235, 159, 55,0.08);
  transform: translateY(-1px);
}

/* Responsive: stack image on top */
@media (max-width: 820px){
  .pp-idlehelp__modal{
    grid-template-columns: 1fr;
  }
  .pp-idlehelp__media{
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 18px;
  }
.pp-idlehelp__content{
  padding: 26px 28px;
  display: grid;
  align-content: center;   /* ✅ true vertical centring of the whole content stack */
  justify-items: start;
  gap: 10px;
}
  .pp-idlehelp__title{
    font-size: 28px;
  }
}