/* NFS Meal Planner – Mobile & From Header Patch (scoped) */

/* ---- Base container adjustments ---- */
.nfs-meal-planner {
  box-sizing: border-box;
}

/* Prevent theme-wide paddings from ballooning the gate */
.nfs-meal-planner .nnmp-gate,
.nfs-meal-planner .nnmp-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 18px;
}

/* Hero image fluid */
.nfs-meal-planner .nnmp-hero img,
.nfs-meal-planner .nnmp-hero-picture,
.nfs-meal-planner .nnmp-hero {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Form elements */
.nfs-meal-planner input[type="text"],
.nfs-meal-planner input[type="email"],
.nfs-meal-planner select,
.nfs-meal-planner button {
  max-width: 100%;
}

/* Grid => stack on small screens */
.nfs-meal-planner .nnmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 920px) {
  .nfs-meal-planner .nnmp-grid {
    grid-template-columns: 1fr;
  }
}

/* Two-column sections */
.nfs-meal-planner .nnmp-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}

@media (max-width: 920px) {
  .nfs-meal-planner .nnmp-cols {
    grid-template-columns: 1fr;
  }
}

/* Buttons wrap instead of overlapping */
.nfs-meal-planner .nnmp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nfs-meal-planner .nnmp-actions .button,
.nfs-meal-planner .nnmp-actions button,
.nfs-meal-planner .nnmp-actions .nnmp-btn {
  white-space: nowrap;
}

/* Headings spacing */
.nfs-meal-planner h2,
.nfs-meal-planner h3 {
  margin-top: 0.6em;
  margin-bottom: 0.4em;
}

/* Fix long ingredient lines overflowing on mobile */
.nfs-meal-planner .nnmp-list ul,
.nfs-meal-planner .nnmp-list li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Reduce extra white space within gate panels on narrow screens */
@media (max-width: 768px) {
  .nfs-meal-planner .nnmp-gate-card {
    padding: 14px;
  }
  .nfs-meal-planner .nnmp-gate h1,
  .nfs-meal-planner .nnmp-gate h2 {
    line-height: 1.2;
  }
}

/* Make inline promos & notes stack nicely */
.nfs-meal-planner .nnmp-note,
.nfs-meal-planner .nnmp-promo {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7faf8;
  border: 1px solid #dbe7df;
}

/* Inputs should never overflow */
.nfs-meal-planner .nnmp-form-row,
.nfs-meal-planner .nnmp-form-row * {
  box-sizing: border-box;
}

/* Ensure modals/previews are full-width on phones */
@media (max-width: 540px) {
  .nfs-meal-planner .nnmp-modal {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}

/* Optional: smaller fonts on very small screens to prevent wrapping issues */
@media (max-width: 360px) {
  .nfs-meal-planner {
    font-size: 15px;
  }
}