/*
Theme Name: studioindigo
Author: Studio Indigo
Version: 1.0
Text Domain: studioindigo
*/

:root {
	--text: #000000;
	--bg: #fff;
  --brand: #00194A;
  --accent: #00698F;
  
  --surface: #FAFAFA;
  
  --radius-sm: 999px;
  --s-1: 0.8rem;
  --s0: 0.5rem;
  
  --container: 1206px;
  
  --pad-x: 32px;
}


@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


body {
  font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-16);
}


h1, h2 {
  font-weight: 400;
  color: var(--brand);
  font-size: var(--fs-23);
  line-height: 1.5;
  margin: 0 0 1.2rem;
}





/* =========================
   SKIP LINKS
========================= */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-120%);
	padding: var(--s0);
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	z-index: 9999;
	font-size: var(--fs-14);
	line-height: var(--lh-normal);
  margin: var(--s0);
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: 1px solid var(--brand);
	outline-offset: 0;
	background: var(--surface);
}

/* =========================
   HEADER
========================= */

:root {
	--header-home-top: 150px;
	--header-compact-top: 38px;
	--header-nav-top: 38px;
	--header-side-offset: 55px;
	--header-transition: 0.3s ease;
	--header-focus-bg: var(--surface);
	--header-scroll-progress: 0;
}

.siteHeader {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		background-color var(--header-transition),
		box-shadow var(--header-transition);
}

.siteHeader .container {
	position: relative;
}

.siteHeader .row {
	position: relative;
	min-height: calc(var(--space-xl) + var(--space-lg));
	transition: min-height var(--header-transition);
}

.siteHeader--home .row {
	min-height: calc(
		var(--space-lg) + var(--space-md) +
		(1 - var(--header-scroll-progress)) * (var(--space-xl) - var(--space-md))
	);
}

/* =========================
   BRAND / LOGO
========================= */

.siteHeader__brand {
	position: relative;
	padding-top: var(--header-compact-top);
  padding-bottom: 24px;
	transform: translate3d(0, 0, 0);
	transition: transform var(--header-transition);
	will-change: transform;
}

.siteHeader--home .siteHeader__brand {
	transform: translate3d(
		0,
		calc((1 - var(--header-scroll-progress)) * (var(--header-home-top) - var(--header-compact-top))),
		0
	);
}

body:not(.home) .siteHeader__brand {
	padding-top: var(--header-compact-top);
	transform: translate3d(0, 0, 0);
}

.siteHeader__logoLink {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
}

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

@media (min-width: 790px) {
  .siteHeader--home .siteHeader__logoLink img {
    transform: scale(1.7);
    transform-origin: top left;
	transition: transform .5s ease;
  }
  .siteHeader--home.is-scrolled .siteHeader__logoLink img {
    transform: none;
  }
}

.siteHeader__logoLink:focus-visible {
	outline-offset: 10px !important;
	border-radius: 10px !important;
}

.col-logo {
	display: flex;
	align-items: flex-start;
}

/* se vuoi un controllo più preciso sulla larghezza logo */
.siteHeader__brand {
	width: 100%;
	max-width: 12em;
}

/* =========================
   NAV FISSA A DESTRA VIEWPORT
========================= */

.siteHeader__nav {
	position: fixed;
	top: var(--header-nav-top);
	right: var(--header-side-offset);
	z-index: 1001;
}

.siteHeader__menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s0);
	margin: 0;
	padding: 0;
}

.siteHeader__menu li {
	margin: 0;
}

.siteHeader__menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75em;
	padding-inline: var(--s-1);
	font-size: var(--fs-14);
	line-height: 1;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--text);
}

.siteHeader__menu .current-menu-item > a,
.siteHeader__menu .current_page_item > a,
.siteHeader__menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Focus tastiera elegante */
.siteHeader a:focus-visible,
.skip-link:focus-visible {
	outline: 1px solid var(--text);
	outline-offset: 0.12em;
	background: var(--header-focus-bg);
	border-radius: var(--radius-sm);
	opacity: 1;
}

.siteHeader__menu a:hover {
	background: rgba(0, 0, 0, 0.04);
	opacity: 1;
}


.siteHeader__menu .menu-home-icon > a {
	padding-inline: var(--s-1);
	min-width: 2.75em;
  font-size: inherit;
}

.menuIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.menuIcon svg {
	display: block;
}




/* =========================
   STATE SCROLLED
========================= */

.siteHeader.is-scrolled {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

body:not(.home) .siteHeader.is-scrolled .row {
	min-height: calc(var(--space-lg) + var(--space-md));
}

/* =========================
   MAIN OFFSET
========================= */

.home main#main-content {
	padding-top: var(--space-xl);
}

