/*
Theme Name: BlackBox Academy
Theme URI: https://academy.blackboxgreen.com/
Description: Child theme Genesis per l'area riservata BlackBox Academy. Due gruppi: BB Expert (partner di vendita) e BB Pro (professionisti e installatori). Struttura ispirata a Navigation Pro.
Author: BlackBox Green Srl
Author URI: https://www.blackboxgreen.com/
Version: 1.5.2
Template: genesis
Text Domain: blackbox-academy
License: GPL-2.0-or-later
*/

/* ---------------------------------------------------------------
   1. Token di design (allineati alla landing BlackBox Academy)
   --------------------------------------------------------------- */
:root {
	--bba-navy: #16203d;
	--bba-navy-soft: #23305a;
	--bba-azure: #1f7ac4;
	--bba-accent: #b8712a;
	--bba-sand: #f6f2ea;
	--bba-paper: #ffffff;
	--bba-ink: #1b2233;
	--bba-muted: #5d6577;
	--bba-line: #e3ddd2;
	--bba-radius: 4px;
	--bba-serif: "Lora", Georgia, "Times New Roman", serif;
	--bba-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bba-wrap: 1180px;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--bba-sand);
	color: var(--bba-ink);
	font-family: var(--bba-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.site-title {
	font-family: var(--bba-serif);
	color: var(--bba-navy);
	line-height: 1.2;
	font-weight: 500;
	margin: 0 0 0.6em;
}

h1 {
	font-size: clamp(2rem, 4vw, 3.1rem);
}

h2 {
	font-size: clamp(1.55rem, 2.6vw, 2.2rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--bba-azure);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bba-wrap,
.site-inner,
.site-header > .wrap,
.site-footer > .wrap,
.nav-primary > .wrap {
	max-width: var(--bba-wrap);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* Contenitori più ampi per referenze e moduli tutorial */
.bba-wrap--wide {
	max-width: 1680px;
	padding: 0 32px;
}

.bba-eyebrow {
	font-family: var(--bba-sans);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bba-muted);
	margin-bottom: 12px;
}

.bba-lead {
	font-size: 1.12rem;
	color: var(--bba-muted);
	max-width: 62ch;
}

.screen-reader-text,
.screen-reader-shortcut,
.genesis-skip-link li {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.genesis-skip-link {
	margin: 0;
	padding: 0;
	list-style: none;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-skip-link li:focus-within {
	position: static !important;
	display: block;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background-color: var(--bba-navy);
	color: #ffffff;
	font-size: 0.95rem;
	text-decoration: none;
	z-index: 200;
}


/* ---------------------------------------------------------------
   3. Header + navigazione (Navigation Pro style)
   --------------------------------------------------------------- */
.site-header {
	background-color: var(--bba-paper);
	border-bottom: 1px solid var(--bba-line);
	position: sticky;
	top: 0;
	z-index: 90;
}

.site-header > .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 96px;
	flex-wrap: wrap;
}

.title-area {
	margin: 0;
}

.custom-logo,
.bba-logo {
	max-height: 62px;
	width: auto;
}

.site-title {
	font-size: 1.3rem;
	margin: 0;
}

.site-title a {
	color: var(--bba-navy);
}

.site-description {
	font-size: 0.8rem;
	color: var(--bba-muted);
	margin: 0;
}

.genesis-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.genesis-nav-menu a {
	display: block;
	padding: 10px 14px;
	font-size: 0.92rem;
	color: var(--bba-navy);
	border-radius: var(--bba-radius);
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	background-color: var(--bba-sand);
	text-decoration: none;
}

.genesis-nav-menu .sub-menu {
	display: none;
	position: absolute;
	background: var(--bba-paper);
	border: 1px solid var(--bba-line);
	min-width: 240px;
	padding: 6px;
	list-style: none;
	margin: 0;
	z-index: 95;
}

.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus-within > .sub-menu {
	display: block;
}

.genesis-nav-menu .menu-item {
	position: relative;
}

.bba-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bba-menu-toggle {
	display: none;
}

/* ---------------------------------------------------------------
   4. Bottoni e badge
   --------------------------------------------------------------- */
.bba-btn,
.button,
input[type="submit"],
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--bba-navy);
	border-radius: var(--bba-radius);
	background-color: var(--bba-navy);
	color: #fff;
	font-family: var(--bba-sans);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.bba-btn:hover,
.button:hover,
input[type="submit"]:hover,
button:hover {
	opacity: 0.88;
	text-decoration: none;
	color: #fff;
}

.bba-btn--ghost {
	background-color: transparent;
	color: var(--bba-navy);
}

.bba-btn--ghost:hover {
	background-color: var(--bba-sand);
	color: var(--bba-navy);
}

.bba-btn--google {
	background-color: #fff;
	color: var(--bba-ink);
	border-color: var(--bba-line);
}

.bba-btn--google:hover {
	color: var(--bba-ink);
	background-color: var(--bba-sand);
}

.bba-badge {
	display: inline-block;
	border: 1px solid var(--bba-line);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bba-muted);
	background: #fff;
}

.bba-badge--expert {
	border-color: var(--bba-accent);
	color: var(--bba-accent);
}

.bba-badge--pro {
	border-color: var(--bba-azure);
	color: var(--bba-azure);
}

/* ---------------------------------------------------------------
   5. Hero + sezioni
   --------------------------------------------------------------- */
.bba-hero {
	background: linear-gradient(180deg, #fff 0%, var(--bba-sand) 100%);
	border-bottom: 1px solid var(--bba-line);
	padding: 80px 0 72px;
}

.bba-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

.bba-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.bba-section {
	padding: 72px 0;
	border-bottom: 1px solid var(--bba-line);
	background-color: var(--bba-sand);
}

.bba-section--paper {
	background-color: var(--bba-paper);
}

.bba-section__head {
	max-width: 70ch;
	margin-bottom: 40px;
}

.bba-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bba-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bba-card {
	background: var(--bba-paper);
	border: 1px solid var(--bba-line);
	border-radius: var(--bba-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bba-card__num {
	font-family: var(--bba-serif);
	font-size: 0.9rem;
	color: var(--bba-muted);
}

.bba-card h3 {
	margin: 0;
}

.bba-card__meta {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bba-muted);
}

.bba-card p {
	margin: 0;
	color: var(--bba-muted);
	font-size: 0.97rem;
}

.bba-card__foot {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bba-group-card {
	background: var(--bba-paper);
	border: 1px solid var(--bba-line);
	border-top: 3px solid var(--bba-navy);
	padding: 32px;
}

.bba-group-card--expert {
	border-top-color: var(--bba-accent);
}

.bba-group-card--pro {
	border-top-color: var(--bba-azure);
}

.bba-group-card .bba-badge {
	margin-bottom: 18px;
}

.bba-group-card h3 {
	margin-bottom: 8px;
}

.bba-group-card p {
	margin: 0;
	color: var(--bba-muted);
}

.bba-home-editor-content {
	padding-top: 24px;
	padding-bottom: 56px;
}

.bba-home-cta {
	background: var(--bba-navy);
	color: #fff;
	padding: 72px 0;
	text-align: center;
}

.bba-home-cta .bba-wrap {
	max-width: 760px;
}

.bba-home-cta h2,
.bba-home-cta .bba-eyebrow {
	color: #fff;
}

.bba-home-cta p:not(.bba-eyebrow) {
	color: rgba(255, 255, 255, 0.78);
	margin: 0 auto 28px;
}

.bba-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--bba-navy);
}

.bba-btn--light:hover {
	color: var(--bba-navy);
}

.bba-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.bba-list li {
	padding: 9px 0;
	border-bottom: 1px solid var(--bba-line);
	font-size: 0.97rem;
}

.bba-list li:last-child {
	border-bottom: 0;
}

/* ---------------------------------------------------------------
   6. Area riservata (dashboard + pagine sezione)
   --------------------------------------------------------------- */
.bba-area-head {
	background: var(--bba-navy);
	color: #fff;
	padding: 44px 0;
}

.bba-area-head + .bba-section,
.bba-area-head + .bba-page-content {
	padding-top: 30px;
}

.bba-area-head--image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bba-area-head h1,
.bba-area-head .bba-eyebrow {
	color: #fff;
}

.bba-area-head p {
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 64ch;
}

.bba-file-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bba-line);
	background: var(--bba-paper);
	border-radius: var(--bba-radius);
}

