/* =====================================================================
   RIVIERA ENERGIA — Modello di stile (design system)
   =====================================================================
   Fonte di verita' UNICA per lo stile delle pagine che creiamo noi
   (area clienti, policy, form). I token sono estratti dal child theme
   ufficiale del sito: wp-content/themes/riviera/style.css. NON inventare
   colori o font: usare SEMPRE queste variabili e classi.

   Font: richiede che la pagina linki anche /fonts/google-fonts.css
   (Inter + Montserrat, ospitati in locale).
   ===================================================================== */

:root {
  /* Colori (identici al child theme riviera/style.css) */
  --re-color-bluEnergia: #011584;
  --re-color-bluScuro: #010f63;
  --re-color-gialloMediterraneo: #fbc817;
  --re-color-gialloScuro: #e5b60f;
  --re-color-white: #ffffff;
  --re-color-offWhite: #f9f9f9;
  --re-color-grey: #e2e8f0;
  --re-color-black: #2d2d2d;
  /* Font */
  --re-font-heading: 'Montserrat', sans-serif;
  --re-font-body: 'Inter', sans-serif;
  --re-fw-light: 300;
  --re-fw-regular: 400;
  --re-fw-semibold: 600;
  --re-fw-bold: 700;
  /* Ombre */
  --re-box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.5);
  --re-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* Raggi */
  --re-radius-btn: 10px;
  --re-radius-field: 6px;
  --re-radius-card: 20px;
}

/* ---- Base tipografica (per le pagine standalone) ---- */
body.riv {
  margin: 0;
  font-family: var(--re-font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: var(--re-fw-regular);
  color: var(--re-color-black);
  background-color: var(--re-color-white);
}
.riv h1, .riv h2, .riv h3, .riv h4, .riv h5, .riv h6 {
  font-family: var(--re-font-heading);
  color: var(--re-color-bluEnergia);
  line-height: 1.2;
  font-weight: var(--re-fw-regular);
  margin: 0 0 1.5rem;
}
.riv h1 { font-size: clamp(2rem, 6vw, 3.4375rem); }
.riv h2 { font-size: clamp(1.75rem, 5vw, 2.8125rem); }
.riv h3 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.riv h4 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
.riv p { margin: 0 0 1.5rem; }
.riv a { color: var(--re-color-bluEnergia); }

/* ---- Header a barra blu (come l'header interno del sito) ---- */
.riv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--re-color-bluEnergia);
  border-bottom: 3px solid var(--re-color-gialloMediterraneo);
  box-shadow: var(--re-box-shadow);
}
.riv-bar img { height: 38px; width: auto; display: block; }
.riv-bar .riv-bar-title {
  font-family: var(--re-font-heading);
  color: var(--re-color-white);
  font-size: 18px;
  font-weight: var(--re-fw-semibold);
  white-space: nowrap;
}
.riv-bar .riv-bar-title .sep { color: var(--re-color-gialloMediterraneo); margin: 0 8px; }

/* ---- Bottoni (blu primario + variante gialla, come il sito) ---- */
.riv-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--re-color-bluEnergia);
  color: var(--re-color-white);
  border: 0;
  border-radius: var(--re-radius-btn);
  padding: 16px 32px;
  font-family: var(--re-font-body);
  font-size: 16px;
  font-weight: var(--re-fw-regular);
  line-height: 1.2;
  box-shadow: var(--re-box-shadow);
  transition: background 0.2s ease;
}
.riv-btn:hover { background: var(--re-color-bluScuro); }
.riv-btn:disabled { opacity: 0.6; cursor: default; }
.riv-btn--giallo {
  background: var(--re-color-gialloMediterraneo);
  color: var(--re-color-bluEnergia);
  text-transform: uppercase;
  font-weight: var(--re-fw-semibold);
}
.riv-btn--giallo:hover { background: var(--re-color-gialloScuro); }
.riv-btn--block { display: flex; width: 100%; }

/* ---- Campi form (bordo grigio, focus blu, come gli input del sito) ---- */
.riv-field { margin-bottom: 16px; }
.riv-field label {
  display: block;
  font-weight: var(--re-fw-semibold);
  margin-bottom: 6px;
  color: var(--re-color-black);
}
.riv-field input,
.riv-field select,
.riv-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-family: var(--re-font-body);
  font-size: 16px;            /* >=16px: niente zoom automatico su iOS */
  color: var(--re-color-black);
  background: var(--re-color-white);
  border: 1px solid var(--re-color-grey);
  border-radius: var(--re-radius-field);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.riv-field input:hover,
.riv-field select:hover,
.riv-field textarea:hover { border-color: var(--re-color-bluEnergia); }
.riv-field input:focus,
.riv-field select:focus,
.riv-field textarea:focus {
  border-color: var(--re-color-bluEnergia);
  box-shadow: 0 0 0 3px rgba(1, 21, 132, 0.2);
}

/* ---- Card ---- */
.riv-card {
  background: var(--re-color-white);
  border: 1px solid var(--re-color-grey);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-box-shadow);
}