body:not(.home) main#main-content {
	padding-top: var(--space-md);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 790px) {
	:root {
		--header-home-top: 150px;
		--header-compact-top: 80px;
		--header-nav-top: 38px;
	}

	.siteHeader .row {
		min-height: auto;
		transition: none;
	}

	.siteHeader--home .row {
		min-height: auto;
	}

	.col-logo {
		flex: 0 0 100% !important;
	}

	.siteHeader__brand {
		max-width: 10em;
		margin: 0 auto;
	}

	.siteHeader__nav {
		position: fixed;
		top: var(--s1);
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: 100%;
	}

	.siteHeader__menu {
		justify-content: center;
		gap: var(--s-1);
	}

	.home main#main-content,
	body:not(.home) main#main-content {
		padding-top: 40px;
	}
}






/*
Footer
*/
#site-footer {
  background: var(--surface);
  font-size: var(--fs-14);
}
#site-footer a {
  text-decoration: underline;
}
#site-footer a:hover {
  text-decoration: none;
  color: var(--accent);
}
.reviews__link {
  color: var(--brand);
}

#menu-menu-footer,
#menu-menu-footer-legal {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
#menu-menu-footer li,
#menu-menu-footer-legal li {
  position: relative;
}
#menu-menu-footer li:not(:last-child)::after,
#menu-menu-footer-legal li:not(:last-child)::after {
  content: "•";
  right: -16px;
  position: absolute;
}


@media (max-width: 790px) {
  #menu-menu-footer,
  #menu-menu-footer-legal {
    flex-direction: column;
    gap: 0;
  }
  #menu-menu-footer li,
  #menu-menu-footer-legal li {
    margin: 0;
    padding: 5px 0;
  }
  #menu-menu-footer li:not(:last-child)::after,
  #menu-menu-footer-legal li:not(:last-child)::after {
    content: inherit;
  }
  #menu-menu-footer-legal {
    margin-top: 30px;
  }
}






/*
Spacer
*/
:root {
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 40px;
  --space-lg: 70px;
  --space-xl: 110px;
  --space-2xl: 160px;
}

.sec__spacer {
  height: var(--space-md);
}

/* Desktop token */
.sec__spacer[data-space-d="xs"] { height: var(--space-xs); }
.sec__spacer[data-space-d="sm"] { height: var(--space-sm); }
.sec__spacer[data-space-d="md"] { height: var(--space-md); }
.sec__spacer[data-space-d="lg"] { height: var(--space-lg); }
.sec__spacer[data-space-d="xl"] { height: var(--space-xl); }
.sec__spacer[data-space-d="2xl"] { height: var(--space-2xl); }

/* Tablet override */
@media (max-width: 1024px) {
  .sec__spacer[data-space-t="xs"] { height: var(--space-xs); }
  .sec__spacer[data-space-t="sm"] { height: var(--space-sm); }
  .sec__spacer[data-space-t="md"] { height: var(--space-md); }
  .sec__spacer[data-space-t="lg"] { height: var(--space-lg); }
  .sec__spacer[data-space-t="xl"] { height: var(--space-xl); }
  .sec__spacer[data-space-t="2xl"] { height: var(--space-2xl); }
}

/* Mobile override */
@media (max-width: 790px) {
  .sec__spacer[data-space-m="xs"] { height: var(--space-xs); }
  .sec__spacer[data-space-m="sm"] { height: var(--space-sm); }
  .sec__spacer[data-space-m="md"] { height: var(--space-md); }
  .sec__spacer[data-space-m="lg"] { height: var(--space-lg); }
  .sec__spacer[data-space-m="xl"] { height: var(--space-xl); }
  .sec__spacer[data-space-m="2xl"] { height: var(--space-2xl); }
}

.sec__divider hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}





/*
Editor
*/
.sec__editor a {
  text-decoration: underline;
  color: var(--brand);
}
.sec__editor a:hover {
  background: var(--brand);
  text-decoration: none;
  color: var(--surface);
}
.sec__editor p {
  margin: 1rem 0;
}
.sec__editor .bigText p {
  font-size: var(--fs-23);
}

blockquote {
  margin: 1rem 0;
  max-width: 430px;
  color: #656565;
}
blockquote + p {
  font-size: var(--fs-14);
  color: var(--brand);
}

.sec__editor .alignleft {
  margin: 0 0;
}
.sec__editor .dichia__link {
  margin: 1rem 1rem 0 0;
  border-radius: 10px;
  padding: 0;
  display: inline-block;
}
.sec__editor .dichia__link:hover {
  transform: translateY(-5px);
  background: inherit;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}







/* =========================
   GRID LOGHI
========================= */

.logosGrid {
	list-style: none;
	margin: 20px 0;
	padding: 0;

	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 80px;

	align-items: center;
}

.logosSection--ristretto .logosGrid {
	grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 40px;
  margin-top: 80px;
}

.logosGrid__item {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 5em;
}

.logosGrid__item img {
	display: block;
	width: auto;
	height: auto;

	max-width: 100%;
	max-height: 90px;

	object-fit: contain;

	opacity: 0.6;
	filter: grayscale(100%);
	transition: 
		opacity 0.25s ease, 
		filter 0.25s ease, 
		transform 0.25s ease;
}

.logosSection--ristretto .logosGrid__item img {
	max-height: 60px;
	opacity: 0.4;
}

