/*

Theme Name: SNARP

Theme URI: https://www.snarp.com

Author: Webmaster SNARP

Description: Tema istituzionale per SNARP – Sindacato Nazionale Antiusura Riabilitazione Protestati. Colori e logo del sindacato (rosso, nero, bianco), responsive, accessibile, senza font esterni, con opzioni nel Personalizza.

Version: 1.0.0

Requires at least: 5.8

Tested up to: 6.6

Requires PHP: 7.4

License: GNU General Public License v2 or later

Text Domain: snarp

*/



:root{

  --ink:#111111; --ink-2:#2B2B2B; --red:#B80303; --red-dk:#8E0000; --red-lt:#FF7266;

  --mist:#F4F4F4; --line:#DCDCDC; --text:#1E1E1E; --muted:#555555; --white:#fff;

  --serif:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1160px; --read:760px;

}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{margin:0;font:1rem/1.65 var(--sans);color:var(--text);background:var(--white)}

img{max-width:100%;height:auto}

a{color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}

a:hover{color:var(--red)}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.15;margin:0 0 .6em}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

.screen-reader-text,.skip-link{position:absolute;left:-9999px}

.skip-link:focus{left:1rem;top:1rem;z-index:100;background:var(--white);padding:.6rem 1rem;color:var(--ink)}



/* Top bar */

.topbar{background:var(--ink);color:#D0D0D0;font-size:.875rem}

.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem;flex-wrap:wrap}

.topbar a{color:#fff;text-decoration:none}

.topbar a:hover{color:var(--red-lt)}

.topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}

.topbar .social a{font-size:.8125rem;text-decoration:underline}



/* Header */

.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}

.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}

.brand img,.brand svg,.custom-logo{display:block;height:74px;width:auto}

.nav-toggle{display:none;background:none;border:1px solid var(--line);padding:.55rem .8rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}

.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem;align-items:center}

.main-nav li{position:relative}

.main-nav a{display:block;padding:.6rem .85rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:2px solid transparent}

.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current-menu-ancestor>a{border-bottom-color:var(--red);color:var(--ink)}

.main-nav .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:.4em;border:4px solid transparent;border-top-color:currentColor;transform:translateY(3px)}

.main-nav ul ul{position:absolute;left:0;top:100%;min-width:230px;display:none;flex-direction:column;align-items:stretch;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--red);padding:.4rem 0;box-shadow:0 12px 24px -12px rgba(20,35,59,.35)}

.main-nav li:hover>ul,.main-nav li:focus-within>ul{display:flex}

.main-nav ul ul a{font-weight:500;border:0;padding:.55rem 1rem}

.main-nav ul ul a:hover{background:var(--mist)}



/* Buttons */

.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:.85rem 1.6rem;text-decoration:none;border:2px solid var(--red);border-radius:2px;transition:background .15s,color .15s}

.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.btn--dark{background:var(--ink);border-color:var(--ink)}

.btn--dark:hover{background:#fff;color:var(--red);border-color:#fff}

.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}

.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.on-dark .btn:hover{background:#fff;color:var(--red);border-color:#fff}



/* Hero */

.hero{background:var(--red);color:#fff;position:relative;overflow:hidden;padding:5rem 0 5.5rem}

.hero::before{content:"";position:absolute;right:6%;top:50%;width:min(44vw,500px);aspect-ratio:1;transform:translateY(-50%);background:url("assets/motif.svg") center/contain no-repeat;pointer-events:none}

.hero .wrap{position:relative}

.hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);max-width:19ch;margin-bottom:.5em}

.hero p{font-size:1.2rem;max-width:34em;color:#fff;margin:0 0 2rem}

.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}



/* Info strip */

.infobar{position:relative;z-index:2;margin-top:-3.2rem}

.infobar .wrap{background:var(--white);display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(20,35,59,.5)}

.infobar div{padding:1.4rem 1.6rem}

.infobar div+div{border-left:1px solid var(--line)}

.infobar h2{font-size:.95rem;margin:0 0 .3rem;color:var(--red)}

.infobar p{margin:0;font-size:1.05rem;color:var(--ink);font-weight:600}

.infobar small{display:block;font-weight:400;color:var(--muted)}



/* Sections */

.section{padding:5rem 0}

.section--mist{background:var(--mist)}

.section-head{max-width:640px;margin-bottom:2.6rem}

.section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.35em}

