/* ============================================================
   SITE.CSS — Demo 2: Elettro Pivetta Vicenza (v2 — natural)
   Cross-skill cherry-pick:
   - digitalpresent (shine on demand su image hover, niente shimmer infinite)
   - prototypestudio (layered shadow tokens 3 strati grigi sottili, work counter)
   - workleads (flat solid surface beige #f7f4e9, ZERO gradient)
   - juanmora (opacity hover, kerning precision)
   - marasrl (flat elevation)
   - dentologie (focus ring puliti, hover scale minimal)
   ============================================================ */

@import url("../shared/styles/base.css");
@import url("../shared/styles/components.css");
@import url("../shared/styles/artigiano.css");
@import url("../shared/styles/animations.css");

@layer overrides {
  :root {
    /* Palette — flat solid colors, no gradient (workleads) */
    --color-primary: #1E40AF;
    --color-primary-dark: #1E3A8A;
    --color-primary-light: #DBEAFE;
    --color-accent: #FCD34D;
    --color-accent-dark: #F59E0B;

    /* Surface hierarchy — warm beige unico (workleads) */
    --color-bg: #FFFFFF;
    --color-surface: #F7F4E9;        /* workleads beige caldo */
    --color-surface-deep: #EFEBDC;
    --color-text: #0F172A;
    --color-text-muted: #475569;
    --color-border: #E2DECF;          /* warm border tonal con surface */

    --font-display: "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
  }

  /* ---------- TYPOGRAPHY discipline (le-lab — solo 400/600/700) ---------- */
  .hero__title {
    text-transform: none;
    letter-spacing: -0.022em;
    font-weight: 700;
  }

  .section__title,
  .service-area__title,
  .works-gallery__title {
    text-transform: none;
    letter-spacing: -0.012em;
    font-weight: 600;
  }

  .site-header__logo-mark {
    background: var(--color-primary);
  }

  /* ---------- HEADER flat con border-bottom ---------- */
  .site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
  }

  /* ---------- DEMO BADGE discreto monospace ---------- */
  .demo-badge {
    background: var(--color-primary);
    color: #fff;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    border-radius: 0 0 0 var(--radius-sm);
  }

  /* ---------- HERO surface stratificata, no gradient ---------- */
  .hero {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  /* ---------- HERO URGENCY giallo FV solid (workleads — no gradient/shimmer) ---------- */
  .hero__urgency {
    background: var(--color-accent);
    color: var(--color-text);
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 600;
  }

  /* ---------- ACCENT FV — flat giallo, NO shimmer infinite ---------- */
  .accent-fv {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-accent);
    border: 1px solid var(--color-accent-dark);
  }

  /* ---------- BUTTONS — solid colors flat, opacity hover (juanmora) ---------- */
  .btn--primary {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    box-shadow: none;
    transition:
      opacity 0.2s var(--ease-natural),
      background-color 0.25s var(--ease-natural);
  }

  .btn--primary:hover {
    opacity: 0.92;
    background: var(--color-primary-dark);
    transform: none;
  }

  .btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
    border: 1px solid var(--color-accent-dark);
    box-shadow: none;
    font-weight: 600;
    transition: opacity 0.2s var(--ease-natural);
  }

  .btn--accent:hover {
    opacity: 0.9;
    background: var(--color-accent);
    transform: none;
  }

  .btn--outline {
    border: 1px solid var(--color-text);
    color: var(--color-text);
    background: transparent;
    transition:
      background-color 0.25s var(--ease-natural),
      color 0.25s var(--ease-natural);
  }

  .btn--outline:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }

  /* ---------- TRUST ROW flat con divider (workleads) ---------- */
  .trust-row {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .trust-row__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .trust-row__grid > .trust-item:not(:last-child) {
    border-right: 1px solid var(--color-border);
  }

  @media (max-width: 768px) {
    .trust-row__grid { grid-template-columns: 1fr 1fr; }
    .trust-row__grid > .trust-item:nth-child(2n) { border-right: none; }
    .trust-row__grid > .trust-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--color-border); }
  }

  .trust-item {
    padding: var(--space-lg);
    transition: background-color 0.3s var(--ease-natural);
  }

  .trust-item:hover {
    background: var(--color-bg);
  }

  /* ---------- SERVICE CARDS layered shadow sottili (prototypestudio) ---------- */
  .service-card {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: none;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04),
      0 4px 12px rgb(0 0 0 / 0.04);
    transition:
      box-shadow 0.4s var(--ease-natural),
      transform 0.4s var(--ease-natural);
  }

  .service-card:hover {
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.04),
      0 0 0 1px rgb(0 0 0 / 0.06),
      0 12px 24px rgb(0 0 0 / 0.06);
    transform: translateY(-2px);
  }

  .service-card__icon {
    background: var(--color-primary-light);
    color: var(--color-primary);
  }

  /* ---------- WORK CARDS — shine on hover (digitalpresent — solo on hover, no infinite) ---------- */
  .work-card {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04);
    transition: box-shadow 0.4s var(--ease-natural);
  }

  .work-card:hover {
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.04),
      0 0 0 1px rgb(0 0 0 / 0.06),
      0 8px 24px rgb(30 64 175 / 0.06);
  }

  .work-card__images {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .work-card__images::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(255 255 255 / 0.3) 50%,
      transparent 100%
    );
    transform: skewX(-12deg);
    pointer-events: none;
    z-index: 1;
    transition: left 0.9s var(--ease-natural);
  }

  .work-card:hover .work-card__images::before {
    left: 125%;
  }

  /* ---------- WORK CARD eyebrow monospace (prototypestudio) ---------- */
  .work-card__type {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .work-card__type::before {
    content: "PROGETTO";
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  /* ---------- STATS warm surface, no accent vibrante ---------- */
  .stats {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .stat-item__number {
    color: var(--color-text);
    font-weight: 700;
  }

  .stat-item__label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ---------- CALCOLATORE FV — pricing cards layered shadow ---------- */
  .fv-calc__card,
  .pricing-card {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: none;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04),
      0 4px 12px rgb(0 0 0 / 0.04);
    transition: box-shadow 0.4s var(--ease-natural);
  }

  .fv-calc__card:hover,
  .pricing-card:hover {
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.04),
      0 0 0 1px rgb(0 0 0 / 0.08),
      0 12px 24px rgb(0 0 0 / 0.08);
  }

  /* Featured card — solid accent, niente shimmer */
  .fv-calc__card--featured,
  .pricing-card--featured {
    background: var(--color-bg);
    box-shadow:
      0 0 0 2px var(--color-accent),
      0 8px 24px rgb(252 211 77 / 0.18);
  }

  .fv-calc__card--featured::before,
  .pricing-card--featured::before {
    content: "PIÙ RICHIESTO";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    background: var(--color-accent);
    color: var(--color-text);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    border: 1px solid var(--color-accent-dark);
    border-radius: 2px;
    box-shadow: none;
  }

  /* ---------- TESTIMONIALS — layered shadow ---------- */
  .testimonial {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04);
    border: none;
  }

  .testimonial__quote {
    font-style: italic;
    line-height: 1.6;
  }

  /* ---------- FAQ flat (workleads — solo border-bottom) ---------- */
  .faq__item {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .faq__item:hover {
    background: var(--color-surface);
  }

  /* ---------- FOCUS RING pulito (dentologie) ---------- */
  .btn:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ---------- FOOTER warm dark, no gradient ---------- */
  .site-footer {
    background: var(--color-text);
    color: var(--color-bg);
  }

  /* ---------- REMOVE link nav shimmer text — sostituito con sottolineatura ---------- */
  .site-nav__list a {
    transition: color 0.2s var(--ease-natural);
  }

  .site-nav__list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  /* ---------- REVEAL DEFAULT 0.7s natural easing ---------- */
  section.reveal,
  .reveal--auto {
    --reveal-duration: 0.7s;
    --reveal-easing: var(--ease-natural);
  }
}