/**
 * Design System Tokens - Donna Fugata
 * Typography + Colors
 */

/* ========================================
   CASCADE LAYERS DEFINITION
   Layer order: tokens → base → utilities
   ======================================== */
@layer normalize, tokens, base, utilities;

@layer tokens {

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0; /* Offset per header fisso se necessario */
  overflow-x: hidden; /* Previene scrolling orizzontale su html */
  margin-top: 0 !important;
  padding-top: 0;
}
#wpadminbar {
  position:  relative !important;
}

  footer.entry-footer {
    display: none;
  }
:root {
  /* ========================================
     FOUNDATION COLORS
     ======================================== */

  /* Neutrals */
  --neutral-900: #0A0D14;
  --neutral-800: #161922;
  --neutral-700: #20232D;
  --neutral-600: #31353F;
  --neutral-500: #525866;
  --neutral-400: #868C98;
  --neutral-300: #CDD0D5;
  --neutral-200: #E2E4E9;
  --neutral-100: #f8f7f6;
  --neutral-0: #ffffff;

  /* Brand Colors */
  --color-blu: #397EFE;
  --color-green: #34A665;
  --color-orange: #FF6929;
  --color-yellow: #F1A900;
  --color-pink: #F8AAC9;

  /* ========================================
     SEMANTIC TOKENS - BACKGROUND
     ======================================== */

  --bg-strong-900: var(--neutral-900);
  --bg-surface-700: var(--neutral-700);
  --bg-soft-200: var(--neutral-200);
  --bg-weak-100: var(--neutral-100);
  --bg-white-0: var(--neutral-0);

  /* ========================================
     SEMANTIC TOKENS - TEXT
     ======================================== */

  --text-main-900: var(--neutral-900);
  --text-sub-500: var(--neutral-500);
  --text-soft-400: var(--neutral-400);
  --text-disabled-300: var(--neutral-300);
  --text-white-0: var(--neutral-0);

  /* ========================================
     SEMANTIC TOKENS - STROKE
     ======================================== */

  --stroke-strong-900: var(--neutral-900);
  --stroke-sub-300: var(--neutral-300);
  --stroke-soft-200: var(--neutral-200);
  --stroke-white-0: var(--neutral-0);

  /* ========================================
     SEMANTIC TOKENS - BORDERS
     ======================================== */

  /* Column Border System */
  --col-border-width: 1px;
  --col-border-color: var(--neutral-200);  /* #E2E4E9 ≈ #e1e1e1 */
  --col-inner-padding: var(--spacing-md);  /* 20px */

  /* ========================================
     SPACING TOKENS
     ======================================== */

  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 30px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 94px;
  --spacing-5xl: 96px;

  /* Transition Tokens */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========================================
     TYPOGRAPHY - FONT FAMILY
     ======================================== */

  --font-primary: "futura-pt", sans-serif;
  --font-secondary: "Merriweather", Georgia, serif;

  /* ========================================
     TYPOGRAPHY - FONT SIZES (Mobile First)
     ======================================== */

  /* Display */
  --display-xlarge: 77px;
  --display-xlarge-lh: 0.85;
  --display-xlarge-ls: -0.05em;

  --display-large: 64px;
  --display-large-lh: 0.85;
  --display-large-ls: -0.05em;

  --display-medium: 56px;
  --display-medium-lh: 0.90;
  --display-medium-ls: -0.03em;

  /* Title UPPERCASE (Mobile) */
  --title-xlarge: 48px;
  --title-xlarge-lh: 0.90;
  --title-xlarge-ls: -0.03em;

  --title-large: 42px;
  --title-large-lh: 1;
  --title-large-ls: 0;

  --title-medium: 32px;
  --title-medium-lh: 1.20;
  --title-medium-ls: -0.01em;

  --title-small: 24px;
  --title-small-lh: 1.30;
  --title-small-ls: 0;
  --title-small-weight: 500;

  --title-xsmall: 20px;
  --title-xsmall-lh: 1.30;
  --title-xsmall-ls: 0;
  --title-xsmall-weight: 500;

  /* Title LOWERCASE (Mobile) */
  --title-xlarge-lc: 40px;
  --title-xlarge-lc-lh: 1.20;
  --title-xlarge-lc-ls: -0.01em;

  --title-large-lc: 36px;
  --title-large-lc-lh: 1.20;
  --title-large-lc-ls: -0.01em;

  --title-medium-lc: 32px;
  --title-medium-lc-lh: 1.20;
  --title-medium-lc-ls: -0.01em;

  --title-small-lc: 24px;
  --title-small-lc-lh: 1.30;
  --title-small-lc-ls: 0;
  --title-small-lc-weight: 500;

  --title-xsmall-lc: 20px;
  --title-xsmall-lc-lh: 1.30;
  --title-xsmall-lc-ls: 0;
  --title-xsmall-lc-weight: 500;

  /* Label */
  --label-xlarge: 20px;
  --label-xlarge-lh: 1.6;
  --label-xlarge-ls: -0.015em;

  --label-large: 18px;
  --label-large-lh: 1.33;
  --label-large-ls: 0;

  --label-medium: 14px;
  --label-medium-lh: 1.43;
  --label-medium-ls: 0.04em;

  --label-small: 14px;
  --label-small-lh: 1.43;
  --label-small-ls: 0;

  --label-xsmall: 12px;
  --label-xsmall-lh: 1.33;
  --label-xsmall-ls: 0;

  /* Paragraph (Merriweather) */
  --paragraph-xlarge: 20px;
  --paragraph-xlarge-lh: 1.6;
  --paragraph-xlarge-ls: -0.015em;

  --paragraph-large: 18px;
  --paragraph-large-lh: 1.6;
  --paragraph-large-ls: -0.015em;

  --paragraph-medium: 16px;
  --paragraph-medium-lh: 1.6;
  --paragraph-medium-ls: -0.011em;

  --paragraph-small: 14px;
  --paragraph-small-lh: 1.43;
  --paragraph-small-ls: -0.006em;

  --paragraph-xsmall: 12px;
  --paragraph-xsmall-lh: 1.33;
  --paragraph-xsmall-ls: 0;

  /* Card-Title (Merriweather) - Mobile */
  --card-title-large: 24px;
  --card-title-large-lh: 1.3;
  --card-title-large-ls: 0;

  --card-title-main: 24px;
  --card-title-main-lh: 1.2;
  --card-title-main-ls: -0.02em;

  --card-title-medium: 24px;
  --card-title-medium-lh: 1.5;
  --card-title-medium-ls: 0;

  --card-title-small: 20px;
  --card-title-small-lh: 1.6;
  --card-title-small-ls: 0;

  /* Capital (Futura PT uppercase) */
  --capital-large: 16px;
  --capital-large-lh: 1.5;
  --capital-large-ls: 0.04em;

  --capital-medium: 14px;
  --capital-medium-lh: 1.43;
  --capital-medium-ls: 0.04em;

  --capital-small: 12px;
  --capital-small-lh: 1.33;
  --capital-small-ls: 0.04em;
  --capital-small-weight: 500;

  --capital-xsmall: 11px;
  --capital-xsmall-lh: 1.09;
  --capital-xsmall-ls: 0.02em;
  --capital-xsmall-weight: 500;

  /* ========================================
     TYPOGRAPHY - LINE HEIGHTS
     ======================================== */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ========================================
     TYPOGRAPHY - FONT WEIGHTS
     ======================================== */

  --weight-regular: 400;
    /* setting book 450 to 500 for web adaption */
  --weight-book: 500;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ========================================
     TYPOGRAPHY - LETTER SPACING
     ======================================== */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
}

