/* ============================================================
   RIGOLLI.COM — Foglio di stile principale
   File:    style.css
   Autore:  Studio Rigolli
   Note:    Modifica solo questo file per aggiornare
            colori, tipografia e layout dell'intero sito.
   ============================================================ */


/* ── 1. VARIABILI GLOBALI ───────────────────────────────────────
   Cambia i valori qui per ridisegnare l'identità visiva
   senza toccare nessun'altra riga.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Palette colori */
  --color-text:    #4a4e47;   /* testo principale – scurito per contrasto su topo-verde */
  --color-muted:   #3d4139;   /* testo secondario / muted */
  --color-accent:  #2c3d2e;   /* verde istituzionale (coerente col banner) */
  --color-bg:      #b8bfb0;   /* sfondo topo-verde (greige con sottotono verde) */

  /* Banner gradiente (sostituisce il vecchio Flash) */
  --banner-grad-start:  #2c3d2e;   /* verde scuro bosco */
  --banner-grad-mid:    #3d5c3a;   /* verde agronomo */
  --banner-grad-end:    #4e7a48;   /* verde chiaro */

  /* Bordo separatore footer – adattato allo sfondo topo-verde */
  --color-footer-border: #a0a89a;

  /* Tipografia */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Layout */
  --max-width:   800px;

  /* Spaziature */
  --spacing-sm:  0.75rem;
  --spacing-md:  1.5rem;
  --spacing-lg:  3rem;

  /* Bordi */
  --radius-sm:   4px;
  --radius-md:   6px;

  /* Transizioni */
  --transition:  0.2s ease;
}


/* ── 2. RESET & BASE ────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: 0.875rem;        /* ≈ 14px – leggibile su mobile */
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ── 3. LAYOUT PRINCIPALE ───────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
.page-wrapper {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}


/* ── 4. HEADER / BANNER ─────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
.site-header {
  width: 100%;
  padding-top: var(--spacing-lg);
}

/* Wrapper cliccabile del banner */
.site-header a {
  display: block;
  text-decoration: none;
}

/* Sostituzione moderna del vecchio banner Flash (homepage.swf) */
.flash-replacement {
  width: 100%;
  max-width: 600px;
  height: clamp(80px, 15vw, 120px);
  background: linear-gradient(
    135deg,
    var(--banner-grad-start)  0%,
    var(--banner-grad-mid)   50%,
    var(--banner-grad-end)  100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border-radius: var(--radius-md);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Effetto shimmer animato sul banner */
.flash-replacement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Testo logo e sottotitolo all'interno del banner */
.logo-text,
.logo-subtitle {
  color: #ffffff;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.logo-text {
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.35em;
  line-height: 1.2;
}

.logo-subtitle {
  font-size: clamp(0.55rem, 1.8vw, 0.7rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  opacity: 0.75;
  margin-top: 0.3em;
}


/* ── 5. NAVIGAZIONE LINGUE ──────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
.lang-nav {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.lang-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid #dddddd;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.lang-nav a:hover,
.lang-nav a:focus {
  border-color: var(--color-accent);
  color: var(--color-accent);
  outline: none;
}

/* Bandierine */
.lang-nav img {
  width: 20px;
  height: 15px;
  min-width: 20px;
  min-height: 15px;
  border: 0;
  vertical-align: middle;
}


/* ── 6. SEZIONE AGOPUNTURE URBANE ───────────────────────────────
   ─────────────────────────────────────────────────────────── */
.section-agopunture {
  width: 100%;
  text-align: center;
  padding: var(--spacing-md) 0;
}

.section-agopunture h2 {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.03em;
}

/* Pulsante CTA generico – riutilizzabile su altre pagine */
.btn-link {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition);
}

.btn-link:hover,
.btn-link:focus {
  background-color: var(--color-accent);
  color: #ffffff;
  outline: none;
}


/* ── 7. FOOTER ──────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */
.site-footer {
  width: 100%;
  padding: var(--spacing-md) 0 var(--spacing-lg);
  text-align: center;
  border-top: 1px solid var(--color-footer-border, #cccccc);
}

.site-footer p {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.8;
}

.site-footer a {
  color: var(--color-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* Partita IVA */
.vat {
  font-size: 0.7rem;
  opacity: 0.8;
}


/* ── 8. RESPONSIVE ──────────────────────────────────────────────
   ─────────────────────────────────────────────────────────── */

/* Smartphone (≤ 480px) */
@media (max-width: 480px) {
  .page-wrapper {
    gap: var(--spacing-md);
  }

  .lang-nav a {
    padding: 0.45rem 0.75rem;
  }
}

/* Tablet e desktop (≥ 768px) — font leggermente più grande */
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}