/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
	/* -- OVERLAP ------------------------------------------------ */
	--hero-overlap-tablet: clamp(2rem, 15vw, 24rem);
	--hero-overlap-desk: clamp(2rem, 24vw, 28rem);
}

/* FONT */
h1, h2, h3 { letter-spacing: var(--ls-title); }
span, p, li, figcaption, a { letter-spacing: var(--ls-body); }
strong.schema-faq-question { letter-spacing: var(--ls-title); }
/* HERO */
.ba-hero{ border-top: 1px solid var(--white); display:grid;	/*min-height:78vh;*/ align-items: stretch; }
.ba-hero__content{ z-index: 2; align-items: flex-start; display: flex; flex-direction: column; }
nav.ba-breadcrumb span a, nav.ba-breadcrumb span { color: var(--sheerWhite); font-size: var(--fs-10);}
.ba-hero__head{ margin-block: auto; }
.ba-eyebrow { margin-bottom: calc(1.5 * var(--space-1)); display: flex; gap: var(--space-1); align-items: center; }
.ba-eyebrow__tag { background-color: var(--ba-cat); text-transform: uppercase; font-size: var(--fs-10); padding-inline: var(--space-1); padding-block: .2em; display: inline-block; }
time.ba-eyebrow__date { color: var(--ba-cat); text-transform: uppercase; font-size: var(--fs-10);}
.ba-hero__title{ display:inline !important; background: var(--blue); -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height:1.1; text-transform: uppercase; font-size: var(--fs-50);}
.ba-byline { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3);}
.ba-byline img { border-radius: 50%; width: clamp(44px, 4vw, 50px); height: clamp(44px, 4vw, 50px); object-fit:cover;}
span.ba-byline__label, a.ba-byline__name { font-size: var(--fs-10);}
a.ba-byline__name { text-transform: uppercase; color: var(--ba-cat);}
a.ba-byline__name:hover, a.ba-byline__name:focus { color: var(--ba-cat); }
.ba-meta, .ba-meta__reading, .ba-meta__updated { display: flex; align-items: center; gap: var(--space-1); }
.ba-meta__item { font-size: var(--fs-10);}
figure.ba-hero__figure { height: 100%; }
.ba-hero__media{ grid-column: 2 / 4; grid-row: 2; z-index: 1; position: relative; }
.ba-hero__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #EB00CB 0%, #5061A2 60%, #1DE18D 115%); mix-blend-mode: lighten; pointer-events: none; z-index: 1; opacity: .9;}
.ba-hero__image{ width:100%; height:100%; object-fit:cover; display:block; }