/* ========================================
   TABLET TYPOGRAPHY SIZES (768px - 1279px)
   ======================================== */

@media (min-width: 768px) {
  :root {
    /* Display */
    --display-large: 84px;
    --display-large-lh: 0.85;
    --display-large-ls: -0.05em;

    --display-medium: 64px;
    --display-medium-lh: 0.90;
    --display-medium-ls: -0.03em;

    /* Title UPPERCASE (Tablet) */
    --title-xlarge: 56px;
    --title-xlarge-lh: 0.90;
    --title-xlarge-ls: -0.03em;

    --title-large: 48px;
    --title-large-lh: 1;
    --title-large-ls: 0;

    /* Title LOWERCASE (Tablet) */
    --title-xlarge-lc: 48px;
    --title-xlarge-lc-lh: 1.10;
    --title-xlarge-lc-ls: 0;

    --title-large-lc: 42px;
    --title-large-lc-lh: 1.20;
    --title-large-lc-ls: -0.01em;

    /* Card-Title (Merriweather) - Tablet */
    --card-title-large: 26px;
    --card-title-main: 24px;
    --card-title-medium: 22px;
    --card-title-small: 18px;
  }
}

/* ========================================
   DESKTOP TYPOGRAPHY SIZES (1280px+)
   ======================================== */

