/* ==========================================================================
   Happy — Società Cooperativa Sociale ONLUS
   Foglio di stile unico. Mobile-first.
   ========================================================================== */

/* --- font self-hosted ------------------------------------------------- */
@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/sora-600.woff2") format("woff2");
}
@font-face{
  font-family:"Sora";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/sora-700.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/manrope-400.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/manrope-500.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/manrope-600.woff2") format("woff2");
}

/* --- design tokens ------------------------------------------------------ */
:root{
  --ink:        #1F1A16;
  --brand-900:  #0B5D57;
  --brand-700:  #12857C;
  --brand-100:  #E3F3F1;
  --accent-800: #A8430A;
  --accent-100: #FCE7D8;
  --paper:      #FFFFFF;
  --paper-alt:  #FFF8F1;
  --border:     #ECDCC9;
  --muted:      #6E6154;

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-text: "Manrope", -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.5rem;
  --step-3:  1.9rem;
  --step-4:  2.375rem;
  --step-5:  3rem;

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 4.5rem;
  --sp-8: 5.5rem;

  --content-max: 72rem;
  --focus: 3px solid var(--accent-800);
}

@media (min-width: 60rem){
  :root{
    --step-1: 1.333rem;
    --step-2: 1.777rem;
    --step-3: 2.369rem;
    --step-4: 3.157rem;
    --step-5: 4.209rem;
  }
}

/* --- reset ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{ margin: 0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
.site-nav ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 0 var(--sp-3); }

/* --- base -------------------------------------------------------------- */
body{
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-5); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ max-width: 68ch; }
a{ color: var(--accent-800); text-decoration-thickness: 1.5px; }
a:hover{ color: #7C3308; }
small,.muted{ color: var(--muted); font-size: var(--step--1); }

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

h2[id],h3[id]{ scroll-margin-top: 5.5rem; }

.wrap{ max-width: var(--content-max); margin: 0 auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
@media (min-width: 40rem){ .wrap{ padding-left: var(--sp-5); padding-right: var(--sp-5); } }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--ink); color:#fff; padding: var(--sp-2) var(--sp-3);
  z-index: 100; font-weight:600;
}
.skip-link:focus{ left: var(--sp-2); top: var(--sp-2); }

