/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom typography - inline to avoid import issues */

/* Tailwind directives will be processed by the tailwind CLI */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Action Text / Trix Editor Styles */
@import "actiontext.css";

/* Smooth scrolling behavior */
@layer base {
  html {
    scroll-behavior: smooth;
  }
}

/* Custom components */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  .btn-secondary {
    @apply bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500;
  }
  .btn-accent {
    @apply bg-accent-600 text-white hover:bg-accent-700 focus:ring-accent-500;
  }
  .btn-outline {
    @apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-gray-500;
  }
  .card {
    @apply bg-white overflow-hidden shadow-sm rounded-lg;
  }
  .card-header {
    @apply px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200;
  }
  .card-body {
    @apply px-4 py-5 sm:p-6;
  }
  .card-footer {
    @apply px-4 py-4 sm:px-6 bg-gray-50 border-t border-gray-200;
  }
  .form-input {
    @apply block w-full focus:ring-primary-500 focus:border-primary-500 sm:text-sm border-gray-300 rounded-md;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
}

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .text-shadow-md {
    text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  }
  .text-shadow-lg {
    text-shadow: 0 15px 30px rgba(0,0,0,0.11), 0 5px 15px rgba(0,0,0,0.08);
  }
  .text-shadow-none {
    text-shadow: none;
  }
}

/* Alpine.js cloak - hide elements until Alpine loads */
[x-cloak] { 
  display: none !important; 
}