@import 'tailwindcss';
@import './landing.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../**/*.jsx';

@theme {
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
    --color-brand: #0d9488;
    --color-brand-light: #f0fdfa;
    --color-surface: #ffffff;
    --color-bg: #f0f4f8;
}

@layer base {
  html {
    overflow-x: hidden;
  }

  body {
    @apply bg-[#f0f4f8] text-slate-800 overflow-x-hidden;
    font-family: 'Nunito', sans-serif;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }
}

@layer components {
  .landing-page {
    font-family: 'Nunito', sans-serif;
  }

  .page-card {
    @apply bg-white rounded-2xl border border-slate-100 shadow-sm;
  }

  .page-card-muted {
    @apply bg-slate-50 rounded-2xl border border-slate-100;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 text-white font-bold text-sm px-5 py-2.5 rounded-xl shadow-md shadow-teal-600/20 transition-colors;
  }

  .btn-outline {
    @apply inline-flex items-center gap-2 bg-white hover:bg-teal-50 text-teal-700 font-bold text-sm px-5 py-2.5 rounded-xl border-2 border-teal-600 transition-colors;
  }

  .page-title {
    @apply text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight;
  }

  .page-subtitle {
    @apply text-sm text-slate-500 leading-relaxed;
  }

  .badge-teal {
    @apply bg-teal-50 text-teal-700 text-[10px] font-bold px-3 py-1 rounded-md border border-teal-200 uppercase tracking-widest;
  }

  .input-light {
    @apply w-full bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500/30 focus:border-teal-400;
  }

  .tab-active {
    @apply bg-teal-600 text-white shadow-md shadow-teal-600/20;
  }

  .tab-inactive {
    @apply bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700;
  }

  .topic-card {
    @apply bg-white border-2 border-transparent hover:border-slate-200 hover:shadow-md transition-all duration-300 cursor-pointer;
  }

  .topic-card-active {
    @apply bg-teal-50 border-teal-500 shadow-md;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .app-shell {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .content-safe {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .arabic-display {
    font-family: 'Amiri', serif;
    direction: rtl;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .section-nav-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .section-nav-scroll::-webkit-scrollbar {
    display: none;
  }
}