.site-content { margin-inline: auto; margin-top: var(--space-6); gap: var(--space-6); padding-bottom: var(--space-6);}
div#page, .inside-article { background: var(--black) !important; }
.entry-content > p { font-size: var(--fs-20); line-height: 1.6; }
div#left-sidebar { padding-right: var(--space-4); }
.inside-left-sidebar{ position: sticky; top: var(--space-4); align-self: start; }
nav.ba-toc__index { position: relative; padding-left: var(--space-2); &::before { position: absolute; content: ""; background-color: #171717; height: calc(100% + (var(--space-4) / 2)); width: clamp(3px, 0.4vw, 7px); left: 0; top: 0;}}
p.ba-toc__title { color: var(--ba-cat); font-size: var(--fs-15); margin-bottom: var(--space-1);}
ul.ba-toc__list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--space-4);}
li.ba-toc__item.active { position: relative; &::before{ position: absolute; content: ''; height: calc(100% + (2 * (var(--space-4) / 2))); width: clamp(3px, 0.4vw, 7px); top: calc(-1 * (var(--space-4) / 2)); left: calc(-1 * var(--space-2)); background: linear-gradient(180deg, #EB00CB 0%, #5061A2 50%, #1DE18D 100%); }}
li.ba-toc__item:first-child.active::before{ top: calc(-1 * (var(--space-1) + 1em)); height: calc(100% + var(--space-1) + 1em + var(--space-4) / 2);}
li.ba-toc__item { position: relative; &::after{ position: absolute; content: ""; width: 100%; height: 1px; background-color: var(--white); left: 0; bottom: calc(-1 * var(--space-4) / 2); }}
a.ba-toc__link:hover { color: var(--white); }
a.ba-toc__link { font-size: var(--fs-15); line-height: 1.3; display: block; }
.ba-share { margin-top: var(--space-6); }
.ba-share__head { display: flex; align-items: center; gap: var(--space-1);  margin-bottom: var(--space-2);}
p.ba-share__title { margin: 0; color: var(--ba-cat); text-transform: uppercase; font-size: var(--fs-15); }
svg#share, .ba-share-bottom__link img { width: 1em; height: 1em; }
svg#share { fill: var(--ba-cat); }
.ba-share__list{ display: flex; gap: var(--space-2); }
a.ba-share__link { display: block; line-height: 0; }
.entry-content { & p, & li { font-weight: var(--fw-300);} }
.entry-content { color: var(--white);}
.entry-content a { color: var(--ba-cat); text-underline-offset: 3px; font-weight: var(--fw-700); text-decoration: underline !important; }
.entry-content a:hover { text-decoration-thickness: 2px; color: var(--ba-cat);}
.wp-block-list { margin: var(--space-2); }
p.ba-abstract__text { font-size: var(--fs-25); }
h2.wp-block-heading { font-size: var(--fs-40); }
h3.wp-block-heading { font-size: var(--fs-35); }
h4.wp-block-heading { font-size: var(--fs-30); }
.wp-block-heading { text-transform: uppercase; font-weight: var(--fw-500); }
.wp-block-image, .wp-block-gallery { margin-bottom: var(--space-4); }
.wp-block-image :where(figcaption) { margin-bottom: 0 !important; }
.wp-block-image figcaption, .wp-block-embed figcaption { font-size: var(--fs-10) !important; }
.ba-takeaways { background: var(--blue); padding: var(--space-4); position: relative; margin-bottom: var(--space-4);}
.ba-takeaways::before { content: ''; position: absolute; top: 0; left: 0; width: 5rem; height: 5rem; border-top: 5px solid var(--ba-cat); border-left: 5px solid var(--ba-cat);}
.ba-takeaways::after { content: ''; position: absolute; bottom: 0; right: 0; width: 5rem; height: 5rem; border-bottom: 5px solid var(--ba-cat); border-right: 5px solid var(--ba-cat);}
p.ba-takeaways__title { color: var(--ba-cat); text-transform: uppercase; font-size: var(--fs-15); margin-bottom: var(--space-2);}
.ba-takeaways ul { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ba-takeaways p:not(:last-child) { margin-bottom: var(--space-4); }
.ba-takeaways :last-child { margin-bottom: 0; }
.ba-takeaways ul li:not(:last-child), .ba-takeaways p:not(:last-child):not(.ba-takeaways__title) { position: relative; &::after { position: absolute; content: ""; width: 40%; height: 1px; background-color: var(--white); left: 0; bottom: calc(-1 * (var(--space-4) / 2))}}
.ba-author-box { background: var(--blue); display: flex; padding: var(--space-4); gap: var(--space-4); margin-bottom: var(--space-4); }
p.ba-author-box__eyebrow { text-transform: uppercase; font-size: var(--fs-15); margin-bottom: 0; }
.ba-author-box__media { display: flex; line-height: 0; }
.ba-author-box__media img{ width: clamp(120px, 15vw, 180px); height: clamp(120px, 15vw, 180px); min-width: clamp(120px, 15vw, 180px); border-radius: 50%; object-fit: cover; flex-shrink: 0; aspect-ratio: 1 / 1;}
.ba-author-box__content { display: flex; flex-direction: column; }
p.ba-author-box__name { font-size: var(--fs-25); line-height: 1; color: var(--ba-cat); text-transform: uppercase; margin-bottom: var(--space-1); }
p.ba-author-box__bio { font-size: var(--fs-15); }
a.ba-author-box__cta { background: linear-gradient(90deg, #EB00CB 0%, #5061A2 53.85%, #1DE18D 100%); font-size: var(--fs-25); text-transform: uppercase; line-height: 1; padding: var(--space-1) var(--space-4); margin-top: auto; text-align: center; text-decoration: none !important; }
a.ba-author-box__cta:hover { color: var(--white); }
.ba-share-bottom { background: linear-gradient(90deg, #EB00CB 0%, #5061A2 53.85%, #1DE18D 100%); background-blend-mode: screen; display: flex; align-items: center; padding: var(--space-1) var(--space-2); justify-content: space-between; margin-bottom: var(--space-4); }
.ba-share-bottom__head { display: flex; gap: var(--space-1); align-items: center; }
span.ba-share-bottom__label { font-size: var(--fs-25); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.ba-share-bottom__list { display: flex; gap: var(--space-2); }
a.ba-share-bottom__link { display: block; line-height: 0; }
h2.ba-faq-title { font-size: var(--fs-15); text-transform: uppercase; color: var(--ba-cat); font-weight: 700; margin-bottom: var(--space-2); letter-spacing: var(--ls-eye); }
.schema-faq-answer { font-weight: 300; }
.ba-cta { background: url('/wp-content/uploads/2026/07/backArticolo.webp'); background-size: cover; background-position: bottom; text-align: center; padding: var(--space-4); }
p.ba-cta__title { font-size: var(--fs-30); line-height: 1.2; text-transform: uppercase; font-weight: 700; text-wrap: balance; }
button.ba-cta__button { background: linear-gradient(90deg, #EB00CB 0%, #5061A2 53.85%, #1DE18D 100%); background-blend-mode: screen; font-weight: var(--fw-500); text-transform: uppercase; font-size: var(--fs-25); padding: var(--space-1) var(--space-8); border: none; cursor: pointer; }
button.ba-cta__button:hover, button.ba-cta__button:focus{ background: linear-gradient(90deg, #EB00CB 0%, #5061A2 53.85%, #1DE18D 100%); }
p.ba-author-box__bio { font-size: var(--fs-15); }

@media (width <= 550px){
	
	nav.ba-breadcrumb, .ba-hero__content { padding-inline: 8vw; }
	
	/* CONTENT */	
	.ba-share-bottom { flex-direction: column; gap: var(--space-2); padding-block: var(--space-2);}
}
@media (width >= 551px) and (width <= 766.9px){
	
	nav.ba-breadcrumb, .ba-hero__content { padding-inline: 10vw; }
	span.ba-share-bottom__label {  max-inline-size: 25ch; }
}
@media (width >= 767px) and (width <= 899.9px){
	
	nav.ba-breadcrumb, .ba-hero__content { padding-inline: 8vw; }
}
@media (width <= 899.9px){
	
	/* HERO */
	.ba-hero{ grid-template-columns:1fr; padding-block: var(--space-8); }
	nav.ba-breadcrumb { padding-block: var(--space-8) var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.ba-breadcrumb, .ba-hero__content, .ba-hero__media { grid-column: 1; grid-row: auto; }
	.ba-hero__content { gap: var(--space-6); }
	.ba-hero__media{ order:-1; }
	.ba-hero__image{ height: clamp(220px, 45vw, 340px); }
	figure.ba-hero__figure{ height: auto; }
	.ba-hero__head{ margin-block: 0; }
	.ba-hero__title { text-wrap: balance; }
	
	/* SIDEBAR */	
	.site-content { flex-direction: column; }
	div#left-sidebar { display: none;  }
	
	/* CONTENT */	
	.entry-content { padding-inline: 8vw; }
}
@media (width >= 900px) {
	
	/* HERO */	
 	.ba-hero{ padding-block: var(--space-10); }
	.ba-breadcrumb{ grid-column: 1 / -1; grid-row: 1; padding-bottom: var(--space-1);}
	.ba-hero__content{ grid-column: 1 / 3; grid-row: 2; }


	/* CONTENT */	
	.entry-content { position: relative; &::after { position: absolute; content: ""; height: 100%; width: 1px; background-color: var(--white); top: 0; left: calc(-1 * var(--space-6));}}
	
}
@media (width >= 900px) and (width <= 1400px){
	
	/* HERO */	
 	.ba-hero{ grid-template-columns: 1fr minmax(0, var(--hero-overlap-tablet)) 1fr;}
}
@media (width >= 900px) and (width <= 1400px){
	
	/* HERO */
	.ba-breadcrumb, .ba-hero__content { padding-left: 8vw; }
	.ba-hero__content { min-height: 50vh; }
	
	/* CONTENT */
	.site-content { max-width: 84vw; }
}
@media (width <= 1099.9px){ 
	
	/* CONTENT */
 	.ba-author-box { flex-direction: column; }
}
@media (width >= 1100px){
	
	/* HERO */
 	.ba-hero{ grid-template-columns: 1fr minmax(0, var(--hero-overlap-desk)) 1fr;}
}
@media (width >= 1401px){
	
	/* HERO */
	.ba-breadcrumb, .ba-hero__content{ padding-left: calc((100vw - min(70vw, 1200px)) / 2); }
	
	/* CONTENT */
	.site-content { max-width: min(70vw, 1200px); }
}