.bba-file-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bba-line);
}

.bba-file-list li:last-child {
	border-bottom: 0;
}

.bba-file-list__name {
	font-weight: 600;
	color: var(--bba-navy);
}

.bba-file-list__meta {
	font-size: 0.82rem;
	color: var(--bba-muted);
}

.bba-faq {
	display: grid;
	gap: 16px;
}

.bba-faq details,
.bba-prose details,
.entry-content details {
	background: var(--bba-paper);
	border: 1px solid var(--bba-line);
	border-radius: 16px;
	margin: 0 0 16px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bba-faq details:hover,
.bba-prose details:hover,
.entry-content details:hover {
	border-color: #cfc7b8;
	box-shadow: 0 7px 24px rgba(22, 32, 61, 0.07);
}

.bba-faq details[open],
.bba-prose details[open],
.entry-content details[open] {
	border-color: var(--bba-azure);
}

.bba-faq summary,
.bba-prose details summary,
.entry-content details summary {
	position: relative;
	cursor: pointer;
	font-weight: 700;
	color: var(--bba-navy);
	list-style: none;
	padding: 20px 58px 20px 24px;
}

.bba-faq summary::-webkit-details-marker,
.bba-prose details summary::-webkit-details-marker,
.entry-content details summary::-webkit-details-marker {
	display: none;
}

.bba-faq summary::after,
.bba-prose details summary::after,
.entry-content details summary::after {
	content: "";
	position: absolute;
	right: 25px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bba-azure);
	border-bottom: 2px solid var(--bba-azure);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.bba-faq details[open] summary::after,
.bba-prose details[open] summary::after,
.entry-content details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.bba-faq details > :not(summary),
.bba-prose details > :not(summary),
.entry-content details > :not(summary) {
	margin-left: 24px;
	margin-right: 24px;
}

.bba-faq details > :last-child,
.bba-prose details > :last-child,
.entry-content details > :last-child {
	margin-bottom: 22px;
}

.bba-faq p {
	color: var(--bba-muted);
}

/* ---------------------------------------------------------------
   7. Login / registrazione (moduli Ultimate Member)
   --------------------------------------------------------------- */
.bba-wrap--narrow {
	max-width: 560px;
}

.bba-card--form {
	background: #fff;
	border: 1px solid var(--bba-line);
	border-radius: var(--bba-radius);
	padding: 32px 28px;
}

.bba-form__alt {
	margin-top: 22px;
	font-size: 0.93rem;
	color: var(--bba-muted);
	text-align: center;
}

.bba-choice {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
}

.bba-choice__item {
	display: block;
	border: 1px solid var(--bba-line);
	border-radius: var(--bba-radius);
	padding: 16px 18px;
	background: #fff;
	text-decoration: none;
	color: var(--bba-ink);
}

.bba-choice__item strong {
	display: block;
	font-family: var(--bba-serif);
	font-size: 1.15rem;
	color: var(--bba-navy);
}

.bba-choice__item span {
	display: block;
	margin-top: 4px;
	font-size: 0.9rem;
	color: var(--bba-muted);
}

.bba-choice__item:hover,
.bba-choice__item.is-active {
	border-color: var(--bba-azure);
	box-shadow: inset 0 0 0 1px var(--bba-azure);
}

/* Allineamento dei moduli Ultimate Member al design dell'Academy. */
.bba-card--form .um,
.bba-card--form .um-form {
	margin: 0 !important;
	max-width: none !important;
}

.bba-card--form .um input[type="text"],
.bba-card--form .um input[type="email"],
.bba-card--form .um input[type="password"],
.bba-card--form .um select,
.bba-card--form .um textarea {
	border: 1px solid var(--bba-line) !important;
	border-radius: var(--bba-radius) !important;
	font-family: var(--bba-sans) !important;
	color: var(--bba-ink) !important;
}

.bba-card--form .um input[type="submit"],
.bba-card--form .um .um-button,
.bba-card--form .um a.um-button {
	background: var(--bba-navy) !important;
	color: var(--bba-paper) !important;
	border-radius: var(--bba-radius) !important;
	font-family: var(--bba-sans) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.bba-card--form .um input[type="submit"]:hover,
.bba-card--form .um .um-button:hover,
.bba-card--form .um a.um-button:hover {
	background: var(--bba-azure) !important;
}

.bba-card--form .um .um-field-label label {
	font-family: var(--bba-sans) !important;
	color: var(--bba-navy) !important;
}

/* Le opzioni del gruppo partono tutte dalla stessa linea verticale. */
.bba-card--form .um .um-field-radio,
.bba-card--form .um .um-field-checkbox {
	position: relative !important;
	display: flex !important;
	align-items: flex-start !important;
	width: 100% !important;
	min-height: 34px !important;
	margin: 0 0 10px !important;
	padding: 0 0 0 48px !important;
	line-height: 1.45 !important;
}

.bba-card--form .um .um-field-radio-state,
.bba-card--form .um .um-field-checkbox-state {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 30px !important;
	margin: 0 !important;
	text-align: left !important;
}

.bba-card--form .um .um-field-radio-option,
.bba-card--form .um .um-field-checkbox-option {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.45 !important;
}

.bba-notice {
	border-left: 3px solid var(--bba-accent);
	background: #fff;
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: 0.93rem;
	color: var(--bba-ink);
}

.bba-notice--error {
	border-left-color: #b3261e;
}

.bba-notice--ok {
	border-left-color: #1f7a4d;
}

/* ---------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------- */
.site-footer {
	background: var(--bba-navy);
	color: rgba(255, 255, 255, 0.75);
	padding: 56px 0 40px;
	font-size: 0.92rem;
}

.site-footer a {
	color: #fff;
}

.bba-footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}

.bba-footer-grid h4 {
	color: #fff;
	font-size: 1rem;
}

/* Widget del piede di pagina (Aspetto → Widget) */
.bba-footer-col .widget + .widget {
	margin-top: 28px;
}

.bba-footer-col .widget-title,
.bba-footer-col h4 {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 12px;
}

.bba-footer-col .widget ul,
.bba-footer-col .widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bba-footer-col .widget li {
	margin-bottom: 8px;
}

.bba-footer-col .widget p,
.bba-footer-col .widget li {
	color: rgba(255, 255, 255, 0.75);
}

.bba-copy .widget {
	margin: 0;
}

.bba-copy .widget p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.82rem;
}

