/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.visually-hidden {
  position: absolute;
  left: -9999px;
}

/* ── Elevated surface — shared by modals and action sheets ── */

.elevated-surface {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  border: 1px solid oklch(var(--bc) / 0.1);
}

/* ── Dialog backdrop ── */

dialog.modal[open] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Pull to refresh ── */

/* The flame box sits above the content, centered.
   It starts invisible and is shown/positioned via JS transforms. */
.ptr-box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 0;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  will-change: transform, opacity;
}

.ptr-flame {
  width: 32px;
  height: 32px;
  will-change: transform;
  transform-origin: center bottom;
  /* Position the flame so it's visible above the content.
     Since the box has height:0, the flame needs to float above via margin. */
  margin-bottom: 8px;
}

/* Outlined state — visible while pulling */
.ptr-flame-outer {
  fill: none;
  stroke: oklch(var(--bc) / 1);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: fill 0.35s ease, stroke 0.2s ease;
}

.ptr-flame-inner {
  fill: none;
  stroke: oklch(var(--bc) / 1);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.3;
  transition: fill 0.35s ease, stroke 0.2s ease;
}

/* ── Burning state ── */
.ptr-burning .ptr-flame-outer {
  fill: #f97316;
  stroke: #ea580c;
  opacity: 1 !important;
  animation: ptr-burn-outer 0.5s ease-in-out infinite alternate;
}

.ptr-burning .ptr-flame-inner {
  fill: #fbbf24;
  stroke: #f59e0b;
  opacity: 1 !important;
  animation: ptr-burn-inner 0.35s ease-in-out infinite alternate;
}

.ptr-burning {
  animation: ptr-flicker 0.3s ease-in-out infinite alternate;
}

@keyframes ptr-burn-outer {
  0%   { fill: #f97316; }
  50%  { fill: #ef4444; }
  100% { fill: #f97316; }
}

@keyframes ptr-burn-inner {
  0%   { fill: #fbbf24; }
  50%  { fill: #fde68a; }
  100% { fill: #fbbf24; }
}

@keyframes ptr-flicker {
  0%   { transform: scaleX(1) scaleY(1); }
  25%  { transform: scaleX(0.95) scaleY(1.04); }
  50%  { transform: scaleX(1.03) scaleY(0.97); }
  75%  { transform: scaleX(0.97) scaleY(1.02); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* ── Print stylesheet ── */

@media print {
  /* Hide non-essential elements */
  nav, footer, .navbar, .btm-nav,
  .ptr-box,
  .sticky,
  [data-controller="scroll-reveal"],
  .print\:hidden {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide navigation, CTA, engagement, ambient blurs */
  nav, footer, .navbar, .btm-nav,
  .ptr-box,
  .sticky {
    display: none !important;
  }

  /* Hide ambient blur decorations */
  .blur-3xl,
  .animate-pulse {
    display: none !important;
  }

  /* Hide interactive elements */
  .print\:hidden {
    display: none !important;
  }

  /* Clean black on white */
  body, article, section, div, p, span, li, h1, h2, h3, h4, dt, dd {
    color: #000 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
  }

  /* Remove backdrop effects */
  .backdrop-blur, .backdrop-blur-sm {
    backdrop-filter: none !important;
  }

  /* Remove shadows and borders for cleaner print */
  .shadow-sm, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: none !important;
  }

  /* Remove animations */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Ensure images print */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Badges print nicely */
  .badge {
    border: 1px solid #ccc !important;
    background: #f5f5f5 !important;
  }
}