/* ==========================================================================
   Studio Ing. Davide Carboni, PhD — layer di brand
   Brand System v1.0 (14 ago 2026) applicato sopra il tema Miniport.

   Caricato DOPO main.css: sovrascrive palette, tipografia e componenti del
   template senza modificarlo, cosi' il restyling resta reversibile
   rimuovendo questo solo file.

   Riferimento: data/davide/branding/BRAND-GUIDE.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');

:root {
	--dc-navy:     #0D1B2A;
	--dc-blue:     #1B4F9C;
	--dc-blue-mid: #3A7BD5;
	--dc-gray:     #6B7280;
	--dc-light:    #F2F4F7;
	--dc-red:      #E63946;
	--dc-white:    #FFFFFF;

	--dc-font-title: 'Poppins', sans-serif;
	--dc-font-body:  'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Tipografia
   Il tema usa Open Sans per tutto; il brand distingue titoli (Poppins) e
   testo (Inter). Rimuovo i text-shadow del template: schiacciano il testo
   e non appartengono al sistema.
   -------------------------------------------------------------------------- */

body, input, select, textarea {
	font-family: var(--dc-font-body);
	font-weight: 300;
	color: #3d4451;
	letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dc-font-title);
	font-weight: 600;
	color: var(--dc-navy);
	letter-spacing: -0.01em;
	text-shadow: none;
}

/* il nome dentro l'h1 e' in <strong>: se anche l'h1 fosse 700 non si
   distinguerebbe nulla, quindi il titolo resta 600 e lo strong sale */
h1 { font-weight: 600; }
h1 strong, h2 strong, h3 strong { font-weight: 700; color: inherit; }

.wrapper.style2, .wrapper.style3 { text-shadow: none; }

a { color: var(--dc-blue); }
a:hover { color: var(--dc-blue-mid); }

/* --------------------------------------------------------------------------
   2. Nav — marchio a sinistra, voci a destra
   -------------------------------------------------------------------------- */

#nav {
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid rgba(13, 27, 42, 0.08);
	box-shadow: 0 1px 3px rgba(13, 27, 42, 0.06);
}

#nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

/* Marchio nel nav: monogramma + wordmark composto in tipografia.
   Il logo completo, alto 34px, rende il wordmark illeggibile (il file e'
   largo 546px su 286 di altezza): meglio il solo monogramma accanto al
   nome scritto in Poppins. */
#nav .nav-brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-shrink: 0;
	text-decoration: none;
}

#nav .nav-brand img {
	height: 30px;
	width: auto;
	display: block;
}

#nav .nav-brand .nav-wordmark {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 0.86em;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dc-navy);
	white-space: nowrap;
	line-height: 1;
}

#nav .nav-brand .nav-wordmark em {
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dc-blue);
	font-size: 0.85em;
}

#nav .nav-brand:hover .nav-wordmark { color: var(--dc-blue); }

#nav ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav a {
	font-family: var(--dc-font-title);
	font-weight: 500;
	font-size: 0.95em;
	color: var(--dc-navy);
	text-transform: none;
	text-shadow: none;
}

/* Il tema e' nato per un nav scuro: l'hover dipinge un blocco #383838 e la
   voce attiva un blocco #484848, illeggibili sulla barra bianca. Qui hover e
   voce attiva diventano blu, con un filetto sotto invece del riquadro. */
#nav a:hover {
	color: var(--dc-blue) !important;
	background: transparent;
}

#nav a.active, #nav a.active:hover {
	color: var(--dc-blue) !important;
	background: transparent;
	box-shadow: inset 0 -2px 0 0 var(--dc-blue);
	border-radius: 0;
}

/* La voce attiva del tema porta un triangolino disegnato con i border di uno
   pseudo-elemento: qui non serve e, ricolorato, diventerebbe un quadrato. */
#nav a.active:before { display: none; }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.wrapper.style1 { background-color: var(--dc-white); }

#top h1 {
	font-size: 2.6em;
	line-height: 1.2;
	margin-bottom: 0.4em;
}

/* Ritratto circolare: il pack ha una versione gia' ritagliata, ma farlo in
   CSS lascia l'immagine quadrata riusabile e adatta il bordo al fondo. */
