/*
 * Contextify Landing Page Styles
 * Built on Bootstrap 5.3 with custom overrides
 *
 * COLOR SYSTEM
 * Canonical source: build/design/brand/colors.md
 * Consult that file before modifying any color tokens below.
 * Keep this file in sync with the specification.
 */

/* ==========================================================================
   Color System (Contextify Design System)
   ========================================================================== */
:root {
  /* Semantic Colors */
  --contextify-primary: #4A7BA7;
  --contextify-primary-hover: #3D6A94;
  --contextify-primary-light: #E8F0F7;
  --contextify-secondary: #9B8B7E;
  --contextify-success: #51A86B;
  --contextify-success-light: #E8F5EC;
  --contextify-warning: #D4A84E;
  --contextify-warning-light: #FDF6E8;
  --contextify-error: #C74E4E;
  --contextify-error-light: #FBEAEA;
  --contextify-info: #4A7BA7;
  --contextify-info-light: #E8F0F7;
  --contextify-accent: #7C68A8;

  /* Neutral Scale (Tailwind Slate) */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* Derived Tokens - Light Mode */
  --text-primary: var(--slate-800);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-400);
  --text-disabled: var(--slate-300);
  --text-inverse: #FFFFFF;

  --bg-page: var(--slate-50);
  --bg-surface: #FFFFFF;
  --bg-muted: var(--slate-100);
  --bg-elevated: #FFFFFF;
  --bg-inverse: var(--slate-800);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  --border-default: var(--slate-200);
  --border-subtle: var(--slate-100);
  --border-strong: var(--slate-300);
  --border-focus: var(--contextify-primary);

  --link-default: var(--contextify-primary);
  --link-hover: var(--contextify-primary-hover);
  --link-visited: var(--contextify-accent);
  --link-active: var(--contextify-primary-hover);

  /* Brand Colors */
  --brand-yellow: #F9B233;
  --brand-cyan: #4AC4E0;
  --brand-purple: #8B5CF6;
  --brand-gradient: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-cyan) 50%, var(--brand-purple) 100%);

  /* Provider Colors */
  --provider-claude: #D97757;
  --provider-codex: #FFFFFF;
}

/* Dark Mode Tokens */
[data-bs-theme="dark"] {
  --contextify-primary: #6A9BC7;
  --contextify-primary-hover: #7AABDA;
  --contextify-primary-light: #1E3A52;
  --contextify-secondary: #B5A89D;
  --contextify-success: #6BC885;
  --contextify-success-light: #1A3028;
  --contextify-warning: #E4B85E;
  --contextify-warning-light: #3A3020;
  --contextify-error: #D76E6E;
  --contextify-error-light: #3A2020;
  --contextify-info: #6A9BC7;
  --contextify-info-light: #1A2838;
  --contextify-accent: #9C88C8;

  --text-primary: var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary: var(--slate-500);
  --text-disabled: var(--slate-600);
  --text-inverse: var(--slate-900);

  --bg-page: var(--slate-900);
  --bg-surface: var(--slate-800);
  --bg-muted: var(--slate-700);
  --bg-elevated: var(--slate-700);
  --bg-inverse: var(--slate-100);
  --bg-overlay: rgba(0, 0, 0, 0.7);

  --border-default: var(--slate-700);
  --border-subtle: var(--slate-800);
  --border-strong: var(--slate-600);
  --border-focus: var(--contextify-primary);

  --link-hover: #8ABBDD;
  --link-visited: #9C88C8;
  --link-active: #7AABDA;
}

/* ==========================================================================
   Base / Body
   ========================================================================== */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

[data-bs-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

/* Override Bootstrap bg-white for dark mode */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--slate-800) !important;
  color: var(--text-primary);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .navbar {
  background-color: var(--slate-900);
}

.navbar-brand {
  color: var(--contextify-primary) !important;
  font-weight: bold;
  font-size: 1.75rem;
}

[data-bs-theme="dark"] .navbar-brand {
  color: var(--slate-50) !important;
}

.navbar .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary-hover);
  font-weight: 600;
}

.navbar .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

/* The demoted "Download" secondary uses the brand blue, not Bootstrap's stock
   #0D6EFD, so the filled primary "Try Cloud Free" stays the loudest element in
   the nav (a saturated stock-blue outline would out-shout the muted brand fill
   and invert the intended primary/secondary hierarchy). */
.navbar .btn-outline-primary {
  color: var(--contextify-primary);
  border-color: var(--contextify-primary);
}

.navbar .btn-outline-primary:hover {
  color: #fff;
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary);
}