@media (min-width: 1280px) {
  :root {
    /* Display */
    --display-xlarge: 90px;
    --display-large: 120px;
    --display-large-lh: 0.85;
    --display-large-ls: -0.05em;
    --display-medium: 80px;

    /* Title UPPERCASE (Desktop) */
    --title-xlarge: 64px;
    --title-xlarge-lh: 1;
    --title-xlarge-ls: -0.03em;

    --title-large: 56px;
    --title-large-lh: 1;
    --title-large-ls: -0.03em;

    --title-medium: 40px;

    --title-small: 32px;
    --title-small-lh: 1.15;
    --title-small-weight: 400;

    --title-xsmall: 24px;

    /* Title LOWERCASE (Desktop) */
    --title-xlarge-lc: 56px;
    --title-xlarge-lc-lh: 1.10;
    --title-xlarge-lc-ls: 0;

    --title-large-lc: 48px;

    --title-medium-lc: 38px;
    --title-medium-lc-lh: 1.05;

    --title-small-lc: 32px;
    --title-small-lc-weight: 400;

    --title-xsmall-lc: 24px;
    --title-xsmall-lc-lh: 1.15;
    --title-xsmall-lc-weight: 400;

    /* Card-Title (Merriweather) - Desktop */
    --card-title-large: 28px;
    --card-title-main: 26px;
    --card-title-medium: 24px;
    --card-title-small: 20px;
  }
}

@media (min-width: 1420px) {
  :root {
    --display-xlarge: 140px;
  }
}

@media (min-width: 1680px) {
  :root {
    --display-xlarge: 180px;
  }
}

} /* End @layer tokens */

/* ========================================
   TYPOGRAPHY CLASSES - DISPLAY
   ======================================== */

