/*
Theme Name: Cozzetto Media Company
Theme URI: https://www.cozzettomedia.it
Author: Cozzetto Media Company
Description: Replica su WordPress del sito istituzionale di Cozzetto Media Company. Riproduce struttura, testi e immagini del sito originale, con le pagine create automaticamente all'attivazione.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: Uso riservato
Text Domain: cmc
*/

:root{
  --rosso:#E31E28; --rosso-scuro:#B4161E; --nero:#111013; --nero-2:#1C1A1F;
  --bianco:#FFFFFF; --grigio:#F4F4F6; --grigio-2:#E4E4E8; --testo:#2A2A2E; --muto:#6E6E76;
  --oro:#C8A32A;
  --d:"Poppins","Segoe UI",system-ui,sans-serif;
  --b:"Poppins","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--b);color:var(--testo);background:var(--bianco);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--d);margin:0;line-height:1.15;font-weight:700;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* testata */
.top{position:sticky;top:0;z-index:70;background:var(--rosso)}
.top__in{max-width:1180px;margin:0 auto;padding:14px clamp(20px,5vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.top__logo img{height:38px;width:auto}
.top__logo{font-family:var(--d);color:#fff;text-decoration:none;font-size:22px;font-weight:300;letter-spacing:.02em;line-height:1}
.top__logo small{display:block;font-size:9px;letter-spacing:.3em;text-transform:lowercase;opacity:.85;margin-top:3px}
.nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;flex-wrap:wrap}
.nav li{list-style:none;margin:0;padding:0;display:block}
.nav a{color:#fff;text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;display:inline-block}
.nav a:hover,.nav a.on{border-bottom-color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
@media(max-width:900px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--rosso);flex-direction:column;align-items:flex-start;padding:14px clamp(20px,5vw,40px) 22px;gap:4px;display:none}
  .nav.open{display:flex}
  .nav li{width:100%}
  .nav a{width:100%;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.2)}
}

/* hero */
.hero{background:var(--rosso);color:#fff;padding-block:clamp(50px,8vw,110px) clamp(60px,9vw,120px);position:relative;overflow:hidden}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,5vw,60px);align-items:center}
@media(max-width:860px){.hero__in{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(38px,6.6vw,74px);font-weight:700;line-height:1.05}
.hero h1 em{font-style:italic;font-weight:700;display:block}
.hero__c{max-width:380px;margin-inline:auto}
.btn{display:inline-block;background:#fff;color:var(--rosso);text-decoration:none;font-weight:600;padding:14px 30px;border-radius:40px;margin-top:28px;font-size:15px}
.btn:hover{background:var(--nero);color:#fff}
.btn--rosso{background:var(--rosso);color:#fff}
.btn--rosso:hover{background:var(--nero)}

/* sezioni */
.sez{padding-block:clamp(50px,8vw,100px)}
.sez--scura{background:var(--nero);color:#fff}
.sez--grigia{background:var(--grigio)}
.prosa{max-width:70ch;display:flex;flex-direction:column;gap:1.1em}
.prosa p{font-size:17px}
h2.tit{font-size:clamp(28px,4.4vw,46px);margin-bottom:26px}
.claim{background:var(--nero);color:#fff;text-align:center;padding-block:clamp(40px,6vw,70px)}
.claim p{font-size:clamp(20px,3vw,32px);font-weight:600;max-width:20ch;margin-inline:auto;line-height:1.25}

/* about */
.about__q{font-size:clamp(24px,3.6vw,40px);font-weight:700;max-width:22ch}
.kw{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,40px);margin-top:30px}
.kw span{font-family:var(--d);font-weight:700;font-size:clamp(15px,2vw,21px);letter-spacing:.06em;color:var(--rosso)}
.sez--scura .kw span{color:var(--oro)}

/* apertura */
.apertura__img{margin-top:clamp(30px,5vw,54px)}
.apertura__img img{width:100%;border-radius:12px}

/* skills */
.skills{margin-top:30px;display:flex;flex-direction:column;gap:clamp(24px,4vw,44px)}
.skills__elenco{display:flex;flex-wrap:wrap;gap:14px clamp(18px,3.4vw,46px)}
.skills__elenco b{font-family:var(--d);font-size:clamp(15px,2vw,21px);font-style:italic;color:var(--oro);letter-spacing:.04em}
.skills__img img{width:100%}

/* testimonianze */
.testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:34px}
.testi .t{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:0 2px 20px -10px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px}
.sez--scura .testi .t{background:var(--nero-2)}
.testi .t h3{font-size:18px;color:var(--rosso)}
.sez--scura .testi .t h3{color:var(--oro)}
.testi .t p{font-size:15px;line-height:1.6}
.testi .t__volto img{width:68px;height:68px;border-radius:50%;object-fit:cover}
.testi .t cite{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--muto);margin-top:auto}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;text-align:center;margin-top:30px}
.numeri b{display:block;font-family:var(--d);font-size:clamp(40px,7vw,68px);font-weight:700;color:var(--rosso);line-height:1}
.sez--scura .numeri b{color:#fff}
.numeri span{font-size:15px;color:var(--muto)}
.sez--scura .numeri span{color:rgba(255,255,255,.75)}

/* sedi */
.sedi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:34px}
.sede{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.sede img{width:52px;height:auto}
.sede h3{font-size:22px;letter-spacing:.1em}
.sede p{font-size:15px;color:var(--muto)}
.sez--scura .sede p{color:rgba(255,255,255,.7)}

/* form */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px;margin-top:26px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid var(--grigio-2);border-radius:8px;font:inherit;font-size:15px;background:#fff;color:var(--testo)}
.form textarea{min-height:120px;resize:vertical}
.form .privacy{display:flex;gap:9px;align-items:flex-start;font-size:14px}
.form .privacy input{width:auto;margin-top:4px}
.form button{background:var(--rosso);color:#fff;border:0;border-radius:40px;padding:14px 38px;font:inherit;font-weight:600;cursor:pointer;justify-self:start}
.form button:hover{background:var(--nero)}
@media(max-width:620px){.form{grid-template-columns:minmax(0,1fr)}}
.nota{font-size:13px;color:var(--muto);margin-top:12px}

/* contatti */
.contatti{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;align-items:start}
.contatti a{color:var(--rosso);text-decoration:none;font-weight:600}

/* footer */
.foot{background:var(--nero);color:#fff;padding-block:50px 26px}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.foot h3{font-size:16px;margin-bottom:12px}
.foot p,.foot a{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;line-height:1.8}
.foot a:hover{color:#fff}
.foot__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;color:rgba(255,255,255,.55)}
.social{display:flex;gap:14px;margin-top:10px}
.social a{font-size:13px;letter-spacing:.04em}

/* accessibilità e stati */
.salta{position:absolute;left:-9999px;top:0;background:#fff;color:var(--rosso);padding:10px 16px;z-index:200;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.salta:focus{left:0}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito{border-radius:10px;padding:14px 18px;font-size:15px;font-weight:500;margin-bottom:20px;max-width:640px}
.esito--ok{background:#E9F7EC;color:#15612C;border:1px solid #BCE3C6}
.esito--no{background:#FDECEC;color:#8E1016;border:1px solid #F3C2C4}
.sez--scura .esito--ok,.sez--scura .esito--no{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}

/* testa di pagina */
.sez--testa{background:var(--rosso);color:#fff;padding-block:clamp(40px,6vw,76px) clamp(34px,5vw,58px)}
.sez--testa .tit{margin-bottom:0;font-size:clamp(32px,5.4vw,60px)}
.sez--testa .art__data{color:rgba(255,255,255,.8);font-size:14px;margin-top:12px}

/* home: occhiello, icone, slideshow */
.occhiello{font-family:var(--d);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:14px}
.sotto{font-size:clamp(17px,2.2vw,22px);font-weight:600;margin-top:18px;color:var(--oro)}
.icone{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;margin-top:40px;align-items:center}
.icone img{max-height:150px;width:auto;margin-inline:auto}
.slide{display:flex;flex-direction:column;gap:22px;margin-top:clamp(34px,5vw,56px)}
.slide img{width:100%}
.corsivo{font-style:italic;color:var(--muto)}
.sez--scura .corsivo{color:rgba(255,255,255,.72)}

/* moduli: i campi sono paragrafi */
.form p{margin:0}
.form p.full{grid-column:1/-1}

/* blog */
.lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:34px}
.art{display:flex;flex-direction:column;gap:10px}
.art__img img{border-radius:12px}
.art h2{font-size:22px}
.art h2 a{text-decoration:none}
.art h2 a:hover{color:var(--rosso)}
.art__data{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muto)}
.art__link{color:var(--rosso);font-weight:600;text-decoration:none;margin-top:auto}
.paginazione{margin-top:46px;display:flex;justify-content:center}
.paginazione .page-numbers{display:inline-block;padding:8px 14px;margin:0 3px;border:1px solid var(--grigio-2);border-radius:8px;text-decoration:none;font-size:15px}
.paginazione .page-numbers.current{background:var(--rosso);border-color:var(--rosso);color:#fff}

/* contenuto editoriale */
.entry{max-width:70ch;display:flex;flex-direction:column;gap:1.05em}
.entry h2{font-size:clamp(24px,3.4vw,34px);margin-top:.4em}
.entry h3{font-size:21px}
.entry ul{padding-left:1.2em;display:flex;flex-direction:column;gap:.4em}
blockquote{margin:0;font-size:clamp(20px,3vw,30px);font-weight:700;line-height:1.3;color:var(--rosso)}
.sez--scura blockquote{color:var(--oro)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}