/* ═══ PAGINE INTERNE — casaautosufficiente.it
   base.css (token, nav, bottoni, faq, footer) lo estrae build.py dalla home v5:
   qui ci sono solo i pezzi delle pagine interne, prefisso p-.
   Regola: niente colori nuovi, solo i token di :root. ═══ */

/* ── la nav sulle pagine interne è sempre piena ── */
.p-page{padding-top:var(--x-nav-h)}

/* ── testata: briciole, titolo, risposta breve ── */
.p-head{background:var(--paper); padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,64px); border-bottom:1px solid var(--line)}
.p-crumbs{font-size:.88rem; color:var(--ink-2); margin-bottom:22px}
.p-crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px}
.p-crumbs li+li::before{content:"/"; margin-right:8px; color:var(--line-ctl)}
.p-crumbs a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.p-crumbs a:hover{color:var(--ink); border-bottom-color:var(--acc)}
.p-h1{font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.06; letter-spacing:-.028em; max-width:24ch}
.p-lead{margin-top:20px; font-size:clamp(1.08rem,1.6vw,1.22rem); line-height:1.6; color:var(--ink-2); max-width:62ch}
.p-head-ctas{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:28px}
.p-link{color:var(--acc-ink); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor}
.p-link:hover{color:var(--acc-h)}

/* ── il corpo: colonna di lettura, gli elementi larghi escono ── */
.p-main{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,104px)}
.p-body{max-width:760px; margin:0 auto}
.p-body > * + *{margin-top:18px}
.p-body h2{font-size:clamp(1.45rem,2.6vw,1.95rem); line-height:1.15; letter-spacing:-.022em; margin-top:clamp(48px,6vw,68px)}
.p-body h3{font-size:1.18rem; line-height:1.3; margin-top:32px}
.p-body h2 + *, .p-body h3 + *{margin-top:12px}
.p-body p, .p-body li{font-size:1.06rem; line-height:1.68; color:var(--ink)}
.p-body ul, .p-body ol{padding-left:22px; margin-bottom:0}
.p-body li + li{margin-top:8px}
.p-body li::marker{color:var(--acc-ink)}
.p-body a:not(.x-btn):not(.p-card){color:var(--acc-ink); text-underline-offset:3px}
.p-body strong, .p-body b{font-weight:650}
.p-body figure{margin:32px 0 0}
.p-body figure img{width:100%; height:auto; border-radius:var(--x-r-lg); background:var(--paper-2)}
.p-body figcaption{margin-top:10px; font-size:.9rem; color:var(--ink-2)}
.p-wide{width:min(1080px, 100vw - 48px); margin-left:50%; transform:translateX(-50%)}

/* ── «In breve»: la risposta citabile, sempre in cima al corpo ── */
.p-answer{border:1px solid var(--good-line); background:var(--good-bg); padding:18px 22px; border-radius:var(--x-r-lg)}
.p-answer p{font-size:1.1rem; line-height:1.6; color:var(--good-ink)}
.p-answer p + p{margin-top:8px}

/* ── numeri chiave ── */
.p-numbers{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:32px!important}
.p-numbers > div{border-top:2px solid var(--line-2); padding-top:16px; display:flex; flex-direction:column; gap:4px}
.p-numbers > div:first-child{border-top-color:var(--acc)}
.p-numbers b{font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.p-numbers span{font-size:.95rem; color:var(--ink-2); line-height:1.45}

/* ── tabelle ── */
.p-table{overflow-x:auto; border:1px solid var(--line); border-radius:var(--x-r-lg)}
.p-table table{width:100%; border-collapse:collapse; font-size:.97rem; min-width:520px}
.p-table th, .p-table td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line); line-height:1.5}
.p-table tr:last-child td{border-bottom:0}
.p-table th{background:var(--paper); font-weight:600; color:var(--ink-2); font-size:.9rem}
.p-table td.p-n, .p-table th.p-n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── riquadri ── */
.p-note{border:1px solid var(--line); background:var(--white); border-radius:var(--x-r-lg); padding:18px 22px}
.p-note--warn{border-color:var(--warn-line); background:var(--warn-bg)}
.p-note--warn p, .p-note--warn li{color:var(--warn-ink)}
.p-note p + p{margin-top:8px}

