/* ===================
   Buttons System 
   ================== */

/* Base comune */
.btn,
.cta-button,
.secondary-cta {
  --_bg: var(--btn-bg, var(--color-primary));
  --_fg: var(--btn-fg, var(--color-white));
  --_bd: var(--btn-bd, transparent);
  --_bg-hover: var(--btn-bg-hover, var(--color-primary-dark));
  --_fg-hover: var(--btn-fg-hover, var(--color-white));
  --_bd-hover: var(--btn-bd-hover, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--_bd);
  background-color: var(--_bg);
  color: var(--_fg);
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

.btn:hover,
.cta-button:hover,
.secondary-cta:hover {
  background-color: var(--_bg-hover);
  color: var(--_fg-hover);
  border-color: var(--_bd-hover);
}

.btn:active,
.cta-button:active,
.secondary-cta:active { 
    transform: translateY(1px);
}

.btn:focus-visible,
.cta-button:focus-visible,
.secondary-cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Stati extra condivisi */
.btn[aria-disabled="true"], .btn:disabled,
.cta-button[aria-disabled="true"], .cta-button:disabled,
.secondary-cta[aria-disabled="true"], .secondary-cta:disabled {
    opacity: .6;
    pointer-events: none;
}
.btn:is(:visited),
.cta-button:is(:visited),
.secondary-cta:is(:visited) {
    color: currentColor; 
} /* evita visited strani */

@media (prefers-reduced-motion: reduce){
    .btn, .cta-button, .secondary-cta { 
        transition: none; 
    }
}

@media (forced-colors: active){
    .btn, .cta-button, .secondary-cta { 
        border-width: 1px;
    }
}

/* -------
   Sizes 
   -------- */
.btn--sm { 
    padding: .5rem .9rem; 
    font-weight: 700; 
}

.btn--lg { 
    padding: 1rem 1.5rem; 
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
}

.btn--block { 
    display: inline-flex; 
    width: 100%;
}

/* Icon helpers */
.btn .btn__icon { 
    display: inline-grid;
    place-items: center; 
}

.btn .btn__icon--right { 
    margin-left: .25rem;
}

.btn .btn__icon--left  { 
    margin-right: .25rem; 
}

/* ---------
   Variants
   -------- */

/* 1) Primary (per sfondi chiari) */
.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bg-hover: var(--color-primary-dark);
}

/* 2) Secondary */
.btn--secondary {
  --btn-bg: var(--color-secondary);
  --btn-fg: #0b1220;
  --btn-bg-hover: color-mix(in srgb, var(--color-secondary) 90%, #000 10%);
}

/* 3) Accent (utile per Blog o call-out) */
.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: #0b1220;
  --btn-bg-hover: color-mix(in srgb, var(--color-accent) 85%, #000 15%);
}

/* 4) Outline (su sfondi chiari) */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-bd: var(--color-primary);
  --btn-bg-hover: var(--color-primary);
  --btn-fg-hover: #fff;
  --btn-bd-hover: var(--color-primary);
}

/* 5) Inverse (per sfondi scuri/hero) */
.btn--inverse {
  --btn-bg: #fff;
  --btn-fg: var(--color-primary);
  --btn-bg-hover: transparent;
  --btn-fg-hover: #fff;
  --btn-bd: transparent;
  --btn-bd-hover: #fff;
  border-color: var(--_bd);
}

/* 6) Ghost (testo su bg trasparente) */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bg-hover: rgba(255,255,255,.08);
  --btn-fg-hover: var(--color-text);
  --btn-bd: transparent;
  --btn-bd-hover: transparent;
}

/* 7) Link (CTA testuale/lead magnet) */
.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--color-link);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--color-link-hover);
  --btn-bd: transparent;
  --btn-bd-hover: transparent;
  padding: 0; border: 0;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}

/* -------------
   Preset CTA
   ----------- */
   