.site-footer .bba-copy {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 20px;
	font-size: 0.82rem;
}

/* ---------------------------------------------------------------
   9. Responsive
   --------------------------------------------------------------- */
@media (max-width: 960px) {
	.bba-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bba-hero__grid,
	.bba-grid--2,
	.bba-footer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.bba-grid {
		grid-template-columns: 1fr;
	}

	.site-header > .wrap {
		min-height: 0;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.bba-hero {
		padding: 48px 0;
	}

	.bba-section {
		padding: 48px 0;
	}

	.bba-card--form {
		padding: 24px 18px;
	}
}

/* Download PDF sotto un elenco di F.A.Q. */
.bba-faq__dl {
	margin: 24px 0 0;
}

/* ---------------------------------------------------------------
   12. Immagine hero della home
   --------------------------------------------------------------- */
.bba-hero__media {
	position: relative;
	margin: 0;
	padding: 16px;
}

.bba-hero__media::before,
.bba-hero__media::after {
	content: "";
	position: absolute;
	width: 92px;
	height: 92px;
	pointer-events: none;
}

.bba-hero__media::before {
	top: 0;
	left: 0;
	border-top: 1px solid var(--bba-accent);
	border-left: 1px solid var(--bba-accent);
}

.bba-hero__media::after {
	right: 0;
	bottom: 0;
	border-right: 1px solid var(--bba-accent);
	border-bottom: 1px solid var(--bba-accent);
}

.bba-hero__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 860px) {
	.bba-hero__media {
		padding: 10px;
		order: -1;
	}

	.bba-hero__media::before,
	.bba-hero__media::after {
		width: 56px;
		height: 56px;
	}
}