.dc-portrait img {
	border-radius: 50%;
	border: 6px solid var(--dc-light);
	box-shadow: 0 6px 24px rgba(13, 27, 42, 0.12);
}

/* Claim di posizionamento sotto il nome */
.dc-claim {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 1.02em;
	line-height: 1.5;
	color: var(--dc-blue);
	letter-spacing: 0.01em;
	margin: 0 0 1.2em 0;
	padding-left: 0.9em;
	border-left: 3px solid var(--dc-blue);
	text-align: left;
}

.dc-lead {
	font-size: 1.06em;
	line-height: 1.75;
	color: #3d4451;
	text-align: left;
}

/* Riga certificazioni: badge + dizioni */
.dc-creds {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1.6em 0;
	padding: 1em 1.2em;
	background: var(--dc-light);
	border-radius: 8px;
	border-left: 3px solid var(--dc-blue);
	text-align: left;
}

.dc-creds img {
	height: 62px;
	width: auto;
	flex-shrink: 0;
}

.dc-creds .dc-creds-text {
	font-size: 0.92em;
	line-height: 1.55;
	color: #3d4451;
}

.dc-creds .dc-creds-text strong {
	font-family: var(--dc-font-title);
	font-weight: 600;
	color: var(--dc-navy);
}

/* stato di una qualifica non ancora perfezionata */
.dc-pending {
	display: inline-block;
	font-size: 0.82em;
	color: var(--dc-gray);
	font-style: normal;
}

/* Qualifica sotto il nome: "Information Engineer" */
.dc-role {
	font-family: var(--dc-font-title);
	font-weight: 400;
	font-size: 1.05em;
	color: var(--dc-gray);
	letter-spacing: 0.02em;
	margin: -0.3em 0 0.9em 0;
	text-align: left;
}

/* Posizionamento in evidenza: "Digital Risk, Technology & Governance" */
.dc-position {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 1.5em;
	line-height: 1.3;
	color: var(--dc-navy);
	margin: 0 0 0.9em 0;
	text-align: left;
}

/* I cinque ambiti di rischio, come sequenza di pastiglie */
.dc-pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1.5em 0 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.dc-pillars li {
	font-family: var(--dc-font-title);
	font-weight: 500;
	font-size: 0.82em;
	letter-spacing: 0.01em;
	color: var(--dc-blue);
	background: rgba(27, 79, 156, 0.07);
	box-shadow: inset 0 0 0 1px rgba(27, 79, 156, 0.18);
	border-radius: 999px;
	padding: 0.45em 1em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3bis. Blocchi di testo discorsivo (manifesto, prospettiva integrata)
   -------------------------------------------------------------------------- */

.dc-prose {
	max-width: 46em;
	margin: 0 auto;
	text-align: left;
	font-size: 1.02em;
	line-height: 1.78;
}

.dc-prose p { margin-bottom: 1.1em; }

.dc-prose p:last-child { margin-bottom: 0; }

/* La frase-chiave isolata: "Il rischio non appartiene a una singola funzione." */
.dc-statement {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 1.22em;
	line-height: 1.45;
	color: var(--dc-navy);
	margin: 0 0 1.4em 0;
}

/* La catena obiettivi -> decisione: si legge come un percorso, e su schermi
   stretti va a capo invece di sfondare la riga */
.dc-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45em 0.7em;
	margin: 1.6em 0;
	padding: 1.2em 1.4em;
	background: var(--dc-light);
	border-left: 3px solid var(--dc-blue);
	border-radius: 8px;
	font-family: var(--dc-font-title);
	font-weight: 500;
	font-size: 0.92em;
	line-height: 1.4;
}

.dc-chain span { color: var(--dc-navy); }

.dc-chain i {
	font-style: normal;
	color: var(--dc-blue-mid);
	font-weight: 600;
}

/* variante scura, per la catena dentro una sezione navy */
.wrapper.style4 .dc-chain {
	background: rgba(255, 255, 255, 0.05);
	border-left-color: var(--dc-blue-mid);
}

.wrapper.style4 .dc-chain span { color: rgba(255, 255, 255, 0.9); }