@layer base {
.display-xlarge {
  font-family: var(--font-primary);
  font-size: var(--display-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--display-xlarge-lh);
  letter-spacing: var(--display-xlarge-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.display-large {
  font-family: var(--font-primary);
  font-size: var(--display-large);
  font-weight: var(--weight-regular);
  line-height: var(--display-large-lh);
  letter-spacing: var(--display-large-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.display-medium {
  font-family: var(--font-primary);
  font-size: var(--display-medium);
  font-weight: var(--weight-regular);
  line-height: var(--display-medium-lh);
  letter-spacing: var(--display-medium-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

/* ========================================
   TYPOGRAPHY CLASSES - TITLE UPPERCASE
   ======================================== */

.title-xlarge {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lh);
  letter-spacing: var(--title-xlarge-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.title-large {
  font-family: var(--font-primary);
  font-size: var(--title-large);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lh);
  letter-spacing: var(--title-large-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.title-medium {
  font-family: var(--font-primary);
  font-size: var(--title-medium);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lh);
  letter-spacing: var(--title-medium-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.title-small {
  font-family: var(--font-primary);
  font-size: var(--title-small);
  font-weight: var(--title-small-weight);
  line-height: var(--title-small-lh);
  letter-spacing: var(--title-small-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

.title-xsmall {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall);
  font-weight: var(--title-xsmall-weight);
  line-height: var(--title-xsmall-lh);
  letter-spacing: var(--title-xsmall-ls);
  text-transform: uppercase;
  white-space: unset;
  text-wrap: balance;
}

/* ========================================
   TYPOGRAPHY CLASSES - TITLE LOWERCASE
   ======================================== */

.title-xlarge-lc {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lc-lh);
  letter-spacing: var(--title-xlarge-lc-ls);
  text-transform: none;
  white-space: unset;
  text-wrap: balance;
}

.title-large-lc {
  font-family: var(--font-primary);
  font-size: var(--title-large-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lc-lh);
  letter-spacing: var(--title-large-lc-ls);
  text-transform: none;
  white-space: unset;
  text-wrap: balance;
}

.title-medium-lc {
  font-family: var(--font-primary);
  font-size: var(--title-medium-lc);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lc-lh);
  letter-spacing: var(--title-medium-lc-ls);
  text-transform: none;
  white-space: unset;
  text-wrap: balance;
}

.title-small-lc {
  font-family: var(--font-primary);
  font-size: var(--title-small-lc);
  font-weight: var(--title-small-lc-weight);
  line-height: var(--title-small-lc-lh);
  letter-spacing: var(--title-small-lc-ls);
  text-transform: none;
  white-space: unset;
  text-wrap: balance;
}

.title-xsmall-lc {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall-lc);
  font-weight: var(--title-xsmall-lc-weight);
  line-height: var(--title-xsmall-lc-lh);
  letter-spacing: var(--title-xsmall-lc-ls);
  text-transform: none;
  white-space: unset;
  text-wrap: balance;
}

/* ========================================
   TYPOGRAPHY CLASSES - LABEL
   ======================================== */

.label-xlarge {
  font-family: var(--font-primary);
  font-size: var(--label-xlarge);
  font-weight: var(--weight-book);
  line-height: var(--label-xlarge-lh);
  letter-spacing: var(--label-xlarge-ls);
  text-transform: none;
}

.label-large {
  font-family: var(--font-primary);
  font-size: var(--label-large);
  font-weight: var(--weight-book);
  line-height: var(--label-large-lh);
  letter-spacing: var(--label-large-ls);
  text-transform: none;
}

.label-medium {
  font-family: var(--font-primary);
  font-size: var(--label-medium);
  font-weight: var(--weight-book);
  line-height: var(--label-medium-lh);
  letter-spacing: var(--label-medium-ls);
  text-transform: none;
}

.label-small {
  font-family: var(--font-primary);
  font-size: var(--label-small);
  font-weight: var(--weight-book);
  line-height: var(--label-small-lh);
  letter-spacing: var(--label-small-ls);
  text-transform: none;
}

.label-xsmall {
  font-family: var(--font-primary);
  font-size: var(--label-xsmall);
  font-weight: var(--weight-book);
  line-height: var(--label-xsmall-lh);
  letter-spacing: var(--label-xsmall-ls);
  text-transform: none;
}

/* ========================================
   TYPOGRAPHY CLASSES - PARAGRAPH
   ======================================== */

.paragraph-xlarge {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-xlarge-lh);
  letter-spacing: var(--paragraph-xlarge-ls);
  text-transform: none;
  text-wrap: pretty;
}

.paragraph-large {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-large);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-large-lh);
  letter-spacing: var(--paragraph-large-ls);
  text-transform: none;
  text-wrap: pretty;
}

.paragraph-medium {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-medium);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-medium-lh);
  letter-spacing: var(--paragraph-medium-ls);
  text-transform: none;
  text-wrap: pretty;
}

.paragraph-small {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-small);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-small-lh);
  letter-spacing: var(--paragraph-small-ls);
  text-transform: none;
  text-wrap: pretty;
}

.paragraph-xsmall {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-xsmall);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-xsmall-lh);
  letter-spacing: var(--paragraph-xsmall-ls);
  text-transform: none;
  text-wrap: pretty;
}

