/* montserrat-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/montserrat-v31-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('fonts/montserrat-v31-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/montserrat-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/montserrat-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/montserrat-v31-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/montserrat-v31-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/montserrat-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/montserrat-v31-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/montserrat-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* --- TEMA BASE (LIGHT) --- */
:root {
    /* Font principale */
    --bs-body-font-family: 'Montserrat', Helvetica, system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 1.00rem; 
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.2;

    /* Brand Identity Colors */
    --brand-primary: #0e1f53;
    --brand-secondary: #333333;
    --brand-accent: #FF6600;
    --brand-electric: #044ef5;
    --brand-featured: #0038A8;

    /* Material 3 Core Tokens (Light) - Dai tuoi dati */
    --md-sys-color-primary: rgb(77, 92, 146);
    --md-sys-color-on-primary: rgb(255, 255, 255);
    --md-sys-color-primary-container: rgb(220, 225, 255);
    --md-sys-color-on-primary-container: rgb(53, 68, 121);
    --md-sys-color-secondary: rgb(89, 93, 114);
    --md-sys-color-on-secondary: rgb(255, 255, 255);
    --md-sys-color-secondary-container: rgb(222, 225, 249);
    --md-sys-color-on-secondary-container: rgb(66, 70, 89);
    --md-sys-color-tertiary: rgb(117, 84, 111);
    --md-sys-color-on-tertiary: rgb(255, 255, 255);
    --md-sys-color-tertiary-container: rgb(255, 215, 245);
    --md-sys-color-on-tertiary-container: rgb(91, 61, 87);
    --md-sys-color-error: rgb(186, 26, 26);
    --md-sys-color-on-error: rgb(255, 255, 255);
    --md-sys-color-error-container: rgb(255, 218, 214);
    --md-sys-color-on-error-container: rgb(147, 0, 10);
    --md-sys-color-surface: rgb(250, 248, 255);
    --md-sys-color-on-surface: rgb(26, 27, 33);
    --md-sys-color-outline: rgb(118, 118, 128);
    --md-sys-color-inverse-surface: rgb(47, 48, 54);
    --md-sys-color-inverse-on-surface: rgb(241, 240, 247);
    --md-sys-color-inverse-primary: rgb(182, 196, 255);
    --md-sys-color-surface-dim: rgb(218, 217, 224);
    --md-sys-color-surface-container-highest: rgb(227, 225, 233);

    /* Mapping Bootstrap Core */
    --bs-primary: var(--md-sys-color-primary);
    --bs-primary-rgb: 77, 92, 146;
    --bs-secondary: var(--md-sys-color-secondary);
    --bs-secondary-container: var(--md-sys-color-secondary-container);
    --bs-on-secondary-container: var(--md-sys-color-on-secondary-container);
    --bs-tertiary: var(--md-sys-color-tertiary);
    --bs-danger: var(--md-sys-color-error);
    --bs-danger-rgb: 186, 26, 26;
    
    /*--bs-body-bg: var(--md-sys-color-surface);*/
    --bs-body-bg: var(--md-sys-color-on-secondary);
    --bs-body-color: var(--md-sys-color-on-surface);
    --bs-emphasis-color: var(--md-sys-color-on-surface);
    --bs-border-color: var(--md-sys-color-outline);
    --bs-focus-ring-color: rgba(77, 92, 146, 0.25);

    /* Variabili "On" per i bottoni */
    --bs-on-primary: var(--md-sys-color-on-primary);
    --bs-on-secondary: var(--md-sys-color-on-secondary);
    --bs-on-danger: var(--md-sys-color-on-error);
}

/* --- VARIANTE: MEDIUM CONTRAST --- */
.medium-contrast {
    --md-sys-color-primary: rgb(36, 51, 103);
    --md-sys-color-secondary: rgb(49, 53, 72);
    --md-sys-color-on-surface: rgb(16, 17, 22);
    --md-sys-color-outline: rgb(81, 82, 91);
    --bs-body-font-weight: 500;
}

/* --- VARIANTE: HIGH CONTRAST --- */
.high-contrast {
    --md-sys-color-primary: rgb(25, 40, 92);
    --md-sys-color-secondary: rgb(39, 43, 61);
    --md-sys-color-on-surface: rgb(0, 0, 0);
    --md-sys-color-outline: rgb(42, 44, 52);
    --bs-border-width: 2px;
    --bs-body-font-weight: 600;
}

/* --- FIX COMPONENTI BOOTSTRAP --- */

.navbar {
    --bs-navbar-color: var(--md-sys-color-on-surface);
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-disabled-color: rgba(26, 27, 33, 0.38);
}

.navbar-nav .nav-link { color: var(--bs-navbar-color) !important; }
.navbar-nav .nav-link:hover { color: var(--bs-navbar-hover-color) !important; }
.navbar-nav .nav-link.active { color: var(--bs-navbar-active-color) !important; }