/* --- header / nav -------------------------------------------------- */
.site-header{
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; background: var(--paper); z-index: 50;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.logo{ display:flex; align-items:center; gap: var(--sp-2); text-decoration:none; color: var(--ink); }
.logo-mark{ height:36px; width:36px; flex-shrink:0; }
.logo-word{ font-family: var(--font-display); font-weight:700; font-size: var(--step-1); letter-spacing:-0.02em; }
.logo-sub{ display:block; font-size:0.65rem; color: var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:1px; }

.nav-toggle{
  display:inline-flex; align-items:center; gap: var(--sp-1);
  background:none; border: 2px solid var(--ink); padding: 0.5em 0.8em;
  font-family: var(--font-text); font-weight:600; font-size: var(--step--1);
  cursor:pointer; color: var(--ink);
}
.nav-toggle[aria-expanded="true"]{ background: var(--ink); color:#fff; }

.site-nav{ display:none; }
.site-nav.is-open{ display:block; }
.site-nav ul{ display:flex; flex-direction:column; }
.site-nav a{
  display:block; padding: var(--sp-2) 0; color: var(--ink); text-decoration:none;
  font-weight:600; text-transform:uppercase; font-size: var(--step--1); letter-spacing:0.04em;
  border-bottom:1px solid var(--border);
}
.site-nav a[aria-current="page"]{ color: var(--accent-800); }

@media (min-width: 56rem){
  .nav-toggle{ display:none; }
  .site-nav{ display:block; }
  .site-nav ul{ flex-direction:row; gap: var(--sp-4); }
  .site-nav a{ padding: var(--sp-1) 0; border-bottom:2px solid transparent; }
  .site-nav a:hover,.site-nav a[aria-current="page"]{ border-bottom-color: var(--accent-800); }
}

/* --- hero ------------------------------------------------------------ */
.hero{ background: var(--ink); color:#fff; overflow:hidden; }
.hero .wrap{
  padding-top: var(--sp-6); padding-bottom: var(--sp-6);
  display:grid; gap: var(--sp-5); align-items:center;
}
.eyebrow{
  display:inline-block; background: var(--accent-800); color:#fff;
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  padding: 0.35em 0.8em; margin-bottom: var(--sp-3);
}
.hero h1{
  color:#fff; letter-spacing:-0.03em;
  font-size: clamp(2.5rem, 5vw + 1.2rem, 4.6rem);
}
.hero p{ color:#D9CFC4; font-size: var(--step-1); max-width:36ch; }

/* cornice fotografica con blocco colore sfalsato e taglio d'angolo */
.hero-photo-frame{ position:relative; isolation:isolate; }
.hero-photo-frame::before{
  content:""; position:absolute; z-index:0;
  top:16px; left:16px; right:-16px; bottom:-16px;
  background: var(--accent-800);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
}
.hero-photo-img{
  display:block; position:relative; z-index:1; aspect-ratio:4/3; overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 84% 100%, 0 100%);
}
.hero-photo-img img{ width:100%; height:100%; object-fit:cover; }

/* variante logo: sfondo chiaro, immagine "contain" con margine */
.hero-photo-frame--logo::before{ background: var(--accent-100); }
.hero-photo-img--logo{ background:#fff; aspect-ratio:1/1; }
.hero-photo-img--logo img{ object-fit:contain; padding: var(--sp-4); }
@media (min-width: 56rem){
  .hero-photo-img--logo{ aspect-ratio:5/4; }
}

@media (min-width: 56rem){
  .hero .wrap{ grid-template-columns: 1fr 1.15fr; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}

/* --- page header (pagine interne) -------------------------------------- */
.page-header{ background: var(--brand-100); border-bottom: 2px solid var(--ink); }
.page-header .wrap{ padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.page-header p{ color: var(--muted); font-size: var(--step-1); max-width:60ch; }
.page-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; }
.community-badge{ height:150px; width:auto; max-width:320px; object-fit:contain; border:2px solid var(--ink); background:#fff; padding:8px; flex-shrink:0; }
.address-line{ display:flex; align-items:center; gap:0.5em; }
.address-line svg{ flex-shrink:0; width:1em; height:1em; color: var(--accent-800); }
.contact-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.page-header-dark{ background: var(--ink); }
.page-header-dark h1{ color:#fff; }
.page-header-dark p{ color:#D9CFC4; }
.page-header-dark .breadcrumb,
.page-header-dark .breadcrumb a{ color:#D9CFC4; }
.page-header-dark .breadcrumb a:hover{ color: var(--accent-100); }
.page-header-dark .breadcrumb li[aria-current="page"]{ color:#fff; }

.breadcrumb{ font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-2); }
.breadcrumb a{ color: var(--muted); }
.breadcrumb a:hover{ color: var(--accent-800); }

/* --- buttons ---------------------------------------------------------- */
.btn{
  display:inline-block; padding: 0.85em 1.5em; font-weight:600; font-size: var(--step--1);
  text-decoration:none; letter-spacing:0.02em; text-transform:uppercase; border:2px solid transparent;
}
.btn-primary{ background: var(--accent-800); color:#fff; }
.btn-primary:hover{ background:#7C3308; color:#fff; }
.btn-outline{ border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: rgba(0,0,0,.06); }
.hero .btn-outline{ border-color:#fff; color:#fff; }
.hero .btn-outline:hover{ background: rgba(255,255,255,.12); }

/* --- sections --------------------------------------------------------- */
section{ padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.section-alt{ background: var(--paper-alt); }
.section-tinted{ background: var(--brand-100); }
.section-head{ margin-bottom: var(--sp-4); }
.section-head p{ color: var(--muted); }

.section-dark{ background: var(--ink); color:#fff; }
.section-dark h2{ color:#fff; }
.section-dark .section-head p{ color:#D9CFC4; }
.section-dark p{ color:#D9CFC4; }

/* --- cards -------------------------------------------------------------- */
.grid{ display:grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 36rem){ .grid-2{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 56rem){ .grid-3{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 56rem){ .grid-4{ grid-template-columns: repeat(4,1fr); } }
@media (min-width: 36rem){ .grid-6{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 56rem){ .grid-6{ grid-template-columns: repeat(6,1fr); } }

.card{ border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display:flex; flex-direction:column; }
.card-photo{ aspect-ratio: 16/10; overflow:hidden; border-bottom: 2px solid var(--ink); background: var(--paper-alt); }
.card-photo img{ width:100%; height:100%; object-fit:cover; }
.card-photo-logo{ background:#fff; }
.card-photo-logo img{ object-fit:contain; padding: var(--sp-4); }
.card-body{ padding: var(--sp-3); flex:1; display:flex; flex-direction:column; }
.card h3{ font-size: var(--step-1); margin-bottom: var(--sp-1); }
.card p{ color: var(--muted); margin-bottom: var(--sp-2); }
.card .btn{ margin-top:auto; align-self:flex-start; }

/* --- card compatta (griglia comunità in home) ------------------------- */
.card-mini{ border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display:flex; flex-direction:column; text-decoration:none; transition: transform .15s ease; }
.card-mini:hover, .card-mini:focus-visible{ transform: translateY(-3px); }
.card-mini-photo{ aspect-ratio: 4/3; overflow:hidden; border-bottom: 2px solid var(--ink); background: var(--paper-alt); }
.card-mini-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease; }
.card-mini:hover .card-mini-photo img{ transform: scale(1.06); }
.card-mini-body{ padding: var(--sp-2) var(--sp-3); }
.card-mini h4{ font-size: var(--step-0); margin-bottom:0.15em; }
.card-mini .muted{ font-size: 0.75rem; }
.category-block{ margin-bottom: var(--sp-5); }
.category-block:last-child{ margin-bottom:0; }
.category-block h3{ font-size: var(--step-1); margin-bottom: var(--sp-2); display:flex; align-items:center; gap:0.6em; }
.category-block h3 .count{ font-family: var(--font-text); font-weight:600; font-size: var(--step--1); color: var(--muted); text-transform:none; letter-spacing:0; }

.tag{
  display:inline-block; background: var(--ink); color:#fff; font-size:0.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; padding: 0.25em 0.7em; margin-bottom: var(--sp-2);
}
.tag-accent{ background: var(--accent-800); }
.tag-brand{ background: var(--brand-900); }

/* --- liste dati (contatti, accreditamenti) ------------------------------ */
.deflist{ display:grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width:36rem){ .deflist{ grid-template-columns: 14rem 1fr; } }
.deflist dt{ font-weight:600; color: var(--muted); }
.deflist dd{ margin:0; }

/* --- documenti: filtri --------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filters select,.filters input{
  font-family: var(--font-text); font-weight:600; font-size: var(--step--1); padding: 0.6em 2.2em 0.6em 0.8em;
  border: 2px solid var(--ink); background:#fff; color: var(--ink);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1A16' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 0.7em center; background-size: 11px;
}
.filters select:focus{ outline: var(--focus); outline-offset: 2px; }
.filters label{ display:flex; flex-direction:column; gap:0.3em; font-size: var(--step--1); font-weight:600; }

.doc-list{ display:flex; flex-direction:column; gap: var(--sp-2); min-height: 50vh; }
.doc-list-static{ min-height:auto; }
.doc-item{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: var(--sp-2);
  border: 1px solid var(--border); border-left: 4px solid var(--brand-900); padding: var(--sp-2) var(--sp-3);
  background:#fff;
}
.doc-item a{ font-weight:600; text-decoration:none; }
.doc-item a:hover{ text-decoration:underline; }
.doc-meta{ font-size: var(--step--1); color: var(--muted); }
.doc-empty{ color: var(--muted); padding: var(--sp-4) 0; }

.doc-tag{
  display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; padding: 0.2em 0.6em; color:#fff; margin-bottom:0.35em;
}
.doc-tag.cat-autorizzazioni{ background: var(--brand-900); }
.doc-tag.cat-accreditamenti{ background: var(--accent-800); }
.doc-tag.cat-carte-dei-servizi{ background: var(--ink); }
.doc-item.cat-autorizzazioni{ border-left-color: var(--brand-900); }
.doc-item.cat-accreditamenti{ border-left-color: var(--accent-800); }
.doc-item.cat-carte-dei-servizi{ border-left-color: var(--ink); }

/* --- galleria foto comunità (grande, con ingrandimento al click) -------- */
.community-gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); align-items:start; }
@media (max-width:36rem){ .community-gallery{ grid-template-columns: 1fr; } }
.community-gallery-item{
  position:relative; aspect-ratio: 4/3; overflow:hidden; border: 2px solid var(--ink);
  cursor: zoom-in; display:block; padding:0;
}
.community-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease; }
.community-gallery-item:hover img, .community-gallery-item:focus-visible img{ transform: scale(1.04); }
.community-gallery-item .zoom-hint{
  position:absolute; right:0.6em; bottom:0.6em; width:2.2em; height:2.2em; border-radius:50%;
  background: rgba(31,26,22,.8); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; pointer-events:none;
}

.lightbox{
  position:fixed; inset:0; background: rgba(15,12,10,.94); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding: 3rem 4.5rem;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border: 2px solid #fff; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: rgba(255,255,255,.12); color:#fff; border: 2px solid #fff;
  cursor:pointer; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.lightbox-close{ top:1rem; right:1rem; width:2.6rem; height:2.6rem; }
.lightbox-prev, .lightbox-next{ top:50%; transform: translateY(-50%); width:2.8rem; height:2.8rem; }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,.25); }
@media (max-width:36rem){
  .lightbox{ padding:3.5rem 1rem 1rem; }
  .lightbox-prev, .lightbox-next{ width:2.2rem; height:2.2rem; font-size:1.1rem; }
}

/* --- badge "altre comunità" --------------------------------------------- */
.community-links{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }
.community-link{
  display:flex; align-items:center; gap:1em; border: 3px solid var(--ink); background:#fff;
  padding:1em 1.6em 1em 0.9em; text-decoration:none; color: var(--ink); font-weight:700;
  font-size: var(--step-1); min-width:15rem; transition: transform .15s ease, background .15s ease;
}
.community-link:hover, .community-link:focus-visible{ background: var(--brand-100); transform: translateY(-3px); }
.community-link .badge-dot{ width:2.6em; height:2.6em; border-radius:50%; background: var(--brand-900); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex-shrink:0; }

/* --- timeline (storia) --------------------------------------------------- */
.timeline{ display:flex; flex-direction:column; gap: var(--sp-4); border-left: 3px solid var(--border); margin-left: 0.5rem; }
.timeline-item{ position:relative; padding-left: var(--sp-4); }
.timeline-item::before{
  content:""; position:absolute; left:-9px; top:0.4em; width:14px; height:14px; border-radius:50%;
  background: var(--accent-800); border: 3px solid var(--paper);
}
.timeline-year{ font-family: var(--font-display); font-weight:700; color: var(--accent-800); font-size: var(--step-1); }

/* --- footer -------------------------------------------------------------- */
.site-footer{ background: var(--ink); color:#D9CFC4; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.site-footer a{ color:#fff; }
.footer-grid{ display:grid; gap: var(--sp-4); grid-template-columns:1fr; margin-bottom: var(--sp-4); }
@media (min-width:32rem){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:56rem){ .footer-grid{ grid-template-columns: repeat(4,1fr); } }
.footer-nav a{ display:block; margin-bottom:0.4em; }
.footer-heading{ color:#fff; font-size: var(--step--1); text-transform:uppercase; letter-spacing:0.06em; margin-bottom: var(--sp-2); }
.footer-brand{ display:flex; align-items:center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.footer-brand .footer-heading{ margin-bottom:0; }
.footer-logo{ height:32px; width:32px; flex-shrink:0; }
.footer-grid p,.footer-grid li{ font-size: var(--step--1); }
.footer-bottom{ border-top:1px solid #40372E; padding-top: var(--sp-3); font-size:0.75rem; color:#A79A8B; }

/* --- utility -------------------------------------------------------------- */
.visually-hidden{
  position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
.mt-0{ margin-top:0; }