/*
 * ObiCMS Module Bridge
 * Maps generic/daisy-like module classes to Lexmatch design tokens.
 * This keeps all CMS blocks visually aligned with the design package.
 */

@layer components {
  /* Base semantic color bridges used by ObiCMS blocks */
  [class~='bg-base-100'] { background-color: var(--color-background-1) !important; }
  [class~='bg-base-200'] { background-color: var(--color-background-2) !important; }
  [class~='bg-base-200/50'] { background-color: rgba(249, 250, 251, 0.5) !important; }
  [class~='bg-base-300'] { background-color: var(--color-background-4) !important; }

  [class~='border-base-300'] { border-color: var(--color-stroke-1) !important; }

  [class~='text-base-content'] { color: var(--color-secondary) !important; }
  [class~='text-base-content/80'] { color: rgba(26, 26, 28, 0.8) !important; }
  [class~='text-base-content/70'] { color: rgba(26, 26, 28, 0.7) !important; }
  [class~='text-base-content/60'] { color: rgba(26, 26, 28, 0.6) !important; }
  [class~='text-base-content/50'] { color: rgba(26, 26, 28, 0.5) !important; }
  [class~='text-base-content/40'] { color: rgba(26, 26, 28, 0.4) !important; }
  [class~='text-base-content/30'] { color: rgba(26, 26, 28, 0.3) !important; }

  /* Additional semantic colors used by blocks */
  [class~='bg-primary'] { background-color: var(--color-primary-500) !important; }
  [class~='bg-secondary'] { background-color: var(--color-secondary) !important; }
  [class~='bg-neutral'] { background-color: var(--color-background-5) !important; }
  [class~='bg-accent'] { background-color: var(--color-accent) !important; }
  [class~='bg-warning'] { background-color: #f59e0b !important; }

  [class~='text-primary-content'],
  [class~='text-secondary-content'],
  [class~='text-neutral-content'] {
    color: #ffffff !important;
  }

  [class~='text-accent-content'] { color: var(--color-secondary) !important; }

  [class~='border-primary'] { border-color: var(--color-primary-500) !important; }
  [class~='border-secondary'] { border-color: var(--color-secondary) !important; }
  [class~='border-accent'] { border-color: var(--color-stroke-1) !important; }
  [class~='border-warning'] { border-color: #f59e0b !important; }

  /* Generic block card system */
  .card {
    border-radius: 1rem;
    border: 1px solid var(--color-stroke-1);
    background: var(--color-background-1);
    box-shadow: var(--shadow-1);
  }

  .card-body {
    padding: 1.5rem;
  }

  .card-title {
    color: var(--color-secondary);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.3;
    font-weight: 600;
  }

  .card-actions {
    margin-top: 1rem;
  }

  /* Buttons used in block templates */
  .btn-neutral {
    border-color: var(--color-stroke-7);
    background-color: var(--color-background-5);
    color: var(--color-accent);
  }

  .btn-ghost {
    border-color: var(--color-stroke-2);
    background-color: transparent;
    color: var(--color-secondary);
  }

  .btn-circle {
    border-radius: 9999px;
    padding-inline: 0.75rem;
  }

  .btn-block {
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }

  /* Form controls used by contact form blocks */
  .input,
  .select,
  .textarea,
  textarea {
    width: 100%;
    border: 1px solid var(--color-stroke-1);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--color-secondary);
    padding: 0.75rem 0.9rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(134, 79, 254, 0.15);
  }

  /* Badges */
  .badge {
    border-radius: 9999px;
    border: 1px solid var(--color-stroke-2);
    background: var(--color-background-2);
    color: var(--color-secondary);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.45rem 0.7rem;
  }

  .badge-primary {
    background: rgba(134, 79, 254, 0.12);
    border-color: rgba(134, 79, 254, 0.3);
    color: var(--color-primary-700);
  }

  .badge-secondary {
    background: var(--color-background-4);
    border-color: var(--color-stroke-2);
    color: var(--color-secondary);
  }

  .badge-accent {
    background: var(--color-background-1);
    border-color: var(--color-stroke-1);
    color: var(--color-secondary);
  }

  .badge-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #451a03;
  }

  .badge-ghost {
    background: transparent;
    border-color: var(--color-stroke-2);
    color: rgba(26, 26, 28, 0.7);
  }

  /* Divider bridge */
  .divider {
    border-color: var(--color-stroke-2);
    color: rgba(26, 26, 28, 0.6);
  }

  .divider-primary { border-color: var(--color-primary-500); }
  .divider-secondary { border-color: var(--color-secondary); }
  .divider-accent { border-color: var(--color-stroke-1); }
  .divider-warning { border-color: #f59e0b; }
  .divider-success { border-color: #22c55e; }
  .divider-info { border-color: #06b6d4; }
  .divider-error { border-color: #ef4444; }
  .divider-neutral { border-color: var(--color-stroke-7); }

  /* Rich text blocks */
  .prose {
    color: var(--color-secondary);
    max-width: none;
  }

  .prose :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-secondary);
    line-height: 1.25;
  }

  .prose :is(p, li) {
    color: rgba(26, 26, 28, 0.8);
    line-height: 1.65;
  }

  .prose a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Module-level Lexmatch harmonization */
  :is(
      .hero,
      .features-block,
      .faq-block,
      .pricing-block,
      .stats-block,
      .team-block,
      .testimonials-block,
      .timeline-block,
      .posts-block,
      .logos-block,
      .parallax-block,
      .image-gallery-block,
      .document-list-block,
      .content-block,
      .call-to-action-block,
      .contact-form-block,
      .contact-form-preview-block
    ) {
    position: relative;
  }

  :is(
      .features-block,
      .faq-block,
      .pricing-block,
      .stats-block,
      .team-block,
      .testimonials-block,
      .timeline-block,
      .posts-block,
      .logos-block,
      .image-gallery-block,
      .document-list-block,
      .content-block,
      .call-to-action-block,
      .contact-form-block,
      .contact-form-preview-block
    )::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(131, 231, 238, 0.08) 0%, rgba(131, 231, 238, 0) 40%);
    pointer-events: none;
  }

  :is(
      .features-block,
      .faq-block,
      .pricing-block,
      .stats-block,
      .team-block,
      .testimonials-block,
      .timeline-block,
      .posts-block,
      .logos-block,
      .image-gallery-block,
      .document-list-block,
      .content-block,
      .call-to-action-block,
      .contact-form-block,
      .contact-form-preview-block
    ) > * {
    position: relative;
    z-index: 1;
  }

  :is(
      .features-block,
      .faq-block,
      .pricing-block,
      .stats-block,
      .team-block,
      .testimonials-block,
      .timeline-block,
      .posts-block,
      .logos-block,
      .image-gallery-block,
      .document-list-block,
      .content-block,
      .call-to-action-block,
      .contact-form-block,
      .contact-form-preview-block
    ) :is(h2, h3, h4) {
    letter-spacing: -0.02em;
  }

  /* Hero */
  .hero {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-5);
  }

  .hero .hero-overlay {
    background: linear-gradient(130deg, rgba(12, 16, 22, 0.78), rgba(12, 16, 22, 0.46));
  }

  .hero .hero-content {
    backdrop-filter: saturate(1.05);
  }

  .hero .hero-contact .card {
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 60px -20px rgba(2, 6, 23, 0.35);
  }

  /* FAQ */
  .faq-block .join {
    display: grid;
    gap: 0.875rem;
  }

  .faq-block .join-item {
    border-radius: 1rem;
    overflow: hidden;
  }

  .faq-block .collapse {
    position: relative;
    border: 1px solid var(--color-stroke-1);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: var(--shadow-1);
  }

  .faq-block .collapse > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .faq-block .collapse-title {
    position: relative;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-secondary);
  }

  .faq-block .collapse-arrow .collapse-title::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid rgba(26, 26, 28, 0.7);
    border-bottom: 2px solid rgba(26, 26, 28, 0.7);
    transform: translateY(-55%) rotate(45deg);
    transition: transform 180ms ease;
  }

  .faq-block .collapse-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    transition: max-height 260ms ease, padding 260ms ease;
  }

  .faq-block .collapse-open .collapse-content,
  .faq-block .collapse input:checked ~ .collapse-content {
    max-height: 22rem;
    padding: 0 1.25rem 1rem;
  }

  .faq-block .collapse-open .collapse-title::after,
  .faq-block .collapse input:checked ~ .collapse-title::after {
    transform: translateY(-35%) rotate(225deg);
  }

  /* Stats */
  .stats {
    border: 1px solid var(--color-stroke-1);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: var(--shadow-1);
    padding: 0.5rem;
  }

  .stats.grid {
    gap: 0.5rem;
  }

  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0.875rem;
    background: var(--color-background-2);
  }

  .stat-value {
    color: var(--color-primary-600);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    font-weight: 700;
  }

  .stat-title {
    color: rgba(26, 26, 28, 0.7);
    font-size: 0.925rem;
  }

  /* Avatar/rating/link utilities used in team/testimonials */
  .avatar > div {
    overflow: hidden;
    border: 1px solid var(--color-stroke-1);
    background: var(--color-background-2);
    box-shadow: var(--shadow-1);
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rating {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
  }

  .rating input {
    display: none;
  }

  .link-primary {
    color: var(--color-primary-600);
  }

  .link-hover:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Posts, pricing, team, testimonials cards */
  :is(.posts-block, .pricing-block, .team-block, .testimonials-block) .card {
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  }

  :is(.posts-block, .pricing-block, .team-block, .testimonials-block) .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: rgba(134, 79, 254, 0.25);
  }

  .pricing-block .card {
    min-height: 100%;
  }

  .pricing-block .card-actions .btn,
  .posts-block .card-actions .btn,
  .call-to-action-block .btn,
  .contact-form-block .btn,
  .document-list-block .btn {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
  }

  .timeline-block .relative.z-10.flex-shrink-0 > * {
    box-shadow: var(--shadow-1);
  }

  .logos-block img {
    opacity: 0.86;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .logos-block img:hover {
    opacity: 1;
    transform: translateY(-1px);
  }
}