/**
 * Kadence Child - GiustiziaGiusta
 * Regole per i template di pagina custom (Associazione, Statuto,
 * Organigramma, Osservatori). Ogni sezione viene ampliata nel task
 * dedicato corrispondente (CLAUDE.md § FASE 9); qui solo le basi
 * condivise per non ripartire da zero.
 */

/* Icone SVG inline (gg_icon() / gg_get_icon(), plugin gg-core) */
.gg-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.25em;
	flex-shrink: 0;
}

/* Involucro comune dei template custom */
.gg-page {
	max-width: 100%;
}

/* Griglia di card riutilizzabile (Organigramma - Consiglio Direttivo) */
.gg-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.gg-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	padding: 1.5rem 1rem;
	border-radius: 0.5rem;
	background: var(--global-palette9, #f5f5f5);
}

/* .gg-card può anche essere un <a> (elenco Osservatori) */
a.gg-card {
	text-decoration: none;
	color: inherit;
}

.gg-card .gg-icon {
	width: 2.5em;
	height: 2.5em;
}

/* Foto membro Consiglio Direttivo (facoltativa, fallback .gg-icon sopra)
   — sempre circolare qualunque sia la proporzione dell'originale, per
   restare in asse con le altre card senza foto. */
.gg-card__photo {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Timeline verticale riutilizzabile (Organigramma - Storico presidenti) */
.gg-timeline {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
	border-left: 2px solid var(--global-palette3, #ccc);
}

.gg-timeline li {
	position: relative;
	padding: 0 0 1.5rem 1.5rem;
}

.gg-timeline li .gg-icon {
	position: absolute;
	left: -0.85em;
	top: 0;
	background: #fff;
}

/* Immagine "spezzatore" (Associazione) — non più una hero affiancata al
   testo, ma un elemento a piena larghezza che interrompe la lettura a
   metà pagina, per alleggerirla (revisione 20/07/2026). Altezza
   contenuta con object-fit:cover così l'immagine non "pesa" comunque
   troppo anche a piena larghezza. */
.gg-associazione-breaker {
	max-width: 480px;
	margin: 2.5rem auto;
}

.gg-associazione-breaker img {
	width: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
	display: block;
}

@media (max-width: 782px) {
	.gg-associazione-breaker {
		margin: 1.75rem auto;
	}
}

/* CTA di adesione in fondo alla pagina Associazione — colore ufficiale
   del brand (stessa variabile --gg5-color-primary definita in :root da
   gg-5x1000/assets/css/gg-5x1000.css, quindi disponibile in ogni
   pagina del sito): rosso istituzionale #c0392b, non un palette
   Kadence generico. */
.gg-cta-adesione {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 3rem 0 1.5rem;
	padding: 2rem;
	border-radius: 0.75rem;
	border-left: 4px solid var(--gg5-color-primary, #c0392b);
	background: var(--global-palette9, #f5f5f5);
}

.gg-cta-adesione .gg-icon {
	width: 3em;
	height: 3em;
	flex-shrink: 0;
}

.gg-cta-adesione__testo {
	flex: 1 1 auto;
}

.gg-cta-adesione__testo h2 {
	margin: 0 0 0.5rem;
}

.gg-cta-adesione__testo p {
	margin: 0;
}

/* Colore ufficiale del brand (--gg5-color-primary) sia sul bordo del
   box sia sul bottone. In hover: solo un leggero zoom, il colore resta
   identico (bloccato con !important per non far scattare il cambio di
   colore nativo del tema sui bottoni). */
.gg-cta-adesione__bottone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	white-space: nowrap;
	background: var(--gg5-color-primary, #c0392b);
	color: #fff !important;
	transition: transform 0.15s ease;
}

.gg-cta-adesione__bottone:hover,
.gg-cta-adesione__bottone:focus {
	background: var(--gg5-color-primary, #c0392b) !important;
	color: #fff !important;
	transform: scale(1.04);
}

/* Link inline "Leggi lo Statuto" / "Leggi l'Organigramma" dentro al
   testo della pagina Associazione — stesso colore ufficiale del brand,
   sottolineatura spessa invece di un bottone pieno (più leggero,
   pensato per stare in mezzo a un paragrafo), hover solo con opacità
   ridotta (niente cambio di colore). */
.gg-inline-link {
	margin: -0.75rem 0 1.75rem;
}

.gg-inline-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--gg5-color-primary, #c0392b);
	text-decoration: none;
	border-bottom: 2px solid var(--gg5-color-primary, #c0392b);
	padding-bottom: 0.1rem;
	transition: opacity 0.15s ease;
}

.gg-inline-link .gg-icon {
	width: 1em;
	height: 1em;
}

.gg-inline-link a:hover,
.gg-inline-link a:focus {
	opacity: 0.7;
}

@media (max-width: 600px) {
	.gg-cta-adesione {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
}

/* Pull-quote del payoff — più discreta, non un blocco enorme centrato */
.gg-page--associazione .wp-block-pullquote {
	clear: both;
	margin: 1.5rem 0 2rem;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border: none;
	border-left: 4px solid var(--global-palette1, #C8005A);
	text-align: left;
}

.gg-page--associazione .wp-block-pullquote blockquote {
	margin: 0;
	border: none;
	padding: 0;
}

.gg-page--associazione .wp-block-pullquote p {
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.4;
	margin: 0;
}

.gg-page--associazione .wp-block-pullquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-style: normal;
	opacity: 0.75;
}

/* Eyebrow "Osservatori > Osservatorio X" sopra l'archivio categoria */
.gg-osservatorio-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

.gg-osservatorio-eyebrow .gg-icon {
	width: 1em;
	height: 1em;
}

/* Bottone download (Statuto) */
.gg-download-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

/* Link Accedi/Esci in header */
.gg-login-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Area riservata socio (gg-core [gg_area_socio], anche dentro
   l'archivio Periodico quando non attivo) */
.gg-area-socio {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	background: var(--global-palette9, #f5f5f5);
}

.gg-periodico-locked {
	margin: 2rem 0;
}

/* Pagina "Accedi" (login front-end, mai wp-login.php) */
.gg-page--login .gg-login-form {
	max-width: 420px;
}

.gg-login-input {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--global-palette3, #ccc);
	border-radius: 0.35rem;
	font-size: 1rem;
}

.gg-login-remember label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: normal;
}

.gg-login-error {
	padding: 0.75rem 1rem;
	border-radius: 0.35rem;
	background: #fdecea;
	color: #7a2118;
	border-left: 4px solid #c0392b;
}

.gg-login-lost {
	font-size: 0.9rem;
}

/* ==========================================================================
   Home page — sezioni (riorganizzazione 29/07/2026)
   Le griglie/CTA/box vivono nei plugin (gg-core-frontend.css,
   gg-5x1000.css); qui solo il ritmo verticale delle sezioni della home.
   ========================================================================== */
.gg-home-hero,
.gg-home-chi-siamo,
.gg-home-osservatori,
.gg-home-5x1000 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.gg-home-hero {
	margin-top: 1.5rem;
	text-align: center;
}

.gg-home-hero h1 {
	margin-bottom: 0.75rem;
}

.gg-home-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5rem;
}

/* Stesso ingombro orizzontale del box 5x1000 (padding .gg-5x1000-box:
   1.75rem 2rem), così il testo di "Chi siamo" si allinea al box sotto. */
.gg-home-chi-siamo {
	padding: 1.75rem 2rem;
	background: #eaeaea;
	border-radius: 16px;
}

.gg-home-osservatori h2 {
	margin-bottom: 0.5rem;
}

/* Link "Vedi tutti gli Osservatori →" (ultimo paragrafo della sezione) centrato. */
.gg-home-osservatori .wp-block-paragraph:last-child {
	text-align: center;
	margin-top: 1.5rem;
}

/* In home il box 5x1000 occupa tutta la larghezza della sezione
   (altrove resta max-width 720px). */
.gg-home-5x1000 .gg-5x1000-box {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.gg-demo-nota {
	font-size: 0.85rem;
	color: #666;
}

/* ==========================================================================
   Breadcrumb (Yoast) — pagine interne, non in home
   ========================================================================== */
.gg-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #595959;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid #ececec;
}

.gg-breadcrumb__qui {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	color: #1a1a1a;
}

.gg-breadcrumb__qui .gg-icon {
	width: 1.1em;
	height: 1.1em;
	color: var(--gg5-color-primary, #c0392b);
}

.gg-breadcrumb__inner > span {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0;
}

.gg-breadcrumb__sep {
	margin: 0 0.55rem;
	color: #9a9a9a;
}

.gg-breadcrumb a {
	color: #595959;
	text-decoration: none;
}

.gg-breadcrumb a:hover {
	color: var(--gg5-color-primary, #c0392b);
	text-decoration: underline;
}

.gg-breadcrumb .breadcrumb_last,
.gg-breadcrumb [aria-current="page"] {
	color: #1a1a1a;
	font-weight: 600;
}

/* Articoli: la colonna del testo è stretta, il breadcrumb prende la
   larghezza del sito (come la foto in evidenza sotto). */
.single-post .gg-breadcrumb {
	--gg-bc-w: min(
		calc(var(--global-content-width, 1290px) - 2 * var(--global-content-edge-padding, 1.5rem)),
		calc(100vw - 2 * var(--global-content-edge-padding, 1.5rem))
	);
	width: var(--gg-bc-w);
	max-width: none;
	margin-left: calc(50% - var(--gg-bc-w) / 2);
}

/* ==========================================================================
   Account soci: login CTA, profilo, reset, modale (30/07/2026)
   ========================================================================== */
.gg-account-ok {
	padding: 0.75rem 1rem;
	border-radius: 0.35rem;
	background: #e8f6ee;
	color: #1c6b3f;
	border-left: 4px solid #2e9e5b;
}

/* CTA "diventa socio" nella pagina di login */
.gg-login-cta {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	background: #f6f6f6;
	border-left: 4px solid var(--gg5-color-primary, #c0392b);
}

.gg-login-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.gg-login-cta__btn svg { width: 16px; height: 16px; }

/* Profilo */
.gg-profilo-card {
	margin: 1.5rem 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid #ececec;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 20px -16px rgba(0,0,0,.5);
}

.gg-profilo-card h2 { margin-top: 0; }

.gg-profilo-form input[type="text"],
.gg-profilo-form input[type="email"],
.gg-profilo-form input[type="password"] {
	width: 100%;
	max-width: 420px;
	padding: 0.55rem 0.7rem;
	border: 1px solid #ccc;
	border-radius: 8px;
}

.gg-profilo-form input:disabled {
	background: #f3f3f3;
	color: #666;
}

.gg-profilo-meta {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0;
}

.gg-profilo-meta li { margin: 0.2rem 0; }

.gg-profilo-hint { color: #6a6a6a; font-style: italic; }

.gg-profilo-logout { margin-top: 1.5rem; }
.gg-profilo-logout a { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Badge stato */
.gg-badge {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
}
.gg-badge--ok   { background: #e8f6ee; color: #1c6b3f; }
.gg-badge--warn { background: #fff4e0; color: #8a5a00; }
.gg-badge--err  { background: #fdecea; color: #a3271b; }

/* Modale conferma */
.gg-modal[hidden] { display: none; }
.gg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.gg-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
}
.gg-modal__box {
	position: relative;
	max-width: 460px;
	width: 100%;
	background: #fff;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.gg-modal__box h3 { margin-top: 0; }
.gg-modal__actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}
.gg-btn-secondary {
	background: transparent;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
	font-weight: 600;
}
.gg-btn-secondary:hover { background: #f3f3f3; }

/* Icona omino in header */
.gg-login-link--account a { display: inline-flex; align-items: center; }
.gg-login-link--account svg { width: 22px; height: 22px; }

/* Storico iscrizioni/rinnovi (profilo socio) */
.gg-storico-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5rem;
	font-size: 0.95rem;
}
.gg-storico-table th,
.gg-storico-table td {
	text-align: left;
	padding: 0.5rem 0.7rem;
	border-bottom: 1px solid #ececec;
}
.gg-storico-table thead th {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	border-bottom: 2px solid #e0e0e0;
}
.gg-storico-table tbody tr:last-child td { border-bottom: none; }

/* Osservatorio ancora senza articoli (pagina Osservatori) */
.gg-card--in-arrivo {
    opacity: .6;
}

.gg-card--in-arrivo span {
    font-style: italic;
}

.gg-osservatori-ultimi {
    margin-top: 3rem;
}

/* ==========================================================================
   Footer (template-parts/footer-gg.php)
   ========================================================================== */
.gg-footer {
    background: #1f2a35;
    color:      #c9d1d8;
    border-top: 4px solid var(--gg5-color-primary, #c0392b);
    font-size:  .95rem;
}

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

.gg-footer a:hover,
.gg-footer a:focus-visible {
    color:                 #f5b7b1;
    text-decoration:       underline;
    text-underline-offset: 3px;
}

.gg-footer a:focus-visible {
    outline:        2px solid #f5b7b1;
    outline-offset: 2px;
}

.gg-footer__main {
    padding: 3.5rem 0 2.5rem;
}

.gg-footer__grid {
    display:               grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap:                   2.5rem;
}

.gg-footer__nome {
    margin:      0 0 .75rem;
    color:       #fff;
    font-size:   1.05rem;
    line-height: 1.4;
}

.gg-footer__nome strong {
    display:   block;
    font-size: 1.25rem;
}

.gg-footer__desc {
    margin:      0 0 1.25rem;
    line-height: 1.6;
}

.gg-footer__titolo {
    margin:         0 0 1rem;
    color:          #fff;
    font-size:      .8rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gg-footer__links,
.gg-footer__contatti,
.gg-footer__social,
.gg-footer__legal {
    list-style: none;
    margin:     0;
    padding:    0;
}

.gg-footer__links li {
    margin-bottom: .55rem;
}

.gg-footer__links a {
    color: #c9d1d8;
}

.gg-footer__contatti li {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    margin-bottom: .8rem;
    line-height:   1.5;
}

.gg-footer__contatti .gg-icon {
    flex-shrink: 0;
    width:       18px;
    height:      18px;
    margin-top:  .15rem;
    color:       #f5b7b1;
}

.gg-footer__contatti span {
    word-break: break-word;
}

.gg-footer__social {
    display: flex;
    gap:     .6rem;
}

.gg-footer__social a {
    display:       grid;
    place-items:   center;
    width:         42px;
    height:        42px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .08);
    color:         #fff;
    transition:    background .18s ease, transform .18s ease;
}

.gg-footer__social a:hover,
.gg-footer__social a:focus-visible {
    background: var(--gg5-color-primary, #c0392b);
    color:      #fff;
    transform:  translateY(-2px);
}

.gg-footer__social .gg-icon {
    width:  20px;
    height: 20px;
}

.gg-footer__bottom {
    padding:    1.1rem 0;
    background: #18212a;
    font-size:  .82rem;
}

.gg-footer__bottom-inner {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             .75rem 1.5rem;
}

.gg-footer__copy {
    margin: 0;
}

.gg-footer__legal {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem 1.25rem;
}

.gg-footer__credits {
    color: #8c98a4;
}

.gg-footer__credits a {
    color: #c9d1d8;
}

@media (max-width: 1024px) {
    .gg-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .gg-footer__main {
        padding: 2.5rem 0 1.5rem;
    }

    .gg-footer__grid {
        grid-template-columns: 1fr;
        gap:                   2rem;
    }

    .gg-footer__bottom-inner {
        flex-direction: column;
        align-items:    flex-start;
    }
}

.gg-badge .gg-icon {
    width:          1em;
    height:         1em;
    vertical-align: -.15em;
}

/* Bottone secondario (es. "Annulla" nella modale di rinnovo): il tema colora
   tutti i <button> al passaggio del mouse e copriva il testo. */
.gg-btn-secondary,
.gg-btn-secondary:hover,
.gg-btn-secondary:focus,
.gg-btn-secondary:active {
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	box-shadow: none;
}
.gg-btn-secondary:hover,
.gg-btn-secondary:focus-visible {
	background: #f3f3f3;
	border-color: #999;
	color: #111;
}

/* Messaggi dell'area soci: stessa famiglia grafica dei toast */
.gg-account-ok,
.gg-login-error {
	border-radius: 12px;
	border-left-width: 5px;
	padding: 0.85rem 1rem;
}