/* ---------------------------------------------------------------
   13. Contenuti Gutenberg (pagine come "Alcune Referenze")
   Le copertine e i blocchi con sfondo scuro devono restare leggibili
   sia nel sito sia nell'editor.
   --------------------------------------------------------------- */
.entry-content > *,
.bba-page-content > * {
	max-width: var(--bba-wrap);
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignfull,
.bba-page-content .alignfull {
	max-width: none;
}

.wp-block-cover,
.wp-block-cover-image {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 340px;
	padding: 48px 32px;
	overflow: hidden;
}

.wp-block-cover__inner-container,
.wp-block-cover-image__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bba-wrap);
	margin: 0 auto;
}

.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h1,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h2,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h3,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h4,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container p,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container li,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container a {
	color: #ffffff;
}

.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h1,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h2,
.wp-block-cover:not(.has-text-color) .wp-block-cover__inner-container h3 {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.wp-block-cover .has-background-dim::before,
.wp-block-cover__background {
	background-color: rgba(11, 16, 32, 0.5);
}

.wp-block-group.has-background :where(h1, h2, h3, h4, p, li),
.wp-block-column.has-background :where(h1, h2, h3, h4, p, li) {
	color: inherit;
}

.has-white-color,
.has-white-color :where(h1, h2, h3, h4, p, li) {
	color: #ffffff !important;
}

.wp-block-media-text__content :where(h1, h2, h3, h4) {
	color: inherit;
}

.wp-block-image figcaption {
	color: var(--bba-muted);
	font-size: 0.9rem;
}

/* Contenuto scritto direttamente nelle pagine delle sezioni */
.bba-prose h2,
.bba-prose h3 { margin: 28px 0 8px; }
.bba-prose p { margin: 0 0 14px; max-width: 70ch; }
.bba-prose a { text-decoration: underline; }
.bba-prose .wp-block-buttons { margin: 8px 0 20px; }

/* ---------------------------------------------------------------
   14. Referenze e moduli tutorial
   --------------------------------------------------------------- */
.bba-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 48px;
	align-items: start;
}

