@charset "UTF-8";
:root {
  --color-bg: #ffffff;
  --color-text: #0f172a;
  --space-md: 1rem;
  /* Brand primary scale (google-ai-studio/src/index.css) */
  --color-primary: #4b32e6;
  --color-primary-50: #eef1ff;
  --color-primary-100: #dfe4ff;
  --color-primary-200: #c6cdff;
  --color-primary-300: #a3abfe;
  --color-primary-400: #7f80fa;
  --color-primary-500: #6960f4;
  --color-primary-600: #4b32e6;
  --color-primary-700: #4d35cd;
  --color-primary-800: #3f2ea5;
  --color-primary-900: #362c83;
  --color-primary-950: #211a4c;
  /* Layout (React .px-container + max-w-7xl) */
  --bloom-container-max: 80rem;
  --bloom-container-pad-x: 2rem;
  --bloom-radius-2xl: 1rem;
  --bloom-radius-card: 1.5rem;
  --bloom-leading-tight: 1.1;
  --bloom-leading-body: 1.625;
}

@media (min-width: 768px) {
  :root {
    --bloom-container-pad-x: 3rem;
  }
}
.u-container {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

/* React .px-container + max-w-7xl */
.bloom-container {
  width: 100%;
  max-width: var(--bloom-container-max);
  margin-inline: auto;
  padding-left: var(--bloom-container-pad-x);
  padding-right: var(--bloom-container-pad-x);
  box-sizing: border-box;
}

/* React hero frame: inset → full-bleed su scrollY 0..150
 * Nota: WP azzera margin-block-start sul :first-child di .is-layout-flow —
 * serve selettore almeno altrettanto specifico.
 * Perf: il JS scrive un solo valore (--bloom-hero-frame-progress, 0..1) su :root;
 * margin e radius li deriva il CSS. Così ogni frame di scroll fa una singola
 * scrittura di stile invece di N inline style con string building. */
[data-bloom-hero-frame] {
  --bloom-hero-frame-p: var(--bloom-hero-frame-progress, 0);
  --bloom-hero-frame-base-m: 1.5rem;
  --bloom-hero-frame-base-r: 1.5rem;
  --bloom-hero-frame-m: calc(var(--bloom-hero-frame-base-m) * (1 - var(--bloom-hero-frame-p)));
  --bloom-hero-frame-r: calc(var(--bloom-hero-frame-base-r) * (1 - var(--bloom-hero-frame-p)));
  margin: var(--bloom-hero-frame-m);
  border-radius: var(--bloom-hero-frame-r);
  backface-visibility: hidden;
  transform: translateZ(0);
}

:root :where(.is-layout-flow) > [data-bloom-hero-frame],
:root :where(.is-layout-flow) > [data-bloom-hero-frame]:first-child,
.wp-block-post-content > [data-bloom-hero-frame],
.acf-block-component > [data-bloom-hero-frame] {
  margin-block-start: var(--bloom-hero-frame-m);
  margin-block-end: var(--bloom-hero-frame-m);
  margin-inline: var(--bloom-hero-frame-m);
}

@media (max-width: 767px) {
  [data-bloom-hero-frame] {
    --bloom-hero-frame-base-m: 0.5rem;
    --bloom-hero-frame-base-r: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  [data-bloom-hero-frame] {
    --bloom-hero-frame-base-m: 1rem;
    --bloom-hero-frame-base-r: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-bloom-hero-frame] {
    --bloom-hero-frame-base-m: 0px;
    --bloom-hero-frame-base-r: 0px;
  }
}
/* Perf: animazioni decorative in pausa quando la sezione è fuori dal viewport
 * (classe gestita da BloomTheme.initOffscreenAnimations).
 * !important necessario: i blocchi dichiarano `animation` in shorthand, che
 * resetta animation-play-state a running, e i loro CSS sono accodati dopo
 * archi-global — a pari specificità vincerebbero loro. */
.is-anim-paused,
.is-anim-paused * {
  animation-play-state: paused !important;
}

/* Allineato a google-ai-studio/src/index.css
 * Perf: era 200%x200% con filter: blur(80px) in rotazione infinita — una
 * superficie enorme da ri-sfocare a ogni frame, il costo GPU/CPU più alto della
 * pagina. I gradienti sono già morbidi: stop più larghi al posto del blur,
 * superficie ridotta alla diagonale utile, layer promosso una volta sola. */
.aurora-overlay {
  position: absolute;
  top: -22%;
  left: -22%;
  width: 144%;
  height: 144%;
  background: radial-gradient(circle at 30% 30%, rgba(75, 50, 230, 0.34) 0%, rgba(75, 50, 230, 0.14) 32%, transparent 62%), radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.26) 0%, rgba(6, 182, 212, 0.1) 32%, transparent 62%), radial-gradient(circle at 20% 80%, rgba(216, 180, 254, 0.18) 0%, rgba(216, 180, 254, 0.07) 32%, transparent 62%);
  z-index: 1;
  pointer-events: none;
}

/* La rotazione gira solo da desktop: su mobile/tablet l'aurora sta a opacità
 * 0.1–0.3 dietro video e gradiente, il movimento non si legge e costava un
 * repaint continuo anche a hero fuori schermo. */
