/*
Theme Name: BarGrado
Theme URI: https://www.bargrado.com/
Description: Tema di bargrado.com (Caffè Concerto, Grado), 2026: stessa impostazione del vecchio Solus (foto a scorrimento con miniature, riquadro "vendesi", descrizione con prezzo, galleria con didascalie), rifatto da zero con standard attuali: niente jQuery ne' librerie, carattere Oswald incluso nel tema, galleria in finestra accessibile, testi dei campi personalizzati filtrati. Vale per il sito italiano e per quello inglese (/en/).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Author: Caffè Concerto
License: GPL-2.0-or-later
Text Domain: bargrado
*/

@font-face {
	font-family: "Oswald";
	src: url("assets/fonts/oswald-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--verde: #26804e;          /* pulsanti: contrasto 4,9:1 con il bianco */
	--verde-scuro: #1f6b41;
	--verde-chiaro: #3bb672;   /* il verde originale, per i dettagli */
	--nero: #141414;
	--testo: #3d3d3d;
	--grigio: #6d6d78;
	--linea: #e9e8e8;
	--fondo: #fafafa;
	--titoli: "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
	--carattere: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--larghezza: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--testo); font: 400 1rem/1.7 var(--carattere); }
img, svg, video, iframe { max-width: 100%; height: auto; }
a { color: var(--verde); }
a:hover, a:focus { color: var(--verde-scuro); }
:focus-visible { outline: 3px solid var(--verde-chiaro); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--titoli); font-weight: 500; line-height: 1.2; color: var(--nero); }
.screen-reader-text, .salta { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.salta:focus { position: fixed !important; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 100; padding: .6rem 1rem; background: #fff; color: var(--nero); }
.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 1.2rem; }
.icona { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.15em; }

/* ---------- testata */
.testata { position: relative; z-index: 20; background: var(--nero); }
.testata .contenitore { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.home .testata { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0)); }
.admin-bar.home .testata { top: 32px; }
.marchio { font-family: var(--titoli); font-size: 1.6rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.marchio:hover, .marchio:focus { color: #fff; }
.menu-principale { margin-left: auto; }
.menu-principale ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem 1.8rem; }
.menu-principale a { display: block; padding: .5rem 0; color: #fff; font-family: var(--titoli); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.menu-principale a:hover, .menu-principale a:focus, .menu-principale .current-menu-item > a { border-bottom-color: #fff; color: #fff; }
.lingue { display: flex; gap: .4rem; font-family: var(--titoli); font-size: .85rem; letter-spacing: .08em; }
.lingue a { color: rgba(255, 255, 255, .75); text-decoration: none; padding: .2rem .35rem; border: 1px solid transparent; }
.lingue a[aria-current="true"] { color: #fff; border-color: rgba(255, 255, 255, .7); }
.lingue a:hover, .lingue a:focus { color: #fff; }
.bottone-menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; }
.bottone-menu .icona { width: 26px; height: 26px; }

@media (max-width: 860px) {
	.bottone-menu { display: inline-flex; align-items: center; justify-content: center; }
	.testata .contenitore { flex-wrap: wrap; gap: .6rem; }
	.js .menu-principale { display: none; flex-basis: 100%; order: 9; margin: 0; padding: .3rem 0 1rem; }
	.js .menu-principale.aperto { display: block; }
	.menu-principale ul { flex-direction: column; gap: 0; }
	.menu-principale a { padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
	.home .testata { background: rgba(0, 0, 0, .78); }
	.lingue { order: 2; }
}

/* ---------- foto a scorrimento (home) */
.eroe { position: relative; background: var(--nero); }
.eroe-foto { position: relative; }
.eroe-binario { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; height: min(78vh, 760px); min-height: 360px; }
.eroe-binario::-webkit-scrollbar { display: none; }
.eroe-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.eroe-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eroe-freccia { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 48px; height: 64px; border: 0; background: rgba(0, 0, 0, .35); color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.eroe-freccia:hover, .eroe-freccia:focus { background: rgba(0, 0, 0, .65); }
.eroe-freccia.prec { left: 0; }
.eroe-freccia.succ { right: 0; }
@media (prefers-reduced-motion: reduce) { .eroe-binario { scroll-behavior: auto; } }

.vendita { position: absolute; z-index: 6; left: max(1.2rem, calc((100% - var(--larghezza)) / 2 + 1.2rem)); top: calc(76px + 3rem); width: min(330px, 80%); }
.vendita-riquadro { background: #fff; padding: 1.6rem 1.6rem 1.3rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.vendita-indirizzo { font-family: var(--titoli); font-weight: 400; font-size: 1.05rem; line-height: 1.35; text-transform: uppercase; color: var(--grigio); }
.vendita-prezzo { margin-top: .7rem; font-family: var(--titoli); font-size: 1.6rem; line-height: 1.25; text-transform: uppercase; color: var(--nero); }
.vendita-prezzo a { color: var(--verde); text-decoration: none; }
.vendita-dettagli, .vendita-extra { margin-top: .6rem; font-family: var(--titoli); font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--grigio); }
.vendita .pulsante { display: block; width: 100%; margin-top: .9rem; text-align: center; }

.miniature { background: var(--nero); padding: .6rem 0 1rem; }
.miniature ul { list-style: none; margin: 0 auto; padding: 0 1.2rem; max-width: var(--larghezza); display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.miniature button { display: block; width: 100%; padding: 0; border: 3px solid transparent; background: none; cursor: pointer; opacity: .65; }
.miniature button[aria-current="true"], .miniature button:hover, .miniature button:focus { opacity: 1; border-color: #fff; }
.miniature img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

@media (max-width: 860px) {
	.eroe-binario { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
	.vendita { position: static; width: auto; padding: 1.2rem; background: #fff; text-align: center; }
	.vendita-riquadro { box-shadow: none; padding: 0; }
	.miniature ul { grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 0 .6rem; }
	.eroe-freccia { width: 40px; height: 52px; font-size: 2rem; }
}

/* ---------- pulsanti */
.pulsante, .wpcf7-submit, .wp-block-button__link { display: inline-block; padding: .85rem 1.6rem; border: 2px solid var(--verde); border-radius: 0; background: var(--verde); color: #fff; font-family: var(--titoli); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.pulsante:hover, .pulsante:focus, .wpcf7-submit:hover, .wpcf7-submit:focus, .wp-block-button__link:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); color: #fff; }
.pulsante.secondario { background: #fff; color: var(--grigio); border-color: var(--linea); }
.pulsante.secondario:hover, .pulsante.secondario:focus { border-color: var(--verde); color: var(--verde); }
.pulsanti { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1.6rem 0 0; }

/* ---------- contenuti */
.principale { padding: 0 0 4rem; }
.titolo-pagina { position: relative; padding: 3.2rem 0 2.6rem; background: var(--nero) center / cover no-repeat; color: #fff; }
.titolo-pagina::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.titolo-pagina h1 { position: relative; margin: 0; color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: .04em; }
.testo { max-width: 860px; margin: 3rem auto 0; }
.home .testo { text-align: center; }
.testo h2 { margin: 3.2rem 0 1.2rem; font-size: clamp(1.7rem, 3vw, 2.1rem); }
.testo h2:first-child { margin-top: 0; }
.testo h4 { font-size: 1.35rem; }
.testo p { margin: 0 0 1rem; }
.prezzo { margin-top: 1.6rem !important; font-family: var(--titoli); font-size: 1.9rem; color: var(--nero); }
.sottotitolo { color: var(--grigio); font-size: .95rem; }
.testo video, .wp-video { width: 100% !important; height: auto; }
.testo iframe { display: block; margin: 0 auto; }

/* ---------- galleria */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 1.6rem 0 0; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }
.gallery-item { position: relative; margin: 0; }
.gallery-icon a { display: block; line-height: 0; }
.gallery-icon img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; transition: opacity .2s; }
.gallery-icon a:hover img, .gallery-icon a:focus img { opacity: .85; }
.gallery-caption { position: absolute; left: 0; bottom: 0; max-width: 90%; padding: .45rem .9rem; background: #fff; color: var(--nero); font-family: var(--titoli); font-size: .85rem; letter-spacing: .03em; text-align: left; text-transform: uppercase; }

/* ---------- finestra delle foto */
.lightbox { width: min(1200px, 96vw); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-height: 84vh; width: auto; margin: 0 auto; display: block; }
.lightbox figcaption { margin-top: .6rem; color: #fff; font-family: var(--titoli); letter-spacing: .05em; text-transform: uppercase; }
.lightbox button { position: absolute; border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 2rem; line-height: 1; width: 48px; height: 56px; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus { background: rgba(0, 0, 0, .85); }
.lightbox .chiudi { top: -.5rem; right: -.5rem; height: 48px; }
.lightbox .prec { left: 0; top: 45%; }
.lightbox .succ { right: 0; top: 45%; }

/* ---------- modulo di contatto (Contact Form 7) */
.wpcf7 { max-width: 640px; margin: 1.5rem auto 0; text-align: left; }
.wpcf7 label { display: block; font-weight: 600; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; margin-top: .3rem; padding: .7rem .8rem; border: 1px solid #c9c9cf; border-radius: 0; font: inherit; }
.wpcf7 textarea { min-height: 150px; }
.wpcf7-not-valid-tip { color: #b00020; font-size: .9rem; }

/* ---------- piede */
.piede { background: var(--nero); color: #b5b5bd; font-size: .9rem; }
.piede .contenitore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.piede p { margin: 0; }
.piede a { color: #fff; }

@media print { .testata, .eroe-freccia, .miniature, .piede { display: none !important; } }