/* Hover leggero (anche se non cliccabili) */
.logosGrid__item:hover img {
	opacity: 1;
	filter: grayscale(0%);
	transform: translateY(-0.08em);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.siteHeader,
	.siteHeader .row,
	.siteHeader__brand,
	.siteHeader__menu a,
	#site-footer a,
	.sec__editor a,
	.sec__editor .dichia__link,
	.logosGrid__item img,
	a {
		transition: none !important;
	}

	.siteHeader__brand,
	.sec__editor .dichia__link:hover,
	.logosGrid__item:hover img {
		transform: none !important;
	}
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet */
@media (max-width: 1024px) {
	.logosGrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
  .logosSection--ristretto .logosGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 790px) {
	.logosSection__introRow {
		margin-bottom: var(--space-md);
	}

	.logosSection__title {
		font-size: var(--fs-22);
	}

	.logosGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
  .logosSection--ristretto .logosGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Scelta editoriale: su mobile nascondiamo l'ultimo logo della griglia. */
  .logosGrid .logosGrid__item:last-child {
    display: none !important;
  }

	.logosGrid__item {
		min-height: 4.5em;
	}

	.logosGrid__item img {
		max-height: 3.5em;
	}
}








/* =========================
   PORTFOLIO SECTION
========================= */

.portfolioSection {
	padding-block: var(--space-lg);
}

/* =========================
   FEATURED
========================= */

.portfolioFeatured {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.85fr);
	gap: var(--space-lg, 2rem);
	align-items: center;
	max-width: 72rem;
	margin-inline: auto;
}

.portfolioFeatured__media {
	min-width: 0;
}

.portfolioFeatured__media a,
.portfolioCard__media a {
	display: block;
	text-decoration: none;
}

.portfolioFeatured__image,
.portfolioCard__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
  border: 1px solid #EAEAEA;
}

.portfolioFeatured__content {
	min-width: 0;
}

/* =========================
   GRID
========================= */

.portfolioGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 386px));
	gap: 24px;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.portfolioGrid__item {
	margin: 0;
}

.portfolioCard {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.portfolioCard__media {
	margin-bottom: var(--space-md, 1rem);
}

.portfolioCard__image {
	aspect-ratio: 4 / 3.5;
	object-fit: cover;
}

.portfolioCard__content {
	display: flex;
	flex-direction: column;
  max-width: 320px;
  margin: 0 auto;
}

/* =========================
   TYPOGRAPHY
========================= */

.portfolioItem__category {
	margin: 0 0 5px;
	font-size: var(--fs-14);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.portfolioItem__title {
	margin: 0;
	line-height: 1.15;
}

.portfolioItem__description {
	margin-top: 16px;
}

.portfolioItem__description p {
	margin: 0;
}

.portfolioItem__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.75em;
	list-style: none;
	padding: 0;
	margin: var(--space-sm, 0.75rem) 0 0;
}

.portfolioItem__tags li {
  margin: 0;
	font-size: var(--fs-12);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.8;
}

.portfolioItem__tags li:not(:last-child)::after {
  content: "•";
  position: relative;
  right: -6px;
}

.portfolioItem__linkWrap {
	margin: var(--space-sm, 0.75rem) 0 0;
}

.portfolioItem__link {
	text-underline-offset: 0.16em;
  text-decoration: underline;
}

.portfolioItem__link:hover,
.portfolioItem__link:focus-visible {
	text-decoration-thickness: 2px;
  color: var(--brand);
}

/* =========================
   ACCESSIBILITY / FOCUS
========================= */

.portfolioFeatured__media a:focus-visible,
.portfolioCard__media a:focus-visible,
.portfolioItem__link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 10px;
	border-radius: 10px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
	.portfolioFeatured {
		grid-template-columns: 1fr;
		max-width: 42rem;
	}
  
  .portfolioFeatured {
    gap: 20px;
  }
  .portfolioGrid {
    gap: 84px;
  }
  .portfolioCard__media {
    margin-bottom: 20px;
  }
  .portfolioSection {
    padding-block: 40px;
  }
}

@media (max-width: 790px) {

	.portfolioSection__intro {
		margin-bottom: var(--space-xl, 2rem);
	}

	.portfolioGrid {
		grid-template-columns: 1fr;
		max-width: 24rem;
		margin-inline: auto;
	}
}




/*
ANIMAZIONI
*/
/* stato iniziale */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
	will-change: opacity, transform;
}

/* stato visibile */
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* variante più soft */
.reveal--soft {
	transform: translateY(16px);
	transition:
		opacity 0.45s ease,
		transform 0.45s ease;
}

/* variante un filo più lenta */
.reveal--slow {
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
}

/* delay opzionali */
.reveal--delay-1 {
	transition-delay: 0.1s;
}

.reveal--delay-2 {
	transition-delay: 0.2s;
}

.reveal--delay-3 {
	transition-delay: 0.3s;
}

/* accessibilità */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal--soft,
	.reveal--slow {
		opacity: 1;
		transform: none;
		transition: none;
	}
}