/* ========================================
   TYPOGRAPHY CLASSES - CARD TITLE
   ======================================== */

/* Card-Title/Large/Desktop */
.card-title-large {
  font-family: var(--font-secondary);
  font-size: var(--card-title-large);
  font-weight: var(--weight-regular);
  line-height: var(--card-title-large-lh);
  letter-spacing: var(--card-title-large-ls);
  text-transform: none;
  text-wrap: balance;
}

/* Card-Title/Main */
.card-title-main {
  font-family: var(--font-secondary);
  font-size: var(--card-title-main);
  font-weight: var(--weight-regular);
  line-height: var(--card-title-main-lh);
  letter-spacing: var(--card-title-main-ls);
  text-transform: none;
  text-wrap: balance;
}

/* Card-Title/Medium/Desktop & Mobile */
.card-title-medium {
  font-family: var(--font-secondary);
  font-size: var(--card-title-medium);
  font-weight: var(--weight-regular);
  line-height: var(--card-title-medium-lh);
  letter-spacing: var(--card-title-medium-ls);
  text-transform: none;
  text-wrap: balance;
}

/* Card-Title/Small/Desktop & Mobile */
.card-title-small {
  font-family: var(--font-secondary);
  font-size: var(--card-title-small);
  font-weight: var(--weight-regular);
  line-height: var(--card-title-small-lh);
  letter-spacing: var(--card-title-small-ls);
  text-transform: none;
  text-wrap: balance;
}

/* ========================================
   TYPOGRAPHY CLASSES - CAPITAL
   ======================================== */

.capital-large {
  font-family: var(--font-primary);
  font-size: var(--capital-large);
  font-weight: var(--weight-regular);
  line-height: var(--capital-large-lh);
  letter-spacing: var(--capital-large-ls);
  text-transform: uppercase;
}

.capital-medium {
  font-family: var(--font-primary);
  font-size: var(--capital-medium);
  font-weight: var(--weight-regular);
  line-height: var(--capital-medium-lh);
  letter-spacing: var(--capital-medium-ls);
  text-transform: uppercase;
}

.capital-small {
  font-family: var(--font-primary);
  font-size: var(--capital-small);
  font-weight: var(--capital-small-weight);
  line-height: var(--capital-small-lh);
  letter-spacing: var(--capital-small-ls);
  text-transform: uppercase;
}

.capital-xsmall {
  font-family: var(--font-primary);
  font-size: var(--capital-xsmall);
  font-weight: var(--capital-xsmall-weight);
  line-height: var(--capital-xsmall-lh);
  letter-spacing: var(--capital-xsmall-ls);
  text-transform: uppercase;
}

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

body {
  font-family: var(--font-secondary);
  font-size: var(--paragraph-medium);
  font-weight: var(--weight-regular);
  line-height: var(--paragraph-medium-lh);
  letter-spacing: var(--paragraph-medium-ls);
  color: var(--text-main-900);
}

/* Previene overflow orizzontale per immagini e box */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Fix scroll Gutenberg editor */
body.block-editor-page {
  overflow: visible !important;
}

h1 {
  font-family: var(--font-primary);
  font-size: var(--title-xlarge);
  font-weight: var(--weight-regular);
  line-height: var(--title-xlarge-lh);
  letter-spacing: var(--title-xlarge-ls);
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-primary);
  font-size: var(--title-large);
  font-weight: var(--weight-regular);
  line-height: var(--title-large-lh);
  letter-spacing: var(--title-large-ls);
  text-transform: uppercase;
}