.section-head p{margin:0;color:var(--muted);font-size:1.1rem}



.services{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}

.service{border-top:4px solid var(--red);padding-top:1.4rem}

.service svg{width:38px;height:38px;color:var(--ink);margin-bottom:.8rem}

.service h3{font-size:1.4rem;margin-bottom:.3em}

.service p{margin:0 0 1rem;color:var(--muted)}

.service a{font-weight:700}



.member{display:grid;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:center}

.member h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}

.member ul{padding:0;list-style:none;margin:1.4rem 0 2rem}

.member li{padding:.7rem 0 .7rem 2rem;border-bottom:1px solid var(--line);position:relative}

.member li::before{content:"";position:absolute;left:.2rem;top:1.15rem;width:.9rem;height:.5rem;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}

.president{margin:0;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--ink)}

.president img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}

.president figcaption{padding:1.4rem 1.6rem}

.president strong{font-family:var(--serif);font-size:1.35rem;color:var(--ink);display:block}

.president span{color:var(--red);font-weight:600;display:block;margin:.1rem 0 .6rem}

.president p{margin:0;color:var(--muted);font-size:.95rem}



.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}

.post-item{display:flex;flex-direction:column}

.post-item img{aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:1rem;background:var(--mist)}

.post-item time,.entry-meta{font-size:.875rem;color:var(--red);font-weight:600}

.post-item h3{font-size:1.25rem;margin:.3rem 0 .5rem}

.post-item h3 a{text-decoration:none;color:var(--ink)}

.post-item h3 a:hover{color:var(--red);text-decoration:underline}

.post-item p{margin:0;color:var(--muted)}



.cta{background:var(--ink);color:#fff;padding:4.2rem 0}

.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap}

.cta h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);max-width:30ch;margin:0 0 .4em}

.cta p{margin:0;color:#D0D0D0;max-width:46em}



/* Inner pages */

.page-head{background:var(--ink);color:#fff;padding:3.2rem 0;border-bottom:5px solid var(--red)}

.page-head h1{color:#fff;margin:0;font-size:clamp(1.8rem,4vw,2.8rem)}

.page-head .entry-meta{color:var(--red-lt);margin-bottom:.4rem}

.content-area{padding:3.5rem 0 5rem}

.entry-content{max-width:var(--read);margin-inline:auto;font-family:var(--sans);font-size:1.0625rem;line-height:1.75}

.entry-content.is-wide{max-width:var(--wrap)}

.entry-content h2{font-size:1.7rem;margin-top:2em}

.entry-content h3{font-size:1.3rem;margin-top:1.6em}

.entry-content a{color:var(--ink-2);font-weight:600}

.entry-content table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.95rem;display:block;overflow-x:auto}

.entry-content th,.entry-content td{border:1px solid var(--line);padding:.55rem .75rem;text-align:left}

.entry-content th{background:var(--mist)}

.entry-content blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:4px solid var(--red);color:var(--muted)}

.entry-content figure{margin:1.6rem 0}

.entry-content .wp-block-file{font-family:var(--sans)}

.list{max-width:var(--read);margin-inline:auto}

.list article{padding:1.6rem 0;border-bottom:1px solid var(--line)}

.list h2{font-size:1.5rem;margin:.2rem 0 .4rem}

.list h2 a{color:var(--ink);text-decoration:none}

.list h2 a:hover{color:var(--red);text-decoration:underline}

.pagination{max-width:var(--read);margin:2.5rem auto 0}

.pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap}

.pagination .page-numbers{padding:.5rem .9rem;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600}

.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

.search-form{display:flex;gap:.5rem}

.search-form input[type=search]{flex:1;min-width:0;padding:.65rem .8rem;border:1px solid var(--line);font:inherit}