.bba-content-layout--single {
	grid-template-columns: minmax(0, 1fr);
}

/* Genesis limita normalmente .site-inner alla larghezza generale del tema.
   Nel modello Referenza il contenuto deve invece sfruttare l'intera pagina. */
.bba-reference-template .site-inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* La larghezza di 1200px comprende contenuto, spazio tra le colonne e dettagli. */
.bba-reference-template .bba-wrap--wide {
	max-width: 1200px;
	padding-left: 24px;
	padding-right: 24px;
}

.bba-reference-template .content,
.bba-reference-template .bba-content-main,
.bba-reference-template .bba-content-main > *,
.bba-reference-template .bba-content-main .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
}

/* Nel modello referenza e nei moduli del tutorial il contenuto
   occupa tutto lo spazio disponibile, senza limiti di larghezza */
.bba-content-main,
.bba-content-aside {
	min-width: 0;
}

.bba-content-main p,
.bba-content-main .bba-lead,
.bba-content-main ul,
.bba-content-main ol {
	max-width: none;
}

.bba-prose.bba-wrap--wide p,
.bba-prose.bba-wrap--wide ul,
.bba-prose.bba-wrap--wide ol {
	max-width: none;
}

.bba-facts {
	margin: 0;
	padding: 24px;
	background: var(--bba-sand);
	border: 1px solid var(--bba-line);
	border-radius: 12px;
}

.bba-facts div + div {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--bba-line);
}

.bba-facts dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bba-muted);
}

.bba-facts dd {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--bba-navy);
}

.bba-tutorial-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.bba-tutorial-meta span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--bba-line);
	border-radius: 999px;
	background: var(--bba-sand);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--bba-navy);
}

/* ---------------------------------------------------------------
   15. Ottimizzazione completa per tablet e smartphone
   --------------------------------------------------------------- */
.bba-prose :where(iframe, video, embed, object),
.entry-content :where(iframe, video, embed, object) {
	max-width: 100%;
}

