/* =========================================================
   STYLE.CSS — SAFE GLOBAL (site-wide + retrofit)
   Obiettivi:
   - Ridurre sorprese su browser (auto-dark / blue links / overflow)
   - NON rompere navbar e footer (non li sovrascriviamo)
   - Bottoni sempre leggibili (fix iOS -webkit-text-fill-color)
   - NO overflow orizzontale
   - immagini responsive
   - tabelle retrofit senza tagli a destra + header non troncati
========================================================= */

/* =========================
   0) Anti auto-dark (SAFE)
========================= */
:root{
  color-scheme: light;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;

  font-family:'Roboto', sans-serif;
  background:#fff;
  color:#000;

  -webkit-text-size-adjust: 100%;
}

/* ✅ NON forzare background/colore su .site-footer o navbar:
   lasciali gestire da footer.css / navbar.css */

/* ✅ iOS: evita “blue link” automatici (tel/email/date) */
a[x-apple-data-detectors],
a[x-apple-data-detectors] *{
  color: inherit !important;
  text-decoration: inherit !important;
}

/* ✅ Tap highlight meno invadente su mobile */
a, button, input, textarea, select{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ✅ media responsive “safe” (anche svg/canvas) */
img, video, iframe, svg, canvas{
  max-width:100%;
  height:auto;
}

/* ✅ evita layout che “spinge” a destra */
*,
*::before,
*::after{ box-sizing:border-box; }

/* ✅ Form: aspetto consistente */
button, input, textarea, select{
  font: inherit;
  color: inherit;
}

/* ✅ Riduci animazioni per chi lo richiede */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
   1) Link SOLO contenuto (non navbar, non bottoni)
   (evita blu elettrico ma NON rompe CTA/menu)
   ✅ FIX: escludo anche .cta-button
========================= */
main a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.cta-button),
main a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.cta-button):visited{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
main a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.cta-button):hover{
  opacity:.85;
}

/* =========================
   2) Layout base pagine
========================= */
main{
  max-width:1100px;
  margin:2rem auto;
  padding:1rem;
  box-sizing:border-box;
}

h1{
  font-size:2.5rem;
  text-align:center;
  margin:0 0 2rem;
}

h2{
  font-size:2rem;
  text-align:center;
  margin:0 0 2rem;
}

.description{
  font-size:1.1rem;
  line-height:1.65;
  margin-bottom:2.5rem;
  color:#000;
}

/* =========================
   3) Tabelle generiche (site-wide)
========================= */
table{
  width:100%;
  border-collapse:collapse;
  margin:2rem 0;
  table-layout:fixed;
}

th, td{
  border:1px solid #ccc;
  padding:.8rem;
  text-align:left;
  vertical-align:middle;
  font-size:1rem;

  /* ✅ evita overflow parole lunghe */
  overflow-wrap:anywhere;
  word-break:break-word;
}

