/**
 * Caritas Custom - Core Components Phase 1
 *
 * Componenti canonici per i nuovi sviluppi.
 * Uso previsto:
 * - avvolgere le nuove interfacce in .caritas-ui
 * - usare classi esplicite, senza sovrascrivere Drupal globalmente
 *
 * Non sostituisce ancora custom.css o public-forms.css.
 * Non applica override globali a .button, .form-submit o Webform.
 */

/* ==========================================================================
   1. Root componente
   ========================================================================== */

.caritas-ui {
  color: var(--caritas-color-text, #1f1c1b);
  font-family: inherit;
}

.caritas-ui *,
.caritas-ui *::before,
.caritas-ui *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   2. Layout base
   ========================================================================== */

.caritas-ui-container {
  width: min(var(--caritas-container, 1120px), calc(100% - 32px));
  margin-inline: auto;
}

.caritas-ui-stack {
  display: grid;
  gap: var(--caritas-space-5, 1.25rem);
}

.caritas-ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--caritas-space-5, 1.25rem);
}

/* ==========================================================================
   3. Bottoni canonici scoped
   ========================================================================== */

.caritas-ui .caritas-btn,
.caritas-ui .caritas-btn:link,
.caritas-ui .caritas-btn:visited,
.caritas-ui button.caritas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  min-width: 48px;
  padding: .72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--caritas-color-primary, #7b0500);
  color: #ffffff !important;
  font: inherit;
  font-weight: 850;
  line-height: 1.1;
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: var(--caritas-shadow-sm, 0 10px 22px rgba(15, 23, 42, .08));
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.caritas-ui .caritas-btn:hover,
.caritas-ui .caritas-btn:focus {
  background: var(--caritas-color-primary-hover, #520300);
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: var(--caritas-shadow-md, 0 16px 30px rgba(15, 23, 42, .10));
}

.caritas-ui .caritas-btn:active {
  background: var(--caritas-color-primary-pressed, #340200);
  transform: translateY(0);
}

.caritas-ui .caritas-btn:focus-visible {
  outline: 3px solid rgba(43, 108, 163, .32);
  outline-offset: 3px;
}

.caritas-ui .caritas-btn[disabled],
.caritas-ui .caritas-btn.is-disabled,
.caritas-ui .caritas-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.caritas-ui .caritas-btn.caritas-btn--secondary {
  background: var(--caritas-color-surface, #ffffff);
  border-color: var(--caritas-color-border, #ddd7d2);
  color: var(--caritas-color-primary, #7b0500) !important;
  box-shadow: none;
}

.caritas-ui .caritas-btn.caritas-btn--secondary:hover,
.caritas-ui .caritas-btn.caritas-btn--secondary:focus {
  background: var(--caritas-color-soft, #f7f5f3);
  border-color: var(--caritas-color-primary, #7b0500);
  color: var(--caritas-color-primary-hover, #520300) !important;
}

.caritas-ui .caritas-btn.caritas-btn--success {
  background: var(--caritas-color-success, #00747c);
  color: #ffffff !important;
}

.caritas-ui .caritas-btn.caritas-btn--success:hover,
.caritas-ui .caritas-btn.caritas-btn--success:focus {
  background: var(--caritas-color-success-hover, #004e53);
}

.caritas-ui .caritas-btn.caritas-btn--warning {
  background: var(--caritas-color-warning, #d89a1d);
  color: var(--caritas-color-text, #1f1c1b) !important;
}

.caritas-ui .caritas-btn.caritas-btn--warning:hover,
.caritas-ui .caritas-btn.caritas-btn--warning:focus {
  background: #c58a18;
  color: var(--caritas-color-text, #1f1c1b) !important;
}

.caritas-ui .caritas-btn.caritas-btn--danger {
  background: var(--caritas-color-danger, #c0392b);
  color: #ffffff !important;
}

.caritas-ui .caritas-btn.caritas-btn--danger:hover,
.caritas-ui .caritas-btn.caritas-btn--danger:focus {
  background: var(--caritas-color-danger-hover, #962d22);
}

.caritas-ui .caritas-btn.caritas-btn--info {
  background: var(--caritas-color-info, #2b6ca3);
  color: #ffffff !important;
}

.caritas-ui .caritas-btn.caritas-btn--info:hover,
.caritas-ui .caritas-btn.caritas-btn--info:focus {
  background: var(--caritas-color-info-hover, #20517b);
}

.caritas-ui .caritas-btn.caritas-btn--ghost,
.caritas-ui .caritas-btn.caritas-btn--muted {
  background: transparent;
  border-color: var(--caritas-color-border, #ddd7d2);
  color: var(--caritas-color-text, #1f1c1b) !important;
  box-shadow: none;
}

.caritas-ui .caritas-btn.caritas-btn--ghost:hover,
.caritas-ui .caritas-btn.caritas-btn--muted:hover,
.caritas-ui .caritas-btn.caritas-btn--ghost:focus,
.caritas-ui .caritas-btn.caritas-btn--muted:focus {
  background: var(--caritas-color-soft, #f7f5f3);
  color: var(--caritas-color-primary, #7b0500) !important;
}

.caritas-ui .caritas-btn.caritas-btn--sm {
  min-height: 48px;
  padding: .55rem 1rem;
  font-size: .92rem;
}

.caritas-ui .caritas-btn.caritas-btn--lg {
  min-height: 56px;
  padding: .85rem 1.45rem;
  font-size: 1.05rem;
}

.caritas-ui .caritas-btn.caritas-btn--full {
  width: 100%;
}

/* ==========================================================================
   4. Card canoniche
   ========================================================================== */

.caritas-ui-card {
  overflow: hidden;
  background: var(--caritas-color-surface, #ffffff);
  border: 1px solid var(--caritas-color-border, #ddd7d2);
  border-radius: var(--caritas-radius-lg, 22px);
  box-shadow: var(--caritas-shadow-sm, 0 10px 24px rgba(15, 23, 42, .08));
}

.caritas-ui-card__header,
.caritas-ui-card__body,
.caritas-ui-card__footer {
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.caritas-ui-card__header {
  border-bottom: 1px solid var(--caritas-color-border, #ddd7d2);
}

.caritas-ui-card__title {
  margin: 0;
  color: var(--caritas-color-text, #1f1c1b);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.18;
  font-weight: 900;
}

.caritas-ui-card__text {
  margin: .65rem 0 0;
  color: var(--caritas-color-text-muted, #635a55);
  font-size: 1rem;
  line-height: 1.6;
}

.caritas-ui-card__footer {
  border-top: 1px solid var(--caritas-color-border, #ddd7d2);
  background: var(--caritas-color-soft, #f7f5f3);
}

/* ==========================================================================
   5. Sezioni form canoniche
   ========================================================================== */

.caritas-form-section {
  background: var(--caritas-color-surface, #ffffff);
  border: 1px solid var(--caritas-color-border, #ddd7d2);
  border-radius: var(--caritas-radius-lg, 22px);
  padding: clamp(1rem, 2.6vw, 1.6rem);
  box-shadow: var(--caritas-shadow-xs, 0 6px 16px rgba(15, 23, 42, .06));
}

.caritas-form-section + .caritas-form-section {
  margin-top: var(--caritas-space-5, 1.25rem);
}

.caritas-form-section__title {
  margin: 0;
  color: var(--caritas-color-primary, #7b0500);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
  font-weight: 900;
}

.caritas-form-section__description {
  margin: .55rem 0 0;
  color: var(--caritas-color-text-muted, #635a55);
  font-size: 1rem;
  line-height: 1.6;
}

.caritas-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: var(--caritas-space-5, 1.25rem);
  padding-top: var(--caritas-space-4, 1rem);
  border-top: 1px solid var(--caritas-color-border, #ddd7d2);
}

/* ==========================================================================
   6. Alert e messaggi
   ========================================================================== */

.caritas-alert {
  padding: 1rem 1.1rem;
  border: 1px solid var(--caritas-color-border, #ddd7d2);
  border-radius: var(--caritas-radius-md, 16px);
  background: var(--caritas-color-soft, #f7f5f3);
  color: var(--caritas-color-text, #1f1c1b);
  line-height: 1.55;
}

.caritas-alert strong {
  font-weight: 900;
}

.caritas-alert--info {
  border-color: rgba(43, 108, 163, .26);
  background: rgba(43, 108, 163, .08);
}

.caritas-alert--success {
  border-color: rgba(0, 116, 124, .28);
  background: var(--caritas-color-success-tint, #b0e1e5);
}

.caritas-alert--warning {
  border-color: rgba(216, 154, 29, .36);
  background: rgba(216, 154, 29, .18);
  color: var(--caritas-color-text, #1f1c1b);
}

.caritas-alert--danger {
  border-color: rgba(192, 57, 43, .32);
  background: rgba(192, 57, 43, .08);
}

/* ==========================================================================
   7. Controlli form canonici
   ========================================================================== */

.caritas-ui .form-item {
  min-width: 0;
}

.caritas-ui input[type="text"],
.caritas-ui input[type="email"],
.caritas-ui input[type="tel"],
.caritas-ui input[type="url"],
.caritas-ui input[type="search"],
.caritas-ui input[type="password"],
.caritas-ui input[type="number"],
.caritas-ui input[type="date"],
.caritas-ui input[type="time"],
.caritas-ui input[type="datetime-local"],
.caritas-ui select,
.caritas-ui textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid var(--caritas-color-border, #ddd7d2);
  border-radius: var(--caritas-radius-sm, 10px);
  background: var(--caritas-color-surface, #ffffff);
  color: var(--caritas-color-text, #1f1c1b);
  font: inherit;
  line-height: 1.4;
  box-shadow: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.caritas-ui textarea {
  min-height: 7rem;
  resize: vertical;
}

.caritas-ui input[type="text"]:focus,
.caritas-ui input[type="email"]:focus,
.caritas-ui input[type="tel"]:focus,
.caritas-ui input[type="url"]:focus,
.caritas-ui input[type="search"]:focus,
.caritas-ui input[type="password"]:focus,
.caritas-ui input[type="number"]:focus,
.caritas-ui input[type="date"]:focus,
.caritas-ui input[type="time"]:focus,
.caritas-ui input[type="datetime-local"]:focus,
.caritas-ui select:focus,
.caritas-ui textarea:focus {
  border-color: var(--caritas-color-info, #2b6ca3);
  outline: 3px solid rgba(43, 108, 163, .24);
  outline-offset: 1px;
}

.caritas-ui input[aria-invalid="true"],
.caritas-ui select[aria-invalid="true"],
.caritas-ui textarea[aria-invalid="true"],
.caritas-ui input.error,
.caritas-ui select.error,
.caritas-ui textarea.error {
  border-color: var(--caritas-color-danger, #c0392b);
}

.caritas-ui input:disabled,
.caritas-ui select:disabled,
.caritas-ui textarea:disabled {
  background: var(--caritas-color-soft, #f7f5f3);
  color: var(--caritas-color-text-muted, #635a55);
  cursor: not-allowed;
}

.caritas-ui input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  accent-color: var(--caritas-color-primary, #7b0500);
  cursor: pointer;
}

.caritas-ui input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(43, 108, 163, .28);
  outline-offset: 2px;
}

/* ==========================================================================
   8. Accordion / details canonici
   ========================================================================== */

.caritas-ui details {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--caritas-color-border, #ddd7d2);
  border-radius: var(--caritas-radius-md, 16px);
  background: var(--caritas-color-surface, #ffffff);
  box-shadow: var(--caritas-shadow-xs, 0 6px 16px rgba(15, 23, 42, .06));
}

.caritas-ui details > summary {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  padding:
    var(--caritas-space-3, 1rem)
    3rem
    var(--caritas-space-3, 1rem)
    var(--caritas-space-4, 1.25rem);
  list-style: none;
  cursor: pointer;
  background: var(--caritas-color-surface, #ffffff);
  color: var(--caritas-color-text, #1f1c1b);
  font-weight: 800;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  transition:
    background-color .16s ease,
    color .16s ease;
}

.caritas-ui details > summary::-webkit-details-marker {
  display: none;
}

.caritas-ui details > summary::marker {
  content: "";
}

.caritas-ui details > summary::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: auto;
  inset-inline-end: 1.15rem;
  width: .65rem;
  height: .65rem;
  content: "";
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transform-origin: center;
  transition: transform .16s ease;
}

.caritas-ui details > .olivero-details__summary::after {
  content: none;
  box-shadow: none;
}

.caritas-ui details[open] > .olivero-details__summary::before {
  transform: translateY(-35%) rotate(225deg);
}

.caritas-ui details > summary:hover {
  background: var(--caritas-color-soft, #f7f5f3);
}

.caritas-ui details > summary:focus-visible {
  outline: 3px solid rgba(43, 108, 163, .32);
  outline-offset: -3px;
}

.caritas-ui details[open] > summary {
  border-bottom: 1px solid var(--caritas-color-border, #ddd7d2);
  background: var(--caritas-color-soft, #f7f5f3);
}

.caritas-ui details > .details-wrapper {
  margin: 0;
  padding: var(--caritas-space-4, 1.25rem);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .caritas-ui-container {
    width: min(100% - 20px, var(--caritas-container, 1120px));
  }

  .caritas-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .caritas-ui .caritas-btn {
    width: 100%;
  }

  .caritas-ui details > summary {
    padding:
      var(--caritas-space-3, 1rem)
      2.75rem
      var(--caritas-space-3, 1rem)
      var(--caritas-space-3, 1rem);
  }

  .caritas-ui details > .details-wrapper {
    padding: var(--caritas-space-3, 1rem);
  }

  .caritas-ui-card__header,
  .caritas-ui-card__body,
  .caritas-ui-card__footer,
  .caritas-form-section {
    padding: 1rem;
  }
}