/* Shared button styles for component pages (EN)
   Matches the visual design of `cta-button` used on the landing pages. */

/* Ensure Tailwind text opacity variable exists for custom color usage */
:root {
  --tw-text-opacity: 1;
  /* Disable OS/browser dark mode color adjustments globally */
  color-scheme: light;
}

.cta-button {
  display: inline-block;
  background-color: #3b82f6; /* light-primary */
  color: #ffffff;
  font-weight: 600; /* semibold */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  background-color: #2563eb; /* light-primary-hover */
  transform: translateZ(0) scale(1.05);
}

.cta-button:focus {
  outline: none; /* focus:outline-none */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; /* focus:ring-2 focus:ring-offset-2 focus:ring-light-primary */
}

/* Dark mode variations disabled: we do not support system dark mode */

/* Unified H2 typography for content areas to match index.html */
.prose h2 {
  font-size: 1.3125rem; /* ~30% smaller than 1.875rem (text-3xl) */
  line-height: 1.575rem; /* ~30% smaller than 2.25rem */
  font-weight: 700; /* font-bold */
  color: #0f172a; /* light-text-primary */
  margin-top: 1.25rem; /* mt-5 to align with space-y-3 rhythm */
  margin-bottom: 0.5rem; /* small separation to following intro */
}

@media (min-width: 768px) { /* md */
  .prose h2 {
    font-size: 1.575rem; /* ~30% smaller than 2.25rem (text-4xl) */
    line-height: 1.75rem;
  }
}

/* Keep headings consistent regardless of system dark mode */
.prose h2 { color: #0f172a; }

/* Unified navigation text color across pages (only in light mode)
   Matches Tailwind slate-600 using Tailwind opacity var with fallback. */
html:not(.dark) header nav a:not(.cta-button),
  html:not(.dark) header nav button,
  html:not(.dark) header #mobile-menu a:not(.cta-button) {
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  }

/* Force the 3 feature tiles on component pages to always render in light mode
   regardless of system/browser dark mode. Targets the common 3-col grid used
   across all component pages without changing dark mode elsewhere. */
@media (prefers-color-scheme: dark) {
  /* Card container */
  .md\:grid-cols-3 .rounded-lg.p-6.border {
    background-color: #ffffff !important; /* light surface */
    border-color: #e5e7eb !important;     /* slate-200 */
    color: #0f172a !important;            /* light text primary */
  }

  /* Headings inside cards */
  .md\:grid-cols-3 .rounded-lg.p-6.border h3,
  .md\:grid-cols-3 .rounded-lg.p-6.border h4 {
    color: #0f172a !important;
  }

  /* Body text inside cards */
  .md\:grid-cols-3 .rounded-lg.p-6.border p,
  .md\:grid-cols-3 .rounded-lg.p-6.border li {
    color: #334155 !important; /* slate-700 */
  }
}