/* ── Cross-browser compatibility baseline ──
   Addresses: iOS landscape text inflation, iOS tap flash, form font inheritance,
   Chrome autofill background, number input spinners.
   Sources: Normalize.css, modern-normalize, CSS Remedy. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

/* Chrome/Edge autofill: override the default yellow/blue background that
   clashes with our slate-50 input backgrounds. Uses inset box-shadow trick
   because Chrome ignores background-color on autofilled inputs. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset; /* slate-50 */
  -webkit-text-fill-color: #1e293b; /* slate-800 */
  transition: background-color 5000s ease-in-out 0s;
}

/* Hide number input spinners for consistent appearance across browsers.
   Chrome/Edge show up/down arrows; Firefox/Safari do not. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ── iPetitions Design System: Color Palette ──
   Source: Figma Design System → Palette
   Convention: --color-{family}-{shade}
   Usage:  var(--color-blue-gray-800)  or  Tailwind: text-blue-gray-800 */
:root {
  /* Blue Gray */
  --color-blue-gray-50: #f8fafc;
  --color-blue-gray-100: #f1f5f9;
  --color-blue-gray-200: #e2e8f0;
  --color-blue-gray-300: #cbd5e1;
  --color-blue-gray-400: #94a3b8;
  --color-blue-gray-500: #64748b;
  --color-blue-gray-600: #475569;
  --color-blue-gray-700: #334155;
  --color-blue-gray-800: #1e293b;
  --color-blue-gray-900: #0f172a;

  /* Orange */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;

  /* Yellow */
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  /* Green */
  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;

  /* Teal */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;

  /* Blue */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* Indigo */
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;


  /* Navbar clearance - padding-top needed to push content below the
     fixed glassmorphic navbar.  Use in Tailwind as:
       * pt-[var(--pt-main-navbar-m)]
       * lg:pt-[var(--pt-main-navbar-d)] */
  --pt-main-navbar-m: 98px; /* Mobile */
  --pt-main-navbar-d: 122px; /* Desktop */
}


/* 3D Gradient CTA Button
   Note: Hover changes background-image (gradients), which CSS cannot
   transition smoothly. The color shift is intentionally instant. */
.btn-cta-3d {
  background:
    radial-gradient(
      ellipse at 86% 88%,
      rgba(124, 45, 18, 0.2) 0%,
      rgba(124, 45, 18, 0) 86%
    ),
    radial-gradient(
      ellipse at 26% 21%,
      rgba(255, 247, 237, 0.35) 0%,
      rgba(255, 255, 255, 0) 77%
    ),
    linear-gradient(90deg, var(--color-orange-500) 0%, var(--color-orange-500) 100%);
  box-shadow:
    3px 3px 5px 0px rgba(124, 45, 18, 0.15), /* orange-900 base / 15% */
    inset -2px -4px 7px 0px rgba(255, 247, 237, 0.24); /* orange-50 base / 24% */
}

.btn-cta-3d:hover {
  background:
    radial-gradient(
      ellipse at 86% 88%,
      rgba(124, 45, 18, 0.25) 0%,
      rgba(124, 45, 18, 0) 86%
    ),
    radial-gradient(
      ellipse at 26% 21%,
      rgba(255, 247, 237, 0.4) 0%,
      rgba(255, 255, 255, 0) 77%
    ),
    linear-gradient(90deg, var(--color-orange-600) 0%, var(--color-orange-600) 100%);
}

/* 3D Gradient CTA Button — Teal variant */
.btn-cta-3d-teal {
  background:
    radial-gradient(
      ellipse at 86% 88%,
      rgba(17, 94, 89, 0.2) 0%,
      rgba(17, 94, 89, 0) 86%
    ),
    radial-gradient(
      ellipse at 26% 21%,
      rgba(255, 247, 237, 0.5) 0%,
      rgba(255, 255, 255, 0) 77%
    ),
    linear-gradient(90deg, var(--color-teal-700) 0%, var(--color-teal-700) 100%);
  box-shadow:
    3px 3px 5px 0px rgba(17, 94, 89, 0.15), /* teal-800 base / 15% */
    inset -2px -4px 7px 0px rgba(255, 247, 237, 0.24); /* orange-50 base / 24% */
}

