/* ----------------------------------------------------------------
    Custom CSS - Soft Elegant Theme
-----------------------------------------------------------------*/

:root {
  /* Colori tenui e soft */
  --bg-main: #f8f5f2; /* Beige chiarissimo */
  --bg-light: #fffcf9; /* Bianco con tono caldo */
  --accent-light: #e8e0d5; /* Beige chiaro */
  --accent-hover: #d4c9b8; /* Beige medio */
  
  /* Viola chiaro per accenti */
  --accent-lavender: #e4b488;
  --accent-lavender-dark: #b37e4d;
  
  /* Verdi tenui per bottoni */
  --accent-green: #a8d8b9;
  --accent-green-dark: #8bc2a0;
  --accent-green-text: #2d4a3a;
  
  /* Testo */
  --text-dark: #4a4a4a; /* Grigio scuro leggibile ma soft */
  --text-light: #6c6c6c;
  
  /* Primary color (viola soft) */
  --accent-primary: #e4b488;
  --accent-primary-dark: #94673c;
}

/* Sfondo generale */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-dark) !important;
  font-family: 'Georgia', serif; /* Font più elegante */
  line-height: 1.6;
}

/* Header e footer */
#header,
#footer {
  background-color: var(--bg-light) !important;
  border-bottom: 1px solid var(--accent-light);
}

/* Link */
a,
.menu-link,
.menu-link div {
  color: var(--accent-primary) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover,
.menu-link:hover div {
  color: var(--accent-primary-dark) !important;
}

/* Bottoni principali */
.button,
.button-xlarge,
.btn-primary {
  background-color: var(--accent-green) !important;
  color: var(--accent-green-text) !important;
  border: 1px solid var(--accent-green-dark) !important;
  transition: all 0.3s ease;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

.button:hover,
.button-xlarge:hover,
.btn-primary:hover {
  background-color: var(--accent-green-dark) !important;
  color: white !important;
}

/* Bottoni secondari */
.btn-secondary {
  background-color: var(--accent-lavender) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--accent-lavender-dark) !important;
}

.btn-secondary:hover {
  background-color: var(--accent-lavender-dark) !important;
  color: white !important;
}

/* Card e sezioni */
.card,
.section,
.container {
  background-color: var(--bg-light) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--accent-light) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* Header delle card */
.card-header {
  background-color: var(--accent-lavender) !important;
  color: var(--text-dark) !important;
  border-bottom: 1px solid var(--accent-lavender-dark) !important;
}

/* Social icons */
.social-icon {
  background-color: var(--accent-light) !important;
  color: var(--accent-primary) !important;
  transition: all 0.3s ease;
  border-radius: 50% !important;
}

.social-icon:hover {
  background-color: var(--accent-primary) !important;
  color: white !important;
}

/* Elementi di navigazione */
.nav-pills .nav-link.active {
  background-color: var(--accent-primary) !important;
}

/* Elementi di form */
.form-control {
  border: 1px solid var(--accent-light) !important;
  background-color: white !important;
}

.form-control:focus {
  border-color: var(--accent-lavender) !important;
  box-shadow: 0 0 0 0.2rem rgba(154, 127, 184, 0.25) !important;
}

/* Badge */
.badge-primary {
  background-color: var(--accent-primary) !important;
}

/* Alert */
.alert-primary {
  background-color: var(--accent-lavender) !important;
  border-color: var(--accent-lavender-dark) !important;
  color: var(--text-dark) !important;
}

/* Tabelle */
.table {
  color: var(--text-dark) !important;
}

.table thead th {
  background-color: var(--accent-light) !important;
  border-bottom: 1px solid var(--accent-hover) !important;
}

/* Progress bar */
.progress {
  background-color: var(--accent-light) !important;
}

.progress-bar {
  background-color: var(--accent-primary) !important;
}

/* Tooltip */
.tooltip-inner {
  background-color: var(--accent-primary) !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--accent-primary) !important;
}

.square-block {
  aspect-ratio: 1 / 1;
  background-color: var(--bg-light);
  border: 1px solid var(--accent-light);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.square-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.square-block img:hover {
  transform: scale(1.05);
}

.square-label {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent-green-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}