/* --------------------------------------------------------------------------
   3ter. Card delle aree di rischio (home) e blocchi in colonna
   -------------------------------------------------------------------------- */

/* Card cliccabile per intero, con la freccia che si sposta al passaggio */
.dc-area {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.9em 1.7em 1.6em 1.7em;
	background: var(--dc-white);
	border: 1px solid rgba(13, 27, 42, 0.07);
	border-top: 3px solid var(--dc-blue);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(13, 27, 42, 0.07), 0 8px 22px rgba(13, 27, 42, 0.05);
	text-align: left;
	text-decoration: none;
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.dc-area:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(13, 27, 42, 0.1), 0 14px 30px rgba(13, 27, 42, 0.1);
}

.dc-area h3 {
	font-size: 1.12em;
	margin: 0 0 0.5em 0;
	line-height: 1.3;
}

.dc-area p {
	font-size: 0.93em;
	line-height: 1.65;
	color: #4b515e;
	margin: 0 0 1.2em 0;
	flex-grow: 1;
}

.dc-area .dc-more {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 0.85em;
	color: var(--dc-blue);
	letter-spacing: 0.01em;
}

.dc-area .dc-more:after {
	content: '\2192';
	display: inline-block;
	margin-left: 0.4em;
	transition: transform .2s ease-in-out;
}

.dc-area:hover .dc-more:after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   3quater. Elenchi di attivita' su due colonne
   -------------------------------------------------------------------------- */

.dc-list {
	columns: 2;
	column-gap: 2.6em;
	margin: 1.2em 0 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.dc-list li {
	position: relative;
	padding-left: 1.1em;
	margin-bottom: 0.55em;
	font-size: 0.95em;
	line-height: 1.55;
	break-inside: avoid;
}

.dc-list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dc-blue-mid);
}

/* --------------------------------------------------------------------------
   3quinquies. Sezione di un'area, nella pagina di dettaglio
   -------------------------------------------------------------------------- */

.dc-section {
	max-width: 52em;
	margin: 0 auto 3.4em auto;
	padding-bottom: 3.4em;
	border-bottom: 1px solid rgba(13, 27, 42, 0.09);
	text-align: left;
	/* la nav e' fissa: senza questo l'ancora finisce sotto la barra */
	scroll-margin-top: 5em;
}

.dc-section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dc-section > h2 {
	font-size: 1.6em;
	margin-bottom: 0.5em;
}

.dc-section > h3 {
	font-size: 1.15em;
	margin: 2em 0 0.4em 0;
}

.dc-section p {
	font-size: 1em;
	line-height: 1.75;
	margin-bottom: 1em;
}

/* la chiusa in corsivo che spiega l'obiettivo dell'area */
.dc-aim {
	margin-top: 1.5em;
	padding: 1em 1.3em;
	background: var(--dc-light);
	border-radius: 8px;
	font-size: 0.97em;
	line-height: 1.7;
	color: #3d4451;
}

.dc-aim strong { color: var(--dc-navy); font-weight: 600; }

