@tailwind base;
@tailwind components;
@tailwind utilities;

/* Chiropractic Clinic Design System */

@layer base {
  :root {
    /* Core Brand Colors - HSL values */
    --background: 0 0% 100%;
    --foreground: 210 20% 15%;

    --card: 0 0% 100%;
    --card-foreground: 210 20% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 20% 15%;

    /* Brand Colors */
    --primary: 88 53% 57%; /* Lime Green #8BC34A */
    --primary-foreground: 0 0% 100%;
    --primary-light: 88 53% 67%;
    --primary-dark: 88 53% 47%;

    --secondary: 122 48% 33%; /* Dark Green #2E7D32 */
    --secondary-foreground: 0 0% 100%;
    --secondary-light: 122 48% 43%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 88 53% 95%;
    --accent-foreground: 210 20% 15%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 88 53% 57%;

    --radius: 0.75rem;

    /* Custom Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-light)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(var(--secondary) / 0.8));
    --gradient-card: linear-gradient(145deg, hsl(var(--background)), hsl(var(--muted)));

    /* Custom Shadows */
    --shadow-soft: 0 2px 20px hsl(var(--primary) / 0.1);
    --shadow-primary: 0 8px 30px hsl(var(--primary) / 0.3);
    --shadow-secondary: 0 8px 30px hsl(var(--secondary) / 0.2);

    /* Typography Scale */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold;
  }

  h1 {
    @apply text-2xl sm:text-3xl lg:text-5xl;
  }

  h2 {
    @apply text-xl sm:text-2xl lg:text-4xl;
  }

  h3 {
    @apply text-lg sm:text-xl lg:text-3xl;
  }

  h4 {
    @apply text-base sm:text-lg lg:text-2xl;
  }

  h5 {
    @apply text-sm sm:text-base lg:text-xl;
  }

  h6 {
    @apply text-xs sm:text-sm lg:text-lg;
  }

  p {
    @apply text-base leading-relaxed;
  }

  a {
    @apply text-primary hover:text-primary-dark transition-colors;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .section-header {
    @apply text-center mb-12;
  }

  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold font-heading mb-4;
  }

  .section-description {
    @apply text-lg text-muted-foreground max-w-2xl mx-auto;
  }

  /* Button Styles */
  .btn {
    @apply inline-flex items-center justify-center font-semibold rounded-lg transition-all duration-300 cursor-pointer;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary-dark shadow-soft hover:shadow-primary;
  }

  .btn-outline {
    @apply border-2 border-primary/20 bg-white/50 backdrop-blur text-foreground hover:bg-primary hover:text-primary-foreground hover:border-primary;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary-light shadow-secondary;
  }

  .btn-lg {
    @apply px-8 py-3 text-lg;
  }

  .btn-md {
    @apply px-6 py-2 text-base;
  }

  .btn-sm {
    @apply px-4 py-1.5 text-sm;
  }

  .btn-icon {
    @apply w-4 h-4 p-0;
  }

  /* Card Styles */
  .card {
    @apply bg-card rounded-lg shadow-soft hover:shadow-primary hover:scale-105 transition-all duration-300;
  }

  .card-content {
    @apply p-6;
  }

  /* Hero Section */
  .hero-section {
    @apply min-h-screen flex flex-col md:flex-row items-center justify-between gap-8 md:gap-12;
  }

  .hero-title {
    @apply text-2xl sm:text-3xl lg:text-5xl font-bold font-heading;
  }

  .hero-title-highlight {
    @apply block text-gradient-primary mt-2;
  }

  .hero-subtitle {
    @apply text-lg md:text-xl text-muted-foreground font-medium mt-4;
  }

  .hero-cta-buttons {
    @apply flex flex-col gap-4 sm:flex-row mt-8;
  }

  /* Grid Layouts */
  .grid-1 {
    @apply grid grid-cols-1 gap-6;
  }

  .grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  }

  .grid-3 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .grid-4 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
  }

  /* Header & Navigation */
  .site-header {
    @apply sticky top-0 z-50 bg-white/65 backdrop-blur border-b border-border shadow-soft;
  }

  .header-container {
    @apply container flex items-center justify-between h-24 md:h-28 gap-4 md:gap-6;
  }

  .site-logo {
    @apply flex-shrink-0;
  }

  .site-logo img {
    @apply h-12 md:h-20 w-auto object-contain;
  }

  .main-navigation {
    @apply hidden lg:flex items-center gap-10;
  }

  .nav-link {
    @apply text-sm font-semibold text-foreground hover:text-primary transition-colors;
  }

  .mobile-menu-button {
    @apply lg:hidden p-2 rounded-lg hover:bg-muted;
  }

  .mobile-navigation {
    @apply hidden border-t border-border bg-white;
  }

  .mobile-navigation.active {
    @apply block;
  }

  .dropdown {
    @apply relative group;
  }

  .dropdown-trigger {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted transition-colors;
  }

  .dropdown-content {
    @apply absolute hidden group-hover:block top-full left-0 mt-2 w-96 bg-white border border-border rounded-lg shadow-primary p-7 z-100 transition-opacity;
  }

  .dropdown:hover .dropdown-content {
    @apply delay-200;
  }

  .dropdown-grid {
    @apply grid grid-cols-2 gap-5;
  }

  .dropdown-item {
    @apply p-3 rounded-lg hover:bg-muted transition-colors;
  }

  /* Search Dialog */
  #search-dialog {
    @apply fixed inset-0 z-50 bg-black/50 hidden items-center justify-center p-4;
  }

  #search-dialog.active {
    @apply flex;
  }

  #search-dialog .dialog-content {
    @apply bg-white rounded-lg shadow-primary w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col;
  }

  #search-dialog .search-header {
    @apply p-4 border-b border-border;
  }

  #search-dialog .search-input {
    @apply w-full bg-transparent outline-none text-lg font-medium;
  }

  #search-dialog .search-close-btn {
    @apply p-2 hover:bg-muted rounded-lg transition-colors;
  }

  #search-dialog .search-results {
    @apply flex-1 overflow-y-auto;
  }

  #search-dialog .search-group {
    @apply border-b border-border;
  }

  #search-dialog .search-group-title {
    @apply px-4 py-2 text-xs font-semibold text-muted-foreground uppercase;
  }

  #search-dialog .search-item {
    @apply px-4 py-3 hover:bg-muted cursor-pointer transition-colors;
  }

  /* Footer */
  .site-footer {
    @apply bg-secondary text-secondary-foreground py-12;
  }

  .footer-grid {
    @apply container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8;
  }

  .footer-title {
    @apply text-lg font-bold mb-4;
  }

  .footer-description {
    @apply text-sm text-secondary-foreground/80;
  }

  .footer-social {
    @apply flex gap-4 mt-4;
  }

  .footer-social-link {
    @apply bg-white/10 rounded-full p-2.5 hover:bg-primary hover:scale-110 transition-all;
  }

  .footer-clinic-item {
    @apply flex items-start gap-3 text-sm text-secondary-foreground/80;
  }

  .footer-links {
    @apply flex flex-wrap justify-center md:justify-start gap-6 border-t border-secondary-foreground/20 pt-6;
  }

  .footer-copyright {
    @apply text-center text-xs text-secondary-foreground/60 mt-6;
  }

  /* Condition Cards */
  .condition-card {
    @apply relative bg-white rounded-lg shadow-soft hover:shadow-primary hover:scale-105 transition-all duration-300 overflow-hidden h-full flex flex-col justify-between;
  }

  .condition-card-overlay {
    @apply absolute inset-0 bg-gradient-primary opacity-0 group-hover:opacity-20 transition-opacity;
  }

  .condition-card-content {
    @apply p-4 md:p-6 text-center relative z-10;
  }

  .condition-card-icon {
    @apply mb-4 flex justify-center;
  }

  .condition-card-icon img {
    @apply w-16 h-16 object-contain;
  }

  .condition-card-title {
    @apply font-semibold text-sm md:text-base text-foreground;
  }

  /* Carousel */
  .carousel {
    @apply relative w-full aspect-video rounded-lg overflow-hidden;
  }

  .carousel-slide {
    @apply absolute inset-0 opacity-0 transition-opacity duration-500;
  }

  .carousel-slide.active {
    @apply opacity-100;
  }

  .carousel-nav-btn {
    @apply absolute top-1/2 -translate-y-1/2 z-10 bg-white/70 hover:bg-white rounded-full p-2 transition-all;
  }

  .carousel-nav-btn:first-of-type {
    @apply left-4;
  }

  .carousel-nav-btn:last-of-type {
    @apply right-4;
  }

  .carousel-dots {
    @apply absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2;
  }

  .carousel-dot {
    @apply w-2 h-2 rounded-full bg-white/60 hover:bg-white/80 cursor-pointer transition-all;
  }

  .carousel-dot.active {
    @apply w-8 h-2 bg-white;
  }

  /* Trust Indicators */
  .trust-indicators {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8;
  }

  .trust-indicator-icon {
    @apply w-16 h-16 rounded-full bg-accent flex items-center justify-center mb-4 hover:scale-110 transition-transform;
  }

  .trust-indicator-icon svg {
    @apply w-8 h-8 text-primary;
  }

  .trust-indicator-title {
    @apply font-bold text-foreground mb-2;
  }

  .trust-indicator-description {
    @apply text-sm text-muted-foreground;
  }

  /* Gallery */
  .gallery-item {
    @apply relative rounded-lg overflow-hidden shadow-soft hover:shadow-primary transition-all hover:scale-105 group;
  }

  .gallery-image-wrapper {
    @apply aspect-video overflow-hidden;
  }

  .gallery-item img {
    @apply w-full h-full object-cover group-hover:scale-110 transition-transform duration-300;
  }

  .gallery-overlay {
    @apply absolute inset-0 bg-gradient-primary opacity-0 group-hover:opacity-30 transition-opacity;
  }

  /* FAQ Accordion */
  .faq-card {
    @apply bg-card rounded-lg shadow-soft hover:shadow-primary transition-all;
  }

  .accordion-trigger {
    @apply w-full p-6 flex items-center justify-between cursor-pointer hover:bg-muted transition-colors;
  }

  .accordion-title {
    @apply font-semibold text-foreground;
  }

  .accordion-icon {
    @apply w-5 h-5 text-primary transition-transform duration-300;
  }

  .accordion-content {
    @apply p-6 text-muted-foreground text-sm md:text-base;
  }

  /* Fees Table */
  .fees-table {
    @apply w-full hidden lg:table;
  }

  .fees-header {
    @apply bg-muted border-b border-border;
  }

  .fees-header th {
    @apply px-6 py-4 text-left font-semibold text-foreground;
  }

  .fees-row {
    @apply border-b border-border hover:bg-muted/50 transition-colors;
  }

  .fees-cell {
    @apply px-6 py-4 text-foreground;
  }

  .fees-price {
    @apply font-bold text-primary;
  }

  .fees-mobile-card {
    @apply lg:hidden bg-card rounded-lg shadow-soft p-6 mb-4;
  }

  /* Clinic Cards */
  .clinic-card {
    @apply bg-card rounded-lg shadow-soft hover:shadow-primary hover:scale-105 transition-all overflow-hidden;
  }

  .clinic-map-container {
    @apply relative w-full aspect-video rounded-lg overflow-hidden bg-muted mb-4;
  }

  .clinic-map-container iframe {
    @apply w-full h-full border-0;
  }

  /* Team Cards */
  .team-member-name {
    @apply font-bold text-lg text-foreground;
  }

  .team-member-role {
    @apply inline-block text-sm font-semibold px-3 py-1 rounded-full bg-accent text-accent-foreground mt-2;
  }

  .team-member-bio {
    @apply text-sm text-muted-foreground mt-4 leading-relaxed;
  }

  /* Contact Form */
  .contact-form-card {
    @apply bg-card rounded-lg shadow-soft p-6 md:p-8;
  }

  .wpcf7-form-control-wrap input,
  .wpcf7-form-control-wrap select,
  .wpcf7-form-control-wrap textarea {
    @apply w-full px-4 py-2.5 border border-input rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all;
  }

  .wpcf7-form-control-wrap textarea {
    @apply resize-vertical min-h-[120px];
  }

  .wpcf7-submit {
    @apply btn btn-primary btn-lg;
  }

  /* Animations */
  .animate-fade-in {
    @apply animate-fade-in;
  }

  .animate-pulse {
    @apply animate-pulse;
  }

  /* Video Section */
  .video-wrapper {
    @apply relative w-full aspect-video rounded-lg overflow-hidden shadow-primary;
  }

  .video-container {
    @apply w-full h-full;
  }

  .video-container video {
    @apply w-full h-full object-cover;
  }
}

@layer utilities {
  .text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }

  .shadow-primary {
    box-shadow: var(--shadow-primary);
  }

  .shadow-secondary {
    box-shadow: var(--shadow-secondary);
  }

  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-secondary {
    background: var(--gradient-secondary);
  }

  .bg-gradient-hero {
    background: var(--gradient-hero);
  }

  .bg-gradient-card {
    background: var(--gradient-card);
  }
}