.btn-cta-primary{
  --bs-btn-color: var(--bs-on-primary);
  --bs-btn-hover-color: var(--bs-on-primary);
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent); 
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent), black 10%);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}

.text-gradient-blue {
    /* Creiamo il gradiente lineare da sinistra a destra */
    background: linear-gradient(90deg, var(--brand-electric) 0%, var(--brand-featured) 100%);
    
    /* Applichiamo il gradiente al testo */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
        
    display: inline-block; /* Necessario per alcuni browser per calcolare correttamente il gradiente */
}

.bg-brand-featured{
  background-color: var(--brand-featured);
}

.btn-primary {    
    --bs-btn-color: var(--bs-on-primary);
    --bs-btn-hover-color: var(--bs-on-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary); 
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), black 10%);
}

.btn-secondary {
    --bs-btn-color: var(--bs-on-secondary);
    --bs-btn-hover-color: var(--bs-on-secondary);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary); 
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary), black 10%);
}

p.hero-subtitle{
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
}

div.hero-context{
  background-image: url('img/automazione-software.png');  
  /* 1. Posizionamento nell'angolo superiore sinistro */
  background-position: top left; 
  background-repeat: no-repeat;

  /* 2. Modulazione grandezza: 
  - 'auto' mantiene la proporzione originale.
  - Il primo valore è la larghezza (es. 50% o 300px). 
  - Il secondo valore 'auto' garantisce che non si deformi. */
  background-size: 75% auto; 

  /* 3. L'altezza della colonna rimane indipendente */
  min-height: 480px;
}

.text-brand-primary{
  color: var(--brand-primary);
}
.text-brand-secondary{
  color: var(--brand-secondary);
}
.text-brand-accent{
  color: var(--brand-accent);
}
.navbar-nav .text-brand-accent{
  color: var(--brand-accent) !important;
}
.text-brand-featured{
  color: var(--brand-featured);
}
.text-brand-electric{
  color: var(--brand-electric);
}

.bg-brand-electric{
  background-color: var(--brand-electric);
}
.bg-brand-featured{
  background-color: var(--brand-featured);
}

.btn-danger {
    --bs-btn-color: var(--bs-on-danger);
    --bs-btn-hover-color: var(--bs-on-danger);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger), black 10%); 
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.btn-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(186, 26, 26, 0.25);
}

/* --- CUSTOM CLASSES --- */

h1 {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

#confirmation-message {
    background-color: #98fb98;
    border: dashed 1px #008000;
}

.rusty-gradient {
    letter-spacing: 0.2rem;
    background: linear-gradient(135deg, #BE0000 0%, #ff0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-top: 0.2em;
    padding-right: 0.2em;
    margin-top: -0.2em;
    overflow: visible;
    display: inline-block;
}

section[id] {
    scroll-margin-top: 40px;
}

.hush {
    display: none;
}

.card-m3 {
    border: none;
    border-radius: 28px;
    padding: 16px;
    transition: box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.card-m3-filled {
    background-color: var(--bs-secondary-container); 
    color: var(--bs-on-secondary-container);
}

.card-m3-outlined {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
}

.card-m3:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);    
}

/* BLOCKQUOTE M3 */
.blockquote-m3 {
    margin: 4rem 0;
    padding: 4rem;
    background-color: var(--bs-secondary-container);
    border-radius: 28px;
    color: var(--bs-on-secondary-container);
    font-size: calc(1.325rem + 0.9vw);
    font-weight: bold; 
    line-height: 1.2;    
    text-align: center;
}

.blockquote-m3 p::before {
    content: "\201C\00a0";
    font-size: 4rem;
    font-family: serif;
    color: var(--bs-on-secondary-container);
    opacity: 0.8;
}

.blockquote-m3 p::after {
    content: "\00a0\201D";
    font-size: 4rem;
    font-family: serif;
    color: var(--bs-on-secondary-container);
    opacity: 0.8;
}

/* REVIEWS */
[id^="rusty-review-"]::before { content: "\201C\00a0"; }
[id^="rusty-review-"] { line-height: 1.8rem; }
[id^="rusty-review-"]::after { content: "\00a0\201D"; }

/* SURFACE UTILITIES */
.surface-highest { background-color: var(--md-sys-color-surface-container-highest); }
.dim { background-color: var(--md-sys-color-surface-dim); }

.inverse {
    background-color: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);  
}

.inverse a { 
    color: var(--md-sys-color-inverse-primary);  
    text-decoration: none;
}

/* RESPONSIVE LAYOUT */
@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
  .container-wide{
    max-width: 1600px;
    margin-right:auto;
    margin-left:auto
  }  
  .container-full {
    max-width: 100% !important;
    width: 100%;
  }  

  .hero {
    background-image: url('img/scream-min.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
  }

  .faq {
    background-image: url('img/aunt-min.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
  }  
}
@media(max-width: 500px){
  p.hero-subtitle{
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
  }  
}