/* etichetta di una lista di ambiti: NIS2 · AI Act · GDPR ... */
.dc-tags {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 1.02em;
	color: var(--dc-blue);
	margin: 1.2em 0;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3sexies. I cinque passi, dal rischio alla decisione
   -------------------------------------------------------------------------- */

.dc-steps {
	counter-reset: dcstep;
	max-width: 46em;
	margin: 2em auto 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}

.dc-steps li {
	counter-increment: dcstep;
	position: relative;
	padding: 0 0 1.7em 3.6em;
	border-left: 2px solid rgba(27, 79, 156, 0.18);
	margin-left: 1.15em;
}

.dc-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.dc-steps li:before {
	content: counter(dcstep);
	position: absolute;
	left: -1.16em;
	top: -0.15em;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: var(--dc-blue);
	color: var(--dc-white);
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 0.92em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dc-steps h3 {
	font-size: 1.08em;
	margin: 0 0 0.3em 0;
}

.dc-steps p {
	font-size: 0.96em;
	line-height: 1.65;
	margin: 0;
	color: #4b515e;
}

/* --------------------------------------------------------------------------
   3septies. Griglia di voci brevi (specializzazioni, modalita' d'intervento)
   -------------------------------------------------------------------------- */

.dc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	/* il tema imposta un align-items proprio sui discendenti di .container:
	   senza stretch esplicito i box della stessa riga restano di altezze diverse */
	align-items: stretch;
	gap: 1.4em;
	margin-top: 2em;
	text-align: left;
}

.dc-grid .dc-item {
	padding: 1.5em 1.6em;
	background: var(--dc-white);
	border: 1px solid rgba(13, 27, 42, 0.07);
	border-radius: 10px;
}

.wrapper.style2 .dc-grid .dc-item { background: var(--dc-white); }

.dc-grid .dc-item h3 {
	font-size: 1.04em;
	margin: 0 0 0.45em 0;
	padding-left: 0.7em;
	border-left: 3px solid var(--dc-blue);
	line-height: 1.35;
}

.dc-grid .dc-item p {
	font-size: 0.93em;
	line-height: 1.65;
	color: #4b515e;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3octies. Intestazione delle pagine interne
   -------------------------------------------------------------------------- */

.dc-page-head {
	background: var(--dc-navy);
	padding: 4.2em 0 3.4em 0;
	text-align: center;
}

.dc-page-head h1 {
	color: var(--dc-white);
	font-size: 2.1em;
	margin-bottom: 0.4em;
}

.dc-page-head p {
	color: rgba(255, 255, 255, 0.68);
	max-width: 40em;
	margin: 0 auto;
	font-size: 1.04em;
	line-height: 1.7;
}

.dc-page-head .dc-eyebrow {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--dc-blue-mid);
	display: block;
	margin-bottom: 0.9em;
}

/* indice delle sezioni, in cima alle pagine di dettaglio */
.dc-toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
	margin: 2em auto 0 auto;
	padding: 0;
	list-style: none;
}

.dc-toc li a {
	display: block;
	font-family: var(--dc-font-title);
	font-weight: 500;
	font-size: 0.83em;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	text-decoration: none;
	transition: background-color .18s ease-in-out;
}

.dc-toc li a:hover {
	background: var(--dc-blue);
	color: var(--dc-white);
	box-shadow: inset 0 0 0 1px var(--dc-blue-mid);
}

/* --------------------------------------------------------------------------
   3nonies. Fascia di richiamo fra sezioni
   -------------------------------------------------------------------------- */

.dc-cta {
	text-align: center;
	padding: 3em 0;
}

.dc-cta h2 { font-size: 1.5em; margin-bottom: 0.5em; }

