/* TiAggiustoTutto.it — public site styles (from provided template) */

/* ---- Archivo (weights 500–800 share the same subset files) ---- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- DM Mono ---- */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dmmono-400-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dmmono-400-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dmmono-500-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dmmono-500-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Public Sans (weights 400–600 share the same subset files) ---- */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/publicsans-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/publicsans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/publicsans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Globals (as provided) ---- */
body { margin: 0; background: #FBF9F5; color: #17181C; font-family: 'Public Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: oklch(0.62 0.17 45); text-decoration: none; }
a:hover { color: oklch(0.5 0.15 45); }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
#pvGrid > div { min-width: 0; }
input, textarea, button { max-width: 100%; }
::selection { background: oklch(0.85 0.13 85); }
@keyframes ttblink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

@media (max-width: 980px) {
  #top { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 48px !important; }
  #pvGrid { grid-template-columns: 1fr !important; }
  #footGrid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 1040px) {
  #hdrnav { display: none !important; }
  #hdrbar { justify-content: space-between !important; }
}
/* Blog/Lavori header: on small screens the logo and the orange CTA share the
   first row (as on the home page) and the nav links drop below the logo. */
@media (max-width: 900px) {
  #sitebar { flex-wrap: wrap; justify-content: space-between !important; gap: 12px !important; }
  #sitenav { order: 3; flex-basis: 100%; margin-left: 0 !important; gap: 20px !important; font-size: 14px !important; }
}
/* Narrow phones: compact lockup so logo + CTA fit on one row (home and inner pages). */
@media (max-width: 480px) {
  #hdrbar, #sitebar { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; }
  #hdrbar > a:first-child, #sitebar > a:first-child { gap: 9px !important; }
  .hdr-payoff { display: none !important; }
  .hdr-word { font-size: 16px !important; }
  .hdr-cta { padding: 10px 14px !important; font-size: 13px !important; }
}
@media (max-width: 620px) {
  #hdrphone { display: none !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
  #hdrbar, #sitebar, #footGrid, #footBar, #topbar { padding-left: 18px !important; padding-right: 18px !important; }
  #topbar { gap: 6px !important; }
  h2 { font-size: clamp(28px, 7vw, 44px) !important; }
  #preventivo > div > div { padding: 26px 20px !important; }
  #pvNameRow, #pvAddrRow { grid-template-columns: 1fr !important; }
  #chat > div { padding-left: 18px !important; padding-right: 18px !important; }
  #wa-fab { right: 14px !important; bottom: 14px !important; padding: 13px 18px !important; }
}

/* hidden attribute must win over inline display:flex */
[hidden] { display: none !important; }

/* ---- Hover/focus behaviors (replacing template style-hover / style-focus) ---- */
.h-border-dark:hover { border-color: #17181C !important; }
.h-bg-accent-dark:hover { background: oklch(0.64 0.19 50) !important; }
.h-bg-accent-light:hover { background: oklch(0.78 0.17 55) !important; }
.h-bg-ink-soft:hover { background: oklch(0.35 0.02 265) !important; }
.h-card { transition: all .15s; }
.h-card:hover { border-color: oklch(0.72 0.19 50) !important; transform: translateY(-3px); }
.h-bg-wa:hover { background: oklch(0.89 0.11 150) !important; }
.h-bg-wa-fab:hover { background: oklch(0.55 0.15 150) !important; }
.h-bg-white10:hover { background: rgba(251, 249, 245, 0.1) !important; }
.f-accent:focus { border-color: oklch(0.72 0.19 50) !important; }

/* ---- Form widgets (selectable chips, matching provided chip styles) ---- */
.pv-chip {
  padding: 9px 14px; border-radius: 99px; cursor: pointer;
  font-family: 'Public Sans', sans-serif; font-size: 13.5px; font-weight: 500;
  transition: all .15s;
  border: 1.5px solid rgba(251, 249, 245, 0.22); background: transparent; color: #FBF9F5;
}
.pv-chip.on { border-color: oklch(0.72 0.19 50); background: oklch(0.72 0.19 50); color: #fff; }
.pv-error { font-size: 12.5px; color: oklch(0.75 0.16 25); }

/* Service dropdown in the dark quote panel (same look as the text inputs) */
.pv-select {
  padding: 13px 14px; border-radius: 10px;
  border: 1.5px solid rgba(251, 249, 245, 0.18); background: rgba(251, 249, 245, 0.06);
  color: #FBF9F5; font-family: 'Public Sans', sans-serif; font-size: 15px; outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FBF9F5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.pv-select option { background: #17181C; color: #FBF9F5; }

/* ---- Works marquee (continuous auto-scroll) + lightbox ---- */
.work-marquee { width: 100%; overflow: hidden; }
.work-marquee-track {
  display: flex; width: max-content;
  animation-name: work-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.work-marquee:hover .work-marquee-track { animation-play-state: paused; }
@keyframes work-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.work-item {
  flex: 0 0 auto; padding: 0; margin-right: 14px; border: none; background: none; cursor: zoom-in;
  border-radius: 14px; overflow: hidden; line-height: 0;
}
.work-item img { height: 240px; width: auto; display: block; transition: transform .25s; }
.work-item:hover img { transform: scale(1.04); }
@media (max-width: 620px) {
  .work-item img { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-marquee { overflow-x: auto; }
  .work-marquee-track { animation: none; }
}

.work-lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(23, 24, 28, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; cursor: zoom-out;
}
.work-lightbox[hidden] { display: none; }
.work-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.work-lightbox-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 99px;
  border: 1.5px solid rgba(251, 249, 245, 0.35); background: rgba(23, 24, 28, 0.6); color: #FBF9F5;
  font-size: 18px; cursor: pointer;
}
.work-lightbox-close:hover { background: rgba(251, 249, 245, 0.15); }
.work-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  display: grid; place-items: center; border-radius: 99px;
  border: 1.5px solid rgba(251, 249, 245, 0.35); background: rgba(23, 24, 28, 0.6); color: #FBF9F5;
  cursor: pointer; z-index: 1;
}
.work-lightbox-nav:hover { background: rgba(251, 249, 245, 0.15); }
.work-lightbox-prev { left: 18px; }
.work-lightbox-next { right: 18px; }
@media (max-width: 620px) {
  .work-lightbox-nav { width: 42px; height: 42px; }
  .work-lightbox-prev { left: 8px; }
  .work-lightbox-next { right: 8px; }
}

/* ---- Reviews slider ---- */
.rev-track { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; }
.rev-track::-webkit-scrollbar { display: none; }
@media (max-width: 620px) {
  .rev-card { flex: 0 0 86% !important; }
}

/* ---- Web chat: internal scroll on desktop ----
   min-height:0 stops the message list from forcing the widget (a flex item
   defaults to min-height:auto) to grow with its content: #chat stretches to
   the adjacent form's height (grid align-items:stretch), never beyond, and
   keeps its own 560px floor when the form shrinks after submit. */
@media (min-width: 981px) {
  #chatScroll { min-height: 0; }
}

/* ---- Home: box "Blog" e "Lavori" sotto lo slider ---- */
.feed-thumb span:first-child { transition: border-color .15s; }
.feed-thumb img { transition: transform .25s; }
.feed-thumb:hover span:first-child { border-color: oklch(0.72 0.19 50) !important; }
.feed-thumb:hover img { transform: scale(1.06); }
.feed-thumb-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  #homeFeeds { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  #homeFeeds > div { padding: 26px 20px !important; }
  #homeFeeds h2 { font-size: 24px !important; }
}