@import url('./design-tokens.css');

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--pd-font-family-base);
  font-size: var(--pd-text-base-size);
  line-height: var(--pd-line-height-normal);
  color: var(--pd-text-base);
  background-color: var(--pd-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main-content {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--pd-space-4);
  font-weight: var(--pd-font-weight-bold);
  line-height: var(--pd-line-height-tight);
  color: var(--pd-text-primary);
}

h1 { font-size: var(--pd-text-4xl); }
h2 { font-size: var(--pd-text-3xl); }
h3 { font-size: var(--pd-text-2xl); }
h4 { font-size: var(--pd-text-xl); }
h5 { font-size: var(--pd-text-lg); }

p {
  margin-top: 0;
  margin-bottom: var(--pd-space-4);
  color: var(--pd-text-muted);
}

a {
  color: var(--pd-color-info);
  text-decoration: none;
  transition: color var(--pd-transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* Base button utilities to reflect the modern utility tool vibe */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pd-space-2) var(--pd-space-4);
  font-size: var(--pd-text-sm);
  font-weight: var(--pd-font-weight-medium);
  border-radius: var(--pd-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--pd-transition-fast);
  text-decoration: none;
  line-height: var(--pd-line-height-none);
}

.btn-primary {
  background-color: var(--pd-color-primary-900);
  color: var(--pd-text-inverse);
}

.btn-primary:hover {
  background-color: var(--pd-color-primary-800);
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--pd-bg-surface);
  color: var(--pd-text-base);
  border-color: var(--pd-border-base);
  box-shadow: var(--pd-shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--pd-bg-subtle);
  text-decoration: none;
}

/* Layout utilities for "Zero Bloat" */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pd-space-4);
  padding-right: var(--pd-space-4);
}

/* Mobile comparison table cards */
@media screen and (max-width: 992px) {
  .comparison-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  .mobile-comparison-table {
    display: block !important;
    width: 100% !important;
  }
  .mobile-comparison-table thead {
    display: none !important;
  }
  .mobile-comparison-table tbody,
  .mobile-comparison-table tr,
  .mobile-comparison-table td {
    display: block !important;
    width: 100% !important;
  }
  .mobile-comparison-table tr {
    margin-bottom: 1.5rem;
    border: 1px solid var(--pd-border-base) !important;
    border-radius: 1rem; /* Matches Bootstrap rounded-4 */
    overflow: hidden;
    background-color: var(--pd-bg-surface);
    box-shadow: var(--pd-shadow-sm);
    /* Fix for Safari border-radius overflow bug */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .mobile-comparison-table tr:last-child {
    margin-bottom: 0;
  }
  .mobile-comparison-table td {
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    border-bottom: 1px solid var(--pd-border-base) !important;
    border-right: none !important;
  }
  .mobile-comparison-table tr.border-bottom {
    border-bottom: none !important; /* Let td handle the bottom border to avoid double borders inside tr */
  }
  .mobile-comparison-table td:last-child {
    border-bottom: none !important;
    background-color: var(--pd-color-primary-900) !important;
    color: var(--pd-text-inverse) !important;
    border-bottom-left-radius: calc(1rem - 1px);
    border-bottom-right-radius: calc(1rem - 1px);
  }
  
  /* Ensure inner text inherits white color inside Paydroply cell */
  .mobile-comparison-table td:last-child * {
    color: inherit !important;
  }

  /* Feature Name Header */
  .mobile-comparison-table td:nth-child(1) {
    background-color: var(--pd-bg-subtle) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--pd-text-primary) !important;
    border-top-left-radius: calc(1rem - 1px);
    border-top-right-radius: calc(1rem - 1px);
  }
  
  /* Labels for the columns */
  .mobile-comparison-table td::before {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  .mobile-comparison-table td:nth-child(2)::before {
    content: "Other Platforms (e.g. Gumroad)";
    font-weight: 600;
    color: var(--pd-text-muted);
  }
  .mobile-comparison-table td:nth-child(3)::before {
    content: "Stripe (Direct)";
    font-weight: 600;
    color: var(--pd-text-muted);
  }
  .mobile-comparison-table td:nth-child(4)::before {
    content: "Paydroply";
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}