.dc-cta p {
	max-width: 38em;
	margin: 0 auto 1.6em auto;
	color: var(--dc-gray);
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. Bottoni — piatti, senza i gradienti e le ombre inset del template
   -------------------------------------------------------------------------- */

input[type="button"], input[type="submit"], input[type="reset"],
button, .button {
	background-image: none;
	background-color: var(--dc-blue);
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.01em;
	border-radius: 6px;
	text-shadow: none;
	box-shadow: none;
	padding: 0.85em 1.9em;
	transition: background-color .18s ease-in-out, transform .18s ease-in-out;
}

input[type="button"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, button:hover, .button:hover {
	background-color: var(--dc-blue-mid);
}

input[type="button"]:active, input[type="submit"]:active,
input[type="reset"]:active, button:active, .button:active {
	background-color: var(--dc-navy);
	top: 0;
	transform: translateY(1px);
}

.button.large { font-size: 1.15em; letter-spacing: 0; padding: 1em 2.2em; }
.button.small { font-size: 0.85em; padding: 0.6em 1.3em; }

/* variante in filo, per i link secondari dentro le card */
.button.alt {
	background-color: transparent;
	color: var(--dc-blue) !important;
	box-shadow: inset 0 0 0 1.5px var(--dc-blue);
	text-shadow: none;
}

.button.alt:hover {
	background-color: var(--dc-blue);
	color: var(--dc-white) !important;
	box-shadow: inset 0 0 0 1.5px var(--dc-blue);
}

/* --------------------------------------------------------------------------
   5. Sezione Work e card
   -------------------------------------------------------------------------- */

.wrapper.style2 { background-color: var(--dc-light); }

.box {
	background: var(--dc-white);
	box-shadow: 0 1px 3px rgba(13, 27, 42, 0.08), 0 8px 24px rgba(13, 27, 42, 0.06);
	border: 1px solid rgba(13, 27, 42, 0.06);
	border-radius: 10px;
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.box:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(13, 27, 42, 0.1), 0 14px 32px rgba(13, 27, 42, 0.1);
}

.box.style1 { padding: 2.4em 1.8em 2.2em 1.8em; }

.box.style1 h3 {
	font-size: 1.22em;
	margin-bottom: 0.45em;
}

/* filetto blu sotto il titolo della card */
.box.style1 h3:after {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	margin: 0.7em auto 0 auto;
	background: var(--dc-blue);
	border-radius: 2px;
}

.box.style1 p {
	font-size: 0.94em;
	line-height: 1.65;
	color: #4b515e;
}

/* contenitore del logo nelle card (era in uno <style> inline in index.html) */
.card-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 76px;
	margin-bottom: 1.2em;
}

.card-logo-wrap img {
	max-height: 76px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   6. Fascia clienti
   -------------------------------------------------------------------------- */

.dc-clients {
	background: var(--dc-white);
	padding: 3.5em 0 1em 0;
}

.dc-clients h2 { font-size: 1.7em; }

.dc-clients p { color: var(--dc-gray); }

/* Un solo logo (Centro Alti Studi Difesa) ha una didascalia accanto: nel box
   da 64px il testo va a capo tre volte e sfora. Gli do' spazio proprio
   invece di stringere tutti gli altri. */
.logo-container:has(span) {
	width: auto;
	min-width: 150px;
	gap: 8px;
}

.logo-container span {
	font-size: 0.72em;
	line-height: 1.25;
	color: var(--dc-gray);
	text-align: left;
	max-width: 96px;
}

/* --------------------------------------------------------------------------
   7. Contatti — il template rende style4 grigio antracite: qui diventa navy
   -------------------------------------------------------------------------- */

.wrapper.style4 {
	background-color: var(--dc-navy);
	color: rgba(255, 255, 255, 0.72);
	text-shadow: none;
}

.wrapper.style4 h1, .wrapper.style4 h2, .wrapper.style4 h3,
.wrapper.style4 h4, .wrapper.style4 h5, .wrapper.style4 h6 {
	color: var(--dc-white);
}

.wrapper.style4 a { color: var(--dc-blue-mid); }
.wrapper.style4 a:hover { color: var(--dc-white); }

.wrapper.style4 hr { border-top-color: rgba(255, 255, 255, 0.12); }

/* marchio in reverse nella sezione scura */
.dc-contact-brand {
	max-width: 200px;
	margin: 0 auto 1.8em auto;
	display: block;
}

/* recapiti diretti al posto del vecchio form mailto */
.dc-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em 0;
	text-align: center;
}

.dc-contact-list li {
	padding: 0.35em 0;
	font-size: 1.02em;
}

.dc-contact-list .dc-label {
	font-family: var(--dc-font-title);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 0.1em;
}

/* Icone social.
   Il tema disegna l'icona in un :before con fondo #444 e glifo #2E2E2E:
   scuro su scuro, praticamente invisibile sul navy. Qui il :before diventa
   una pastiglia in filo con il glifo bianco, e si riempie di blu al passaggio. */
/* il tema colora l'<a> col colore del social (.fa-twitter azzurro,
   .fa-linkedin-in blu...): con la pastiglia semitrasparente sopra si
   vedrebbero tre colori diversi, quindi azzero il fondo sottostante */
ul.social li a {
	width: 44px;
	height: 44px;
	background-color: transparent !important;
}

ul.social li a:before,
.wrapper.style4 ul.social li a:before {
	background-image: none;
	background-color: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: none;
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 22px;
	border-radius: 8px;
	transition: background-color .18s ease-in-out, box-shadow .18s ease-in-out;
}

ul.social li a:hover:before,
.wrapper.style4 ul.social li a:hover:before {
	background-color: var(--dc-blue);
	box-shadow: inset 0 0 0 1px var(--dc-blue-mid);
	color: var(--dc-white) !important;
}

/* il tema alza l'icona al hover: lo lascio, ma senza lo scatto di 1px */
ul.social li a:hover { top: -2px; }

#copyright li {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.82em;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. Tabella dei talk (events.html)
   Era in uno <style> inline nella pagina: spostato qui perche' l'inline
   vinceva su questo layer e i colori restavano quelli del template.
   Su mobile la tabella diventa una lista di card, con l'intestazione di
   colonna ripetuta da data-label (lo imposta script.js).
   -------------------------------------------------------------------------- */

.talks-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.talks-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.5em;
	background: var(--dc-white);
}

