/*
Theme Name:  BPO Dashboard Theme
Theme URI:   https://dashboard.bpo-ita.com
Author:      BPO
Description: Tema del portale clienti BPO.
Version:     1.0.0
Requires PHP: 8.1
Requires Plugins: bpo-dashboard-clienti
License:     Proprietaria
Text Domain: bpo-dashboard-theme
*/

*, *::before, *::after { box-sizing: border-box; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	clip-path: none;
	border-radius: 100px;
	background: var(--c-blue, #005B8E);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--c-paper, #fff);
	color: var(--c-ink, #0E1A28);
	font-family: var(--f-body, system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--f-display, sans-serif);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.bpo-colonna {
	max-width: var(--colonna, 1240px);
	margin-inline: auto;
	padding-inline: var(--sp-3, 24px);
}

.bpo-barra {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.85);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--c-line, rgba(0,91,142,.14));
}
.bpo-barra__interno {
	display: flex;
	align-items: center;
	gap: var(--sp-3, 24px);
	height: 62px;
	max-width: var(--colonna, 1240px);
	margin-inline: auto;
	padding-inline: var(--sp-3, 24px);
}

.bpo-marchio {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--f-display, sans-serif);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: 18px;
}

.bpo-marchio .hf  { color: var(--c-hf,  #005B8E); }
.bpo-marchio .bpo { color: var(--c-bpo, #59C5C7); }
.bpo-marchio .bpp { color: var(--c-bpp, #00939F); }
.bpo-marchio .sep { color: var(--c-line, #ccc); font-weight: 300; }

.bpo-navigazione { display: flex; gap: var(--sp-3, 24px); margin-left: auto; align-items: center; }
.bpo-navigazione ul { display: flex; gap: var(--sp-3, 24px); list-style: none; margin: 0; padding: 0; align-items: center; }

.bpo-navigazione ul a,
.bpo-barra__area {
	font-size: 14px;
	color: var(--c-ink-soft, #4A5A6E);
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: 0.2s;
}
.bpo-navigazione ul a:hover,
.bpo-navigazione .current-menu-item > a,
.bpo-barra__area:hover,
.bpo-barra__area--attiva {
	color: var(--c-blue, #005B8E);
	border-color: var(--c-turq, #66CBC4);
}

.bpo-barra__area--attiva { font-weight: 600; }

.bpo-accedi {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 100px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: 0.22s var(--ease, ease);
}

.bpo-accedi--entra {
	background: var(--c-blue, #005B8E);
	color: #fff;
}
.bpo-accedi--entra:hover,
.bpo-accedi--entra:focus-visible {
	background: var(--c-blue-deep, #004972);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-1, 0 4px 14px rgba(0, 91, 142, 0.16));
}

.bpo-accedi--esci {
	background: var(--c-paper, #fff);
	border-color: var(--c-line, rgba(0, 91, 142, 0.14));
	color: var(--c-blue, #005B8E);
}
.bpo-accedi--esci:hover,
.bpo-accedi--esci:focus-visible {
	background: var(--c-mist, #EDF1F6);
	border-color: var(--c-turq, #66CBC4);
	color: var(--c-blue, #005B8E);
}

.bpo-accedi:focus-visible {
	outline: 2px solid var(--c-turq, #66CBC4);
	outline-offset: 2px;
}

@media ( max-width: 900px ) {
	.bpo-navigazione ul { display: none; }
}

@media ( max-width: 560px ) {
	.bpo-barra__interno { flex-wrap: wrap; height: auto; min-height: 62px; padding-block: 10px; gap: 6px var(--sp-2, 16px); }
	.bpo-navigazione { gap: var(--sp-2, 16px); }
	.bpo-barra__area { white-space: nowrap; }
}

.bpo-contenuto { flex: 1 0 auto; padding-bottom: var(--sp-6, 96px); }
.bpo-contenuto > .bpo-colonna > h1 { font-size: 38px; font-weight: 600; margin: var(--sp-5, 64px) 0 var(--sp-3, 24px); }

.bpo-pie { flex: none; }
.bpo-pie {
	background: var(--c-ink, #0E1A28);
	color: rgba(255,255,255,.62);
	padding: var(--sp-4, 40px) 0;
	font-size: 13.5px;
}
.bpo-pie__interno {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3, 24px);
	flex-wrap: wrap;
	align-items: center;
	max-width: var(--colonna, 1240px);
	margin-inline: auto;
	padding-inline: var(--sp-3, 24px);
}
.bpo-pie a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.bpo-pie a:hover { color: #fff; }
.bpo-pie strong { color: #fff; font-weight: 600; }

:focus-visible { outline: 2px solid var(--c-blue, #005B8E); outline-offset: 2px; }

@media ( prefers-reduced-motion: reduce ) {
	* { transition: none !important; animation: none !important; }
}