/* ── esempio rappresentativo art. 123 TUB (lo genera build.py) ── */
.p-example{border:1px solid var(--line-2); border-radius:var(--x-r-lg); padding:20px 22px; background:var(--paper)}
.p-example-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px}
.p-example-lbl{font-size:.95rem; color:var(--ink-2); font-weight:600}
.p-example-rata{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.p-example-rata small{font-size:.95rem; font-weight:500; color:var(--ink-2); letter-spacing:0}
.p-example-det{margin-top:6px!important; font-size:.97rem!important; color:var(--acc-ink)!important}
.p-example-legal{margin-top:12px!important; font-size:.84rem!important; line-height:1.55!important; color:var(--ink-2)!important}

/* ── schede-collegamento ── */
.p-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:28px!important}
.p-card{display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid var(--line); border-radius:var(--x-r-lg);
  background:var(--white); text-decoration:none; color:var(--ink); transition:border-color .15s, box-shadow .15s, transform .15s}
.p-card:hover{border-color:var(--acc-edge); box-shadow:0 10px 28px -18px rgba(var(--sh),.45); transform:translateY(-1px)}
.p-card h3{font-size:1.08rem; margin:0!important}
.p-card p{font-size:.97rem!important; color:var(--ink-2)!important; line-height:1.55!important; margin:0!important}
.p-card::after{content:"→"; color:var(--acc-ink); font-weight:700; margin-top:auto}

/* ── bottoni dentro il testo ── */
.p-ctas{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:28px!important}

/* ── FAQ nelle pagine interne: stesse classi della home ── */
.p-body .x-faq{margin-top:20px}
.p-body .x-faq-item p{font-size:1.02rem}

/* ── chi firma e quando ── */
.p-meta{margin-top:clamp(48px,6vw,64px)!important; padding-top:20px; border-top:1px solid var(--line); font-size:.9rem!important; color:var(--ink-2)!important}
.p-src{font-size:.9rem!important}
.p-src li{font-size:.9rem!important; color:var(--ink-2)!important}

/* ── fascia finale: WhatsApp ── */
.p-cta{background:var(--navy); color:#fff; padding:clamp(48px,6vw,72px) 0}
.p-cta-in{display:flex; justify-content:space-between; align-items:center; gap:24px 48px; flex-wrap:wrap}
.p-cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.12; letter-spacing:-.022em; max-width:24ch}
.p-cta p{color:var(--on-dark-2); margin-top:10px; max-width:52ch}
.p-cta-btns{display:flex; flex-wrap:wrap; gap:12px}

/* ── footer: mappa del sito ── */
.x-footer-map{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px}
.x-footer-h{color:#fff; font-weight:600; font-size:.95rem; margin-bottom:10px}
.x-footer-map ul{list-style:none; margin:0; padding:0}
.x-footer-map li + li{margin-top:8px}
.x-footer-map a{color:var(--on-dark-2); text-decoration:none; font-size:.93rem}
.x-footer-map a:hover{color:#fff}

/* ── 404 ── */
.p-404{min-height:50vh}

@media (max-width:700px){
  .x-footer-map{grid-template-columns:1fr 1fr}
  .p-cta-in{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  .p-table table{min-width:0; font-size:.9rem}
  .p-table th, .p-table td{padding:10px}
}
@media (max-width:460px){
  .x-footer-map{grid-template-columns:1fr}
  .p-wide{width:calc(100vw - 32px)}
}

/* ── bottone secondario su fondo chiaro (testata: WhatsApp accanto a «Calcola la tua rata») ── */
.x-btn--line{background:transparent; color:var(--acc-ink); border-color:currentColor; box-shadow:none}
.x-btn--line:hover{background:var(--acc); color:#fff; border-color:var(--acc)}