/**
 * Custom CSS for Clara Lumiere Theme
 * This file contains custom styles that complement Tailwind CSS
 */

:root {
  /* Clara Lumiere Brand Colors */
  --background: 0 0% 100%;
  --foreground: 265 4% 12.9%;

  --card: 0 0% 100%;
  --card-foreground: 265 4% 12.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 265 4% 12.9%;

  /* Primary - Deep Forest Green #2b3531 */
  --primary: 156 10% 19%;
  --primary-foreground: 77 54% 51%;

  /* Secondary - Cream/Ivory */
  --secondary: 150 5% 92%;
  --secondary-foreground: 266 4% 20.8%;

  /* Muted */
  --muted: 248 0.7% 96.8%;
  --muted-foreground: 257 4.6% 55.4%;

  /* Accent - Chartreuse #abc643 */
  --accent: 78 53% 52%;
  --accent-foreground: 266 4% 20.8%;

  /* Luxury Gold */
  --gold: 43 74% 49%;
  --gold-foreground: 156 15% 12%;

  --destructive: 27 24.5% 57.7%;
  --destructive-foreground: 0 0% 100%;

  --border: 256 1.3% 92.9%;
  --input: 256 1.3% 92.9%;
  --ring: 257 4% 70.4%;

  --radius: 0.375rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', ui-serif, Georgia, serif;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Utility Classes */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WooCommerce Overrides */
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
}

.woocommerce .products ul,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

/* Mobile Menu */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#mobile-menu.active {
  max-height: 1000px;
  transition: max-height 0.5s ease-in;
}

/* RTL Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .container {
  direction: rtl;
}

/* WordPress Block Styles */
.wp-block-cover {
  min-height: 400px;
}

.wp-block-columns {
  gap: 2rem;
}

.wp-block-button__link {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Block Pattern Styles */
.has-primary-background-color {
  background-color: hsl(var(--primary)) !important;
}

.has-accent-background-color {
  background-color: hsl(var(--accent)) !important;
}

.has-gold-background-color {
  background-color: hsl(var(--gold)) !important;
}

.has-primary-color,
.has-primary-color p {
  color: hsl(var(--primary)) !important;
}

.has-accent-color,
.has-accent-color p {
  color: hsl(var(--accent)) !important;
}

.has-gold-color,
.has-gold-color p {
  color: hsl(var(--gold)) !important;
}

.has-foreground-color,
.has-foreground-color p {
  color: hsl(var(--foreground)) !important;
}

/* Wide and Full Width Alignment */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Responsive Embeds */
.wp-block-embed,
.wp-block-video,
.wp-block-audio {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.wp-block-embed iframe,
.wp-block-video video,
.wp-block-audio audio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Print Styles */
@media print {
  header,
  footer,
  .no-print {
    display: none;
  }
}