/* ============================================================
   SITE.CSS — Demo 1: Idraulica Zanon Padova (v2 — natural)
   Cross-skill cherry-pick:
   - offmenu (white tech-mature, textlink-wave su CTA principali)
   - marasrl (flat elevation, no colored shadows)
   - anri (surface hierarchy stratificata warm)
   - workleads (border-divider per definire elementi, zero gradients)
   - juanmora (opacity hover invece di transform)
   - dentologie (focus ring puliti)
   ============================================================ */

@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 {
    /* Idraulica Zanon — palette warm-white tech-mature + arancio urgency mai abusato */
    --color-primary: #EA580C;
    --color-primary-dark: #B8400A;
    --color-primary-light: #FED7AA;
    --color-accent: #1E293B;

    /* Surface hierarchy stratificata (anri) — 3 livelli warm-neutral, no white sterile */
    --color-bg: #FDFCFA;        /* warm white, not pure white */
    --color-surface: #F7F5F1;   /* warm cream */
    --color-surface-deep: #EFEDE7;
    --color-text: #1A1A1A;
    --color-text-muted: #5C5C5C;
    --color-border: #E5E2DB;    /* warm border, no cool gray */

    --font-display: "Barlow Condensed", Impact, system-ui, sans-serif;
    --font-body: "Inter", "Work Sans", system-ui, sans-serif;
  }

  /* ---------- TYPOGRAPHY discipline (le-lab — solo 400/500/700) ---------- */
  .hero__title {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .section__title {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

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

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

  /* Pattern grid di sfondo statico (anri-style warm hierarchy, niente parallax JS) */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--color-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 0 0;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }

  .hero__inner { position: relative; z-index: 1; }

  /* ---------- EMERGENCY BANNER static, no pulse infinite ---------- */
  .emergency-banner {
    background: var(--color-primary);
    color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-primary-dark);
  }

  .emergency-banner a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s var(--ease-natural);
  }

  .emergency-banner a:hover {
    opacity: 0.85;
    text-decoration-thickness: 2px;
  }

  /* ---------- BUTTONS — flat colors, no gradient, 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.2s var(--ease-natural);
  }

  .btn--primary:hover {
    opacity: 0.92;
    background: var(--color-primary-dark);
    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);
  }

  /* ---------- TEXTLINK WAVE solo su site-header CTA + final CTA, niente altrove ---------- */
  .site-header__cta::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity 0.3s var(--ease-natural),
      transform 0.3s var(--ease-natural);
  }

  .site-header__cta:hover::after,
  .site-header__cta:focus-visible::after {
    opacity: 0.8;
    transform: scale(1);
  }

  /* ---------- TRUST ROW flat — 4 colonne con divisori verticali sottili (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-surface-deep);
  }

  /* ---------- SERVICE CARDS flat (marasrl) — solo border, no shadow ---------- */
  .service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition:
      border-color 0.3s var(--ease-natural),
      background-color 0.3s var(--ease-natural);
  }

  .service-card:hover {
    border-color: var(--color-text);
    background: var(--color-surface);
    transform: none;
  }

  .service-card__icon {
    background: var(--color-surface-deep);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  /* ---------- WORK CARDS — opacity hover, no shine artificiale ---------- */
  .work-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s var(--ease-natural);
  }

  .work-card:hover {
    border-color: var(--color-text);
  }

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

  .work-card__images img,
  .work-card__placeholder {
    transition: opacity 0.4s var(--ease-natural);
  }

  .work-card:hover .work-card__images img,
  .work-card:hover .work-card__placeholder {
    opacity: 0.92;
  }

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

  .work-card__type::before {
    content: "INTERVENTO";
    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 background warm hierarchy invece di accent ---------- */
  .stats {
    background: var(--color-surface-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
  }

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

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

  /* ---------- HERO URGENCY senza pulse — solo dot statico ---------- */
  .hero__urgency {
    background: transparent;
    border: 1px dashed var(--color-primary);
    color: var(--color-primary-dark);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
  }

  .hero__urgency::before {
    content: "●";
    color: var(--color-primary);
    margin-right: 6px;
    font-size: 0.625em;
    vertical-align: middle;
  }

  /* ---------- 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);
  }

  /* ---------- TESTIMONIALS — flat cards, italic body ---------- */
  .testimonial {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
  }

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

  /* ---------- FAQ — flat, only border-bottom (workleads) ---------- */
  .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);
  }

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

  /* ---------- DEMO BADGE discreto, no fixed colored circle ---------- */
  .demo-badge {
    background: var(--color-text);
    color: var(--color-bg);
    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);
  }

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