/* ==========================================================================
   en-components.css  —  Extreme Nails by Anna
   --------------------------------------------------------------------------
   SCOPO     : Componenti riusabili e globali: header/navigazione sticky,
               footer, bottoni/CTA, card servizio, gallery, callout, tabella,
               icone social, cornici per il logo.
   PAGINA    : Globale — caricare Site Wide (dopo en-tokens.css).
   TIPO      : WPCode › CSS Snippet › Site Wide.
   DIPENDENZE: en-tokens.css (variabili, utility, tipografia).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cornici per il logo (PNG rettangolari → contenitori, senza distorsione)
   -------------------------------------------------------------------------- */
.en-logo img{ width:auto; height:100%; object-fit:contain; display:block; }

/* Cornice quadrata per un simbolo rettangolare (badge, footer, avatar) */
.en-mark-square{
  width:64px; aspect-ratio:1/1;
  display:grid; place-items:center;
  padding:8px;
  border-radius:var(--en-radius);
}
.en-mark-square img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.en-mark-circle{ border-radius:50%; background:var(--en-soft-black); }
.en-mark-circle img{ object-fit:contain; }

/* --------------------------------------------------------------------------
   2. Header / navigazione (globale, sticky)
   -------------------------------------------------------------------------- */
.en-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background-color var(--en-t), box-shadow var(--en-t), border-color var(--en-t);
  border-bottom:1px solid transparent;
}
/* Quando l'utente scrolla (classe gestita da en-ui.js): header pieno */
.en-header.is-scrolled{
  background:rgba(255,248,243,.92);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--en-shadow-sm);
  border-bottom-color:var(--en-hairline);
}

.en-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-height:76px;
  padding-block:10px;
}

/* Logo (logotipo). Default: versione scura, per header sopra hero scuro
   mostriamo la versione avorio (vedi .en-header--on-dark). */
.en-logo{ display:flex; align-items:center; flex:0 0 auto; }
.en-logo a{
  display:block;
  position:relative;
  overflow:hidden;
  height:clamp(34px, 4.2vw, 46px);
  width:clamp(126px, 15.5vw, 170px);
}
/* I PNG approvati includono molto margine trasparente: ingrandiamo e
   centriamo la grafica dentro una cornice, senza deformare il logotipo. */
.en-logo a > img{
  position:absolute;
  left:50%; top:50%;
  width:auto; height:100%; max-width:none;
  transform:translate(-50%, -50%) scale(2.7);
  transform-origin:center;
}
/* Toggle fra le due varianti del logotipo. Specificità alzata (img.classe)
   per vincere sui reset `… img{display:block}`. */
.en-logo img.en-logo__dark{ display:block; }   /* scritta nera, per header chiaro */
.en-logo img.en-logo__light{ display:none; }   /* scritta avorio, per header scuro */

/* Sopra l'hero scuro l'header è trasparente: usiamo il logo avorio e link chiari */
.en-header--on-dark:not(.is-scrolled) img.en-logo__dark{ display:none; }
.en-header--on-dark:not(.is-scrolled) img.en-logo__light{ display:block; }
.en-header--on-dark:not(.is-scrolled) .en-nav__link{ color:var(--en-ivory); }
.en-header--on-dark:not(.is-scrolled) .en-nav__link::after{ background:var(--en-champagne); }
.en-header--on-dark:not(.is-scrolled) .en-burger__bar{ background:var(--en-ivory); }

/* Navigazione desktop */
.en-nav{ display:flex; align-items:center; gap:clamp(20px, 3vw, 40px); }
.en-nav__list{
  display:flex; align-items:center; gap:clamp(18px, 2.6vw, 34px);
  list-style:none; margin:0; padding:0;
}
.en-nav__link{
  position:relative;
  font:700 .82rem/1 var(--en-font-body);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--en-soft-black);
  text-decoration:none;
  padding:6px 2px;
  transition:color var(--en-t-fast);
}
.en-nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--en-champagne);
  transition:right var(--en-t);
}
.en-nav__link:hover{ color:var(--en-flamingo); }
.en-nav__link:hover::after{ right:0; }
.en-nav__link[aria-current="page"]{ color:var(--en-flamingo); }
.en-nav__link[aria-current="page"]::after{ right:0; }

