/*
Theme Name: Friendly Dog
Theme URI: https://www.friendly-dog.it/
Author: Friendly Dog SSD
Description: Tema su misura per il centro cinofilo Friendly Dog di Camaiore. Include hero video, schede attività e sport con video verticali, feed Instagram e template a larghezza piena per il gestionale ArgoDog CRM.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: friendly-dog
*/

/* ============================================================
   FRIENDLY DOG — foglio di stile condiviso
   Palette: verde bosco / prato / crema / giallo sole
   ============================================================ */
:root{
  --verde:#1F3D2B;
  --prato:#5C8A4E;
  --crema:#FBFAF4;
  --salvia:#EEF2E6;
  --sole:#E8B23A;
  --ink:#22301F;
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Figtree',sans-serif;background:var(--crema);color:var(--ink);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.05}
.eyebrow{color:var(--sole);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}

/* ============ NAV ============ */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s}
header.scrolled,header.solid{background:rgba(251,250,244,.94);backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(0,0,0,.08)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem}
.nav .logo img{height:54px;background:rgba(255,255,255,.92);border-radius:12px;padding:4px 8px}
.nav ul{display:flex;gap:1.8rem;list-style:none}
.nav ul a{font-weight:600;font-size:.95rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);padding:.3rem 0;border-bottom:3px solid transparent}
.nav ul a:hover,.nav ul a.attiva{border-color:var(--sole)}
header.scrolled .nav ul a,header.solid .nav ul a{color:var(--ink);text-shadow:none}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.nav .cta{background:var(--sole);color:var(--verde);padding:.6rem 1.3rem;border-radius:99px;font-weight:700;font-size:.9rem}
.nav .cta:hover{filter:brightness(1.08)}
.nav .maps-btn{display:inline-flex;align-items:center;gap:.45rem;border:2px solid rgba(255,255,255,.75);color:#fff;padding:.52rem 1.1rem;border-radius:99px;font-weight:700;font-size:.9rem;transition:all .2s;backdrop-filter:blur(4px)}
.nav .maps-btn:hover{background:#fff;color:var(--verde)}
header.scrolled .maps-btn,header.solid .maps-btn{border-color:var(--verde);color:var(--verde)}
header.scrolled .maps-btn:hover,header.solid .maps-btn:hover{background:var(--verde);color:#fff}
.burger{display:none;background:none;border:none;font-size:1.8rem;cursor:pointer;color:#fff}
header.scrolled .burger,header.solid .burger{color:var(--verde)}
.only-mobile{display:none}

/* ============ HERO VIDEO (homepage) ============ */
.hero{position:relative;height:100vh;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;color:#fff}
.hero video,.hero .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero .slide{opacity:0;animation:kb 24s infinite;background-size:cover;background-position:center;will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}
.hero .slide:nth-child(1){animation-delay:0s}
.hero .slide:nth-child(2){animation-delay:6s}
.hero .slide:nth-child(3){animation-delay:12s}
.hero .slide:nth-child(4){animation-delay:18s}
@keyframes kb{0%{opacity:0;transform:scale(1) translateZ(0)}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0;transform:scale(1.1) translateZ(0)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,32,21,.55),rgba(15,32,21,.65))}
.hero-content{position:relative;z-index:2;max-width:820px;padding:0 1.2rem;display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.hero h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:800;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero p{max-width:56ch;color:#E9EFE2;font-size:1.1rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.btn{display:inline-block;padding:.95rem 1.9rem;border-radius:99px;font-weight:700;font-size:.95rem;transition:transform .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-sole{background:var(--sole);color:var(--verde)}
.btn-ghost{border:2px solid rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--prato)}
.video-ctrl{position:absolute;bottom:1.4rem;right:1.4rem;z-index:3;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:99px;padding:.55rem .95rem;font-size:.82rem;cursor:pointer;backdrop-filter:blur(6px)}
.video-ctrl:hover{background:rgba(0,0,0,.65)}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;color:#fff;font-size:1.6rem;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* ============ PAGE HERO (pagine interne) ============ */
.page-hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,32,21,.35),rgba(15,32,21,.75))}
.page-hero .ph-txt{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:0 1.2rem 2.6rem}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;margin-top:.4rem}
.page-hero p{max-width:60ch;color:#E9EFE2;margin-top:.6rem}

/* ============ CONTENUTI ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.2rem}
.blocco{margin:4rem auto}
.blocco h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--verde);margin-bottom:.6rem}
.blocco .sotto{color:#5a6a52;max-width:62ch}
.center{text-align:center}
.center .sotto{margin:0 auto}

/* schede attività/sport: alternate foto+testo */
.scheda{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:center;margin:3.2rem 0}
.scheda.flip .ph{order:2}
.scheda .ph img{width:100%;height:330px;object-fit:cover;border-radius:var(--radius);position:static}
.scheda h3{font-size:1.5rem;color:var(--verde);margin-bottom:.5rem}
.scheda .chi-tiene{display:inline-block;background:var(--salvia);color:var(--prato);font-weight:700;font-size:.8rem;padding:.3rem .9rem;border-radius:99px;margin-bottom:.7rem}
.scheda p{color:#4f5c49;margin-bottom:.9rem}
.scheda a.more{font-weight:700;color:var(--prato)}
.scheda a.more:hover{color:var(--verde)}

/* card grid (homepage) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.grid-3{grid-template-columns:repeat(3,1fr);max-width:960px;margin:0 auto}
.card{position:relative;border-radius:var(--radius);overflow:hidden;height:340px;display:flex;align-items:flex-end;box-shadow:0 8px 24px rgba(31,61,43,.12);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.card:hover{transform:translateY(-6px)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.card:hover img{transform:scale(1.06) translateZ(0)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(15,32,21,.85))}
.card-body{position:relative;z-index:2;padding:1.4rem;color:#fff}
.card h3{font-size:1.25rem;margin-bottom:.25rem}
.card span{font-size:.85rem;color:var(--sole);font-weight:700}

/* striscia recensioni */
.reviews{background:var(--salvia);padding:3.6rem 0}
.badge-google{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border-radius:99px;padding:.5rem 1.2rem;font-weight:700;color:var(--verde);box-shadow:0 3px 12px rgba(31,61,43,.1)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.8rem}
.rev{background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:0 6px 18px rgba(31,61,43,.08)}
.rev .stelle{color:var(--sole);letter-spacing:.15em;margin-bottom:.6rem}
.rev p{font-size:.93rem;color:#4f5c49;font-style:italic}
.rev b{display:block;margin-top:.8rem;font-size:.85rem;color:var(--verde)}

/* eventi */
.evento-vuoto{background:var(--salvia);border:2px dashed var(--prato);border-radius:var(--radius);padding:3rem 2rem;text-align:center;max-width:720px;margin:2.5rem auto}
.evento-vuoto h3{color:var(--verde);font-size:1.4rem;margin-bottom:.6rem}
.evento-vuoto p{color:#5a6a52;margin-bottom:1.4rem}

/* citazione filosofia */
.quote{background:var(--verde);color:var(--crema);text-align:center;padding:4rem 1.2rem}
.quote blockquote{font-family:'Bricolage Grotesque';font-style:italic;font-size:clamp(1.3rem,2.6vw,1.8rem);max-width:34ch;margin:0 auto 1rem}
.quote cite{font-style:normal;font-size:.9rem;color:#cdd7bf;letter-spacing:.08em;text-transform:uppercase}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2rem}
.tm{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(31,61,43,.08)}
.tm img{height:260px;width:100%;object-fit:cover}
.tm .tm-body{padding:1.2rem 1.3rem 1.5rem}
.tm h3{color:var(--verde);font-size:1.15rem}
.tm span{color:var(--prato);font-weight:700;font-size:.85rem}
.tm p{font-size:.9rem;color:#4f5c49;margin-top:.5rem}

/* ============ INSTAGRAM ============ */
.insta{background:#F0F3E8;padding:4rem 0}
.insta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.insta-head h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:var(--verde)}
.insta-head p{color:#5a6a52;margin-top:.3rem}
.insta-head .follow{display:inline-flex;align-items:center;gap:.5rem;background:var(--verde);color:#fff;padding:.65rem 1.3rem;border-radius:99px;font-weight:700;font-size:.9rem;transition:background .2s}
.insta-head .follow:hover{background:var(--prato)}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.ig-post{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;display:block;background:#dde3d2}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.ig-post:hover img{transform:scale(1.07) translateZ(0)}
.ig-post .ig-cap{position:absolute;inset:0;background:rgba(15,32,21,.72);color:#fff;font-size:.78rem;line-height:1.4;padding:.9rem;display:flex;align-items:flex-end;opacity:0;transition:opacity .25s}
.ig-post:hover .ig-cap{opacity:1}
.ig-post.placeholder{display:flex;align-items:center;justify-content:center;color:#8a9a80;font-size:1.6rem}
.insta-note{margin-top:1rem;font-size:.82rem;color:#8a9a80;text-align:center}

/* card sport con video verticale (stile reel) */
.cat-intro{margin:3.5rem 0 1.6rem}
.cat-intro h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;color:var(--verde)}
.cat-intro p{color:#5a6a52;max-width:62ch;margin-top:.4rem}
.sport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.vcard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;background:#0F2015;box-shadow:0 8px 24px rgba(31,61,43,.14)}
.vcard video,.vcard img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(15,32,21,.88));pointer-events:none}
.vcard .vc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem;color:#fff}
.vcard h3{font-size:1.3rem;margin-bottom:.35rem}
.vcard p{font-size:.88rem;line-height:1.45;color:#DfE8DC}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#cfd8c6;padding:3rem 1.2rem 2rem;margin-top:4rem}
.foot{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot h4{font-family:'Bricolage Grotesque';color:#fff;margin-bottom:.7rem}
.foot a:hover{color:var(--sole)}
.foot small{grid-column:1/-1;text-align:center;margin-top:2.4rem;color:#8a9a80;font-size:.8rem}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .sport-grid{grid-template-columns:repeat(2,1fr)}
  .vcard p{font-size:.8rem}
  .insta-grid{grid-template-columns:repeat(3,1fr)}
  .rev-grid,.team-grid{grid-template-columns:1fr}
  .scheda{grid-template-columns:1fr;gap:1.3rem}
  .scheda.flip .ph{order:0}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .only-mobile{display:block}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(20,35,25,.96);flex-direction:column;padding:1.2rem 1.4rem;gap:1rem}
  header.scrolled .nav ul,header.solid .nav ul{background:var(--crema)}
  .nav ul.open{display:flex}
  .burger{display:block}
  .nav .maps-btn .maps-txt{display:none}
  .nav .maps-btn{padding:.52rem .75rem}
  .nav .cta{display:none}
  .grid{grid-template-columns:1fr}
  .card{height:260px}
  .sport-grid{grid-template-columns:1fr;gap:1.2rem}
  .vcard{aspect-ratio:auto;display:flex;flex-direction:column}
  .vcard video,.vcard img.cover{position:static;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
  .vcard::after{display:none}
  .vcard .vc-body{position:static;background:#0F2015;padding:1rem 1.2rem 1.3rem}
  .vcard h3{font-size:1.15rem}
  .vcard p{font-size:.9rem}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr}
  .hero{min-height:100svh;height:100svh}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .hero .slide{animation:none;opacity:0}
  .hero .slide:first-child{opacity:1}
  .scroll-hint{animation:none}
}

/* ============================================================
   AGGIUNTE PER WORDPRESS
   ============================================================ */

/* voce di menu della pagina corrente */
.nav ul li.voce-attiva > a{border-color:var(--sole)}

/* logo caricato da WordPress (Aspetto → Personalizza → Logo) */
.nav .logo .custom-logo-link img,.nav .logo img{height:54px;width:auto;background:rgba(255,255,255,.92);border-radius:12px;padding:4px 8px}

/* hero più basso per le pagine del gestionale */
.page-hero-corta{min-height:30vh}

/* ---- Area ArgoDog CRM: larghezza piena, niente vincoli ---- */
.argodog-wrap{max-width:1320px;margin:2.5rem auto 4rem;padding:0 1.2rem;min-height:50vh}
.argodog-wrap img{max-width:100%;height:auto}

/* ---- Contenuto editoriale (editor WordPress) ---- */
.contenuto-pagina{max-width:70ch;margin-left:auto;margin-right:auto}
.contenuto-pagina h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--verde);margin:2rem 0 .8rem}
.contenuto-pagina h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;color:var(--verde);margin:1.6rem 0 .6rem}
.contenuto-pagina p{margin-bottom:1.1rem;color:#4f5c49}
.contenuto-pagina ul,.contenuto-pagina ol{margin:0 0 1.2rem 1.4rem;color:#4f5c49}
.contenuto-pagina li{margin-bottom:.4rem}
.contenuto-pagina a{color:var(--prato);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.contenuto-pagina a:hover{color:var(--verde)}
.contenuto-pagina img,.contenuto-pagina .wp-block-image img{border-radius:var(--radius);height:auto}
.contenuto-pagina blockquote{border-left:4px solid var(--sole);padding-left:1.2rem;margin:1.5rem 0;font-style:italic;color:#5a6a52}
.contenuto-pagina table{width:100%;border-collapse:collapse;margin-bottom:1.4rem}
.contenuto-pagina th,.contenuto-pagina td{border:1px solid #e0e4d6;padding:.6rem .8rem;text-align:left}
.contenuto-pagina th{background:var(--salvia);color:var(--verde)}

/* elenco articoli (index.php) */
.voce-elenco{padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid #e0e4d6}
.voce-elenco h2{margin-top:0}
.voce-elenco h2 a{color:var(--verde);text-decoration:none}
.voce-elenco h2 a:hover{color:var(--prato)}
.paginazione{margin-top:2rem}
.paginazione a,.paginazione span{display:inline-block;padding:.5rem .9rem;border-radius:8px;margin-right:.3rem;background:var(--salvia);color:var(--verde);font-weight:600}
.paginazione .current{background:var(--verde);color:#fff}

/* barra admin WordPress: evita che copra la nav fissa */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}

/* Logo testuale (fallback quando non c'è un file logo o un logo personalizzato) */
.nav .logo-testo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.35rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);letter-spacing:-.01em}
header.scrolled .nav .logo-testo,header.solid .nav .logo-testo{color:var(--verde);text-shadow:none}

/* Rete di sicurezza: qualunque immagine di logo nella barra resta contenuta */
.nav .logo img,.nav img.custom-logo,.nav .custom-logo-link img{height:54px!important;width:auto!important;max-width:220px;object-fit:contain}
@media(max-width:640px){
  .nav .logo img,.nav img.custom-logo,.nav .custom-logo-link img{height:44px!important;max-width:150px}
}