.search-form button{background:var(--ink);color:#fff;border:0;padding:.65rem 1.1rem;font:inherit;font-weight:700;cursor:pointer}

.search-form button:hover{background:var(--red);color:#fff}



/* Footer */

.site-footer{background:#0D0D0D;color:#C4C4C4;font-size:.95rem}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding:4rem 0 3rem}

.site-footer h2{font-size:1.05rem;color:#fff;margin-bottom:.8rem}

.site-footer a{color:#fff}

.site-footer a:hover{color:var(--red-lt)}

.site-footer address{font-style:normal;line-height:1.8}

.site-footer ul{list-style:none;margin:0;padding:0;line-height:2}

.footer-logo{height:96px;width:auto;margin-bottom:1rem;display:block;background:#fff;padding:.6rem .8rem}

.site-footer .search-form button{background:var(--red);color:#fff}

.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:1.2rem 0;font-size:.875rem}

.footer-bottom .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}



/* Responsive */

@media (max-width:960px){

  .services,.posts{grid-template-columns:1fr 1fr}

  .member{grid-template-columns:1fr;gap:2.5rem}

  .footer-grid{grid-template-columns:1fr 1fr}

  .hero::before{opacity:.35;right:-12%}

}

@media (max-width:820px){

  .nav-toggle{display:block}

  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1rem;max-height:75vh;overflow:auto}

  .main-nav.is-open{display:block}

  .main-nav ul{flex-direction:column;align-items:stretch}

  .main-nav ul ul{position:static;display:flex;box-shadow:none;border:0;border-left:3px solid var(--red);margin-left:.6rem;padding:0}

  .main-nav .menu-item-has-children>a::after{display:none}

  .infobar .wrap{grid-template-columns:1fr}

  .infobar div+div{border-left:0;border-top:1px solid var(--line)}

  .hero{padding:3.5rem 0 6rem}

  .section{padding:3.5rem 0}

}

@media (max-width:600px){

  .services,.posts,.footer-grid{grid-template-columns:1fr}

  .brand img,.brand svg,.custom-logo{height:58px}

  .topbar .social{display:none}

}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}



/* ---- SNARP: sezioni home ---- */

.needs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}

.needs a{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.1rem .4rem 1.1rem 1.1rem;border-bottom:1px solid var(--line);border-left:5px solid transparent;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.15rem}

.needs a::after{content:"";flex:none;width:.7rem;height:.7rem;border-top:3px solid var(--red);border-right:3px solid var(--red);transform:rotate(45deg)}

.needs a:hover,.needs a:focus-visible{border-left-color:var(--red);background:var(--mist);color:var(--red)}

.intro-split{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}

.intro-split .note{color:var(--muted);margin-top:1.4rem;padding-left:1.1rem;border-left:4px solid var(--ink)}

.services-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}

.services-2 article{padding:1.6rem 0;border-top:3px solid var(--ink)}

.services-2 h3{font-size:1.3rem;margin-bottom:.35em}

.services-2 p{margin:0;color:var(--muted)}

.more{margin-top:2.2rem}

.news-split{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem}

.news-list{list-style:none;margin:0;padding:0}

.news-list li{padding:1.1rem 0;border-bottom:1px solid var(--line)}

.news-list time{display:block;font-size:.875rem;font-weight:700;color:var(--red)}

.news-list a{color:var(--ink);font-weight:700;font-size:1.1rem;text-decoration:none;line-height:1.35}

.news-list a:hover{color:var(--red);text-decoration:underline}

.news-list p{margin:.3rem 0 0;color:var(--muted);font-size:.95rem}

.docs h3,.news-split h3{font-size:1.4rem}

.docs ul{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}

.docs li a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none;color:var(--ink)}

.docs li a:hover{color:var(--red)}

.laws{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}

.laws li{display:grid;grid-template-columns:150px 1fr;gap:2rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}

.laws .yr{font-family:var(--serif);font-weight:800;font-size:2.4rem;line-height:1;color:var(--red)}

.laws strong{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:.25rem}

.laws p{margin:0;color:var(--muted)}

.join{background:var(--ink);color:#fff;padding:4.5rem 0;border-top:6px solid var(--red)}

.join .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center}

.join h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem)}

.join p{color:#D8D8D8;margin:0;max-width:40em}

.join .fee{border:2px solid #fff;padding:1.6rem 1.8rem}

.join .fee b{display:block;font-size:2.6rem;line-height:1;font-family:var(--serif);font-weight:800}

.join .fee span{display:block;color:#D8D8D8;margin:.35rem 0 1.2rem}

.join .fee .btn{width:100%;text-align:center}

@media (max-width:960px){

  .intro-split,.news-split,.join .wrap{grid-template-columns:1fr;gap:2.5rem}

}

@media (max-width:600px){

  .services-2{grid-template-columns:1fr}

  .laws li{grid-template-columns:1fr;gap:.4rem}

  .hero::before{opacity:.25;right:-25%}

}



.brand--footer{display:inline-block;background:#fff;padding:.8rem 1rem;margin-bottom:1.2rem}

.brand--footer img{height:92px}