/* LaPETtegola, design system C2 ("Collage giocoso", mockup approvato home-c2.html).
   Sorgente: design/css/site.css → tools/convert.py build lo copia in
   themes/lapettegola/assets/css/site.css (unico foglio esterno del tema, condiviso).
   Qui: font, token, base, bottoni, motivi (zampa), header, titoli di sezione, reveal, footer.
   Il CSS di ogni pagina sta in design/css/pages/<slug>.css (inline).
   Regole: un solo raggio (--r), arancio mai sotto testo bianco (su arancio il testo è --ink),
   motion solo transform/opacity, prefers-reduced-motion sempre rispettato. */

/* ---------------------------------------------------------------- font self-hosted */
/* 'Fredoka' 400 = Fredoka One (titoli), 500–700 = Fredoka variabile (UI). Percorsi relativi a assets/css/. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/FredokaOne-Regular.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/Fredoka-latin-variable.woff2') format('woff2')}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/ReadexPro-variable.woff2') format('woff2')}

/* ---------------------------------------------------------------- token */
:root{
  --orange:#F58C1E;          /* accento firma: superficie o accento, mai sotto testo bianco */
  --orange-tint:#FDE3C2;
  --orange-soft:#FFF1E0;
  --petrol:#1F434B;
  --teal:#1F434B;            /* alias statico del petrolio (footer) */
  --cyan:#1D8DA6;            /* testo bianco solo >= 24px (3,9:1, AA large) */
  --cyan-tint:#D5EDF2;
  --ink:#14292E;             /* testo su arancio: 6,2:1 */
  --cream:#FFF9F2;
  --white:#FFFFFF;
  --text:#24363A;
  --muted:#4A5C60;
  --r:24px;                  /* unico raggio */
  --fh:'Fredoka',sans-serif;
  --fm:'Fredoka',sans-serif;
  --fb:'Readex Pro',sans-serif;
  --gutter:20px;
  --max:1240px;
  --ease:cubic-bezier(.2,.8,.2,1.15);
  --paw:url('/wp-content/themes/lapettegola/assets/icons/paw.svg'); /* assoluto: la var si risolve anche nel CSS inline delle pagine */
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font-family:var(--fb);font-size:16px;line-height:1.65;color:var(--text);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;line-height:1.08}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}

/* ---------------------------------------------------------------- bottoni chunky */
.btn,.nav-cta,.nav-drawer-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;border-radius:var(--r);font-family:var(--fm);font-weight:600;font-size:18px;line-height:1.1;text-decoration:none;border:3px solid var(--ink);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s ease;box-shadow:0 5px 0 var(--ink)}
.btn:hover,.nav-cta:hover,.nav-drawer-cta:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.btn:active,.nav-cta:active,.nav-drawer-cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn--orange,.nav-cta,.nav-drawer-cta{background:var(--orange);color:var(--ink)}
.btn--petrol{background:var(--petrol);color:var(--white)}
.btn--white{background:var(--white);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--white);box-shadow:0 5px 0 rgba(255,255,255,.35)}
.btn--ghost:hover{box-shadow:0 8px 0 rgba(255,255,255,.35)}

/* ---------------------------------------------------------------- zampa: motivo grafico, con parsimonia */
.paw{display:block;width:36px;aspect-ratio:1;background:currentColor;-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;pointer-events:none}
.trail{position:absolute;display:flex;gap:10px;color:var(--cyan);opacity:.9}
.trail .paw{width:26px}
.trail .paw:nth-child(2){transform:translate(4px,-14px) rotate(18deg)}
.trail .paw:nth-child(3){transform:translate(10px,-30px) rotate(30deg)}
svg.icon.ico{display:block;width:48px;height:48px;fill:currentColor}