@media (min-width: 1024px) {
  .aurora-overlay {
    animation: bloom-aurora-rotate 20s linear infinite;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-overlay {
    animation: none;
    will-change: auto;
  }
}
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes bloom-aurora-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bloom-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.infinite-scroll {
  display: flex;
  gap: 3rem;
  animation: bloom-scroll 20s linear infinite;
}

@media (min-width: 768px) {
  .infinite-scroll {
    gap: 3rem;
  }
}
/* Nessun outline di focus (browser / Gutenberg). I form usano box-shadow custom dove serve. */
body a:focus, body a:focus-visible,
.wp-site-blocks a:focus,
.wp-site-blocks a:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body button:focus, body button:focus-visible,
.wp-site-blocks button:focus,
.wp-site-blocks button:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body summary:focus, body summary:focus-visible,
.wp-site-blocks summary:focus,
.wp-site-blocks summary:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body [role=button]:focus, body [role=button]:focus-visible,
.wp-site-blocks [role=button]:focus,
.wp-site-blocks [role=button]:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body [role=link]:focus, body [role=link]:focus-visible,
.wp-site-blocks [role=link]:focus,
.wp-site-blocks [role=link]:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body input:focus, body input:focus-visible,
.wp-site-blocks input:focus,
.wp-site-blocks input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body textarea:focus, body textarea:focus-visible,
.wp-site-blocks textarea:focus,
.wp-site-blocks textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body select:focus, body select:focus-visible,
.wp-site-blocks select:focus,
.wp-site-blocks select:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body .wp-block-button__link:focus, body .wp-block-button__link:focus-visible,
.wp-site-blocks .wp-block-button__link:focus,
.wp-site-blocks .wp-block-button__link:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body .wp-element-button:focus, body .wp-element-button:focus-visible,
.wp-site-blocks .wp-element-button:focus,
.wp-site-blocks .wp-element-button:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* WP/TT5 non forzano border-box: width 100% + padding sui container
 * faceva uscire i contenuti di ~2×pad-x (es. 96px) su tutte le pagine. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "Stack Sans";
  src: url("../fonts/stack-sans/StackSansText-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Stack Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  line-height: var(--bloom-leading-body);
}

/* React (Tailwind preflight): button/input/select/textarea ereditano il font del body
 * invece di usare il default UA (Arial). Senza questo reset i controlli form/bottoni
 * nativi renderizzano in un font diverso dal resto del sito. */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Remove Gutenberg block gap between fixed header block and first hero block */
main.wp-block-group > .wp-block-acf-header-bloom + .wp-block-acf-hero-bloom,
main.wp-block-group > .wp-block-acf-header-bloom + .wp-block-acf-hero-bloom > .acf-block-component {
  margin-block-start: 0 !important;
}

/* Gutenberg block gap between template-part header and main content */
.wp-site-blocks > .wp-block-template-part + .wp-block-group,
.wp-site-blocks > .wp-block-template-part + main.wp-block-group {
  margin-block-start: 0 !important;
}

/* Il header fixed vive nel template-part: non vincolare larghezza/posizione */
.wp-site-blocks > header.wp-block-template-part,
.wp-block-template-part[data-area=header] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 50;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.wp-site-blocks > footer.wp-block-template-part,
.wp-block-template-part[data-area=footer] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Header fixed: top variabile (1.5rem → 2.5rem lg a riposo; 0.5rem → 1rem lg allo scroll) */
:root {
  --bloom-header-top: 1.5rem;
  --bloom-header-height: 3.5rem;
  --bloom-header-offset: calc(var(--bloom-header-top) + var(--bloom-header-height));
  /* React pagine interne: pt-24 md:pt-32 */
  --bloom-page-top-spacing: 6rem;
}

@media (min-width: 768px) {
  :root {
    --bloom-page-top-spacing: 8rem;
    --bloom-header-height: 4rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --bloom-header-top: 2.5rem;
  }
}
section[id] {
  scroll-margin-top: var(--bloom-header-offset);
}

/* Gutenberg: niente padding laterale asimmetrico sul contenuto pagina */
#home-page .entry-content.wp-block-post-content,
#home-page .wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#home-page .wp-block-post-content > .wp-block-acf-contact-bloom,
#home-page .wp-block-post-content > .wp-block-acf-reviews-bloom,
#home-page .wp-block-post-content > .wp-block-acf-certification-bloom,
#home-page .wp-block-post-content > .wp-block-acf-stats-bloom,
#home-page .wp-block-post-content > .bloom-certification,
#home-page .wp-block-post-content > .bloom-stats,
#home-page .wp-block-post-content > .bloom-blog-teaser,
#home-page .wp-block-post-content > .bloom-contact {
  margin-block-start: 0 !important;
}

/* Pagine formazione: spazio sotto header flottante (React pt-24 / md:pt-32) */
main.wp-block-group:has(.wp-block-acf-back-button-bloom),
main.wp-block-group:has(.bloom-back-button),
body:has(.bloom-back-button) main.wp-block-group {
  padding-top: var(--bloom-page-top-spacing) !important;
}

main.wp-block-group:has(.wp-block-acf-back-button-bloom) .entry-content,
main.wp-block-group:has(.wp-block-acf-back-button-bloom) .wp-block-post-content,
body:has(.bloom-back-button) .entry-content,
body:has(.bloom-back-button) .wp-block-post-content {
  padding-top: 0 !important;
}

/* Pagine formazione: niente gap extra tra blocchi ACF */
main.wp-block-group:has(.wp-block-acf-back-button-bloom) .wp-block-post-content > [class*=wp-block-acf-],
main.wp-block-group:has(.bloom-back-button) .wp-block-post-content > [class*=wp-block-acf-] {
  margin-block-start: 0 !important;
}

/*# sourceMappingURL=archi-global.css.map */