.navbar .nav-cta-signup {
  white-space: nowrap;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  background-color: var(--slate-900);
  /* Subtle brand gradient - scales infinitely, replaces problematic SVG swoopy */
  background-image:
    radial-gradient(ellipse 80% 50% at 70% 60%, rgba(74, 196, 224, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 30% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 90% 20%, rgba(249, 178, 51, 0.05) 0%, transparent 40%);
}

.hero-section h1 {
  font-size: 2.75rem;
  color: var(--slate-50);
  line-height: 1.2;
}

.hero-section .lead {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--slate-100);
  opacity: 0.9;
}

.hero-section .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary-hover);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.hero-section .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

/* Screenshot with 3D perspective effect */
.screenshot-wrapper {
  display: flex;
  justify-content: center;
}

.screenshot {
  transform: perspective(1500px) rotateY(-10deg);
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
  transition: transform 1s ease 0s;
  max-width: 420px;
  width: 100%;
}

.screenshot:hover {
  transform: perspective(3000px) rotateY(5deg);
}

/* Disable 3D effect on touch devices */
@media only screen and (hover: none) and (pointer: coarse) {
  .screenshot {
    transform: none;
    transition: none;
  }
  .screenshot:hover {
    transform: none;
  }
}

[data-bs-theme="dark"] .screenshot {
  box-shadow: 0 2px 0 #000, 0 2px 5px #000;
}

/* ==========================================================================
   Brand Gradient Divider
   ========================================================================== */
.brand-divider {
  height: 4px;
  background: var(--brand-gradient);
}

/* ==========================================================================
   Card Styles & Hover Effects
   ========================================================================== */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Statement Section
   ========================================================================== */