/* CTA Prenota nell'header (resta compatta) */
.en-header .en-btn{ padding:.62em 1.25em; font-size:.85rem; }

/* Hamburger (mobile) */
.en-burger{
  display:none;
  position:relative; z-index:120;          /* resta sopra al pannello aperto */
  width:46px; height:46px;
  border:0; background:transparent; cursor:pointer;
  padding:11px; border-radius:var(--en-radius-sm);
  align-items:center; justify-content:center;
}
.en-burger__box{ position:relative; width:24px; height:16px; }
.en-burger__bar{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background:var(--en-soft-black);
  transition:transform var(--en-t), opacity var(--en-t-fast), top var(--en-t);
}
.en-burger__bar:nth-child(1){ top:0; }
.en-burger__bar:nth-child(2){ top:7px; }
.en-burger__bar:nth-child(3){ top:14px; }
/* Stato aperto → diventa una X */
.en-burger[aria-expanded="true"] .en-burger__bar:nth-child(1){ top:7px; transform:rotate(45deg); }
.en-burger[aria-expanded="true"] .en-burger__bar:nth-child(2){ opacity:0; }
.en-burger[aria-expanded="true"] .en-burger__bar:nth-child(3){ top:7px; transform:rotate(-45deg); }
/* A menu aperto la X è sopra il pannello avorio: barre scure ben visibili
   (vince anche sull'header on-dark che le vorrebbe avorio). */
.en-header .en-burger[aria-expanded="true"] .en-burger__bar,
.en-header--on-dark:not(.is-scrolled) .en-burger[aria-expanded="true"] .en-burger__bar{ background:var(--en-soft-black); }

