/* Wealthseny-specific gradients and overlays for the WordPress theme.
 * These mimic the Tailwind arbitrary-value classes used in the React app
 * (e.g. from-[#1e3a5f] via-[#2b4a6f] to-[#1e3a5f], blue-400 overlays, etc.).
 */

.wealthseny-hero-bg {
  background-image: linear-gradient(to bottom right, #1e3a5f, #2b4a6f, #1e3a5f);
}

.wealthseny-hero-overlay-main {
  background-image: linear-gradient(to bottom right,
      rgba(96, 165, 250, 0.25),
      transparent,
      rgba(59, 130, 246, 0.25));
}

.wealthseny-hero-overlay-radial {
  background-image: radial-gradient(circle at 30% 30%, rgba(147, 197, 253, 0.15), transparent 50%);
}

.wealthseny-cta-bg {
  background-image: linear-gradient(to bottom right, #1e3a5f, #2b4a6f, #1e3a5f);
}

.wealthseny-cta-overlay-main {
  background-image: linear-gradient(to bottom right,
      rgba(96, 165, 250, 0.25),
      transparent,
      rgba(249, 115, 22, 0.25));
}

.wealthseny-cta-overlay-radial {
  background-image: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.15), transparent 50%);
}

/* Utility gaps that were missing from the Tailwind build but are
 * used heavily on the Wealthseny marketing page.
 */

/* Card padding in \"Powerful Features\" and elsewhere */
.p-6 {
  padding: 1.5rem;
}

/* Icon container sizes and logo sizing */
.w-20 {
  width: 5rem;
}

.h-20 {
  height: 5rem;
}

/* Blue color utilities (approximate Tailwind blue palette) */
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity));
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}

/* Gradients for icon backgrounds in cards */
.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(59, 130, 246, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

/* Light blue gradient text for \"Financial Well-being\" and
 * \"Early Access Program\" headings.
 * These mirror Tailwind's from-blue-300 / to-blue-400 utilities.
 */
.from-blue-300 {
  --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(147, 197, 253, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-400 {
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}

/* Deep blue gradient background for \"How Wealthseny Works\" cards and \"Built for Your Stage\" cards */
.wealthseny-how-card {
  background-image: linear-gradient(to bottom right, #1e3a5f, #2b4a6f);
}

/* Darker inset card background for \"Security & Privacy\" section (sits on dark bg) */
.wealthseny-security-card {
  background-image: linear-gradient(to bottom right, #162d4a, #1e3a5f);
}

/* Orange-tinted icon container used in dark-bg card sections */
.wealthseny-icon-bg {
  background-color: rgba(249, 115, 22, 0.20);
  border-color: rgba(251, 146, 60, 0.30);
}

.wealthseny-security-card:hover {
  border-color: rgba(251, 146, 60, 0.40);
}

/* Stronger hover treatment for blue-bordered cards */
.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.15),
    0 10px 10px -5px rgba(59, 130, 246, 0.1);
}

/* Responsive grid helpers missing from the base Tailwind build.
 * These ensure cards line up 3 per row on medium+ screens as in React.
 */
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Custom Gradient Text for Wealthseny headings */
.wealthseny-gradient-text {
  background-image: linear-gradient(to right, #14B8A6, #06B6D4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}