/* ---------------------------------------------------------------- header */
/* Il wrapper della parte header (wp-reset.css) è sticky; qui l'aspetto. */
.site-nav{background:rgba(255,249,242,.94);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:2px solid rgba(20,41,46,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:40px;width:auto}
.nav-links{display:none}
.nav-cta{display:none}
.nav-burger{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:var(--r);border:3px solid var(--ink);background:var(--orange);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.burger-lines{position:relative;width:22px;height:3px;background:currentColor;border-radius:3px;transition:background .2s}
.burger-lines::before,.burger-lines::after{content:"";position:absolute;left:0;width:22px;height:3px;background:currentColor;border-radius:3px;transition:transform .25s ease}
.burger-lines::before{transform:translateY(-7px)}
.burger-lines::after{transform:translateY(7px)}
.nav-open .burger-lines{background:transparent}
.nav-open .burger-lines::before{transform:rotate(45deg)}
.nav-open .burger-lines::after{transform:rotate(-45deg)}
.nav-drawer{position:absolute;left:0;right:0;top:100%;z-index:190;background:var(--cream);border-bottom:3px solid var(--ink);padding:8px var(--gutter) 24px;display:none;flex-direction:column;gap:4px}
.nav-open .nav-drawer{display:flex}
.nav-drawer a{display:flex;align-items:center;min-height:52px;font-family:var(--fm);font-weight:600;font-size:20px;text-decoration:none;color:var(--ink);border-bottom:2px dashed rgba(20,41,46,.12)}
.nav-drawer a.active{color:var(--petrol);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:6px}
.nav-drawer a.nav-drawer-cta{justify-content:center;margin-top:14px;border-bottom:3px solid var(--ink)}

/* ---------------------------------------------------------------- titoli di sezione */
.tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border-radius:var(--r);background:var(--petrol);color:var(--white);font-family:var(--fm);font-weight:600;font-size:14px;letter-spacing:.02em}
.h2{font-family:var(--fh);color:var(--petrol);font-size:clamp(34px,8vw,58px);line-height:1.04;margin-top:14px}
.lead{margin-top:14px;font-size:17px;color:var(--muted);max-width:56ch}
.sec{padding:72px 0}
.sec--flush{padding-top:0}

/* ---------------------------------------------------------------- reveal (visibile senza JS: gating su .js) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@keyframes stickIn{from{opacity:0;transform:translateY(34px) rotate(calc(var(--rot,0deg) - 10deg)) scale(.86)}to{opacity:1;transform:rotate(var(--rot,0deg))}}
@keyframes blobIn{from{opacity:0;transform:scale(.9) rotate(-10deg)}to{opacity:1}}

/* ---------------------------------------------------------------- footer: identico allo statico + 3 correzioni AA */
.site-footer{font-family:var(--fb);font-size:15px;line-height:1.6;color:#2E3031}
:where(.site-footer) *{margin:0;padding:0}
:where(.site-footer) a{color:inherit;text-decoration:none}
.site-footer{position:relative;background:var(--teal);padding:56px 5% 0;overflow:hidden}
.footer-inner{max-width:1280px;margin:0 auto;position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-bottom:48px;align-items:start}
.footer-logo-wrap{margin-bottom:14px}
.footer-logo-wrap img{height:52px;width:auto;filter:brightness(0) invert(1)}
.footer-tagline{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6;max-width:240px;margin-bottom:24px}
.footer-social-label{font-family:var(--fh);font-size:15px;color:var(--white);margin-bottom:10px}
.footer-social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.12);border-radius:10px;font-size:18px;transition:background .2s}
.footer-social-icon:hover{background:var(--orange)}
.footer-right{display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* AA 1/3: testo scuro sull'arancio (era bianco, 2,4:1) */
.footer-join-btn{background:var(--orange);color:#14292E;font-family:var(--fh);font-size:18px;padding:14px 36px;border-radius:100px;display:inline-block;margin-bottom:28px;transition:background .2s}
.footer-join-btn:hover{background:#d97b18}
.footer-bone{display:flex;align-items:center;gap:10px;margin-bottom:24px;width:100%}
.footer-bone::before,.footer-bone::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.2)}
.footer-bone-icon{font-size:20px;opacity:.6}
.footer-address{font-size:14px;color:rgba(255,255,255,.7);line-height:1.8;margin-bottom:18px}
.footer-links{display:flex;gap:20px;list-style:none}
/* AA 2/3: link alle policy (era bianco al 50%) */
.footer-links a{font-size:13px;color:rgba(255,255,255,.78);transition:color .2s}
.footer-links a:hover{color:var(--white)}
.footer-paw{position:absolute;font-size:32px;opacity:.12;pointer-events:none}
.fp1{top:20px;right:18%;transform:rotate(20deg)}
.fp2{top:60px;right:10%;transform:rotate(-15deg);font-size:20px;opacity:.08}
.fp3{bottom:80px;left:8%;transform:rotate(30deg);font-size:28px}
.fp4{bottom:30px;right:30%;transform:rotate(-10deg);font-size:18px;opacity:.09}
.footer-mascots{width:calc(100% + 10%);margin-left:-5%;line-height:0;margin-top:8px;position:relative;z-index:2}
.footer-mascots img{width:100%;height:auto;display:block}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center;position:relative;z-index:2}
/* AA 3/3: copyright (era bianco al 35%) */
.footer-bottom p{font-size:13px;color:rgba(255,255,255,.78)}
.site-footer :focus-visible{outline-color:var(--white)}
@media(max-width:768px){.footer-top{grid-template-columns:1fr;gap:36px}}