/* --- Mobile: pannello a tendina a tutta pagina --- */
@media (max-width:900px){
  .en-burger{ display:inline-flex; }
  .en-nav{
    position:fixed; inset:0 0 0 auto; z-index:110;
    width:min(86vw, 380px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    background:var(--en-ivory);
    box-shadow:var(--en-shadow-lg);
    padding:96px clamp(24px,7vw,40px) 40px;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .en-nav.is-open{ transform:translateX(0); }
  .en-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .en-nav__link{
    display:block;                                  /* riga a tutta larghezza */
    font-size:1.05rem; letter-spacing:.04em; text-transform:none;
    font-weight:700; padding:16px 4px;
    border-bottom:1px solid var(--en-hairline);
  }
  .en-nav__link::after{ display:none; }
  .en-nav .en-btn{ margin-top:24px; justify-content:center; font-size:.95rem; padding:.9em 1.6em; }
  .en-header--on-dark:not(.is-scrolled) .en-nav .en-nav__link{ color:var(--en-soft-black); }

  /* Sfondo scuro semitrasparente dietro al pannello */
  .en-nav-overlay{
    position:fixed; inset:0; z-index:99;
    background:rgba(23,18,23,.45);
    opacity:0; visibility:hidden;
    transition:opacity var(--en-t), visibility var(--en-t);
  }
  .en-nav-overlay.is-open{ opacity:1; visibility:visible; }
  /* blocca lo scroll del body quando il menu è aperto */
  body.en-nav-lock{ overflow:hidden; }
}

/* --------------------------------------------------------------------------
   3. Bottoni / CTA
   -------------------------------------------------------------------------- */
.en-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:700 1rem/1 var(--en-font-body); letter-spacing:.02em;
  padding:.9em 1.6em; border-radius:var(--en-radius-pill);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform var(--en-t-fast), background-color var(--en-t-fast),
             color var(--en-t-fast), border-color var(--en-t-fast), box-shadow var(--en-t-fast);
}
.en-btn:focus-visible{ outline:2px solid var(--en-flamingo); outline-offset:3px; }
.en-btn--primary{ background:var(--en-flamingo); color:var(--en-white); }
.en-btn--primary:hover{ background:var(--en-flamingo-deep); color:var(--en-white); transform:translateY(-1px); box-shadow:var(--en-shadow-md); }
.en-btn--dark{ background:var(--en-soft-black); color:var(--en-ivory); }
.en-btn--dark:hover{ background:#241c24; color:var(--en-ivory); transform:translateY(-1px); }
.en-btn--ghost{ background:transparent; color:var(--en-soft-black); border-color:var(--en-soft-black); }
.en-btn--ghost:hover{ background:var(--en-soft-black); color:var(--en-ivory); }
/* Ghost su fondo scuro */
.en-bg-dark .en-btn--ghost,
.en-header--on-dark:not(.is-scrolled) .en-btn--ghost{
  color:var(--en-ivory); border-color:rgba(255,248,243,.55);
}
.en-bg-dark .en-btn--ghost:hover,
.en-header--on-dark:not(.is-scrolled) .en-btn--ghost:hover{
  background:var(--en-ivory); color:var(--en-soft-black); border-color:var(--en-ivory);
}
.en-btn--block{ display:flex; width:100%; }

/* --------------------------------------------------------------------------
   4. Card servizio
   -------------------------------------------------------------------------- */
.en-card{
  background:var(--en-white);
  border:1px solid var(--en-border);
  border-radius:var(--en-radius);
  padding:clamp(22px, 3vw, 32px);
  transition:transform var(--en-t), box-shadow var(--en-t), border-color var(--en-t);
  height:100%;
}
.en-card:hover{ transform:translateY(-2px); box-shadow:var(--en-shadow-md); border-color:var(--en-hairline); }
.en-card__index{
  font:700 .8rem/1 var(--en-font-body); letter-spacing:.14em;
  color:var(--en-champagne);
}
.en-card__title{
  font-family:var(--en-font-display); font-weight:600;
  font-size:clamp(1.3rem, 2.4vw, 1.55rem); line-height:1.2;
  margin:.5em 0 .35em;
}
.en-card__text{ color:var(--en-graphite); font-size:1rem; line-height:1.55; }

/* --------------------------------------------------------------------------
   5. Gallery (interni / lavori): griglia responsive di immagini quadrate
   -------------------------------------------------------------------------- */
.en-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(140px, 30vw, 260px), 1fr));
  gap:clamp(10px, 1.6vw, 18px);
}
.en-gallery__item{
  position:relative; overflow:hidden;
  border-radius:var(--en-radius-sm);
  background:var(--en-surface-alt);
}
.en-gallery__item img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.en-gallery__item:hover img{ transform:scale(1.04); }

/* --------------------------------------------------------------------------
   6. Callout (usato nella pagina Normativa)
   -------------------------------------------------------------------------- */
.en-callout{
  background:var(--en-gold-wash);
  border-left:3px solid var(--en-champagne);
  border-radius:0 var(--en-radius-sm) var(--en-radius-sm) 0;
  padding:clamp(18px, 3vw, 28px) clamp(20px, 3.4vw, 32px);
  color:var(--en-soft-black);
}
.en-callout--flamingo{ background:var(--en-flamingo-wash); border-left-color:var(--en-flamingo); }
.en-callout__title{
  font-family:var(--en-font-display); font-weight:600;
  font-size:1.3rem; margin-bottom:.3em;
}

/* --------------------------------------------------------------------------
   7. Tabella (responsive)
   -------------------------------------------------------------------------- */
.en-table-wrap{ width:100%; overflow-x:auto; border-radius:var(--en-radius); }
.en-table{
  width:100%; border-collapse:collapse;
  background:var(--en-white);
  border:1px solid var(--en-border);
  border-radius:var(--en-radius); overflow:hidden;
  font-size:1rem;
}
.en-table caption{
  text-align:left; color:var(--en-graphite);
  font-size:.92rem; padding:0 0 12px;
}
.en-table th,
.en-table td{
  text-align:left; padding:14px 18px;
  border-bottom:1px solid var(--en-hairline);
  vertical-align:top;
}
.en-table thead th{
  background:var(--en-surface-alt);
  font:700 .8rem/1.2 var(--en-font-body);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--en-graphite);
}
.en-table tbody tr:last-child td{ border-bottom:0; }
.en-table tbody tr:nth-child(even){ background:var(--en-surface-alt); }