.btn-cta-3d-teal:hover {
  background:
    radial-gradient(
      ellipse at 86% 88%,
      rgba(17, 94, 89, 0.25) 0%,
      rgba(17, 94, 89, 0) 86%
    ),
    radial-gradient(
      ellipse at 26% 21%,
      rgba(255, 247, 237, 0.55) 0%,
      rgba(255, 255, 255, 0) 77%
    ),
    linear-gradient(90deg, #0d6963 0%, #0d6963 100%);
}

/* Glass-effect preview button */
.btn-preview:hover:not(:disabled),
.btn-preview:active:not(:disabled) {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 245, 249, 0.3) 100%); /* blue-gray-100 base / 30% */
  box-shadow:
    2px 2px 6px 0px rgba(0, 0, 0, 0.06),
    -1px -1px 4px 0px rgba(0, 0, 0, 0.04),
    inset -1px -2px 5px 0px rgba(255, 255, 255, 0.4);
}

/* Design System: card shadow — reusable drop shadow for card containers.
   Figma token: "card shadow" = 1px 1px 10px rgba(71,85,105,0.1) */
.shadow-card {
  box-shadow: 1px 1px 10px 0px rgba(71, 85, 105, 0.1); /* blue-gray-600 / 10% */
}

/* "Improve My Draft" shimmer animation — uses a pseudo-element so the
   gradient fades in via opacity instead of snapping (CSS can't transition
   between a solid bg and a gradient background-image). */
.improve-draft-shimmer {
  position: relative;
  overflow: hidden;
}

.improve-draft-shimmer > * {
  position: relative;
  z-index: 1;
}

.improve-draft-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    82deg,
    rgba(255, 237, 213, 0.4) 0%,  /* orange-100 / 40% */
    rgba(254, 215, 170, 0.8) 50%, /* orange-200 / 80% */
    rgba(255, 237, 213, 0.4) 100% /* orange-100 / 40% */
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  opacity: 0;
  animation: draft-shimmer-in 0.4s ease-out forwards,
             draft-shimmer 3s ease-in-out 0.4s infinite;
}

@keyframes draft-shimmer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes draft-shimmer {
  0% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* IMD button activation glow ring */
.imd-activate {
  animation: imd-glow 0.6s ease-out;
}

@keyframes imd-glow {
  0%   { outline: 2px solid rgba(249, 115, 22, 0.5); outline-offset: 0px; } /* orange-500 / 50% */
  100% { outline: 2px solid rgba(249, 115, 22, 0);   outline-offset: 8px; } /* orange-500 / 0% */
}

/* AI suggestion loading skeleton */
.ai-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-blue-gray-200) 25%, var(--color-blue-gray-100) 50%, var(--color-blue-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .improve-draft-shimmer::before { animation: none; opacity: 1; }
  .imd-activate { animation: none; }
  .ai-skeleton-line { animation: none; }
}


/* Donation marquee — animate the wrapper so all copies move as one unit.
   3 copies in the track; translateX(-33.33%) shifts by exactly one copy's width
   for a seamless loop with buffer to prevent gap flashes. */
@keyframes donation-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}
.donation-marquee-track {
  animation: donation-marquee 60s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .donation-marquee-track { animation: none; }
}



/* Alpine.js cloak — hide elements until Alpine initializes */
[x-cloak] { display: none !important; }


/* Mobile petition progress bar — inset shadow matching Figma */
.progress-bar-inset {
  box-shadow: inset 0px 1px 5px 0px rgba(198, 96, 0, 0.19); /* ~orange-700 / 19% */
}

/* Gradient text fade for collapsed/truncated text blocks.
   Apply .text-gradient-fade when collapsed; remove when expanded.
   Set --fade-color on the element to control the top color.
   Uses background-clip:text so the text itself fades out toward the bottom. */
.text-gradient-fade {
  color: transparent !important;
  background: linear-gradient(to bottom, var(--fade-color, var(--color-blue-gray-800)) 0%, rgba(0, 0, 0, 0.15) 90%);
  -webkit-background-clip: text;
  background-clip: text;
}
.text-gradient-fade > * {
  color: inherit !important;
}

/* Sticky bar frosted glass */
.sticky-bar-glass {
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  background: rgba(250, 250, 250, 0.7);
  box-shadow: 0px -2px 4px 0px rgba(71, 85, 105, 0.05), /* blue-gray-600 / 5% */
              0px -10px 15px 0px rgba(71, 85, 105, 0.05); /* blue-gray-600 / 5% */
}



/* Progressive blur overlay for petition card image — from petition_editor.html */
.preview-progressive-blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,1) 100%);
  mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,1) 100%);
}