/* Consulenza */
.btn--consulting { --btn-bg: var(--color-primary); --btn-fg:#fff; --btn-bg-hover: var(--color-primary-dark); }
/* Corsi */
.btn--courses   { --btn-bg: var(--color-secondary); --btn-fg:#0b1220; --btn-bg-hover: color-mix(in srgb, var(--color-secondary) 90%, #000 10%); }
/* Contatti */
.btn--contact   { --btn-bg: var(--color-accent); --btn-fg:#0b1220; --btn-bg-hover: color-mix(in srgb, var(--color-accent) 85%, #000 15%); }
/* Progetti/Case study */
.btn--projects  { --btn-bg: var(--color-accent); --btn-fg:#0b1220; --btn-bg-hover: color-mix(in srgb, var(--color-accent) 85%, #000 15%); }
/* Blog */
.btn--blog      { --btn-bg: var(--color-primary); --btn-fg:#fff; --btn-bg-hover: var(--color-primary-dark); }

/* ---------------------------------------------------------
   Legacy mapping (NON cambiamo il look esistente)
   --------------------------------------------------------- */

/* .cta-button — bianco → hover outline bianco (hero scuri) */
.cta-button{
  --btn-bg: #fff;
  --btn-fg: var(--color-primary);
  --btn-bd: transparent;
  --btn-bg-hover: transparent;
  --btn-fg-hover: #fff;
  --btn-bd-hover: #fff;
}

/* .secondary-cta — outline bianco → hover fill bianco (testo primary) */
.secondary-cta{
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: #fff;
  --btn-bg-hover: #fff;
  --btn-fg-hover: var(--color-primary);
  --btn-bd-hover: #fff;
}

/* Override contestuale che avevi in homepage:
   nel blocco "blog-cta", secondary-cta diventa fill primary con outline primary on hover */
.blog-cta .secondary-cta{
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  --btn-bd: var(--color-primary);
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--color-primary);
  --btn-bd-hover: var(--color-primary);
}

/* ---------------------------------------------------------
   Contact Form 7 — fallback se non puoi aggiungere classi .btn
   --------------------------------------------------------- */
.wpcf7 .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.25rem; border-radius: var(--radius-md);
  font-weight: 700; border: 2px solid transparent;
  background-color: var(--color-primary); color: var(--color-white);
  transition: background-color var(--transition-normal), transform var(--transition-fast);
}
.wpcf7 .wpcf7-submit:hover { background-color: var(--color-primary-dark); }
.wpcf7 .wpcf7-submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wpcf7 .wpcf7-submit:active { transform: translateY(1px); }


/* =========================================================
   Button Utilities
   ========================================================= */

/* Gruppi di bottoni */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.btn-group--center { justify-content: center; }
.btn-group--end    { justify-content: flex-end; }

/* Gruppo a blocchi (es. 2 CTA uguali che si allargano) */
.btn-group--block > .btn,
.btn-group--block > .cta-button,
.btn-group--block > .secondary-cta {
  flex: 1 1 auto;
}

/* Stack automatico su mobile (tutte 100%) */
@media (max-width: 480px) {
  .btn-group--stack > .btn,
  .btn-group--stack > .cta-button,
  .btn-group--stack > .secondary-cta {
    width: 100%;
  }
}

/* Ombra soft (per hero chiari o card) */
.btn--shadow,
.cta-button--shadow,
.secondary-cta--shadow {
  box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}
.btn--shadow:hover,
.cta-button--shadow:hover,
.secondary-cta--shadow:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.08);
}

/* Dark mode: ombre leggermente più “dense” */
@media (prefers-color-scheme: dark) {
  .btn--shadow,
  .cta-button--shadow,
  .secondary-cta--shadow {
    box-shadow: 0 6px 16px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
  }
  .btn--shadow:hover,
  .cta-button--shadow:hover,
  .secondary-cta--shadow:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.35);
  }
}

/* Icon-only (per pulsanti solo icona accessibili) */
.btn--icon-only {
  width: 2.5rem; height: 2.5rem; padding: 0;
  display: inline-grid; place-items: center;
}
.btn--icon-only .btn__label { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } /* visually-hidden */