h3 {
  font-family: var(--font-primary);
  font-size: var(--title-medium);
  font-weight: var(--weight-regular);
  line-height: var(--title-medium-lh);
  letter-spacing: var(--title-medium-ls);
  text-transform: uppercase;
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--title-small);
  font-weight: var(--title-small-weight);
  line-height: var(--title-small-lh);
  letter-spacing: var(--title-small-ls);
  text-transform: uppercase;
}

h5 {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall);
  font-weight: var(--title-xsmall-weight);
  line-height: var(--title-xsmall-lh);
  letter-spacing: var(--title-xsmall-ls);
  text-transform: uppercase;
}

h6 {
  font-family: var(--font-primary);
  font-size: var(--title-xsmall-lc);
  font-weight: var(--title-xsmall-lc-weight);
  line-height: var(--title-xsmall-lc-lh);
  letter-spacing: var(--title-xsmall-lc-ls);
}

p {
  margin-bottom: 1em;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--label-medium);
  font-weight: var(--weight-book);
  line-height: 1.43;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.35s ease;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Base - Pieno nero */
.btn.btn--base,
.btn.btn--base:visited {
  background-color: var(--bg-strong-900) !important;
  color: var(--text-white-0) !important;
  padding: 12px 16px !important;
  position: relative;
  overflow: hidden !important;
  z-index: 0;
  border: 1px solid var(--stroke-strong-900) !important;
  transition: color 0.35s ease;
}

.btn.btn--base::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e9e7e2;
  transform: translateY(101%);
  transition: transform 0.35s ease;
  z-index: -1;
}

.btn.btn--base:hover,
.btn.btn--base:visited:hover {
  color: var(--text-main-900) !important;
}

.btn.btn--base:hover::before,
.btn.btn--base:visited:hover::before {
  transform: translateY(0);
}

/* Outline - Bordo */
.btn.btn--outline,
.btn.btn--outline:visited {
  background-color: transparent !important;
  color: var(--text-main-900) !important;
  padding: 12px 16px !important;
  border: 1px solid var(--stroke-strong-900) !important;
  position: relative;
  overflow: hidden !important;
  z-index: 0;
  transition: color 0.35s ease;
}

.btn.btn--outline::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-strong-900);
  transform: translateY(101%);
  transition: transform 0.35s ease;
  z-index: -1;
}

.btn.btn--outline:hover,
.btn.btn--outline:visited:hover {
  color: var(--text-white-0) !important;
}

.btn.btn--outline:hover::before,
.btn.btn--outline:visited:hover::before {
  transform: translateY(0);
}

/* Link - Testo con underline */
.btn.btn--link,
.btn.btn--link:visited {
  background-color: transparent !important;
  color: var(--text-main-900) !important;
  padding: 0 !important;
  font-weight: var(--weight-book) !important;
  letter-spacing: 0.04em !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
}

.btn.btn--link:hover,
.btn.btn--link:visited:hover {
  color: var(--text-sub-500) !important;
  text-decoration-thickness: 1px !important;
}

