/* Modern Theme (UI-only) - Non-breaking overrides */

/* 1) Tokens and base */
.theme-modern {
  /* Colors */
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-contrast: #111827;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-primary: #1DA1F2; /* brand primary */
  --color-primary-600: #1DA1F2;
  --color-primary-700: #1589D1;
  --color-primary-800: #0F6EA8;
  --color-primary-contrast: #ffffff;
  --color-border: #e2e8f0;
  --color-border-subtle: #eef2f6;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  /* Light, subtle elevation */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.03);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.10);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern *, .theme-modern *::before, .theme-modern *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 2) Global elements */
.theme-modern a {
  color: var(--color-primary);
}

.theme-modern :where(a, button, input, textarea, select) {
  outline: none;
}

.theme-modern :where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 3) Header / Nav */
.theme-modern .header {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}
.theme-modern .nav-menu a {
  color: var(--color-text);
  position: relative;
  display: inline-block;
  padding-bottom: 6px; /* space for underline */
}
/* Bottom-line animation */
.theme-modern .nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-standard);
}
.theme-modern .nav-menu a:hover::after,
.theme-modern .nav-menu a:focus-visible::after {
  transform: scaleX(1);
}
.theme-modern .nav-menu a:hover {
  color: var(--color-primary);
}

/* 4) Hero */
.theme-modern .hero {
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
}
.theme-modern .hero-content {
  background: transparent;
  color: var(--color-text);
}
.theme-modern .hero-title {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
}
.theme-modern .hero-description {
  color: var(--color-muted);
}

/* 5) Buttons (unified) */
.theme-modern .register-button,
.theme-modern .demo-button,
.theme-modern .login-button,
.theme-modern .contact-button,
.theme-modern .send-button,
.theme-modern .get-in-touch-btn {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.theme-modern .register-button:hover,
.theme-modern .demo-button:hover,
.theme-modern .login-button:hover,
.theme-modern .contact-button:hover,
.theme-modern .send-button:hover,
.theme-modern .get-in-touch-btn:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
}
.theme-modern .register-button:active,
.theme-modern .demo-button:active,
.theme-modern .login-button:active,
.theme-modern .contact-button:active,
.theme-modern .send-button:active,
.theme-modern .get-in-touch-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}
.theme-modern .register-button:disabled,
.theme-modern .demo-button:disabled,
.theme-modern .login-button:disabled,
.theme-modern .contact-button:disabled,
.theme-modern .send-button:disabled,
.theme-modern .get-in-touch-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 6) Sections / Surfaces */
.theme-modern .container {
  max-width: 1200px;
}
.theme-modern .features-section,
.theme-modern .how-section,
.theme-modern .where-section,
.theme-modern .pricing-section,
.theme-modern .blog-section,
.theme-modern .contact-form-section,
.theme-modern .dual-app-section {
  background: var(--color-surface);
}
.theme-modern .why-section,
.theme-modern .benefit-right {
  background: #0f172a; /* keep a dark hero-like band */
  color: #e5e7eb;
}
.theme-modern .why-subtitle,
.theme-modern .benefit-subtitle { color: var(--color-primary); }

/* Ensure high-contrast text in dark WHY section */
.theme-modern .why-section {
  color: #e5e7eb;
}
.theme-modern .why-section .why-title {
  color: #ffffff;
}
.theme-modern .why-section .why-description,
.theme-modern .why-section p {
  color: #e5e7eb;
}
.theme-modern .why-section .feature-item span:not(.check) {
  color: #e5e7eb;
}