.talks-table th, .talks-table td {
	padding: 11px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(13, 27, 42, 0.09);
	vertical-align: top;
	color: #3d4451;
}

.talks-table thead th {
	font-family: var(--dc-font-title);
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dc-white);
	background: var(--dc-navy);
	border-bottom: 0;
}

.talks-table tbody td { font-size: 0.93em; }

.talks-table tbody tr:hover { background-color: var(--dc-light); }

.talks-table td a {
	color: var(--dc-blue);
	font-weight: 400;
}

.talks-table td a:hover { color: var(--dc-blue-mid); }

@media screen and (max-width: 736px) {

	.talks-table thead { display: none; }

	.talks-table, .talks-table tbody, .talks-table tr, .talks-table td {
		display: block;
		width: 100%;
	}

	.talks-table tr {
		border: 1px solid rgba(13, 27, 42, 0.1);
		border-left: 3px solid var(--dc-blue);
		border-radius: 8px;
		margin-bottom: 1em;
		padding: 0.5em 0;
		background: var(--dc-white);
	}

	.talks-table td {
		border-bottom: none;
		padding: 6px 14px;
	}

	.talks-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-family: var(--dc-font-title);
		font-weight: 600;
		font-size: 0.76em;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--dc-gray);
		display: block;
		margin-bottom: 2px;
	}

	.talks-table td:empty { display: none; }

}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 736px) {

	#top h1 { font-size: 2em; }

	/* Il tema tiene il nav a `position: fixed` con `height: 3.5em`, ridotta a
	   44px su mobile. Con il marchio piu' cinque voci il contenuto va a capo,
	   esce dallo sfondo bianco e finisce sopra la sezione sottostante: sul
	   navy delle pagine interne il testo diventa invisibile. Quindi altezza
	   automatica, e il body compensa l'ingombro della barra su due righe. */
	#nav {
		height: auto;
		line-height: 1.5;
		padding: 0.5em 0;
	}

	body { padding-top: 5.2em; }

	#nav .nav-brand img { height: 24px; }

	#nav .nav-wordmark { font-size: 0.78em; }

	#nav a {
		height: auto;
		line-height: 2;
		padding: 0 0.55em;
		font-size: 0.88em;
	}

	#nav .container {
		flex-direction: column;
		gap: 0.3em;
		justify-content: center;
	}

	#nav ul { flex-wrap: wrap; justify-content: center; }

	.dc-claim, .dc-lead { text-align: center; }

	.dc-claim {
		border-left: 0;
		border-top: 3px solid var(--dc-blue);
		padding-left: 0;
		padding-top: 0.8em;
	}

	.dc-creds { flex-direction: column; text-align: center; }

	.dc-creds .dc-creds-text { text-align: center; }

	.box { height: auto; }

	.dc-role, .dc-position { text-align: center; }

	.dc-position { font-size: 1.28em; }

	.dc-pillars { justify-content: center; }

	/* le pastiglie hanno white-space: nowrap per non spezzare "Project &
	   Product Risk" a meta': su schermi molto stretti serve concederglielo */
	.dc-pillars li { white-space: normal; }

	/* due colonne su 390px renderebbero righe di poche parole */
	.dc-list { columns: 1; }

	.dc-steps li { padding-left: 3.2em; }

	.dc-section { padding-bottom: 2.4em; margin-bottom: 2.4em; }

	.dc-page-head { padding: 3em 0 2.4em 0; }

	.dc-page-head h1 { font-size: 1.65em; }

	.dc-chain { font-size: 0.86em; padding: 1em; }

}