@import "tailwindcss";
@import "../../../node_modules/intl-tel-input/build/css/intlTelInput.css";

@theme {
  --color-brand-900: #183060;
  --color-brand-500: #5875B4;
  --color-brand-400: #7A96CC;
  --color-brand-300: #9DB5DD;
  --color-brand-200: #C0D1EB;
  --color-brand-100: #E3ECF5;
  --color-brand-50: #F1F5FA;
  --color-accent: #FEC438;
  --color-accent-light: #FED96F;
  --color-accent-dark: #E5AC1F;
}

/* Gradient-bordered cards */
.gradient-card {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 2.5rem;
}
.gradient-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1.5px;
  background: linear-gradient(135deg, #C0D1EB 0%, #FEC438 50%, #5875B4 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Subtle gradient background glow */
.gradient-glow {
  background: radial-gradient(ellipse at 30% 0%, rgba(88, 117, 180, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 100%, rgba(254, 196, 56, 0.05) 0%, transparent 60%);
}

/* Gradient-bordered pill button */
.btn-gradient {
  position: relative;
  background: #183060;
  border-radius: 9999px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(135deg, #5875B4, #FEC438);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-gradient:hover {
  background: #5875B4;
  box-shadow: 0 10px 40px rgba(24, 48, 96, 0.3);
}

/* Pagy pagination */
@layer components {
  .pagy {
    @apply flex gap-x-0.5 text-sm font-semibold leading-7 mt-6 justify-center;

    a:not([role="separator"]) {
      @apply block rounded-full px-3 py-0.5 bg-gray-100 border-0 text-gray-700 no-underline;
    }

    a[href]:hover {
      @apply bg-gray-200 text-gray-900;
    }

    a:not([href]) {
      @apply cursor-default;
    }

    a[role="link"]:not([aria-current]) {
      @apply opacity-60;
    }

    a[aria-current] {
      @apply bg-brand-900 text-white;
    }
  }
}

/* Restore styles inside rich text editors (Lexxy/Trix) stripped by Tailwind preflight */
lexxy-editor,
trix-editor,
.trix-content {
  h1 { font-size: 1.5rem; font-weight: 700; margin-block: 0.5em; }
  h2 { font-size: 1.25rem; font-weight: 600; margin-block: 0.5em; }
  h3 { font-size: 1.125rem; font-weight: 600; margin-block: 0.5em; }
  h4 { font-size: 1rem; font-weight: 600; margin-block: 0.5em; }
  ol { list-style: decimal; padding-left: 1.5em; margin-block: 0.5em; }
  ul { list-style: disc; padding-left: 1.5em; margin-block: 0.5em; }
  li { margin-block: 0.25em; }
  blockquote { border-left: 3px solid #d1d5db; padding-left: 1em; margin-block: 0.5em; color: #6b7280; }
  pre { background: #f3f4f6; padding: 0.75em 1em; border-radius: 0.375rem; overflow-x: auto; margin-block: 0.5em; font-family: monospace; }
  a { color: #2563eb; text-decoration: underline; }
  u { text-decoration: underline; }
  s, del, strike { text-decoration: line-through; }
}