th{
  background:#e9e9e9;
  font-weight:600;

  /* ✅ header mai troncati */
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

tr:nth-child(even){ background:#f7f7f7; }
tr:nth-child(odd){ background:#fff; }

/* =========================
   4) Search (se la usi)
========================= */
.search-box{ display:none; }
.search-icon{ cursor:pointer; }

/* =========================================================
   5) RETROFIT — FIX DEFINITIVO (no tagli + header wrap)
========================================================= */
.retrofit h1{
  text-align:center;
  margin-bottom:2.5rem;
}

/* wrapper non clippa mai */
.retrofit .table-wrap{
  max-width:980px;
  width:100%;
  margin:1rem auto 2rem;
  box-sizing:border-box;
  overflow:visible;      /* ✅ NO taglio a destra */
  border:0;
  background:transparent;
}

/* frame sulla tabella (radius pulito) */
.retrofit .table-wrap table.compat,
.retrofit .table-wrap table.accessori{
  width:100%;
  margin:0;
  background:#fff;

  border:1px solid #e6e6e6;
  border-radius:14px;

  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;

  table-layout:fixed;
}

/* celle */
.retrofit .table-wrap th,
.retrofit .table-wrap td{
  border-right:1px solid #e6e6e6;
  border-bottom:1px solid #e6e6e6;
  padding:10px 14px;
  font-size:1rem;
  vertical-align:middle;

  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;

  min-width:0;
}

/* header: MAI troncato */
.retrofit .table-wrap th{
  background:#efefef;
  font-weight:700;
  overflow:visible;
  text-overflow:clip;
}

/* zebra */
.retrofit .table-wrap tbody tr:nth-child(even) td{
  background:#fafafa;
}

/* hover */
.retrofit .table-wrap tbody tr:hover td{
  background:#f2f2f2;
  transition:.15s;
}

/* togli bordi extra */
.retrofit .table-wrap tr > *:last-child{ border-right:0; }
.retrofit .table-wrap tbody tr:last-child > *{ border-bottom:0; }

/* --- COMPAT: 3 colonne --- */
.retrofit table.compat col.col-model    { width:56%; }
.retrofit table.compat col.col-pocket   { width:22%; }
.retrofit table.compat col.col-surfynex { width:22%; }

/* fallback senza colgroup */
.retrofit table.compat th:nth-child(1),
.retrofit table.compat td:nth-child(1){ width:56%; }

.retrofit table.compat th:nth-child(2),
.retrofit table.compat td:nth-child(2){
  width:22%;
  text-align:center;
  font-weight:700;
}

.retrofit table.compat th:nth-child(3),
.retrofit table.compat td:nth-child(3){
  width:22%;
  text-align:center;
  font-weight:700;
}

/* ✅ header col 2/3 può andare a capo, celle ✓ no */
.retrofit table.compat thead th:nth-child(2),
.retrofit table.compat thead th:nth-child(3){
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.15 !important;
}

.retrofit table.compat tbody td:nth-child(2),
.retrofit table.compat tbody td:nth-child(3){
  white-space:nowrap !important;
}

/* --- ACCESSORI: 2 colonne --- */
.retrofit table.accessori col.col-acc-model { width:38%; }
.retrofit table.accessori col.col-acc-desc  { width:62%; }

/* fallback */
.retrofit table.accessori th:nth-child(1),
.retrofit table.accessori td:nth-child(1){ width:38%; }

.retrofit table.accessori th:nth-child(2),
.retrofit table.accessori td:nth-child(2){ width:62%; }

/* =========================
   6) Card prodotti (usato)
========================= */
.used-category{ margin-bottom:3rem; }

.used-category h2{
  font-size:1.8rem;
  margin-bottom:1rem;
  border-bottom:2px solid #ddd;
  padding-bottom:.5rem;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}

.product-card{
  border:1px solid #ddd;
  border-radius:10px;
  padding:1rem;
  background:#fafafa;
  text-align:center;
  transition:.25s;
}

.product-card:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transform:translateY(-3px);
}

.product-card img{
  max-width:100%;
  height:auto;
  margin-bottom:1rem;
  border-radius:6px;
}

.product-card h3{
  font-size:1.2rem;
  margin:.5rem 0;
}

.product-card p{
  font-size:.95rem;
  color:#333;
  margin-bottom:1rem;
}

/* selettore specifico */
.product-card a.btn{
  display:inline-block;
  background:#000;
  color:#fff;
  -webkit-text-fill-color:#fff;
  padding:.5rem 1.2rem;
  border-radius:6px;
  text-decoration:none;
  font-size:.9rem;
}
.product-card a.btn:hover{ opacity:.9; }

/* =========================
   7) Cookie banner safe-area (iPhone)
========================= */
#cookie-banner{
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* =========================
   8) Responsive
========================= */
@media (max-width:768px){
  h1{ font-size:2rem; }
  h2{ font-size:1.6rem; }

  main{
    margin:1rem auto;
    padding:.75rem;
  }

  th, td{
    font-size:.92rem;
    padding:.6rem;
  }

  .retrofit .table-wrap th,
  .retrofit .table-wrap td{
    font-size:.92rem;
    padding:9px 10px;
  }

  .retrofit table.compat th:nth-child(1),
  .retrofit table.compat td:nth-child(1){ width:52%; }
  .retrofit table.compat th:nth-child(2),
  .retrofit table.compat td:nth-child(2){ width:24%; }
  .retrofit table.compat th:nth-child(3),
  .retrofit table.compat td:nth-child(3){ width:24%; }
}

@media (max-width:420px){
  .retrofit .table-wrap th,
  .retrofit .table-wrap td{
    font-size:.90rem;
    padding:8px 8px;
  }

  .retrofit table.compat th:nth-child(1),
  .retrofit table.compat td:nth-child(1){ width:48%; }
  .retrofit table.compat th:nth-child(2),
  .retrofit table.compat td:nth-child(2){ width:26%; }
  .retrofit table.compat th:nth-child(3),
  .retrofit table.compat td:nth-child(3){ width:26%; }
}

/* =========================================================
   9) ✅ BOTTONI — FIX DEFINITIVO (site-wide)
   Obiettivo:
   - NON forzare tutti i .btn
   - Applicare colore testo corretto per varianti
   - iOS/Safari: forzare -webkit-text-fill-color
========================================================= */

/* Base bottoni: non sottolineare mai */
a.btn, button.btn,
a.btn-primary, button.btn-primary,
a.btn-secondary, button.btn-secondary,
a.btn-outline, button.btn-outline,
a.cta-button, button.cta-button{
  text-decoration:none !important;
}

/* PRIMARY / pieni (nero → testo bianco) */
a.btn-primary, button.btn-primary,
a.btn.primary, button.btn.primary,
a.cta-button, button.cta-button{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* ✅ CTA SECONDARY (sfondo bianco → testo nero) */
a.cta-button.secondary, button.cta-button.secondary{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* SECONDARY + OUTLINE (sfondo chiaro → testo nero)
   Supporta: .btn-secondary, .btn-outline, .btn secondary (legacy) */
a.btn-secondary, button.btn-secondary,
a.btn-outline, button.btn-outline,
a.btn.secondary, button.btn.secondary,
.btn.secondary{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* ✅ Safety: se qualcuno usa .btn-outline insieme a regole vecchie */
a.btn.btn-outline, button.btn.btn-outline{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* ✅ Safety: se qualcuno usa .btn-secondary insieme a .btn */
a.btn.btn-secondary, button.btn.btn-secondary{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}

/* ✅ Se qualcuno usa ancora solo .btn (senza varianti),
   NON forziamo il colore: lo decide la pagina (come Surfynex).
   Ma se serve un fallback, scommenta:
   a.btn, button.btn { color: inherit; -webkit-text-fill-color: inherit; }
*/

/* iOS Safari: immagini perfettamente centrate nelle card */
.app-card .imgwrap img,
.media-card .imgwrap img{
  display: block;
  margin: 0 auto;
}

/* Mobile: evita width:auto (Safari bug), usa width:100% */
@media (max-width: 768px){
  .app-card .imgwrap img,
  .media-card .imgwrap img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-position: center !important;
  }
}