.bba-prose table,
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
	.site-header > .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 14px 20px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.title-area {
		min-width: 0;
	}

	.nav-primary {
		grid-column: 1 / -1;
		display: none;
		width: 100%;
		padding-top: 4px;
		border-top: 1px solid var(--bba-line);
	}

	.nav-primary.is-open {
		display: block;
	}

	.genesis-nav-menu {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 8px;
		padding-bottom: 2px;
	}

	.genesis-nav-menu a {
		padding: 12px 8px;
		border-bottom: 1px solid var(--bba-line);
		border-radius: 0;
	}

	.genesis-nav-menu .sub-menu {
		position: static;
		display: block;
		border: 0;
		padding: 0 0 0 16px;
	}

	.bba-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 42px;
		padding: 8px 12px;
		border: 1px solid var(--bba-line);
		border-radius: var(--bba-radius);
		background: var(--bba-paper);
		color: var(--bba-navy);
		font-size: 0.88rem;
	}

	.bba-menu-toggle:hover,
	.bba-menu-toggle:focus {
		background: var(--bba-sand);
		color: var(--bba-navy);
		opacity: 1;
	}

	.bba-menu-toggle__icon,
	.bba-menu-toggle__icon::before,
	.bba-menu-toggle__icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		content: "";
		transition: transform 0.18s ease;
	}

	.bba-menu-toggle__icon {
		position: relative;
	}

	.bba-menu-toggle__icon::before {
		position: absolute;
		top: -6px;
	}

	.bba-menu-toggle__icon::after {
		position: absolute;
		top: 6px;
	}

	.bba-menu-toggle[aria-expanded="true"] .bba-menu-toggle__icon {
		background: transparent;
	}

	.bba-menu-toggle[aria-expanded="true"] .bba-menu-toggle__icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.bba-menu-toggle[aria-expanded="true"] .bba-menu-toggle__icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.bba-content-layout {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 32px;
	}
}

@media (max-width: 760px) {
	body {
		font-size: 16px;
		overflow-wrap: anywhere;
	}

	.bba-wrap,
	.site-inner,
	.site-header > .wrap,
	.site-footer > .wrap,
	.nav-primary > .wrap {
		padding-left: 18px;
		padding-right: 18px;
	}

	.custom-logo,
	.bba-logo {
		max-height: 48px;
		max-width: min(220px, 100%);
	}

	.bba-header-actions {
		flex-shrink: 0;
		gap: 6px;
	}

	.bba-header-actions .bba-btn {
		padding: 9px 12px;
		font-size: 0.82rem;
	}

	.genesis-nav-menu a {
		padding: 9px 11px;
		font-size: 0.84rem;
		white-space: nowrap;
	}

	.bba-area-head {
		padding: 30px 0;
	}

	.bba-area-head + .bba-section,
	.bba-area-head + .bba-page-content {
		padding-top: 30px;
	}

	.bba-home-editor-content {
		padding-top: 16px;
	}

	.bba-area-head h1 {
		font-size: 2rem;
	}

	.bba-content-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bba-reference-template .bba-wrap--wide {
		padding-left: 18px;
		padding-right: 18px;
	}

	.bba-content-aside {
		order: -1;
	}

	.bba-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		padding: 20px;
	}

	.bba-facts div + div {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.bba-file-list li,
	.bba-card__foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.wp-block-columns,
	.wp-block-media-text {
		gap: 24px;
	}

	.wp-block-media-text:not(.has-media-on-the-right) {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text .wp-block-media-text__media,
	.wp-block-media-text .wp-block-media-text__content {
		grid-column: 1 !important;
	}

	.wp-block-cover,
	.wp-block-cover-image {
		min-height: 260px;
		padding: 36px 20px;
	}

	.bba-footer-grid {
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.site-header > .wrap {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 10px;
	}

	.bba-menu-toggle {
		width: 42px;
		padding: 8px;
	}

	.bba-menu-toggle > span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bba-header-actions .bba-btn--ghost {
		display: none;
	}

	.bba-hero,
	.bba-section,
	.bba-home-cta {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.bba-hero__actions,
	.wp-block-buttons {
		align-items: stretch;
		flex-direction: column;
	}

	.bba-hero__actions .bba-btn,
	.wp-block-buttons .wp-block-button,
	.wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	.bba-card,
	.bba-group-card,
	.bba-card--form {
		padding: 20px 18px;
	}

	.bba-facts {
		grid-template-columns: 1fr;
	}

	.bba-reference-template .bba-content-layout {
		gap: 22px;
	}

	.bba-reference-template .bba-facts {
		width: 100%;
		padding: 18px;
	}

	.bba-faq summary,
	.bba-prose details summary,
	.entry-content details summary {
		padding: 17px 48px 17px 18px;
	}

	.bba-faq summary::after,
	.bba-prose details summary::after,
	.entry-content details summary::after {
		right: 20px;
	}
}