/* Ensure high-contrast text in dark Benefit section */
.theme-modern .benefit-right {
  color: #e5e7eb;
}
.theme-modern .benefit-right .benefit-title { color: #ffffff; }
.theme-modern .benefit-right .benefit-description,
.theme-modern .benefit-right p,
.theme-modern .benefit-right .benefit-text { color: #e5e7eb; }
.theme-modern .benefit-right .benefit-category { color: #ffffff; }

/* 6.b) How Section bordered layout */
.theme-modern .how-section .container {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.theme-modern .how-subtitle-container { margin-bottom: var(--space-6); }
.theme-modern .how-title { margin-bottom: var(--space-3); }
.theme-modern .how-description { max-width: 900px; }

/* Steps as bordered responsive cards */
.theme-modern .steps-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (max-width: 768px) {
  .theme-modern .steps-container {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.theme-modern .step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.theme-modern .step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.theme-modern .step-number {
  color: var(--color-primary);
  font-weight: 700;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.theme-modern .step-description { color: var(--color-muted); }

/* Hide legacy divider lines since cards have borders now */
.theme-modern .how-section .step-divider { display: none; }

/* 7) Cards */
.theme-modern .testimonial-card,
.theme-modern .app-column,
.theme-modern .case-study-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.theme-modern .testimonial-content p { color: var(--color-text); }
.theme-modern .testimonial-author { color: var(--color-muted); }

/* 8) Tables */
.theme-modern .pricing-table table { border-color: var(--color-border); }
.theme-modern .pricing-table th {
  background: var(--color-surface-2) !important;
  color: var(--color-text);
}
.theme-modern .pricing-table td {
  background: var(--color-surface) !important;
  color: var(--color-text);
}
.theme-modern .highlight-cell { color: var(--color-primary); }

/* 9) Forms */
.theme-modern .contact-form input,
.theme-modern .contact-form textarea,
.theme-modern select,
.theme-modern input,
.theme-modern textarea {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.theme-modern .contact-form input:focus,
.theme-modern .contact-form textarea:focus,
.theme-modern select:focus,
.theme-modern input:focus,
.theme-modern textarea:focus {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.2);
}

/* 10) Footer */
.theme-modern .footer-top { background: var(--color-surface); }
.theme-modern .footer-bottom {
  background: var(--color-primary);
}

/* 11) Dividers / Accents */
.theme-modern .where-subtitle-line,
.theme-modern .how-subtitle-line,
.theme-modern .benefit-subtitle::before,
.theme-modern .why-subtitle::before {
  background: var(--color-primary) !important;
}
.theme-modern .section-divider,
.theme-modern .step-divider { background: var(--color-border); }

/* 12) Sticky QR and iconography */
.theme-modern .qr-code-box { background: rgba(255,255,255,0.7); border-color: var(--color-border); }
.theme-modern .qr-text-line { color: var(--color-text); }
.theme-modern .contact-icon { background: #0f172a; }
.theme-modern .contact-icon i { color: var(--color-primary); }

/* 13) Typography */
.theme-modern h1, .theme-modern h2, .theme-modern h3, .theme-modern h4, .theme-modern h5 {
  color: var(--color-text);
}
.theme-modern p { color: var(--color-muted); }

/* 14) Tabs */
.theme-modern .tab-button { background: var(--color-surface-2); color: var(--color-text); }
.theme-modern .tab-button.active { background: var(--color-primary); color: var(--color-primary-contrast); }

/* 15) Accessibility helpers */
.theme-modern .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Compact vertical rhythm for major sections (responsive) */
.theme-modern .features-section,
.theme-modern .why-section,
.theme-modern .how-section,
.theme-modern .where-section,
.theme-modern .pricing-section,
.theme-modern .blog-section,
.theme-modern .testimonials-section,
.theme-modern .contact-form-section,
.theme-modern .dual-app-section,
.theme-modern .case-study-cards {
  padding-top: 48px;
  padding-bottom: 48px;
}
/* Remove large gap introduced by base styles */
.theme-modern .why-section { margin-top: 16px; }

/* Tighter top spacing for Pricing section */
.theme-modern #pricing-section,
.theme-modern .pricing-section {
  padding-top: 24px;
}
@media (max-width: 768px) {
  .theme-modern #pricing-section,
  .theme-modern .pricing-section { padding-top: 16px; }
}
@media (max-width: 480px) {
  .theme-modern #pricing-section,
  .theme-modern .pricing-section { padding-top: 12px; }
}

/* Reduce internal spacing above tabs */
.theme-modern .pricing-tabs { margin-top: 16px; }

@media (max-width: 992px) {
  .theme-modern .features-section,
  .theme-modern .why-section,
  .theme-modern .how-section,
  .theme-modern .where-section,
  .theme-modern .pricing-section,
  .theme-modern .blog-section,
  .theme-modern .testimonials-section,
  .theme-modern .contact-form-section,
  .theme-modern .dual-app-section,
  .theme-modern .case-study-cards {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (max-width: 768px) {
  .theme-modern .features-section,
  .theme-modern .why-section,
  .theme-modern .how-section,
  .theme-modern .where-section,
  .theme-modern .pricing-section,
  .theme-modern .blog-section,
  .theme-modern .testimonials-section,
  .theme-modern .contact-form-section,
  .theme-modern .dual-app-section,
  .theme-modern .case-study-cards {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
@media (max-width: 480px) {
  .theme-modern .features-section,
  .theme-modern .why-section,
  .theme-modern .how-section,
  .theme-modern .where-section,
  .theme-modern .pricing-section,
  .theme-modern .blog-section,
  .theme-modern .testimonials-section,
  .theme-modern .contact-form-section,
  .theme-modern .dual-app-section,
  .theme-modern .case-study-cards {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* High-contrast fixes: Contact locations strip and bottom footer */
.theme-modern .contact-info-section {
  background-color: #0f172a; /* ensure dark surface */
  color: #e5e7eb;
}
.theme-modern .contact-info-section .contact-item { border-color: transparent; }
.theme-modern .contact-info-section .contact-text h3 { color: #ffffff; }
.theme-modern .contact-info-section .contact-text p { color: #cbd5e1; }
.theme-modern .contact-info-section a { color: inherit; }

.theme-modern .footer-bottom,
.theme-modern .footer-bottom a,
.theme-modern .footer-bottom .social-icons a {
  color: #ffffff;
}

/* High-contrast text for RESOURCES (blog hero) top card */
.theme-modern .case-study-hero .case-study-content {
  background-color: #0f172a; /* ensure dark surface under text */
  color: #e5e7eb;
}
.theme-modern .case-study-hero .case-study-subtitle,
.theme-modern .case-study-hero .case-study-title1 { color: #ffffff; }
.theme-modern .case-study-hero .case-study-description { color: #cbd5e1; }

/* Smooth underline animation for CTA links (case study, blog titles, highlighted links) */
.theme-modern a.case-study-link,
.theme-modern a.blog-title-link,
.theme-modern a.highlight-text {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding-bottom: 3px; /* space for underline */
}
.theme-modern a.case-study-link::after,
.theme-modern a.blog-title-link::after,
.theme-modern a.highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-standard);
}
.theme-modern a.case-study-link:hover::after,
.theme-modern a.case-study-link:focus-visible::after,
.theme-modern a.blog-title-link:hover::after,
.theme-modern a.blog-title-link:focus-visible::after,
.theme-modern a.highlight-text:hover::after,
.theme-modern a.highlight-text:focus-visible::after {
  transform: scaleX(1);
}