/* DIFILL B — base: token, carattere, reset circoscritti.
   Le regole generiche valgono solo dentro .dfl (header, footer, home):
   il resto delle pagine di Astra e WooCommerce non viene toccato. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-300-600-wdth100-125.woff2") format("woff2");
  font-weight: 300 600; font-stretch: 100% 125%; font-style: normal; font-display: swap;
}

:root {
  --lavica: #211F1B;       /* fondo scuro: pietra lavica */
  --lavica-2: #1A1815;     /* footer */
  --piperno: #2C2924;      /* superfici scure */
  --piperno-2: #37332D;    /* hover superfici scure */
  --avorio: #F2EDE4;       /* lastre chiare, testo su scuro */
  --avorio-2: #E9E3D8;     /* lastra chiara alternativa */
  --pannello: #FAF8F4;     /* pannelli prodotto su lastra chiara */
  --bordo-chiaro: #D9D1C4;
  --antracite: #2B2825;    /* testo su chiaro */
  --testo-2: #AAA293;      /* testo secondario su scuro (6,5:1) */
  --grigio: #655F57;       /* testo secondario su chiaro */
  --oro: #AD9467;          /* Oro DIFILL: mai per testo su chiaro */
  --oro-chiaro: #CDBB97;   /* oro per testo su scuro */
  --oro-ink: #75623F;      /* oro per testo su chiaro */
  --giunto: rgba(173, 148, 103, .55);

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.4vw, 72px);
  --maxw: 1360px;
  --section: clamp(84px, 10vw, 152px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 72px;
}
@media (min-width: 1024px) { :root { --header-h: 88px; } }

/* ---------- reset circoscritto ---------- */
.dfl { font: 400 1.0625rem/1.62 var(--f); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: normal; }
/* Astra sul sito imposta text-transform: capitalize e letter-spacing su body e pulsanti */
.dfl :where(*) { text-transform: none; }
.dfl :where(button, input, select, textarea) { letter-spacing: normal; }
.dfl, .dfl *, .dfl *::before, .dfl *::after { box-sizing: border-box; }
.dfl :where(img, svg) { display: block; max-width: 100%; }
.dfl :where(img) { height: auto; }
.dfl :where(a) { color: inherit; }
.dfl :where(a):is(:hover, :focus) { color: inherit; }
.dfl :where(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; }
.dfl :where(h1, h2, h3, h4) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.dfl :where(ul, ol) { padding: 0; list-style: none; }
.dfl :where(li) { margin: 0; }
.dfl :where(button) {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 0; margin: 0; text-transform: none; letter-spacing: inherit; line-height: inherit;
}
.dfl :where(button):is(:hover, :focus) { background: none; color: inherit; box-shadow: none; }

/* home: la pagina intera e' pietra lavica */
body.dfl-home { margin: 0; background: var(--lavica); color: var(--avorio); }
html:has(body.dfl-home) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

/* pagine interne: spazio per l'header fisso */
body.dfl-inner { padding-top: var(--header-h); }

/* ---------- utilita' ---------- */
.dfl-wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.dfl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dfl-skip { position: fixed; left: 16px; top: -80px; z-index: 100000; background: var(--oro); color: var(--lavica); padding: 12px 18px; text-decoration: none; font: 500 1rem/1.2 var(--f); }
.dfl-skip:focus { top: 12px; color: var(--lavica); }
.dfl :focus-visible, .dfl-skip:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 3px; }
.dfl .dfl-slab-light :focus-visible, .dfl .dfl-door-light:focus-visible, .dfl .dfl-door-gold:focus-visible { outline-color: var(--antracite); }

/* tipografia */
.dfl-h2 {
  font-weight: 300; font-stretch: 125%;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -0.025em;
}
.dfl-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.dfl-head p { color: var(--testo-2); max-width: 32em; }
@media (min-width: 900px) { .dfl-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; } .dfl-head p { justify-self: end; } }

.dfl-link { text-decoration: none; border-bottom: 1px solid var(--giunto); padding-bottom: 2px; transition: border-color .4s var(--ease), color .4s var(--ease); }
.dfl-link:hover, .dfl-link:focus-visible { border-bottom-color: var(--oro-chiaro); color: var(--oro-chiaro); }

/* giunto in ottone: filetto che si "posa" quando la lastra entra in vista */
.dfl-joint { display: block; height: 1px; background: var(--oro); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.js .dfl-joint:not(.is-in) { transform: scaleX(0); }

/* ---------- apertura: lastra di pietra lavica con il titolo della pagina ----------
   Una sola regola per tutte le pagine interne: Chi siamo, Contatti, 404 (.dfl-opening),
   shop e categorie (lastra di Astra), pagine legali e di contenuto. */
.dfl-opening,
body.dfl-shop.archive #content section.ast-archive-description,
body.dfl-shop.search #content section.ast-archive-description,
body.dfl-page #content section.ast-archive-description,
body.dfl-page #content #primary .entry-header:has(> .entry-title),
body.dfl-page #content .entry-content > .container > header {
  position: relative;
  margin: 0 0 clamp(36px, 5vw, 64px);
  padding: clamp(48px, 7vw, 104px) 0 clamp(32px, 4vw, 48px);
  background: var(--lavica);
  color: var(--avorio);
  border: 0;
  text-align: left;
  /* sfondo a tutta larghezza senza allargare la pagina; la seconda ombra e' il giunto in ottone sotto la lastra */
  box-shadow: 0 0 0 100vmax var(--lavica), 0 1px 0 100vmax var(--oro);
  clip-path: inset(0 -100vmax -1px);
}
.dfl-opening { margin: 0; }
.dfl-opening-title,
body.dfl-shop #content section.ast-archive-description :is(.ast-archive-title, h1),
body.dfl-page #content section.ast-archive-description :is(.ast-archive-title, h1),
body.dfl-page #content #primary .entry-header > .entry-title,
body.dfl-page #content .entry-content > .container > header h1 {
  margin: 18px 0 0;
  color: var(--avorio);
  font-family: var(--f);
  font-weight: 300;
  font-stretch: 125%;
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
  text-wrap: balance;
}
.dfl-lead { color: #D6CFC2; max-width: 30em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.dfl-opening .dfl-lead { margin-top: 20px; }

/* briciole di pane delle pagine del tema (stesso aspetto di quelle di Astra nello shop) */
.dfl-crumbs { font-size: .875rem; color: var(--testo-2); }
.dfl-crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; }
.dfl-crumbs li + li::before { content: "\00bb"; margin: 0 .5em; color: var(--oro); }
.dfl-crumbs a { color: var(--testo-2); text-decoration: none; }
.dfl-crumbs a:hover { color: var(--oro-chiaro); }

/* pulsanti */
.dfl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dfl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px; text-decoration: none;
  font-weight: 500; font-stretch: 112%; font-size: .9375rem; letter-spacing: .01em;
  border: 1px solid transparent; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.dfl-btn-gold, .dfl-btn-gold:focus { background: var(--oro); color: var(--lavica); }
.dfl-btn-gold:hover { background: var(--oro-chiaro); color: var(--lavica); }
.dfl-btn-line, .dfl-btn-line:focus { border-color: rgba(242, 237, 228, .5); color: var(--avorio); }
.dfl-btn-line:hover { border-color: var(--oro-chiaro); color: var(--oro-chiaro); }

@media (prefers-reduced-motion: reduce) {
  html:has(body.dfl-home) { scroll-behavior: auto; }
  .dfl *, .dfl *::before, .dfl *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .dfl-joint { transform: none !important; }
}