/* AI Fluency Program - Notion-like Design Overrides */

/* Color adjustments for softer, more Notion-like appearance */
:root {
  /* Softer grays for better contrast */
  --ai-bg-white: #ffffff;
  --ai-bg-gray: #f7f6f5; /* Darker gray for better contrast */
  --ai-bg-light-gray: #fbfbfa; /* Slightly darker for subtle difference */
  --ai-text-primary: #2e2d29; /* Darker for better contrast */
  --ai-text-secondary: #5a5955; /* Darker for better readability */
  --ai-text-light: #6e6c67;
  --ai-border-light: #e8e7e5;
  --ai-border-medium: #dcdbd8;
  
  /* Consistent spacing */
  --ai-section-padding: 48px;
  --ai-section-padding-mobile: 32px;
  --ai-content-gap: 24px;
  --ai-element-gap: 16px;
}

/* Override background colors for alternating sections */
.bg-gray-light {
  background-color: var(--ai-bg-gray) !important;
}

.bg-white {
  background-color: var(--ai-bg-white) !important;
}

/* Consistent section padding */
.content-block,
.feature-grid,
.comparison,
.super-features,
.faq,
.people-list,
.webinar-section,
.curriculum,
.career-benefits,
.topic-overview,
.cta-banner {
  padding: var(--ai-section-padding) 0 !important;
}

@media (max-width: 768px) {
  .content-block,
  .feature-grid,
  .comparison,
  .super-features,
  .faq,
  .people-list,
  .webinar-section,
  .curriculum,
  .career-benefits,
  .topic-overview,
  .cta-banner {
    padding: var(--ai-section-padding-mobile) 0 !important;
  }
}

/* Consistent container widths and padding */
.container,
.content-block__container,
.feature-grid__container,
.comparison__container,
.super-features__container,
.faq__container,
.people-list__container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Consistent heading styles */
h2,
.content-block__title,
.feature-grid__title,
.comparison__title,
.super-features__title,
.faq__title,
.people-list__title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ai-text-primary) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Consistent subtitle styles */
.content-block__subtitle,
.feature-grid__subtitle,
.comparison__subtitle,
.super-features__subtitle,
.faq__subtitle,
.people-list__subtitle {
  font-size: 16px !important;
  color: var(--ai-text-secondary) !important;
  margin-bottom: 32px !important;
  line-height: 1.5 !important;
}

/* Consistent paragraph and text styles */
p,
.content-block__description p,
.feature-grid__description,
.comparison__description {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ai-text-primary) !important;
  margin-bottom: 16px !important;
}

/* Feature grid adjustments */
.feature-grid__grid {
  gap: 20px !important;
}

.feature-grid__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  transition: all 0.2s ease !important;
}

.feature-grid__item:hover {
  border-color: var(--ai-border-medium) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-2px) !important;
}

/* Fix feature card backgrounds that are too bright */
.feature-card.bg-gray-light {
  background-color: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
}

/* Super features adjustments */
.super-features__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
}

.super-features--enhanced .super-features__item {
  padding: 32px !important;
}

/* Comparison table adjustments */
.comparison__content {
  gap: 32px !important;
}

.comparison__column {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

.comparison__column-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ai-text-primary) !important;
  margin-bottom: 16px !important;
}

/* FAQ section adjustments */
.faq__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.faq__question {
  padding: 20px 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ai-text-primary) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.faq__question:hover {
  background: var(--ai-bg-light-gray) !important;
}

.faq__answer {
  padding: 0 24px 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ai-text-secondary) !important;
}

/* People list adjustments */
.people-list__grid {
  gap: 24px !important;
}

.people-list__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

/* Content block HTML content adjustments */
.content-block__description table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 16px !important;
}

.content-block__description td {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  vertical-align: top !important;
}

.content-block__description h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ai-text-primary) !important;
  margin-bottom: 20px !important;
}

.content-block__description h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ai-text-primary) !important;
  margin-bottom: 8px !important;
}

/* Press section cards */
.content-block__description a[target="_blank"] {
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
  display: block !important;
}

.content-block__description a[target="_blank"]:hover {
  transform: translateY(-4px) !important;
}

/* Client logos alignment */
.content-block__description img {
  max-width: 100% !important;
  height: auto !important;
}

/* Learning journey cards */
.webinar-section.numbered-features .numbered-features__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}