/* ---------------------------------------------------------------- >= 600 */
@media (min-width:600px){
  :root{--gutter:32px}
}

/* ---------------------------------------------------------------- >= 1024 */
@media (min-width:1024px){
  :root{--gutter:48px}
  .nav-inner{height:80px}
  .nav-logo img{height:46px}
  .nav-links{display:flex;gap:6px}
  .nav-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r);font-family:var(--fm);font-weight:600;font-size:17px;text-decoration:none;color:var(--ink);transition:background .2s}
  .nav-links a:hover,.nav-links a.active{background:var(--orange-tint)}
  .nav-cta{display:inline-flex;min-height:50px;padding:10px 24px;font-size:17px}
  .nav-burger,.nav-drawer{display:none !important}
  .sec{padding:110px 0}
  .sec--flush{padding-top:0}
}

/* ================================================================ componenti generici (Task 2)
   Usati da più pagine: CTA "Contattaci" (spostata qui da pages/index.css, regole identiche),
   hero delle pagine interne, briciole, note sfalsate, elenco a zampe, chip, tag arancio. */

/* ---------------------------------------------------------------- CTA "Contattaci" */
.cta{padding:72px 0 88px}
.cta-card{position:relative;background:var(--petrol);border-radius:var(--r);color:var(--white);padding:40px 24px 0;overflow:hidden;display:grid;gap:8px}
.cta-card h2{font-family:var(--fh);font-size:clamp(52px,14vw,92px);line-height:1;color:var(--white)}
.cta-wave{width:200px;height:auto;margin-top:6px}
.cta-card p{margin-top:12px;font-family:var(--fm);font-weight:500;font-size:21px;line-height:1.4;color:#EAF3F4}
.cta-btns{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.cta-btns .btn{width:100%}
.cta-dog{width:78%;max-width:360px;margin:20px auto -6px;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 -4px 0 #fff)}
.cta-card .trail{right:20px;top:24px;color:var(--orange)}
.cta-card :focus-visible{outline-color:var(--white)}
/* megafono delle CTA interne (nello statico accanto alla card): sticker che sborda in alto */
/* sotto i 1024 px il titolo "Contattaci" occupa quasi tutta la larghezza: il megafono sta in una fascia
   sua sopra il titolo (padding-top della card), mai sul testo (a11y.mjs, caso cta-mega) */
.cta-card:has(.cta-mega){padding-top:108px}
.cta-mega{position:absolute;right:18px;top:10px;width:80px;transform:rotate(14deg);filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff);pointer-events:none}
.cta-card:has(.cta-mega) .trail{display:none}

/* ---------------------------------------------------------------- hero delle pagine interne */
.page-hero{overflow-x:clip;padding:28px 0 64px}
.page-hero-grid{display:grid;gap:34px;align-items:center}
.page-hero-copy{position:relative}
.crumbs{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 14px;border-radius:var(--r);background:var(--orange-tint);color:var(--ink);font-family:var(--fm);font-weight:600;font-size:14px}
.crumbs a{display:inline-flex;align-items:center;min-height:30px;color:var(--petrol);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
.page-hero h1{margin-top:18px;font-family:var(--fh);color:var(--petrol);font-size:clamp(34px,8.6vw,44px);line-height:1.08;letter-spacing:-.01em;max-width:18ch}
.page-hero-copy .trail{position:relative;margin-top:26px;transform:rotate(-12deg)}
.page-hero-art{position:relative;padding:4% 3% 6%}
.page-hero-art>*{margin:0}
.page-hero-art .blob{position:absolute;border-radius:var(--r)}
.page-hero-art .blob--o{left:8%;right:-2%;top:12%;bottom:0;background:var(--orange);transform:rotate(3deg)}
.page-hero-art .blob--c{left:-2%;right:10%;top:16%;bottom:-2%;background:var(--cyan-tint);transform:rotate(-3deg)}
.banner-stk{position:relative;z-index:1;background:var(--white);padding:7px;border-radius:var(--r);box-shadow:6px 8px 0 rgba(20,41,46,.16);transform:rotate(-2deg)}
.banner-stk img{width:100%;aspect-ratio:1600/857;object-fit:cover;border-radius:calc(var(--r) - 7px)}
.js .banner-stk{--rot:-2deg;animation:stickIn .7s var(--ease) .1s both}
.js .page-hero-art .blob{animation:blobIn .6s ease both}

/* ---------------------------------------------------------------- note sfalsate (blocchi titolo + testo) */
.note{position:relative;border-radius:var(--r);padding:26px 24px;rotate:var(--tilt,0deg);transition:transform .3s var(--ease),rotate .3s var(--ease)}
.note:hover{rotate:0deg;transform:translateY(-3px)}
.note h3{font-family:var(--fm);font-weight:600;font-size:23px;line-height:1.2}
.note p{margin-top:10px;font-size:16px;line-height:1.7}
.note--orange{background:var(--orange);color:var(--ink)}
.note--white{background:var(--white);color:var(--text);border:3px solid var(--ink);box-shadow:6px 7px 0 var(--ink)}
.note--white h3{color:var(--petrol)}
.note--ctint{background:var(--cyan-tint);color:var(--text)}
.note--ctint h3{color:var(--petrol)}
.note--petrol{background:var(--petrol);color:#EAF3F4}
.note--petrol h3{color:var(--white)}

/* ---------------------------------------------------------------- elenco a zampe, chip, tag arancio */
.paw-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.paw-list li{position:relative;padding-left:34px;font-size:17px;line-height:1.55}
.paw-list li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;background:var(--orange);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;transform:rotate(-14deg)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r);background:var(--white);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-family:var(--fm);font-weight:600;font-size:16px;color:var(--ink)}
.chips li:nth-child(odd){transform:rotate(-2deg)}
.chips li:nth-child(even){transform:rotate(2deg)}
.tag--orange{background:var(--orange);color:var(--ink)}
/* pennarello: banda morbida sul ~45% basso della riga, bordi leggermente inclinati e irregolari
   (due gradienti sfalsati), nessun rettangolo pieno; il testo resta scuro. Su arancio: .pen--light. */
.pen strong{--pen:rgba(245,140,30,.45);padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(101deg,transparent 0 1.5%,var(--pen) 3% 96%,transparent 98.5%),linear-gradient(97deg,transparent 0 4%,var(--pen) 6% 99%,transparent 100%);background-repeat:no-repeat;background-size:100% 40%,100% 22%;background-position:0 86%,0 62%}
.pen--light strong{--pen:rgba(255,249,242,.82)}

@media (min-width:600px){
  .cta-btns{flex-direction:row;flex-wrap:wrap}
  .cta-btns .btn{width:auto}
}
@media (min-width:1024px){
  .cta{padding:110px 0 130px}
  .cta-card{grid-template-columns:1fr 1.1fr;align-items:center;padding:0 56px;min-height:440px;overflow:visible}
  .cta-body{padding:56px 0;grid-column:2;grid-row:1}
  .cta-dog{grid-column:1;grid-row:1;align-self:end;width:100%;max-width:460px;margin:-70px 0 0}
  .cta-card .trail{right:40px;top:40px}
  .cta-card:has(.cta-mega){padding-top:0}
  /* sopra l'angolo della card, più in alto del titolo (che parte a 56px + altezza riga) */
  .cta-mega{right:-26px;top:-92px;width:140px}

  .page-hero{padding:40px 0 72px}
  .page-hero-grid{grid-template-columns:.95fr 1.1fr;gap:56px;min-height:min(480px,calc(100svh - 220px))}
  .page-hero h1{font-size:clamp(46px,4.2vw,60px);max-width:15ch}
  .note{padding:30px 30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- FAQ: domande come sticker ad accordion (schede, home, servizi, chi siamo) */
.sk-faq{background:var(--orange-soft);overflow-x:clip}
.sk-faq-title{font-family:var(--fh);color:var(--petrol);font-size:clamp(32px,7.4vw,50px);line-height:1.06;max-width:20ch;margin-bottom:34px}
.sk-faq-list{display:grid;gap:18px;max-width:880px}
.sk-q{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 7px 0 var(--ink);rotate:var(--tilt,-.6deg);transition:rotate .3s var(--ease)}
.sk-q:nth-child(even){--tilt:.6deg}
.sk-q:nth-child(3n+2){background:var(--cyan-tint)}
.sk-q[open]{rotate:0deg}
.sk-q summary{display:flex;align-items:center;gap:16px;min-height:64px;padding:16px 20px;cursor:pointer;list-style:none;font-family:var(--fm);font-weight:600;font-size:18px;line-height:1.35;color:var(--petrol);border-radius:var(--r)}
.sk-q summary::-webkit-details-marker{display:none}
.sk-q summary:focus-visible{outline-offset:-6px}
.sk-q-icon{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:var(--r);background:var(--orange);border:3px solid var(--ink);transition:transform .3s var(--ease)}
.sk-q-icon::before,.sk-q-icon::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;margin:-1.5px 0 0 -8px;background:var(--ink)}
.sk-q-icon::after{transform:rotate(90deg)}
.sk-q[open] .sk-q-icon{transform:rotate(45deg)}
.sk-a{padding:0 22px 22px 76px;font-size:16px;line-height:1.75;color:var(--text)}