/* Pillole di stato (senza affidare il significato al solo colore) */
.en-pill{
  display:inline-flex; align-items:center; gap:.4em;
  font:700 .82rem/1 var(--en-font-body); letter-spacing:.02em;
  padding:.4em .7em; border-radius:var(--en-radius-pill); white-space:nowrap;
}
.en-pill--danger{ background:var(--en-danger-bg); color:var(--en-danger); }
.en-pill--success{ background:var(--en-success-bg); color:var(--en-success); }

/* --------------------------------------------------------------------------
   8. Icone social (link tondi con accento flamingo)
   -------------------------------------------------------------------------- */
.en-social{ display:inline-flex; gap:12px; align-items:center; }
.en-social__link{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--en-border); background:var(--en-white);
  color:var(--en-flamingo);
  transition:background-color var(--en-t-fast), color var(--en-t-fast), border-color var(--en-t-fast), transform var(--en-t-fast);
}
.en-social__link:hover{ background:var(--en-flamingo); color:var(--en-white); border-color:var(--en-flamingo); transform:translateY(-2px); }
.en-social__link svg{ width:20px; height:20px; fill:currentColor; }
/* Social su fondo scuro (footer) */
.en-bg-dark .en-social__link,
.en-footer .en-social__link{
  background:rgba(255,255,255,.06); border-color:rgba(255,248,243,.18); color:var(--en-flamingo-bright);
}
.en-bg-dark .en-social__link:hover,
.en-footer .en-social__link:hover{ background:var(--en-flamingo); color:var(--en-white); border-color:var(--en-flamingo); }

/* --------------------------------------------------------------------------
   9. Footer globale
   -------------------------------------------------------------------------- */
.en-footer{ background:var(--en-soft-black); color:var(--en-ivory); padding:clamp(48px,8vw,88px) 0 0; }
.en-footer a{ color:var(--en-ivory); text-decoration:none; transition:color var(--en-t-fast); }
.en-footer a:hover{ color:var(--en-champagne); }

.en-footer__grid{
  display:grid; gap:clamp(32px, 5vw, 56px);
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:clamp(40px, 6vw, 64px);
}
.en-footer__brand .en-logo{ height:42px; margin-bottom:18px; }
.en-footer__brand .en-logo a{ width:155px; height:42px; }
.en-footer__brand .en-logo img{ height:100%; }
.en-footer__tagline{ color:rgba(255,248,243,.7); max-width:34ch; font-size:.98rem; line-height:1.6; }
.en-footer__title{
  font:700 .8rem/1 var(--en-font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--en-champagne); margin-bottom:18px;
}
.en-footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.en-footer__list a,
.en-footer__contact a{ color:rgba(255,248,243,.85); }
.en-footer__list a:hover,
.en-footer__contact a:hover{ color:var(--en-champagne); }
.en-footer__contact{ display:grid; gap:12px; font-size:.98rem; line-height:1.5; color:rgba(255,248,243,.85); }
.en-footer__contact strong{ color:var(--en-ivory); font-weight:700; }
.en-footer__social{ margin-top:22px; }

.en-footer__bottom{
  border-top:1px solid rgba(255,248,243,.14);
  padding:24px 0 clamp(28px,5vw,40px);
  display:flex; flex-wrap:wrap; gap:10px 24px;
  align-items:center; justify-content:space-between;
  font-size:.88rem; color:rgba(255,248,243,.6);
}
.en-footer__legal{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.en-credit{ margin:0; }
.en-credit img.emoji{
  display:inline !important;
  width:1em !important;
  height:1em !important;
  margin:0 .08em !important;
  vertical-align:-.12em !important;
}
.en-footer .en-credit a{ color:var(--en-flamingo-bright); }
.en-footer .en-credit a:hover{ color:var(--en-flamingo); text-decoration:underline; }

@media (max-width:760px){
  .en-footer__grid{ grid-template-columns:1fr 1fr; }
  .en-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .en-footer__grid{ grid-template-columns:1fr; }
  .en-footer__bottom{ flex-direction:column; align-items:flex-start; }
}