/* Numbered features number circles */
.numbered-features__number {
  background: var(--ai-text-primary) !important;
  color: var(--ai-bg-white) !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin-right: 16px !important;
}

/* Gradient overlays - soften them */
.content-block__description div[style*="linear-gradient"] {
  opacity: 0.95 !important;
}

/* Button styles - more Notion-like */
button,
.button,
.btn {
  background: var(--ai-text-primary) !important;
  color: var(--ai-bg-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

button:hover,
.button:hover,
.btn:hover {
  background: #2f2d28 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Links styling */
a {
  color: var(--ai-text-primary) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ai-border-medium) !important;
  text-underline-offset: 2px !important;
  transition: text-decoration-color 0.2s ease !important;
}

a:hover {
  text-decoration-color: var(--ai-text-primary) !important;
}

/* Remove excessive shadows */
.shadow-sm,
.shadow-md,
.shadow-lg {
  box-shadow: none !important;
}

/* Ensure consistent text rendering */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Fix alignment issues in headers */
.content-block__header,
.feature-grid__header,
.comparison__header,
.super-features__header,
.faq__header,
.people-list__header {
  text-align: left !important;
  margin-bottom: 32px !important;
}

.content-block__header--center,
.feature-grid__header--center,
.comparison__header--center {
  text-align: center !important;
}

/* Ensure proper spacing between sections */
section + section {
  margin-top: 0 !important;
}

/* Fix overly bright elements */
.bg-yellow,
.bg-blue,
.bg-pink {
  opacity: 0.1 !important;
}

/* Fix bright backgrounds in content sections */
.content-block__description div[style*="rgb(249"],
.content-block__description div[style*="rgb(250"],
.content-block__description div[style*="rgb(251"] {
  background-color: var(--ai-bg-gray) !important;
}

/* Soften borders */
* {
  border-color: var(--ai-border-light) !important;
}

/* Fix table spacing in content blocks */
.content-block__description table[style*="border-spacing"] {
  border-spacing: 12px !important;
}

/* Ensure consistent line heights */
* {
  line-height: inherit !important;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3 !important;
}

p, li, td {
  line-height: 1.6 !important;
}

/* Fix curriculum numbered items */
.numbered-features__number {
  background: var(--ai-text-primary) !important;
  color: var(--ai-bg-white) !important;
}

/* Improve contrast for light text */
.text-light,
.text-secondary {
  color: var(--ai-text-secondary) !important;
}

/* Ensure proper contrast in FAQ */
.faq__item {
  background: var(--ai-bg-white) !important;
  border: 1px solid var(--ai-border-light) !important;
}

.faq__question {
  color: var(--ai-text-primary) !important;
  font-weight: 500 !important;
}

.faq__answer {
  color: var(--ai-text-secondary) !important;
}

/* Fix Featured Coverage link contrast */
.content-block__description a[href*="http"],
.content-block__description a[href*="https"] {
  background-color: var(--ai-text-primary) !important;
  color: var(--ai-bg-white) !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  margin: 4px !important;
}

.content-block__description a[href*="http"]:hover,
.content-block__description a[href*="https"]:hover {
  background-color: #1a1917 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Fix gradient boxes - make them black with white text */
.content-block__description div[style*="linear-gradient"],
.content-block__description div[style*="background-image"] {
  background: var(--ai-text-primary) !important;
  background-image: none !important;
  color: var(--ai-bg-white) !important;
}

.content-block__description div[style*="linear-gradient"] *,
.content-block__description div[style*="background-image"] * {
  color: var(--ai-bg-white) !important;
}

.content-block__description div[style*="linear-gradient"] strong,
.content-block__description div[style*="background-image"] strong {
  color: var(--ai-bg-white) !important;
  font-weight: 600 !important;
}

/* Fix links inside gradient boxes to be white */
.content-block__description div[style*="linear-gradient"] a,
.content-block__description div[style*="background-image"] a {
  color: var(--ai-bg-white) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.5) !important;
  text-underline-offset: 2px !important;
  background: none !important;
  padding: 0 !important;
  display: inline !important;
  margin: 0 !important;
}

.content-block__description div[style*="linear-gradient"] a:hover,
.content-block__description div[style*="background-image"] a:hover {
  text-decoration-color: var(--ai-bg-white) !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}