/* External link icon */
.btn__icon {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

.btn__icon path {
  stroke: currentColor;
}

/* ========================================
   ELEMENTS - RESET MARGINS
   ======================================== */

.s4w-title,
.s4w-text,
.s4w-button {
  margin: 0;
}

.s4w-text p:last-child {
  margin-bottom: 0;
}

/* ========================================
   LAYOUT - CONTAINER
   ======================================== */

.s4w-container {
  width:100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 80px;
}

@media (max-width: 1024px) {
  .s4w-container {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .s4w-container {
    padding: 0 12px;
  }
}

/* Container esteso a destra - mantiene allineamento sinistro */
.s4w-container--is-extended-right {
  width: 100%;
  padding-left: max(80px, calc((100vw - 1920px) / 2 + 80px));
  padding-right: 0;
}

@media (max-width: 1024px) {
  .s4w-container--is-extended-right {
    padding-left: 40px;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .s4w-container--is-extended-right {
    padding-left: 12px;
    padding-right: 0;
  }
}

/* Container esteso a sinistra - mantiene allineamento destro */
.s4w-container--is-extended-left {
  width: 100%;
  padding-right: max(80px, calc((100vw - 1920px) / 2 + 80px));
  padding-left: 0;
}

@media (max-width: 1024px) {
  .s4w-container--is-extended-left {
    padding-right: 40px;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .s4w-container--is-extended-left {
    padding-right: 12px;
    padding-left: 0;
  }
}

/* ========================================
   SCROLL BEHAVIOR - SMOOTH & OVERSCROLL
   ======================================== */

/* Smooth scroll per navigazione fluida */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 0; /* Offset per header fisso se necessario */
  overflow-x: hidden; /* Previene scrolling orizzontale su html */
  margin-top: 0 !important;
  padding-top: 0;
}


/* Disabilita smooth scroll solo per utenti con reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Gutenberg Editor */
.editor-styles-wrapper .s4w-container,
.acf-block-preview .s4w-container,
.acf-block-body .s4w-container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* ========================================
   GUTENBERG EDITOR - GLOBAL PADDING
   ======================================== */

/* Padding generale all'editor */
.editor-styles-wrapper {
  padding: 40px !important;
}

/* Padding ai campi ACF */
.acf-block-fields {
  padding: 20px;
}

} /* End @layer base */

/* ========================================
   UTILITY - SPACING
   ======================================== */

@layer utilities {
/* Remove padding top */
.s4w-pt-0 {
  padding-top: 0 !important;
}

/* Remove padding bottom */
.s4w-pb-0 {
  padding-bottom: 0 !important;
}

/* Block preview (Gutenberg editor) */
.s4w-block-preview {
  width: 100%;
  max-width: 100%;
  display: block;
}

.s4w-block-preview img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   ACCESSIBILITY - VISUALLY HIDDEN (sr-only)
   ======================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========================================
   GLOBAL LINK STYLES - BREADCRUMBS & CARDS
   ======================================== */

/* Breadcrumbs: NO underline di default, underline solo in hover */
.s4w-breadcrumbs__link {
  text-decoration: none !important;
}

.s4w-breadcrumbs__separator {
  display: none;
}

.s4w-breadcrumbs__link:hover {
  text-decoration: underline !important;
}

/* Card links (NON button-link): NO underline mai */
.press-card__category,
.press-card__title,
.media-kit-card__category,
.media-kit-card__title,
.media-kit-card__action-btn,
.media-kit-category-card__link,
.media-kit-category-card__title {
  text-decoration: none !important;
}

.press-card__category:hover,
.press-card__title:hover,
.media-kit-card__category:hover,
.media-kit-card__title:hover,
.media-kit-card__action-btn:hover,
.media-kit-category-card__link:hover,
.media-kit-category-card__title:hover {
  text-decoration: none !important;
}

/* Header filters: NO underline mai */
.press-filter-link,
.media-kit-filter-link {
  text-decoration: none !important;
}

.press-filter-link:hover,
.media-kit-filter-link:hover {
  text-decoration: none !important;
}

/* Toolbar elements: NO underline mai */
.press-toolbar__sort,
.media-kit-toolbar__sort,
.press-search-dropdown__item,
.media-kit-search-dropdown__item {
  text-decoration: none !important;
}

.press-toolbar__sort:hover,
.media-kit-toolbar__sort:hover,
.press-search-dropdown__item:hover,
.media-kit-search-dropdown__item:hover {
  text-decoration: none !important;
}

/* Filter chips: NO underline mai */
.press-filter-chip,
.media-kit-filter-chip {
  text-decoration: none !important;
}

.press-filter-chip:hover,
.media-kit-filter-chip:hover {
  text-decoration: none !important;
}

/* Pagination links: NO underline mai */
.press-pagination a,
.press-pagination span,
.media-kit-pagination a,
.media-kit-pagination span {
  text-decoration: none !important;
}

.press-pagination a:hover,
.media-kit-pagination a:hover {
  text-decoration: none !important;
}

/* Press navigation links: NO underline di default */
.press-nav-link {
  text-decoration: none !important;
}

/* Override WordPress global styles: rimuove underline globale sui link */
a:where(:not(.wp-element-button)):not(.s4w-topbar-panel__col-link):not(.product-archive-annate__label):not(.product-meta-inline__link) {
  text-decoration: none !important;
}

/* ========================================
   ACCESSIBILITY - FOCUS VISIBLE
   ======================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--text-main-900);
  outline-offset: 2px;
}

/* Remove default focus outline (we handle it with focus-visible) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   UTILITY - BLOCK PADDING
   ======================================== */

.s4w-block-padding {
  padding: 94px 0;
}

@media (max-width: 768px) {
  .s4w-block-padding {
    padding: 40px 0;
  }
}

/* ========================================
   UTILITY - COLUMN INNER WRAPPER
   ======================================== */

/* Wrapper base con bordo e padding */
.s4w-col__inner {
  border: var(--col-border-width) solid var(--col-border-color);
  padding: var(--col-inner-padding);
  height: 100%;
  box-sizing: border-box;
}

/* ========================================
   COLLAPSE LATERALE - DESKTOP
   ======================================== */

/* ========================================
   COLLAPSE VERTICALE - MOBILE
   ======================================== */
@media (max-width: 768px) {
  /* Colonne stackate: collapse tra loro */
  .s4w-twomain__col:not(:last-child) .s4w-col__inner,
  .s4w-twocol-asym__col-large .s4w-col__inner,
  .s4w-threecol__col:not(:last-child) .s4w-col__inner {
    margin-bottom: calc(var(--col-border-width) * -1);
  }

  /* twocol-asym: small è l'ultima, nessun margin-bottom */
  .s4w-twocol-asym__col-small .s4w-col__inner {
    margin-bottom: 0;
  }
}

/* ========================================
   COLLAPSE CROSS-BLOCK (Verticale)
   ======================================== */



/* ========================================
   MODERN CSS - :has() CONDITIONAL LAYOUTS
   ======================================== */

/* Nascondi automaticamente elementi vuoti */
.s4w-col__inner:not(:has(> *)),
.s4w-container:not(:has(> *)) {
  display: none;
}

/* Rimuovi padding da blocchi che non contengono elementi visibili */
.s4w-twomain:not(:has(.s4w-col__inner)) {
  padding: 0;
}

.s4w-threecol:not(:has(.s4w-col__inner)) {
  padding: 0;
}

/* Layout condizionali: applica gap solo se ci sono multiple colonne con contenuto */
.s4w-giant-grid__section:has(.s4w-col__inner:nth-child(2)) {
  gap: 0;
}

/* Stili per colonne che contengono immagini */
.s4w-col__inner:has(img) {
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0; /* Offset per header fisso se necessario */
  overflow-x: hidden; /* Previene scrolling orizzontale su html */
  margin-top: 0 !important;
  padding-top: 0;
}
#wpadminbar {
  position:  relative !important;
}
} /* End @layer utilities */

/* ========================================
   MODERN CSS - VIEW TRANSITIONS
   ======================================== */

@view-transition {
  navigation: auto;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 0; /* Offset per header fisso se necessario */
  overflow-x: hidden; /* Previene scrolling orizzontale su html */
  margin-top: 0 !important;
  padding-top: 0;
}
#wpadminbar {
  position:  relative !important;
}