/* ====================================
   PROFESSIONAL WEDDING STYLE
   Palette elegante per siti matrimonio
   ==================================== */

:root {
  /* Colori Matrimonio Professionali */
  --champagne: #F7E7CE;
  --gold: #C9A961;
  --rose-gold: #B76E79;
  --ivory: #FFFFF0;
  --charcoal: #2C2C2C;
  --soft-gray: #F8F8F8;
  --warm-white: #FDFBF7;
  
  /* Sostituisce i colori AI troppo vivaci */
  --primary: var(--gold);
  --primary-dark: #A88B4A;
  --accent: var(--rose-gold);
}

/* ====================================
   RESET COLORI AI → ELEGANTI
   ==================================== */

/* Bottoni Primary */
.bg-pink-600,
.bg-pink-700,
.hover\:bg-pink-700:hover,
.hover\:bg-pink-600:hover {
  background-color: var(--gold) !important;
}

.bg-pink-700:hover,
.hover\:bg-pink-800:hover {
  background-color: var(--primary-dark) !important;
}

/* Testi e Bordi */
.text-pink-600,
.text-pink-500 {
  color: var(--gold) !important;
}

.border-pink-600 {
  border-color: var(--gold) !important;
}

/* Hover States */
.hover\:text-pink-600:hover,
.hover\:text-pink-500:hover {
  color: var(--primary-dark) !important;
}

/* ====================================
   GRADIENTI ELEGANTI
   ==================================== */

/* Hero Section - Rimuove arcobaleno */
#home {
  background: linear-gradient(135deg, var(--warm-white) 0%, var(--champagne) 100%) !important;
}

/* Rimuove sfere colorate AI */
#home .blur-3xl {
  display: none !important;
}

/* Sezioni Alternate */
.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--soft-gray), white) !important;
}

/* ====================================
   TYPOGRAPHY ELEGANTE
   ==================================== */

body {
  font-family: 'Lora', 'Georgia', serif;
  color: var(--charcoal);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--charcoal);
}

h2 {
  letter-spacing: 0.02em;
}

/* Accento sottotitoli */
.text-pink-600.font-playfair {
  color: var(--gold) !important;
}

/* ====================================
   CARD E SEZIONI
   ==================================== */

/* Card Servizi - Ombre discrete */
.shadow-xl {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.hover\:shadow-2xl:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}

/* Bordi arrotondati meno pronunciati */
.rounded-2xl {
  border-radius: 12px !important;
}

/* ====================================
   BOTTONI ELEGANTI
   ==================================== */

button,
.btn,
a[class*="bg-pink"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.03em;
  font-weight: 600;
}

button:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.3);
}

/* ====================================
   ICONE - Meno emoji, più eleganza
   ==================================== */

/* Riduce dimensioni emoji nei titoli */
h2:has(+ .text-xl),
h3:has(+ p) {
  font-size: 1.1em;
}

/* ====================================
   ANIMAZIONI DISCRETE
   ==================================== */

.animate-bounce {
  animation: gentle-bounce 2s ease-in-out infinite;
}

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

/* Transizioni smooth */
.transition {
  transition: all 0.3s ease;
}

/* ====================================
   FORM ELEGANTI
   ==================================== */

input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1) !important;
}

/* ====================================
   RECENSIONI
   ==================================== */

.text-yellow-400,
.text-yellow-500 {
  color: var(--gold) !important;
}

/* ====================================
   FOOTER ELEGANTE
   ==================================== */

footer {
  background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
}

footer .text-pink-500 {
  color: var(--gold) !important;
}

footer .hover\:text-pink-500:hover {
  color: var(--champagne) !important;
}

/* ====================================
   RESPONSIVE REFINEMENTS
   ==================================== */

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  
  /* Padding mobile più generoso */
  section { padding: 3rem 1rem; }
}

/* ====================================
   ACCESSIBILITÀ
   ==================================== */

*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Alto contrasto testi */
p, li, span {
  color: #333;
}

/* ====================================
   SMOOTH SCROLLING
   ==================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* ====================================
   LOADING STATES
   ==================================== */

.animate-spin {
  border-color: var(--gold);
  border-top-color: transparent;
}

/* ====================================
   FAQ - STILE ELEGANTE
   ==================================== */

/* Container FAQ */
#faq-container .bg-white {
  background: white;
  border: 1px solid #E5E5E5;
  border-left: 4px solid var(--gold);
  transition: all 0.3s ease;
}

#faq-container .bg-white:hover {
  border-left-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.1);
}

/* Titolo FAQ */
#faq-container .font-bold {
  color: var(--charcoal);
  font-size: 1.05rem;
}

/* Icona freccia FAQ */
#faq-container .text-pink-600 {
  color: var(--gold) !important;
}

#faq-container .rotate-180 {
  color: var(--primary-dark) !important;
}

/* Risposta FAQ */
#faq-container .text-gray-600 {
  color: #555;
  line-height: 1.7;
}

/* Bordo inferiore */
#faq-container .border-gray-200 {
  border-color: #E8E8E8;
}

/* Hover state */
#faq-container > div:hover {
  background: var(--warm-white);
}

/* Active/Open FAQ */
#faq-container [aria-expanded="true"] {
  background: linear-gradient(to right, var(--champagne), white);
}

/* Schema JSON-LD FAQ */
#faq-schema {
  display: none;
}
/* ====================================
   FAQ - MIGLIORAMENTI VISIBILITÀ
   ==================================== */

/* Risposta FAQ - Sfondo e spaziatura */
.faq-answer {
  background: #FDFBF7 !important;
  border-top: 1px solid #E8E8E8;
  padding: 1.5rem !important;
  line-height: 1.8 !important;
}

.faq-answer p {
  color: #2C2C2C !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Item FAQ aperto */
.faq-item:has(.faq-answer:not(.hidden)) {
  background: linear-gradient(to bottom, white, #FDFBF7);
  box-shadow: 0 4px 12px rgba(201, 169, 97, 0.15);
}

/* Domanda FAQ */
.faq-question {
  font-size: 1.05rem !important;
  padding: 1.25rem 1.5rem !important;
}

.faq-question:hover {
  background: #FFF9F0 !important;
}

/* Icona freccia */
.faq-question i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Animazione apertura - SENZA max-height */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  padding: 0 1.5rem !important;
}

.faq-answer:not(.hidden) {
  max-height: 2000px !important;
  opacity: 1;
  padding: 1.5rem !important;
}