.statement-section {
  padding: 4rem 0;
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .statement-section {
  background-color: var(--slate-800);
}

.statement-text {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .statement-text {
  color: var(--slate-100);
}

.statement-subtext {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

[data-bs-theme="dark"] .statement-subtext {
  color: var(--slate-400);
}

.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.company-logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.company-logo:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

[data-bs-theme="dark"] .company-logo {
  filter: grayscale(100%) invert(1);
}

[data-bs-theme="dark"] .company-logo:hover {
  filter: grayscale(0%) invert(1);
}

/* ==========================================================================
   Feature Sections
   ========================================================================== */
.feature-section {
  padding: 5rem 0;
  background-color: var(--bg-surface);
}

.feature-section-alt {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .feature-section {
  background-color: var(--slate-900);
}

[data-bs-theme="dark"] .feature-section-alt {
  background-color: var(--slate-800);
}

.feature-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

[data-bs-theme="dark"] .feature-title {
  color: var(--slate-50);
}

.feature-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

[data-bs-theme="dark"] .feature-description {
  color: var(--slate-400);
}

.feature-image {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.feature-image:hover {
  transform: scale(1.02);
}

[data-bs-theme="dark"] .feature-image {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.feature-image-transparent {
  width: 100%;
  max-width: 540px;
  transition: transform 0.2s ease;
}

.feature-image-transparent:hover {
  transform: scale(1.02);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Download Section
   ========================================================================== */
#download {
  background-color: var(--slate-900);
}

[data-bs-theme="dark"] #download {
  background-color: var(--slate-950);
}

.download-card {
  padding: 3rem 2rem;
}

.download-card h2 {
  color: var(--slate-50);
}

.download-card p {
  color: var(--slate-300);
}

.download-card .btn-primary {
  background-color: var(--contextify-primary);
  border-color: var(--contextify-primary);
  padding: 0.875rem 2rem;
  font-weight: 600;
}

.download-card .btn-primary:hover {
  background-color: var(--contextify-primary-hover);
  border-color: var(--contextify-primary-hover);
}

.download-card .text-body-secondary {
  color: var(--slate-400) !important;
}

.download-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.app-store-badge {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.app-store-badge:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* App Store badge: show light-bg version by default, dark-bg version in dark mode */
.badge-dark-bg {
  display: none;
}

[data-bs-theme="dark"] .badge-light-bg {
  display: none;
}

[data-bs-theme="dark"] .badge-dark-bg {
  display: inline;
}

.download-divider {
  color: var(--slate-500);
  font-size: 0.875rem;
}

.dmg-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  background: linear-gradient(135deg, var(--contextify-primary) 0%, var(--contextify-secondary) 100%);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px -3px rgba(217, 119, 87, 0.4);
}

.dmg-download::before {
  content: "↓";
  font-size: 1.1rem;
  font-weight: 700;
}

.dmg-download:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px -3px rgba(217, 119, 87, 0.5);
  color: #fff;
}

/* "New!" badge pill */
.badge-new {
  display: inline-block;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-left: 0.35rem;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Hero Linux button */
.hero-linux-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid #7C68A8;
  border-radius: 8px;
  background-color: #7C68A8;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.hero-linux-btn:hover {
  background-color: #6A5691;
  border-color: #6A5691;
  color: #fff;
  text-decoration: none;
}

/* Download card Linux CTA */
.linux-cta {
  border-top: 1px solid var(--slate-700);
}

.linux-cta-link {
  color: var(--slate-200);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
}

.linux-cta-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   Download Page
   ========================================================================== */
.download-hero {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .download-hero {
  background-color: var(--slate-900);
}

.download-option-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
}

[data-bs-theme="dark"] .download-option-card {
  background-color: var(--slate-800);
  border-color: var(--slate-700);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  font-size: 0.95rem;
}

.feature-list li.pro::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--contextify-primary);
  font-weight: 700;
}

.feature-list li.con::before {
  content: "~";
  position: absolute;
  left: 0;
  color: var(--slate-500);
  font-weight: 700;
}

.comparison-section {
  background-color: var(--bg-surface);
}

[data-bs-theme="dark"] .comparison-section {
  background-color: var(--slate-800);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-page);
  border-radius: 12px;
  overflow: hidden;
}

[data-bs-theme="dark"] .comparison-table {
  background-color: var(--slate-900);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.comparison-table th {
  background-color: var(--bg-surface);
  font-weight: 600;
  color: var(--text-primary);
}

[data-bs-theme="dark"] .comparison-table th {
  background-color: var(--slate-800);
}

.comparison-table td {
  color: var(--text-secondary);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.recommendation-section {
  background-color: var(--bg-page);
}

[data-bs-theme="dark"] .recommendation-section {
  background-color: var(--slate-900);
}

.recommendation-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}

[data-bs-theme="dark"] .recommendation-card {
  background-color: var(--slate-800);
  border-color: var(--slate-700);
}

.recommendation-card ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.recommendation-card li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.requirements-section {
  background-color: var(--bg-surface);
}

[data-bs-theme="dark"] .requirements-section {
  background-color: var(--slate-800);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background-color: var(--slate-900) !important;
  padding: 3rem 0;
}

footer a {
  color: var(--slate-100);
  text-decoration: none;
}

footer a:hover {
  color: var(--contextify-primary);
}

.footer-brand {
  color: var(--slate-50);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Gradient scales well on mobile, no need to hide */

  .screenshot-wrapper {
    padding: 0 1rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  #download {
    margin: 0 1rem;
  }
}

/* ==========================================================================
   Typography Scale
   ========================================================================== */
@media (min-width: 992px) {
  .hero-section h1 {
    font-size: 3rem;
  }

  #features li {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Page Content (Privacy, Terms, Support)
   ========================================================================== */
[data-bs-theme="dark"] .page-content.bg-white {
  background-color: var(--bg-surface) !important;
}

.page-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
}

.page-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--contextify-primary);
}

[data-bs-theme="dark"] .page-content h2 {
  color: var(--contextify-primary);
}

.page-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.page-content p {
  margin-bottom: 1rem;
}

.page-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content code {
  background-color: var(--bg-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

[data-bs-theme="dark"] .page-content code {
  background-color: var(--bg-muted);
}

.page-content a {
  color: var(--link-default);
}

[data-bs-theme="dark"] .page-content a {
  color: var(--link-default);
}

.page-content a:hover {
  color: var(--link-hover);
}

[data-bs-theme="dark"] .page-content a:hover {
  color: var(--link-hover);
}

/* ==========================================================================
   Newsletter Signup Section
   ========================================================================== */
.newsletter-section {
  background-color: var(--bg-muted);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

[data-bs-theme="dark"] .newsletter-section {
  background-color: var(--bg-muted);
}

.newsletter-form .input-group {
  max-width: 400px;
  margin: 0 auto;
}

.newsletter-form .form-control {
  border-color: var(--border-default);
}

.newsletter-form .form-control:focus {
  border-color: var(--contextify-primary);
  box-shadow: 0 0 0 0.2rem rgba(74, 123, 167, 0.25);
}

#newsletter-message {
  min-height: 1.5em;
}

#newsletter-message.success {
  color: var(--contextify-success);
}

#newsletter-message.error {
  color: var(--contextify-error);
}

/* Mobile: cap the g-5 horizontal gutter so its negative row margins do not
   overflow the viewport (columns stack below lg, so the horizontal gutter is
   not visible on phones anyway). Fixes homepage horizontal scroll on mobile. */
@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
}