/* ================================================
   ASTRA CHILD — CUSTOM CSS
   File: assets/css/custom.css
   
   Organizza qui tutti i tuoi stili personalizzati.
   Utilizza i token CSS definiti in style.css
================================================ */

/* ------------------------------------------
   1. TIPOGRAFIA GLOBALE
------------------------------------------ */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  text-wrap: balance;
}

/* ------------------------------------------
   2. LINK
------------------------------------------ */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------
   3. BOTTONI
------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  border: none;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: oklch(from var(--color-text) l c h / 0.06);
  color: var(--color-text);
}

/* ------------------------------------------
   4. CARD
------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid oklch(from var(--color-text) l c h / 0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------
   5. FORM INPUTS
------------------------------------------ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form-input,
.form-select,
.form-textarea {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}

/* ------------------------------------------
   6. BADGE / TAG
------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-primary { background: oklch(from var(--color-primary) l c h / 0.15); color: var(--color-primary); }
.badge-success { background: oklch(from var(--color-success) l c h / 0.15); color: var(--color-success); }
.badge-error   { background: oklch(from var(--color-error)   l c h / 0.15); color: var(--color-error);   }

/* ------------------------------------------
   7. HEADER / NAVIGATION (override Astra)
------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(from var(--color-bg) l c h / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}

/* ------------------------------------------
   8. SEZIONE HERO
------------------------------------------ */
.hero-section {
  padding-block: clamp(var(--sp-12), 10vw, var(--sp-16));
  text-align: left;
}
.hero-title {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-bottom: var(--sp-8);
}

/* ------------------------------------------
   9. SEZIONI GENERALI
------------------------------------------ */
.section {
  padding-block: clamp(var(--sp-8), 6vw, var(--sp-16));
}
.section-title {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  margin-bottom: var(--sp-4);
}
.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--sp-8);
}

/* ------------------------------------------
   10. GRID RESPONSIVE
------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--sp-4); }

/* ------------------------------------------
   11. WOOCOMMERCE — Override base
------------------------------------------ */
.woocommerce ul.products li.product .price { color: var(--color-primary); font-weight: 700; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  transition: background var(--transition) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-primary-hover) !important;
}
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--color-primary) !important;
}

/* ------------------------------------------
   12. SKELETON LOADER
------------------------------------------ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-offset, #edeae5) 25%,
    var(--color-surface-dynamic, #e6e4df) 50%,
    var(--color-surface-offset, #edeae5) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------
   13. ANIMAZIONI DI INGRESSO
------------------------------------------ */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------
   14. RESPONSIVE UTILITY
------------------------------------------ */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .text-center-mobile { text-align: center; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}