/* =============================================================
   RecipeCleaner - custom.css
   Skeleton loading effects, refinements, and print/PDF layout.
   ============================================================= */

/* ---------- Mobile overflow safety net ----------
   Belt-and-suspenders guard: no single element (long placeholder,
   unbroken URL, wide table, etc.) should ever be able to force
   horizontal scrolling on the page. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Long unbroken strings (URLs, emails) should wrap instead of
   pushing their container wider than the viewport. */
input, a, p, span {
  min-width: 0;
}


/* ---------- Skeleton loader ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e2e8f0;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ---------- Ingredient strikethrough transition ---------- */
.ingredient-text {
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

.ingredient-checkbox {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ingredient-item:active .ingredient-checkbox {
  transform: scale(0.9);
}

/* ---------- Recipe card entrance polish ---------- */
.recipe-card {
  will-change: transform, opacity;
}

/* ---------- Scrollbar polish for the collections drawer ---------- */
#collections-list {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
#collections-list::-webkit-scrollbar {
  width: 6px;
}
#collections-list::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
}

/* ---------- Servings buttons active state ---------- */
.serving-btn {
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* =============================================================
   PRINT / PDF STYLES
   Only the recipe card content prints - chrome, nav, sidebars,
   backgrounds, and interactive controls are hidden.
   ============================================================= */
@media print {
  @page {
    margin: 1.5cm;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide everything by default, then re-reveal only the printable area. */
  body * {
    visibility: hidden;
  }

  .printable-area,
  .printable-area * {
    visibility: visible;
  }

  .printable-area {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }

  /* Explicitly hidden chrome, even if nested inside the printable area. */
  .no-print,
  #app-header,
  #hero,
  #skeleton-loader,
  #collections-drawer,
  #collections-overlay,
  #toast-container {
    display: none !important;
  }

  /* Force ingredients/instructions into a single column for a clean page. */
  .print-columns {
    display: block !important;
  }
  .print-columns > div {
    margin-bottom: 1.25rem;
  }

  .recipe-title {
    color: #000 !important;
    font-size: 20pt !important;
  }

  .ingredient-checkbox,
  .step-number {
    display: none !important;
  }

  .ingredient-item,
  .instruction-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a[href]::after {
    content: none !important; /* don't print raw URLs after links */
  }
}