/**
 * @file
 * Subtheme specific CSS.
 */

/**
 * ============================================
 * OPEN HOUSE ROMA - DESIGN SYSTEM
 * WCAG 2.2 Level AA Compliant
 * ============================================
 *
 * Tutti i colori e font rispettano i criteri
 * di accessibilità WCAG 2.2 Level AA
 *
 * Font: Inter (Google Fonts)
 * Fallback: System fonts
 *
 * Contrast Ratios verificati:
 * - Testo normale: ≥4.5:1
 * - Testo grande: ≥3:1
 * - UI Components: ≥3:1
 */

/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */
:root {
  /* === FONT FAMILY === */
  /*--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Roboto', 'Helvetica Neue', Arial, sans-serif;*/
  --font-primary: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Roboto', 'Inter', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
               Consolas, 'Courier New', monospace;

  /* === BRAND COLORS === */
  /* Arancione brand - uso condizionato per accessibilità */
  --brand-orange: #D64E27;                  /* 3.84:1 - Solo decorazioni/icone */
  --brand-orange-accessible: #A83820;       /* 4.75:1 ✅ AA testo normale */
  --brand-orange-dark: #8B2E1A;             /* 6.52:1 ✅ AAA testo grande */
  --brand-orange-darker: #6B2213;           /* 9.12:1 ✅ AAA testo normale */
  --brand-orange-light: #E86A45;            /* Per hover su sfondo scuro */

  /* === TEXT COLORS (WCAG AA Compliant) === */
  --text-primary: #1A1A1A;                  /* 16.1:1 ✅ AAA */
  --text-secondary: #595959;                /* 7.0:1 ✅ AAA */
  --text-tertiary: #6B6B6B;                 /* 5.5:1 ✅ AA+ */
  --text-quaternary: #fff4ed;
  --text-placeholder: #757575;              /* 4.54:1 ✅ AA */
  --text-disabled: #9E9E9E;                 /* Solo elementi disabled */
  --text-on-primary: #FFFFFF;               /* Su sfondo arancione scuro */

  /* === BACKGROUND COLORS === */
  --bg-dark: #171717;
  --bg-white: #FFFFFF;
  --bg-light: #F8F9FA;
  --bg-light-beige-ohr-main: #FFF4ED;
  --bg-light-beige-ohr: #EFE1D9;
  --bg-light-beige-ohr-dark: #C6BAB3;
  --bg-gray: #F5F5F5;
  --bg-footer: #8B2E1A;                     /* Arancione scuro per contrasto */
  --bg-footer-alt: #6B2213;                 /* Alternativa più scura */

  /* === BORDER COLORS === */
  --border-light: #E0E0E0;                  /* Bordi sottili */
  --border-medium: #BDBDBD;                 /* 3.5:1 per UI components */
  --border-dark: #9E9E9E;
  --border-focus: #1976D2;                  /* Blu per focus visibile */
  --border-focus-orange: #D64E27;           /* Alternativa arancione */

  /* === STATUS COLORS (WCAG AA Compliant) === */
  --success: #2E7D32;                       /* 4.52:1 ✅ AA */
  --success-light: #4CAF50;
  --success-dark: #1B5E20;

  --warning: #E65100;                       /* 4.51:1 ✅ AA */
  --warning-light: #FF6F00;
  --warning-dark: #BF360C;

  --error: #C62828;                         /* 5.13:1 ✅ AA */
  --error-light: #E53935;
  --error-dark: #B71C1C;

  --info: #1976D2;                          /* 4.5:1 ✅ AA */
  --info-light: #2196F3;
  --info-dark: #0D47A1;

  /* === MAP MARKERS === */
  --marker-orange: #F5A623;
  --marker-yellow: #FDD835;
  --marker-green: #4CAF50;

  /* === TYPOGRAPHY SCALE === */
  --font-size-xs: clamp(1rem, 1.4688rem + -1.5vw, 0.625rem);
/*--font-size-xs: 0.625rem;                  /* 10px */
  --font-size-sm: clamp(1rem, 1rem + 0vw, 1rem);
/*--font-size-sm: 1rem;                  /* 16px */
  --font-size-base: clamp(1rem, 0.6875rem + 1vw, 1.25rem);
/*--font-size-base: 1.25rem;                   /* 20px - 16px - WCAG base */
  --font-size-lg: clamp(1rem, 0.375rem + 2vw, 1.5rem);
/*--font-size-lg: 1.5rem;                  /* 24px - large text */
  --font-size-xl: clamp(1rem, -0.25rem + 4vw, 2rem);
/*--font-size-xl: 2rem;                   /* 32px */
/*--font-size-2xl: clamp(1rem, -1.3438rem + 7.5vw, 2.875rem); */
  --font-size-2xl: clamp(1rem, -1.3438rem + 5vw, 2.875rem);
/*--font-size-2xl: 2.875rem;                    /* 46px */
  --font-size-3xl: clamp(1rem, -2.75rem + 12vw, 4rem);
/*--font-size-3xl: 4rem;                    /* 64px */
  --font-size-4xl: clamp(46px, 15vw,164px);
/*--font-size-4xl: 10.25rem;                    /* 164px */

  /* === FONT WEIGHTS === */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* === LINE HEIGHTS (WCAG 1.4.12) === */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;                /* Minimo WCAG */
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* === LETTER SPACING === */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* === SPACING SCALE === */
  --spacing-xs: 0.25rem;                    /* 4px */
  --spacing-sm: 0.5rem;                     /* 8px */
  --spacing-md: 1rem;                       /* 16px */
  --spacing-lg: 1.5rem;                     /* 24px */
  --spacing-xl: 2rem;                       /* 32px */
  --spacing-2xl: 3rem;                      /* 48px */
  --spacing-3xl: 4rem;                      /* 64px */

  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-sm: 0.25rem;                     /* 4px */
  --radius-md: 0.5rem;                      /* 8px */
  --radius-lg: 0.75rem;                     /* 12px */
  --radius-xl: 1rem;                        /* 16px */
  --radius-full: 9999px;                    /* Fully rounded */

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.20);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* === Z-INDEX SCALE === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
  box-sizing: border-box;
}

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

html {
  font-size: 18px;                          /* Base 16px per accessibilità */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-regular);
  line-height: var(--line-height-normal);   /* 1.5 WCAG minimum */
  color: var(--text-primary);
  background-color: var(--bg-light-beige-ohr-main);
}
.bg-body-secondary {
  background: none!important;
}
h1.page-title {
  font-size: var(--font-size-2xl);
}
h3 {
  text-transform: uppercase;
  margin-bottom:60px;
}
/* ============================================
   TYPOGRAPHY
   ============================================ */

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

h1, .h1 {
  font-size: var(--font-size-3xl);          /* 48px */
  font-weight: var(--font-bold);
  line-height: 1.2;
}

h2, .h2 {
  font-size: var(--font-size-2xl);          /* 32px */
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

h3, .h3 {
  font-size: var(--font-size-sm); /* 20px */           /* 24px */
  font-weight: var(--font-semibold);
}

h4, .h4 {
  font-size: var(--font-size-lg);           /* 18px */
  font-weight: var(--font-semibold);
}

h5, .h5 {
  font-size: var(--font-size-base);         /* 16px */
  font-weight: var(--font-semibold);
}

h6, .h6 {
  font-size: var(--font-size-sm);           /* 14px */
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* === PARAGRAPHS === */
p {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}
li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}
/* Max width per leggibilità (WCAG 1.4.8) */
/**
p, .text-content {
  max-width: 75ch;                          /* ~80 caratteri max */
  /*
}
*/
img {
  max-width: 100%;
  height: auto;
}
/* === TEXT UTILITIES === */
.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

.text-meta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-on-primary {
  color: var(--text-on-primary);
}

/* === LINKS === */
a {
  color: var(--brand-orange-accessible);    /* 4.75:1 ✅ AA */
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-orange-dark);          /* 6.52:1 ✅ AAA */
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a:active {
  color: var(--brand-orange-darker);
}

/* Link senza sottolineatura (usare con cautela) */
a.link-plain {
  text-decoration: none;
}

a.link-plain:hover {
  text-decoration: underline;
}

/* ============================================
   FOCUS STATES (WCAG 2.4.7)
   ============================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Focus visibile anche per mouse users */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ============================================
   SKIP TO CONTENT (WCAG 2.4.1)
   ============================================ */
.skip-to-content {
  position: absolute;
  top: -3rem;
  left: 0;
  z-index: var(--z-tooltip);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--text-primary);
  color: var(--bg-white);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 44px;                         /* Touch target WCAG */
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bottone primario - Sfondo arancione scuro per contrasto */
.btn-primary {
  text-transform: uppercase;
  background-color: var(--bg-light-beige-ohr); /* 6.52:1 ✅ AAA */
  color: var(--text-on-primary);
}

.btn-primary:hover {
  background-color: var(--brand-orange-darker);
/*  transform: translateY(-2px);
  box-shadow: var(--shadow-md);*/
}

.btn-primary:active {
 /* transform: translateY(0);
  box-shadow: var(--shadow-sm);*/
}

/* Bottone secondario - Outline */
.btn-secondary {
  text-transform: uppercase;
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
}

.btn-secondary:hover {
  background-color: var(--text-primary);
  color: var(--bg-white);
}

/* Bottone outline arrotondato */
.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
  border-radius: var(--radius-full);
  padding: calc(0.625rem - 2px) calc(1.5rem - 2px);
}

.btn-outline:hover {
  background-color: var(--text-primary);
  color: var(--bg-white);
}

/* Bottone testo */
.btn-text {
  background-color: transparent;
  color: var(--brand-orange-accessible);
  padding: 0.5rem 1rem;
}

.btn-text:hover {
  background-color: var(--bg-light);
  color: var(--brand-orange-dark);
}

/* Dimensioni bottoni */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--font-size-base);
  min-height: 48px;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: var(--spacing-md) 0;
}

.site-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-black);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
}

/* Navigation principale */
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul,
.main-nav {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li,
.nav-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  min-height: 44px;                         /* Touch target */
  display: flex;
  align-items: center;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li:hover,
.nav-item:hover {
  color: var(--brand-orange-accessible);
  background-color: var(--bg-light);
  text-decoration: none!important;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li:active,
.nav-item.active {
  color: var(--brand-orange-dark);
  font-weight: var(--font-semibold);
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a,
.block-flexistyle-bootstrap-subtheme-menuohr26 span.nav-link {
  color: var(--text-primary);
  font-weight: bold;
}
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:hover {
  color: var(--text-secondary)!important;
  text-decoration: none!important;
}
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:focus {
  color: var(--text-primary);
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-md);
  background-color: var(--bg-gray);
  background-size: cover;
  background-position: center;
}

/* Overlay scuro per contrasto testo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-bold);
  color: var(--text-on-primary);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-regular);
  color: var(--text-on-primary);
  margin-bottom: var(--spacing-lg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* ============================================
   BLOCCHI CON PULSANTI
   ============================================ */
  .efe1d9
/* ============================================
   EVENTI TABS (Gallery, Calendar, Map)
   ============================================ */
.eventi-tabs {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
  border-bottom: 2px solid var(--border-light);
  overflow-x: auto;
}

.eventi-tabs__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  min-height: 44px;
}

.eventi-tabs__item:hover {
  color: var(--text-primary);
  background-color: var(--bg-light);
}

.eventi-tabs__item.active {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  border-bottom-color: var(--brand-orange-dark);
}

.eventi-tabs__icon {
  width: 20px;
  height: 20px;
}

/* ============================================
   FILTRI / EXPOSED FILTERS
   ============================================ */
.view-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: var(--bg-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--text-secondary);
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-regular);
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  min-height: 44px;                         /* Touch target */
  transition: border-color var(--transition-fast);
}

.filter-select:hover,
.filter-input:hover {
  border-color: var(--border-dark);
}

.filter-select:focus,
.filter-input:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-focus);
}

.filter-input::placeholder {
  color: var(--text-placeholder);
}

/* Search input specifico */
.filter-search {
  position: relative;
}

.filter-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.filter-search .filter-input {
  padding-left: 2.5rem;
}

/* Form actions */
.form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* ============================================
   EVENT CARDS (Gallery View)
   ============================================ */
.eventi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

.evento-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /*box-shadow: var(--shadow-sm);*/
  transition: all var(--transition-base);
}

.evento-card:hover {
  /*transform: translateY(-4px);*/
  /*box-shadow: var(--shadow-lg);*/
}

.evento-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
/*  background-color: var(--bg-gray);*/
}

.evento-card__evidenza {
  background-color: var(--bg-dark);
  padding:5px 20px;
  border-radius: var(--radius-full);
  position: absolute;
  right: 35px;
  top:30px;
}
.evento-card__evidenza p {
  margin: 0;
  padding: 0;
  color: var(--text-quaternary);
}
.evento-card__evidenza p::before {
  content:"🌟 ";
}

.evento-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evento-card__badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--brand-orange-dark);
  color: var(--text-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}

.evento-card__date-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--info);
  color: var(--text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
}

.evento-card__content {
  padding: var(--spacing-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.evento-card__title {
  font-size: var(--font-size-base);
  /*font-weight: var(--font-semibold);*/
  color: var(--text-primary);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-sm);
}

.evento-card__title a {
  color: inherit;
  text-decoration: none;
}

.evento-card__title a:hover {
  color: var(--brand-orange-accessible);
  text-decoration: underline;
}

.evento-card__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.evento-card__description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.evento-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  /*border-top: 1px solid var(--border-light);*/
}

.evento-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.evento-card__meta-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.evento-card__location {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--brand-orange-accessible);
  font-weight: var(--font-medium);
}

/* ============================================
   TEAM CARDS 2
   ============================================ */
.team-card {
  display: flex;
  flex-direction: column;
  /*background-color: var(--bg-white);*/
  border-radius: var(--radius-xl);
  overflow: hidden;
  /*box-shadow: var(--shadow-sm);*/
  transition: all var(--transition-base);
}

.team-card:hover {
  /*transform: translateY(-4px);*/
  /*box-shadow: var(--shadow-lg);*/
}

.team-card__image-wrapper {
  position: relative;
  width: 100%;
  max-height: 440px;
  overflow: hidden;
/*  background-color: var(--bg-gray);*/
}

.team-card__image {
  width: 100%;
  height: 100%;
  /*object-fit: cover;*/
}

.team-card__badge {
  /*position: absolute;*/
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--brand-orange-dark);
  color: var(--text-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}

.team-card__date-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--info);
  color: var(--text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
}

.team-card__content {
  padding: var(--spacing-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.team-card__title {
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--text-primary);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-sm);
  text-transform: capitalize;
}


.team-card__title a {
  color: inherit;
  text-decoration: none;
}

.team-card__title a:hover {
  color: var(--brand-orange-accessible);
  text-decoration: underline;
}

p.team-card__date {
  font-size: var(--font-size-base)!important;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

p.team-card__description {
  font-size: var(--font-size-sm)!important;
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  /*margin-bottom: var(--spacing-md);*/
  margin: 0;
  flex-grow: 1;
}

.team-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: 0;
  /*padding-top: var(--spacing-sm);*/
  /*border-top: 1px solid var(--border-light);*/
}

p.team-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs)!important;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.team-card__meta-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

p.team-card__location {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm)!important;
  color: var(--brand-orange-accessible);
  font-weight: var(--font-medium);
}   
@media screen and (min-width: 576px) {
  .carousel-team .carousel-inner {
    display: flex;
  }
  .carousel-team .carousel-item {
    display: block;
    margin-right: 0;
    margin: 0px 5px;
    flex: 0 0 calc(100% / 3 - 10px);
  }
  .carousel-team .carousel-item:last-child {
    /*margin: 0;*/
  }
  .carousel-team .img-wrapper {
    height: 21vw;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .carousel-team .carousel-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}
.carousel-team .carousel-inner {
  /*padding: 0 0.2em;*/
  padding: 0;
}
.carousel-team .team-card {
  margin: 0 0.5em;
  
}
.carousel-team .team-card {
  /*margin: 0 0.25em;*/
  margin: 0;
  align-items: center;
  height: 100%;
  /*padding: 20px;*/
}
.team-card__image-wrapper {
  /*position: relative;
  min-height: 500px;
  background-color: var(--bg-footer-alt);
  z-index: 1;
  top: 0;*/
}
.team-card__image-wrapper img {
  object-fit: cover;
}
.team-card__image {
  width: 100%;
  min-height: 380px;
  object-fit: cover;
}
.team-card__content {
  /*position: absolute;
  z-index: 2;
  bottom: 15px;
  background: var(--bg-light-beige-ohr-main);*/
  padding: 20px;
  width: 100%;
  /*border-radius: var(--bs-border-radius-lg);*/
}
.team-card__meta-wrapper {
  margin-top:15px;
  line-height: 0;
}
.team-card__meta-wrapper p:empty { 
  display: none; 
} 
.carousel-team .carousel-control-prev,
.carousel-team .carousel-control-next  {
  width: 6vh;
  height: 6vh;
/*  background-color: #e1e1e1;*/
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}
.carousel-team .carousel-control-prev:hover,
.carousel-team .carousel-control-next:hover {
  opacity: 0.8;
}
.carousel-team .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--bg-dark)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-team .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--bg-dark)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-team .carousel-item {
  border:2px solid var(--bg-dark);
  border-radius: var(--radius-xl);
  padding: 0;
}

/* ============================================
   SHOP CARD
   ============================================ */
.shop-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /*box-shadow: var(--shadow-sm);*/
  transition: all var(--transition-base);
  background-color: var(--bg-light-beige-ohr);
  padding: 20px;
  border-radius: var(--radius-xl);
  border:2px solid var(--bg-dark);
}

.shop-card:hover {
  /*transform: translateY(-4px);*/
  /*box-shadow: var(--shadow-lg);*/
  background-color: var(--bg-light-beige-ohr-main);
}

.shop-card__image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
/*  background-color: var(--bg-gray);*/
}

.shop-card__evidenza {
  background-color: var(--bg-dark);
  padding:5px 20px;
  border-radius: var(--radius-full);
  position: absolute;
  right: 35px;
  top:30px;
}
.shop-card__evidenza p {
  margin: 0;
  padding: 0;
  color: var(--text-quaternary);
}
.shop-card__evidenza p::before {
  content:"🌟 ";
}

.shop-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card__badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--brand-orange-dark);
  color: var(--text-on-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}

.shop-card__date-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--info);
  color: var(--text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
}

.shop-card__content {
  padding: var(--spacing-md);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.shop-card__title {
  color: var(--text-primary);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-sm);
}

.shop-card__title {
  font-size: var(--font-size-lg);
  text-transform: capitalize!important;
}

.shop-card__title a {
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-lg);
  text-decoration: capitalize!important;

}

.shop-card__title a:hover {
  color: var(--brand-orange-accessible);
  text-decoration: underline;
}
.shop-card a.addToFavorites {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 0;
}
.shop-card__date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.shop-card__description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.shop-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  /*border-top: 1px solid var(--border-light);*/
}

.shop-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.shop-card__meta-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.shop-card__location {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--brand-orange-accessible);
  font-weight: var(--font-medium);
}

/* ============================================
   MAP VIEW
   ============================================ */
.eventi-map-container {
  height: 600px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Leaflet popup styling */
.map-popup {
  max-width: 300px;
}

.map-popup__image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.map-popup__content {
  padding: var(--spacing-md);
}

.map-popup__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.map-popup__date,
.map-popup__address {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.map-popup__description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.map-popup__link {
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* ============================================
   CALENDAR VIEW
   ============================================ */
.calendar-container {
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.calendar-event {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--brand-orange);
  color: var(--text-on-primary);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.calendar-event:hover {
  background-color: var(--brand-orange-dark);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background-color: var(--bg-footer);
  color: var(--text-on-primary);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}

.footer-logo {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-black);
  color: var(--text-primary);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-xl);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--text-on-primary);
  margin-bottom: var(--spacing-sm);
}

.footer-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-on-primary);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--text-on-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.footer-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.footer-bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.footer-bottom-text {
  font-size: var(--font-size-xs);
  color: var(--text-on-primary);
  opacity: 0.8;
}

/* ============================================
   NEWSLETTER FORM
   ============================================ */
.newsletter-form {
  display: flex;
  gap: var(--spacing-sm);
  max-width: 400px;
}

.newsletter-input {
  flex: 1;
  padding: 0.75rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.newsletter-submit {
  padding: 0.75rem 1.5rem;
  background-color: var(--text-primary);
  color: var(--text-on-primary);
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 44px;
}

.newsletter-submit:hover {
  background-color: var(--brand-orange-darker);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-sm {
  max-width: 768px;
}

.container-lg {
  max-width: 1536px;
}

/* Section spacing */
.section {
  padding: var(--spacing-2xl) 0;
}

.section-lg {
  padding: var(--spacing-3xl) 0;
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Screen reader only (WCAG) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden but focusable */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

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

/* Tablet (768px+) */
@media (min-width: 768px) {
  .eventi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }

  .view-filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: 4rem;
  }
  .block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .badge-custom {    
    position: absolute;
    right: 80px;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .eventi-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .view-filters {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }

  .filter-search {
    grid-column: 1 / 2;
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .eventi-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  :root {
    --font-size-3xl: 2.25rem;           /* 36px invece di 48px */
    --font-size-2xl: 1.5rem;            /* 24px invece di 32px */
  }

  .eventi-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .eventi-map-container {
    height: 400px;
  }

  .btn {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .badge-custom {    
    position: relative;
    right:initial;
  }
  
  .block-flexistyle-bootstrap-subtheme-home06dona,
  .block-flexistyle-bootstrap-subtheme-home07footer,
  .block-flexistyle-bootstrap-subtheme-bozzablocco08homepagelogofooter {
    align-items: center;
  }
  .block-flexistyle-bootstrap-subtheme-home06dona div,
  .block-flexistyle-bootstrap-subtheme-home07footer div {
    text-align: center;
    gap:35px;
  }
  .block-flexistyle-bootstrap-subtheme-bozzablocco08homepagelogofooter div {
    gap:35px;
  }
}
@media (max-width: 638px) {
  .block-flexistyle-bootstrap-subtheme-home04tabs li a {
    padding:10px 15px!important;
  }
  .block-flexistyle-bootstrap-subtheme-home04tabs li a svg {
    margin-right:0px!important;
  }
  .block-flexistyle-bootstrap-subtheme-home04tabs li a {
    display: flex;
    flex-direction: column;
    gap:10px;    
  }
  .block-flexistyle-bootstrap-subtheme-home04tabs li a p {
    font-size: 13px;
  }
  .block-flexistyle-bootstrap-subtheme-home04tabs .nav-link {
    width:100px;
  }
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --border-medium: #000000;
  }

  .btn-primary {
    border: 2px solid currentColor;
  }
}

/* Reduced motion */
/**
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
**/

/**

/* Override prefers-reduced-motion per Bootstrap animations */
  @media (prefers-reduced-motion: reduce) {
    .carousel-item,
    .collapsing,
    .fade,
    .collapse.show {
      transition: none !important;
    }
  }

  /* Forza animazioni Bootstrap */
  .carousel-item {
    transition: transform .6s ease-in-out !important;
  }

  .collapsing {
    transition: height .35s ease !important;
  }

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode */
  /*
  :root {
    --bg-white: #1A1A1A;
    --bg-light: #2A2A2A;
    --text-primary: #F5F5F5;
    --text-secondary: #CCCCCC;
    --border-light: #3A3A3A;
  }
  */
}

/* Print styles */
@media print {
  .skip-to-content,
  .eventi-tabs,
  .view-filters,
  .btn,
  .site-header,
  .site-footer {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000000;    
  }

  a {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }
}
/**
 * ============================================
 * OPEN HOUSE ROMA - Responsive Tables & Partners
 * ============================================
 *
 * CSS per:
 * 1. Tabelle responsive
 * 2. Layout grid loghi partner (Organizzato da, Network, Patrocinio)
 * 3. Miglioramenti responsive homepage
 *
 * WCAG 2.2 Level AA Compliant
 * Mobile-First Approach
 */

/* ============================================
   1. TABELLE RESPONSIVE
   ============================================ */

/**
 * Approccio 1: Scroll orizzontale per tabelle grandi
 * Migliore per tabelle con molte colonne
 */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
  margin-bottom: 1.5rem;
}

.table-responsive-wrapper:focus {
  outline: 2px solid var(--border-focus, #1976D2);
  outline-offset: 2px;
}

/* Tabelle base */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  margin-bottom: 1.5rem;
}

table th,
table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid #E0E0E0;
  vertical-align: top;
}

table th {
  background-color: #F5F5F5;
  font-weight: 600;
  color: #1A1A1A;
  border-bottom: 2px solid #BDBDBD;
}

table td {
  color: #1A1A1A;
}

/* Zebra striping per leggibilità */
table tbody tr:nth-child(odd) {
  background-color: #FAFAFA;
}

table tbody tr:hover {
  background-color: #F0F0F0;
}

/* Caption accessibile */
table caption {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0 1rem 0;
  color: #1A1A1A;
}

/**
 * Approccio 2: Card-based layout per mobile
 * Migliore per tabelle con poche colonne ma molte righe
 */
@media (max-width: 767px) {

  /* Tabelle con classe .table-card diventano card su mobile */
  table.table-card {
    border: 0;
  }

  table.table-card caption {
    font-size: 1.25rem;
  }

  table.table-card thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.table-card tr {
    border-bottom: 3px solid #E0E0E0;
    display: block;
    margin-bottom: 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  table.table-card td {
    border: none;
    border-bottom: 1px solid #F0F0F0;
    display: block;
    text-align: right;
    padding: 0.75rem 1rem;
  }

  table.table-card td::before {
    content: attr(data-label);
    float: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #595959;
    letter-spacing: 0.5px;
  }

  table.table-card td:last-child {
    border-bottom: 0;
  }

  /* Rimuovi zebra su mobile card */
  table.table-card tbody tr:nth-child(odd) {
    background-color: #fff;
  }
}

/* Desktop - tabelle normali */
@media (min-width: 768px) {
  table {
    display: table;
  }

  table.table-fixed {
    table-layout: fixed;
  }
}

/* ============================================
   2. LOGHI PARTNER - LAYOUT GRID RESPONSIVE
   ============================================ */

/**
 * Selettore per il div contenente i loghi partner
 * Classe: .field--body--
 */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div {
  /*
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Mobile: 1 colonna */  
  
  /*gap: 2rem;*/
  
}

/* Ogni gruppo (Organizzato da, Network, Patrocinio) */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor {
  background-color: #c49587;  
}

/* Titolo gruppo (Organizzato da, Network, etc.) */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div > div::first-line,
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div > div > strong,
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div > div > b {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #595959;
  display: block;
  margin-bottom: 1rem;
}

/* Rimuovi <br> e trasformalo in margin */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div br {
  display: block;
  content: "";
  margin-bottom: 1rem;
}

/* Contenitore loghi dentro ogni gruppo */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  gap: 1rem;
}

/* Immagini loghi */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div img {
  /*max-width: 100%;
  height: auto;*/
  max-height: 50px; /* Altezza massima per uniformità */
  /*width: auto;
  object-fit: contain;*/
  display: inline-block;
  vertical-align: middle;
  margin: 0.5rem 0;
  /*transition: transform 0.2s ease, opacity 0.2s ease;*/
}

/* Hover effect sui loghi */
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor > div > div > div img:hover {
  /*transform: scale(1.05);
  opacity: 0.8;*/
}

/* Focus accessibile */
.field--body-- img:focus,
.partners-section img:focus,
.footer-partners img:focus {
  outline: 2px solid #1976D2;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Wrapper per loghi multipli (es. "Con il patrocinio di" con 3 loghi) */
.field--body-- > div:last-child,
.partners-section > div:has(img + img) {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

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

/* Tablet: 768px - 1023px */
@media (min-width: 768px) {

  /* Partner grid: 2 colonne */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 2rem;
  }

  /* Loghi più grandi */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor img{
    max-height: 70px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {

  /* Partner grid: 3 colonne */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    /*padding: 3rem 2rem;*/
    padding:1.5rem 0 0;
  }

  /* Loghi ancora più grandi */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor img{
    max-height: 80px;
  }

  /* Titoli più grandi */
  .field--body-- > div::first-line,
  .partners-section > div > strong {
    font-size: var(--font-size-base);
  }
}

/* Large Desktop: 1280px+ */
@media (min-width: 1280px) {

  /* Container più ampio */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor {
    /*max-width: 1200px;*/
    margin-left: auto;
    margin-right: auto;
  }

  /* Loghi dimensione massima */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor img{
    max-height: 90px;
  }
}

/* ============================================
   3. VARIANTI LAYOUT ALTERNATIVE
   ============================================ */

/**
 * Variante: Layout orizzontale inline
 * Usa classe .partners-inline per layout orizzontale
 */
.partners-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-color: #F8F9FA;
  border-radius: 8px;
}

.partners-inline > div {
  flex: 1 1 auto;
  min-width: 200px;
  text-align: center;
}

@media (max-width: 767px) {
  .partners-inline {
    flex-direction: column;
  }

  .partners-inline > div {
    width: 100%;
  }
}

/**
 * Variante: Compact layout (per footer)
 * Usa classe .partners-compact
 */
.partners-compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
}

.partners-compact img {
  max-height: 50px;
  opacity: 0.8;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.partners-compact img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.1);
}

/* ============================================
   4. MIGLIORAMENTI ACCESSIBILITÀ
   ============================================ */

/**
 * Assicurati che le immagini abbiano alt text
 * Aggiunge reminder visivo in sviluppo se manca alt
 */
img:not([alt]),
img[alt=""] {
  outline: 3px solid red;
  outline-offset: 2px;
}

/* In produzione, nascondi l'outline */
body:not(.development) img:not([alt]),
body:not(.development) img[alt=""] {
  outline: none;
}

/**
 * Screen reader only label per sezioni partner
 * Aggiungere via template Twig
 */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Landmark regions per screen reader
 */
.partners-section,
.footer-partners {
  position: relative;
}

.partners-section::before {
  content: "";
  display: block;
  height: 0;
}

/* ============================================
   5. PRINT STYLES
   ============================================ */

@media print {

  /* Tabelle: ottimizzate per stampa */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  table th,
  table td {
    padding: 0.5rem;
    font-size: 10pt;
  }

  table tbody tr {
    page-break-inside: avoid;
  }

  /* Partner: layout compatto */
  .block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor {
    display: block;
    background: none;
    box-shadow: none;
  }

  .field--body-- > div,
  .partners-section > div {
    display: inline-block;
    margin: 0 1rem 1rem 0;
    page-break-inside: avoid;
  }

  .field--body-- img,
  .partners-section img {
    max-height: 40px;
    filter: grayscale(100%);
  }

  /* Nascondi effetti hover */
  .field--body-- img:hover,
  .partners-section img:hover {
    transform: none;
    opacity: 1;
  }
}

/* ============================================
   6. UTILITY CLASSES
   ============================================ */

/* Forza layout tabella anche su mobile */
.table-force-layout {
  display: table !important;
}

.table-force-layout thead {
  display: table-header-group !important;
}

.table-force-layout tbody {
  display: table-row-group !important;
}

.table-force-layout tr {
  display: table-row !important;
}

.table-force-layout td,
.table-force-layout th {
  display: table-cell !important;
}

/* Allineamenti */
.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

/* Sticky header tabelle */
.table-sticky-header thead th {
  position: sticky;
  top: 0;
  background-color: #F5F5F5;
  z-index: 10;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   7. DARK MODE (OPZIONALE)
   ============================================ */

@media (prefers-color-scheme: dark) {

  /* Se vuoi supportare dark mode */
  table {
    background-color: #1E1E1E;
    color: #E0E0E0;
  }

  table th,
  table td {
    border-color: #3A3A3A;
  }

  table th {
    background-color: #2A2A2A;
    color: #F5F5F5;
  }

  table tbody tr:nth-child(odd) {
    background-color: #252525;
  }

  table tbody tr:hover {
    background-color: #2D2D2D;
  }

  .flex-footer-bottom {
    background-color: #c49587;
  }
/**
  .field--body-- img,
  .partners-section img {
    filter: brightness(0.9);
  }
**/
}

/* ============================================
   8. LOADING STATE (OPZIONALE)
   ============================================ */

/* Skeleton loading per immagini loghi */
.partners-section.loading img,
.field--body--.loading img {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  opacity: 0.3;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   FINE CSS
   ============================================ */
/**
 * ============================================
 * OPEN HOUSE ROMA - Eventi Grid Flexbox
 * ============================================
 *
 * Layout flexbox responsive per card eventi
 * Sostituisce layout tabella con grid moderno
 *
 * WCAG 2.2 Level AA Compliant
 * Mobile-First Approach
 */

/* ============================================
   GRID CONTAINER - FLEXBOX
   ============================================ */

.eventi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

/* Mobile: 1 colonna */
@media (max-width: 767px) {
  .eventi-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .evento-card {
    width: 100%;
  }
}

/* Tablet: 2 colonne */
@media (min-width: 768px) and (max-width: 1023px) {
  /**
  .eventi-grid {
    gap: 1.5rem;
  }

  .evento-card {
    flex: 0 0 calc(50% - 0.75rem);
    width: calc(50% - 0.75rem);
  }
  **/
}

/* Desktop: 3 colonne */
@media (min-width: 1024px) {
  .eventi-grid {
    gap: 2rem;
  }

  .evento-card {
    /**
    flex: 0 0 calc(33.333% - 1.34rem);
    width: calc(33.333% - 1.34rem);
    */
  }
}

/* Large Desktop: Max width container */
@media (min-width: 1280px) {
  .eventi-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   EVENTO CARD
   ============================================ */

.evento-card {
  display: flex;
  flex-direction: column;
  /*background: #FFFFFF;*/
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.evento-card:hover {
  /*transform: translateY(-4px);*/
  /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);*/
}

.evento-card:focus-within {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* ============================================
   IMAGE WRAPPER
   ============================================ */

.evento-card__image-wrapper {
  position: relative;
  width: 100%;
  padding:15px;
  /*padding-top: 66.67%; /* Aspect ratio 3:2 */
  overflow: hidden;
}

.evento-card__image {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: var(--bs-border-radius-xl);
}

.evento-card:hover .evento-card__image {
  /*transform: scale(1.05);*/
}

/* Fallback per img senza wrapper responsive */
.evento-card img:not(.evento-card__image) {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   CONTENT AREA
   ============================================ */

.evento-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Data */
.evento-card__date {
  margin: 0 0 0.5rem 0;
  color: #595959;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.evento-card__date small {
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: inherit;
}

/* Titolo */
.evento-card__title {
  margin: 0 0 1rem 0;
  font-size: var(--font-size-lg);
  font-weight: normal;
  text-transform: capitalize;
  line-height: 1.2;
  color: #1A1A1A;
}

.evento-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.evento-card__title a:hover {
  color: #A83820;
}

.evento-card__title a:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Descrizione */
.evento-card__description {
  margin: 0 0 1.5rem 0;
  font-size: var(--font-size-base);
  line-height: 1.2;
  color: #595959;
  flex-grow: 1;
}

/* Rimuovi <p>&nbsp;</p> vuoti */
.evento-card__content p:empty {
  display: none;
}

/* ============================================
   METADATA (Durata + Partecipanti)
   ============================================ */

.evento-card__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1rem;
  /*border-top: 1px solid #E0E0E0;*/
}

.evento-card__meta-wrapper {
  display:flex;
  padding:10px 20px;
  background: var(--bg-light-beige-ohr);
  border-radius:99px;
}
.evento-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /*color: #595959;*/
  color:var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.evento-card__meta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /*color: #A83820;  */
  color:var(--text-primary);
}

/* Fix per <p> dentro meta-item */
.evento-card__meta-item p {
  margin: 0;
  display: inline;
  color: inherit;
  font-size: inherit;
}

/* Alternativa: usa span invece di p per il testo */
.evento-card__meta-text {
  margin: 0;
  color: #595959;
  font-size: 0.875rem;
  font-weight: 500;
}

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

/* Focus visibile su elementi interattivi */
.evento-card a:focus,
.evento-card button:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* ARIA hidden per icone decorative */
.evento-card__meta-icon[aria-hidden="true"] {
  pointer-events: none;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   STATO DISPONIBILITÀ (OPZIONALE)
   ============================================ */

/* Badge disponibilità */
.evento-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.evento-card__badge--available {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.evento-card__badge--limited {
  background-color: #FFF3E0;
  color: #E65100;
}

.evento-card__badge--full {
  background-color: #FFEBEE;
  color: #C62828;
}

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

/* Mobile: riduci padding */
@media (max-width: 767px) {
  .evento-card__content {
    padding: 1rem;
  }

  .evento-card__title {
    font-size: var(--font-size-lg);
  }

  .evento-card__meta {
    gap: 1rem;
  }
}

/* Desktop: aumenta spacing */
@media (min-width: 1024px) {
  .evento-card__content {
    padding: 0.5rem 1.75rem 1.75rem;
  }

  .evento-card__title {
    font-size: var(--font-size-lg);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .eventi-grid {
    display: block;
  }

  .evento-card {
    width: 100%;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #E0E0E0;
    margin-bottom: 1rem;
  }

  .evento-card:hover {
    transform: none;
    box-shadow: none;
  }

  .evento-card__image {
    max-height: 200px;
    object-fit: contain;
  }
}

/* ============================================
   DARK MODE (OPZIONALE)
   ============================================ */

@media (prefers-color-scheme: dark) {
  .evento-card {
    background-color: var(--bg-light-beige-ohr-main);
    border:2px solid var(--bg-dark);
  }

  .evento-card__title,
  .evento-card__description,
  .evento-card__meta-text,
  .evento-card__date {
    color: var(--text-primary);
  }

  .evento-card__meta {
    /*border-top-color: #3A3A3A;*/
  }

  .evento-card__title a:hover {
    color: #FF8A65;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Forza 2 colonne anche su desktop */
.eventi-grid--two-columns .evento-card {
  flex: 0 0 calc(50% - 1rem);
  width: calc(50% - 1rem);
}

/* Forza 4 colonne su large desktop */
@media (min-width: 1440px) {
  .eventi-grid--four-columns .evento-card {
    flex: 0 0 calc(25% - 1.5rem);
    width: calc(25% - 1.5rem);
  }
}

/* Card compatta (altezza fissa) */
.evento-card--compact .evento-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   COMPATIBILITÀ CON TABELLA ESISTENTE
   ============================================ */

/* Se vuoi mantenere tabella su alcuni breakpoint */
.table.eventi-table {
  display: none;
}

@media (min-width: 768px) {
  /* Su tablet/desktop mostra flexbox */
  .eventi-grid {
    display: flex;
  }

  .table.eventi-table {
    display: none;
  }
}

/* ============================================
   FINE CSS
   ============================================ */
/**
 * ============================================
 * OPEN HOUSE ROMA - Step Container Flexbox
 * ============================================
 *
 * Layout flexbox per step/guide con:
 * - Colonna sinistra: width basata sul contenuto (immagine)
 * - Colonna destra: width flessibile (testo)
 * - Background #efe1d9
 * - Border 2px solid #171717
 *
 * WCAG 2.2 Level AA Compliant
 * Mobile-First Approach
 */

/* ============================================
   CONTAINER PRINCIPALE
   ============================================ */
/**
.step-container {
  margin: 2rem 0;
  padding: 0;
}
*/

/* ============================================
   STEP ITEM - FLEXBOX LAYOUT
   ============================================ */

.step-item {
  display: flex;
  align-items: stretch; /* Entrambe le colonne stessa altezza */
  gap: 2rem;

  /* Background e bordo richiesti */
  background-color: #efe1d9;
  border: 2px solid #171717;
  border-radius: 8px;

  padding: 2rem;
  margin-bottom: 1.5rem;

  /* Accessibilità */
  position: relative;
}

/* ============================================
   COLONNA SINISTRA - WIDTH BASATA SUL CONTENUTO
   ============================================ */

.step-item__icon {
  /*
   * flex: 0 0 auto
   * = Non crescere, non restringersi, width automatica basata sul contenuto
   */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: flex-start;
  gap: 1rem;

  /* Limita width massima per non occupare troppo spazio */
  max-width: 300px;
}

/* Numerazione step */
.step-item__number {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #171717;
  text-align: left;
  line-height: 1.4;
}

/* Immagine icona */
.step-item__image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;

  /* Mantieni aspect ratio */
  object-fit: contain;
}

/* ============================================
   COLONNA DESTRA - WIDTH FLESSIBILE
   ============================================ */

.step-item__content {
  /*
   * flex: 1
   * = Prende tutto lo spazio rimanente
   */
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Testo descrizione */
.step-item__description {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: #171717;
}

/* Container pulsanti */
.step-item__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   BOTTONI AZIONE
   ============================================ */

.step-item__actions a,
.step-item__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem 1.5rem;
  border-radius: 35px;

  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  text-align: center;

  transition: all 0.2s ease;

  /* Touch target minimo 44px */
  min-height: 44px;
  min-width: 120px;
}

/* Bottone primario (Registrati) */
.btn-primary,
.step-item__actions a:first-child {
  background-color: #171717;
  color: #efe1d9;
  border: 2px solid #171717;
}

.btn-primary:hover,
.step-item__actions a:first-child:hover {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
/*  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

/* Bottone secondario (Accedi) */
.btn-secondary,
.step-item__actions a:last-child {
  background-color: transparent;
  color: #171717;
  border: 2px solid #171717;
}

.btn-secondary:hover,
.step-item__actions a:last-child:hover {
  background-color: #171717;
  color: #efe1d9;
/**  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

/* Focus accessibile */
.step-item__actions a:focus,
.step-item__actions .btn:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

/* Mobile: Stack verticale */
@media (max-width: 767px) {

  .step-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .step-item__icon {
    /* Su mobile, centra e occupa full width */
    max-width: 100%;
    width: 100%;
    align-items: center;
  }

  .step-item__image {
    max-width: 250px; /* Limita dimensione su mobile */
  }

  .step-item__content {
    text-align: left;
  }

  .step-item__actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .step-item__actions a,
  .step-item__actions .btn {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .step-item {
    gap: 1.5rem;
    padding: 1.75rem;
  }

  .step-item__icon {
    max-width: 250px;
  }

  .step-item__description {
    font-size: 0.9375rem;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

@media (min-width: 1024px) {

  .step-item {
    gap: 2.5rem;
    padding: 2.5rem;
  }

  .step-item__icon {
    max-width: 300px;
  }

  /* Se l'immagine è molto piccola, riduci max-width */
  .step-item__icon:has(img[width="425"]) {
    max-width: 280px;
  }
}

/* ============================================
   VARIANTE: ICONA A DESTRA
   ============================================ */

/* Inverti ordine colonne */
.step-item--reverse {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .step-item--reverse {
    flex-direction: column;
  }
}

/* ============================================
   VARIANTE: MULTIPLE STEPS
   ============================================ */

/* Se hai più step, aggiungi numerazione visiva */
.step-container {
  counter-reset: step-counter;
}

.step-item {
  counter-increment: step-counter;
}

/* ============================================
   CONTRASTO COLORI - WCAG 2.2 AA
   ============================================ */

/* Verifica contrasto testo su background #efe1d9 */
.step-item__description,
.step-item__number {
  color: #171717; /* Contrasto 9.8:1 ✅ AAA */
}

/* Link default nel testo */
.step-item__description a {
  color: #A83820; /* Contrasto 4.75:1 ✅ AA */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.step-item__description a:hover {
  color: #8B2E1A; /* Contrasto 6.52:1 ✅ AAA */
}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */

/* Screen reader only per descrizioni aggiuntive */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard navigation visibile */
.step-item:focus-within {
  outline: 2px solid #1976D2;
  outline-offset: 4px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .step-item {
    border: 1px solid #171717;
    background: white;
    page-break-inside: avoid;
    box-shadow: none;
  }

  .step-item__actions {
    display: none; /* Nascondi pulsanti in stampa */
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Padding ridotto per versione compatta */
.step-item--compact {
  padding: 1.5rem;
  gap: 1.5rem;
}

.step-item--compact .step-item__icon {
  max-width: 200px;
}

/* Centra verticalmente tutto il contenuto */
.step-item--centered {
  align-items: center;
}

/* Immagine circolare (opzionale per icone) */
.step-item__image--circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 150px;
}

/* ============================================
   ESEMPIO: 3 STEP PROGRESSIVI
   ============================================ */

/* Se hai più step in sequenza */
.step-container--multi .step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.5rem;
  background-color: #171717;
}

@media (max-width: 767px) {
  .step-container--multi .step-item:not(:last-child)::after {
    left: 2rem;
    transform: none;
  }
}

/* ============================================
   VARIANTE: CLEAN (SENZA BACKGROUND/BORDO)
   ============================================ */

/* Variante senza background e senza bordo */
.step-item--clean {
  background-color: transparent;
  border: none;
  box-shadow: none;
  /*padding: 2rem 0; /* Padding verticale, no padding orizzontale */
  padding:0;
}

.step-item--clean:hover {
  transform: none; /* Nessun effetto hover sul container */
  box-shadow: none;
}

/* Immagine dimensioni originali (307x169) */
.step-item--clean .step-item__icon {
  max-width: 500px;
}

.step-item--clean .step-item__image[width="500"],
.step-item--clean .step-item__image[height="275"] {
  max-width: 500px;
  max-height: 275px;
}

/* Pulsante allineato a destra */
.step-item__actions--right {
  justify-content: flex-end; /* Allinea a destra */
  align-items: flex-end;
}
/* Bottone con border-radius 35px */
.btn-rounded {
  border-radius: 35px !important;
  padding: 0.75rem 2rem;

  background-color: #171717;
  color: #ffffff;
  border: 2px solid #171717;

  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  text-align: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  min-width: 120px;

  transition: all 0.2s ease;
}

.btn-rounded:hover {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
  /*transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);*/
}

.btn-rounded:focus {
  outline: 2px solid #1976D2;
  outline-offset: 4px;
}

/* Mobile: pulsante full width */
@media (max-width: 767px) {
  .step-item--clean {
    padding: 1.5rem 0;
  }

  .step-item--clean .step-item__icon {
    max-width: 100%;
  }

  .step-item--clean .step-item__image {
    max-width: 100%;
  }

  .step-item__actions--right {
    justify-content: center; /* Centrato su mobile */
  }

  .btn-rounded {
    width: 100%; /* Full width su mobile */
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .step-item--clean .step-item__icon {
    max-width: 280px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .step-item--clean {
    gap: 3rem;
  }

  .step-item--clean .step-item__icon {
    max-width: 500px;
  }
}

/* ============================================
   FINE CSS
   ============================================ */

/* ============================================
   FOOTER CONTAINER GRIGIO - DONAZIONE
   ============================================ */   

/* ============================================
   CONTAINER PRINCIPALE
   ============================================ */

.footer-donation-container {
  margin: 2rem 0;
  padding: 0;
}

/* ============================================
   STEP ITEM - FLEXBOX LAYOUT
   ============================================ */

.footer-donation-item {
  display: flex;
  align-items: stretch; /* Entrambe le colonne stessa altezza */
  gap: 2rem;

  /* Background e bordo richiesti */
  /*padding: 2rem;*/
  margin-bottom: 1.5rem;

  /* Accessibilità */
  position: relative;
}

/* ============================================
   COLONNA SINISTRA - WIDTH BASATA SUL CONTENUTO
   ============================================ */

.footer-donation-item__icon {
  /*
   * flex: 0 0 auto
   * = Non crescere, non restringersi, width automatica basata sul contenuto
   */
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;

  /* Limita width massima per non occupare troppo spazio */
  max-width: 300px;
}

/* Numerazione step */
.footer-donation-item__number {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #171717;
  text-align: center;
  line-height: 1.4;
}

/* Immagine icona */
.footer-donation-item__image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;

  /* Mantieni aspect ratio */
  object-fit: contain;
}

/* ============================================
   COLONNA DESTRA - WIDTH FLESSIBILE
   ============================================ */

.footer-donation-item__content {
  /*
   * flex: 1
   * = Prende tutto lo spazio rimanente
   */
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

/* Testo descrizione */
.footer-donation-item__description {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: #171717;
}

/* Container pulsanti */
.footer-donation-item__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   BOTTONI AZIONE
   ============================================ */

.footer-donation-item__actions a,
.footer-donation-item__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem 1.5rem;
  border-radius: 35px;

  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  text-align: center;

  transition: all 0.2s ease;

  /* Touch target minimo 44px */
  min-height: 44px;
  min-width: 120px;
}

/* Bottone primario (Registrati) */
.btn-primary,
.footer-donation-item__actions a:first-child {
  background-color: var(--bg-dark);
  color: var(--text-quaternary);
  border: 2px solid var(--bg-dark);
  border-radius: var(--bs-border-radius-2xl);
  padding:10px 25px;
}

.btn-primary:hover,
.footer-donation-item__actions a:first-child:hover {
  background-color: var(--bg-light-beige-ohr);
  border-color: var(--bg-light-beige-ohr);
  color: var(--text-primary);
}

/* Bottone secondario (Accedi) */
.btn-secondary,
.footer-donation-item__actions a:last-child {
  /**
  background-color: var(--bg-light-beige-ohr);
  color: var(--text-primary);
  border: 2px solid var(--bg-dark);
  border-radius: var(--bs-border-radius-2xl);
  padding:10px 25px;
  **/
  padding: 0.75rem 2rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 44px;
    min-width: 280px;
    border: 2px solid #171717;
    border-radius: 35px !important;
    background: var(--bg-light-beige-ohr);
}

.btn-secondary:hover,
.footer-donation-item__actions a:last-child:hover {
  background-color: var(--bg-dark);
  color: var(--text-quaternary);
  border: 2px solid var(--bg-light-beige-ohr);
  text-decoration: underline;
}

/* Focus accessibile */
.footer-donation-item__actions a:focus,
.footer-donation-item__actions .btn:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

/* Mobile: Stack verticale */
@media (max-width: 767px) {

  .footer-donation-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .footer-donation-item__icon {
    /* Su mobile, centra e occupa full width */
    max-width: 100%;
    width: 100%;
    align-items: center;
  }

  .footer-donation-item__image {
    max-width: 250px; /* Limita dimensione su mobile */
  }

  .footer-donation-item__content {
    text-align: left;
  }

  .footer-donation-item__actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .footer-donation-item__actions a,
  .footer-donation-item__actions .btn {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .footer-donation-item {
    gap: 1.5rem;
    padding: 1.75rem;
  }

  .footer-donation-item__icon {
    max-width: 250px;
  }

  .footer-donation-item__description {
    font-size: 0.9375rem;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

@media (min-width: 1024px) {

  .footer-donation-item {
    gap: 2.5rem;
    /*padding: 2.5rem;*/
  }

  .footer-donation-item__icon {
    max-width: 300px;
  }

  /* Se l'immagine è molto piccola, riduci max-width */
  .footer-donation-item__icon:has(img[width="425"]) {
    max-width: 280px;
  }
}

/* ============================================
   VARIANTE: ICONA A DESTRA
   ============================================ */

/* Inverti ordine colonne */
.footer-donation-item--reverse {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .footer-donation-item--reverse {
    flex-direction: column;
  }
}

/* ============================================
   VARIANTE: MULTIPLE STEPS
   ============================================ */

/* Se hai più step, aggiungi numerazione visiva */
.footer-donation-container {
  counter-reset: step-counter;
}

.footer-donation-item {
  counter-increment: step-counter;
}

.footer-donation-item__number::before {
  content: counter(step-counter) ". ";
  font-weight: 700;
  color: #171717;
}

/* Oppure rimuovi se usi già "1. " nel testo */
.footer-donation-item__number:has-text("1.") {
  /* Non aggiungere counter */
}

/* ============================================
   CONTRASTO COLORI - WCAG 2.2 AA
   ============================================ */

/* Verifica contrasto testo su background #efe1d9 */
.footer-donation-item__description,
.footer-donation-item__number {
  color: #171717; /* Contrasto 9.8:1 ✅ AAA */
}

/* Link default nel testo */
.footer-donation-item__description a {
  color: #A83820; /* Contrasto 4.75:1 ✅ AA */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-donation-item__description a:hover {
  color: #8B2E1A; /* Contrasto 6.52:1 ✅ AAA */
}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */

/* Screen reader only per descrizioni aggiuntive */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard navigation visibile */
.footer-donation-item:focus-within {
  outline: 2px solid #1976D2;
  outline-offset: 4px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .footer-donation-item {
    border: 1px solid #171717;
    background: white;
    page-break-inside: avoid;
    box-shadow: none;
  }

  .footer-donation-item__actions {
    display: none; /* Nascondi pulsanti in stampa */
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Padding ridotto per versione compatta */
.footer-donation-item--compact {
  padding: 1.5rem;
  gap: 1.5rem;
}

.footer-donation-item--compact .footer-donation-item__icon {
  max-width: 200px;
}

/* Centra verticalmente tutto il contenuto */
.footer-donation-item--centered {
  align-items: center;
}

/* Immagine circolare (opzionale per icone) */
.footer-donation-item__image--circle {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 150px;
}

/* ============================================
   ESEMPIO: 3 STEP PROGRESSIVI
   ============================================ */

/* Se hai più step in sequenza */
.footer-donation-container--multi .footer-donation-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.5rem;
  background-color: #171717;
}

@media (max-width: 767px) {
  .footer-donation-container--multi .footer-donation-item:not(:last-child)::after {
    left: 2rem;
    transform: none;
  }
}

/* ============================================
   FINE CSS
   ============================================ */


.view-fullwidth-fai-una-donazione {
  background-color: #c6bab3;
}

main > div.flex-main-container.container-fluid,
footer,
footer > div > div.container-fluid {
  padding:0!important;
  margin:0!important;
}


/*******************/

/**
 * ============================================
 * OPEN HOUSE ROMA - Footer Complete Flexbox
 * ============================================
 *
 * Layout completo footer con:
 * 1. Footer Info (2 colonne: contatti + link)
 * 2. Logo separatore
 * 3. Footer Bottom (3 colonne: copyright + social + links)
 *
 * WCAG 2.2 Level AA Compliant
 * Mobile-First Approach
 */

/* ============================================
   1. FOOTER INFO - DUE COLONNE
   ============================================ */

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;

  /* Rimosso background-color */
  background-color: transparent;
  /*padding: 2rem 3rem;*/
  padding:0;
  margin: 0;
  border-radius: 0;
}

.footer-info__column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sinistra: allineata a sinistra */
.footer-info__column--left {
  text-align: left;
  flex: 0 1 auto;
}

/* Destra: allineata a destra */
.footer-info__column--right {
  text-align: right;
  flex: 0 1 auto;
  margin-left: auto;
}

/* Testo e titoli */
.footer-info__title,
.footer-info__text,
.footer-info__link {
  margin: 0;
  padding: 0;
}

.footer-info__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #171717; /* Colore nero richiesto */
  text-transform: uppercase; /* Tutto maiuscolo */
  margin-bottom: 0.5rem;
}

.footer-info__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #171717; /* Colore nero richiesto */
  font-weight: 700; /* Grassetto richiesto */
  text-transform: uppercase; /* Tutto maiuscolo */
}

.footer-info__link {
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Link styles */
.footer-info__column a {
  color: #171717; /* Colore nero richiesto */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 700; /* Grassetto richiesto */
  text-transform: uppercase; /* Tutto maiuscolo */
  transition: all 0.2s ease;
}

.footer-info__column a:hover {
  color: #333333; /* Hover più chiaro */
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer-info__column a:focus {
  outline: 2px solid #1976D2; /* Blu per visibilità */
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================
   2. LOGO SEPARATORE
   ============================================ */

.footer-logo {
  margin: 4rem auto;
  padding: 0;
  text-align: center;
  max-width: 100%; /* Rispetta container parent */
  width: 100%;
}

.footer-logo__image,
.footer-logo img {
  max-width: 100%; /* Dinamico in base al container */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Rispetta la larghezza massima della classe .container (se presente) */
.container .footer-logo img,
.container .footer-logo__image {
  max-width: 100%;
}

@media (max-width: 767px) {
  .footer-logo {
    margin: 1.5rem 0;
  }

  .footer-logo img {
    max-width: 250px;
    max-height: 80px;
  }
}

/* ============================================
   3. FOOTER BOTTOM - TRE COLONNE
   ============================================ */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  background-color: transparent; /* O imposta un colore se serve */
  padding: 1.5rem 3rem;
  margin: 0;
}

.footer-bottom__column {
  display: flex;
  align-items: center;
}

/* Colonna Sinistra: Copyright (allineato a sinistra) */
.footer-bottom__column--left {
  justify-content: flex-start;
  text-align: left;
  flex: 0 1 auto;
}

/* Colonna Centrale: Social Icons (centrato) */
.footer-bottom__column--center {
  justify-content: center;
  text-align: center;
  flex: 1; /* Prende spazio centrale */
}

/* Colonna Destra: Links Legali (allineato a destra) */
.footer-bottom__column--right {
  justify-content: flex-end;
  text-align: right;
  flex: 0 1 auto;
  margin-left: auto;
}

/* ============================================
   FOOTER BOTTOM - TESTO
   ============================================ */

.footer-bottom__text {
  margin: 0;
  font-size: 0.875rem;
  color: #171717; /* Colore nero richiesto */
  font-weight: 700; /* Grassetto richiesto */
  text-transform: uppercase; /* Tutto maiuscolo */
}

/* ============================================
   FOOTER BOTTOM - SOCIAL ICONS
   ============================================ */

.footer-bottom__social {
  display: flex;
  flex-direction: row; /* Orizzontale esplicitamente */
  align-items: center;
  justify-content: center;
  gap: 25px; /* Gap richiesto: 25px tra icone */
}

.footer-bottom__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Bordo con radius 15px e padding richiesto */
  border: 2px solid #171717;
  border-radius: var(--bs-border-radius-2xl);
  padding: 5px 25px;

  /* Rimuovi dimensioni fisse, usa padding */
  min-width: 44px; /* Touch target minimo WCAG */
  min-height: 44px;

  transition: all 0.2s ease;

  /* Rimuovi underline da link */
  text-decoration: none;
  background-color: var(--bg-light-beige-ohr-dark);
}
a.footer-bottom__social-link {
  /*color:var(--bg-light-beige-ohr);*/
  color:var(--text-primary);
}
.footer-bottom__social-link:hover {
  background-color: #171717;
  /*transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
  border: 2px solid var(--bg-light-beige-ohr-dark);
  color:var(--text-quaternary);
}

.footer-bottom__social-link:focus {
  outline: 2px solid #1976D2;
  outline-offset: 4px;
}

/* SVG Social Icons - NERE */
.footer-bottom__social-link .social-svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: all 0.2s ease;
}

.footer-bottom__social-link:hover .social-svg {
  transform: scale(1.1);
}
.footer-bottom__social-link svg {
  fill: var(--text-primary);
}
.footer-bottom__social-link:hover svg {
  fill: var(--text-quaternary);
}
/* SVG nere di default */
.social-svg-background circle {
  fill: transparent; /* Nessun background circle */
}

.social-svg-icon,
.social-svg-icon path,
.social-svg path {
  fill: #171717; /* Icone nere */
  transition: fill 0.2s ease;
}

/* Su hover, icone diventano bianche */
.footer-bottom__social-link:hover .social-svg-icon,
.footer-bottom__social-link:hover .social-svg-icon path,
.footer-bottom__social-link:hover .social-svg path {
  fill: #ffffff;
}

/* ============================================
   FOOTER BOTTOM - LINKS LEGALI
   ============================================ */

.footer-bottom__links {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Allineato a destra */
  gap: 1.5rem;
}

.footer-bottom__links a {
  font-size: 0.875rem;
  color:var(--bs-light);
  text-decoration: none;
  font-weight: 700; /* Grassetto richiesto */
  text-transform: uppercase; /* Tutto maiuscolo */
  transition: all 0.2s ease;

  /* Touch target minimo */
  padding: 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-bottom__links a:hover {
  color:var(--bs-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom__links a:focus {
  outline: 2px solid var(--bs-white);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 767px) {

  /* Footer Info: Stack verticale */
  .footer-info {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding: 1.5rem;
  }

  /* Mantieni allineamento originale su mobile */
  .footer-info__column--left {
    text-align: left;
    margin-left: 0;
  }

  .footer-info__column--right {
    text-align: right;
    margin-left: 0;
  }

  .footer-info__title {
    font-size: var(--font-size-base);
  }

  .footer-info__text,
  .footer-info__link {
    font-size: 0.875rem;
  }

  /* Footer Bottom: Stack verticale */
  .footer-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .footer-bottom__column--left {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .footer-bottom__column--center {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: 0;
  }

  .footer-bottom__column--right {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-left: 0;
  }

  /* Social icons: riduci gap su mobile */
  .footer-bottom__social {
    gap: 20px;
  }

  /* Links legali: stack verticale o riduci gap */
  .footer-bottom__links {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Oppure mantieni orizzontale con gap ridotto: */
  /*
  .footer-bottom__links {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  */

  .footer-bottom__text {
    font-size: 0.8125rem;
  }

  .footer-bottom__links a {
    font-size: 0.8125rem;
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .footer-info {
    gap: 2rem;
    padding: 2rem;
  }

  .footer-bottom {
    gap: 1.5rem;
    padding: 1.5rem 2rem;
  }

  .footer-bottom__social {
    gap: 20px;
  }

  .footer-bottom__links {
    gap: 1rem;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

@media (min-width: 1024px) {

  .footer-info {
    /*gap: 4rem;
    padding: 2.5rem 3.5rem;*/
    /*padding: 2.5rem 0;*/
  }
/**
  .footer-info__title {
    font-size: 1.25rem;
  }
**/
  .footer-info__text,
  .footer-info__link {
    font-size: var(--font-size-base);
  }

  .footer-bottom {
    /*padding: 2rem 3.5rem;*/
    padding:2rem 0;
  }

  .footer-bottom__text,
  .footer-bottom__links a {
    font-size: 0.9375rem;
  }
}

/* ============================================
   LARGE DESKTOP - MAX WIDTH
   ============================================ */

@media (min-width: 1280px) {

  .footer-info,
  .footer-bottom {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================
   ACCESSIBILITÀ - WCAG 2.2
   ============================================ */

/* Contrasto verificato:
 * Tutti i testi (#171717 su bianco): 16.1:1 ✅ AAA
 * Grassetto e maiuscolo per leggibilità
 */

/* Touch targets minimi 44px */
.footer-bottom__social-link {
  min-width: 44px;
  min-height: 44px;
}

.footer-bottom__links a {
  min-height: 44px;
}

/* Screen reader only text per icone social */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visibile su tutti gli elementi interattivi */
.footer-info a:focus-visible,
.footer-bottom a:focus-visible,
.footer-bottom__social-link:focus-visible {
  outline: 3px solid #1976D2;
  outline-offset: 4px;
}

/* ============================================
   VARIANTI
   ============================================ */

/* Variante: Footer Bottom con background */
.footer-bottom--with-bg {
  background-color: #F5F5F5;
  border-top: 1px solid #E0E0E0;
}

/* Variante: Social icons più grandi */
.footer-bottom__social--large .social-svg {
  width: 40px;
  height: 40px;
}

.footer-bottom__social--large .footer-bottom__social-link {
  width: 52px;
  height: 52px;
}

/* Variante: Links legali con separatori */
.footer-bottom__links--separated a:not(:last-child)::after {
  content: "|";
  margin-left: 1.5rem;
  color: #BDBDBD;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .footer-info {
    background: white;
    color: #171717;
    border: 1px solid #E0E0E0;
    page-break-inside: avoid;
  }

  .footer-info__title,
  .footer-info__text,
  .footer-info__column a {
    color: #171717;
  }

  .footer-bottom {
    page-break-inside: avoid;
  }

  /* Nascondi social icons in stampa */
  .footer-bottom__social {
    display: none;
  }

  /* Mostra URL dopo link */
  .footer-info__column a::after,
  .footer-bottom__links a::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666666;
  }
}

/* ============================================
   ANIMAZIONI (OPZIONALE)
   ============================================ */

/* Fade-in al caricamento */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-info,
.footer-bottom {
  animation: fadeIn 0.5s ease-out;
}

/* Pulse animation per social icons */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.footer-bottom__social-link:hover {
  animation: pulse 0.6s ease-in-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Nascondi su mobile */
@media (max-width: 767px) {
  .footer__hide-mobile {
    display: none;
  }
}

/* Nascondi su desktop */
@media (min-width: 768px) {
  .footer__hide-desktop {
    display: none;
  }
}

/* ============================================
   FINE CSS
   ============================================ */

footer > div > div > div > div > div > div.block-flexistyle-bootstrap-subtheme-footerrecapitieiscrizione {
  background-color: #a13a0d ;
  padding-top:2.5rem;
}
.block-flexistyle-bootstrap-subtheme-footerlogoorganizzatoriesponsor .footer-info {
  gap:10px;
  font-weight: bold;
  text-transform: uppercase;
  justify-content: space-between!important;
}

/*******************************/
/**
 * ============================================
 * OPEN HOUSE ROMA - Hero Banner Top
 * ============================================
 *
 * Hero banner per evento in evidenza homepage
 * Design: Immagine full-width con testo overlay e CTA
 *
 * WCAG 2.2 Level AA Compliant
 * Mobile-First Approach
 */

/* ============================================
   FIX OVERFLOW ORIZZONTALE
   ============================================ */

/* Previeni overflow orizzontale su tutti i container parent */
.hero-banner,
.hero-banner *,
.view-evento-top-home,
.views-element-container {
  box-sizing: border-box;
}

/* Nascondi overflow sui container parent */
.view-evento-top-home .view-content,
.views-element-container {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================
   HERO BANNER CONTAINER
   ============================================ */

.hero-banner {
  position: relative;
  width: 100%;
  max-width: 100%; /* Previene overflow */
  min-height: 450px;
  height: 500px;
  overflow: hidden;
  border-radius: 12px; /* Angoli arrotondati come nell'immagine */
  margin: 0 auto; /* Centro con auto margin */

  /* Fix overflow orizzontale */
  box-sizing: border-box;
}

/* ============================================
   BACKGROUND IMAGE
   ============================================ */

.hero-banner__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  /* Background image properties */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Previeni overflow */
  overflow: hidden;
  max-width: 100%;

  /* Zoom effect on hover (opzionale) */
  transition: transform 0.5s ease;
}
/**
.hero-banner:hover .hero-banner__background {
  transform: scale(1.05);
}
**/

/* ============================================
   OVERLAY GRADIENT (per leggibilità testo)
   ============================================ */

.hero-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  /* Gradient scuro in basso a sinistra per leggibilità */
  /**
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0) 70%
  );
*/
  background-color: rgba(0,0,0,0.25);
  border-radius:15px;
  /* Previeni overflow */
  overflow: hidden;
  max-width: 100%;

  pointer-events: none; /* Non blocca i click */
}

/* ============================================
   CONTENT OVERLAY
   ============================================ */

.hero-banner__content {
  position: relative;
  z-index: 10;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  height: 100%;
  padding: 2.5rem 3rem;
}

/* ============================================
   TESTO (Titolo + Data)
   ============================================ */

.hero-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Titolo */
.hero-banner__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;

  /*text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);*/

  max-width: 600px; /* Limita larghezza per leggibilità */
  background-color: rgba(0, 0, 0, 0.75);
  padding: 15px;
  border-radius: 15px;
}

.hero-banner__title a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hero-banner__title a:hover {
  opacity: 0.9;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero-banner__title a:focus {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Data/Sottotitolo */
.hero-banner__date {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CTA BUTTON
   ============================================ */

.hero-banner__cta {
  display: flex;
  align-items: flex-end;
}

.hero-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Stile pulsante bianco come nell'immagine */
  background-color: #ffffff;
  color: #171717;

  padding: 1rem 3rem;
  border-radius: 35px; /* Border-radius arrotondato */

  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;

  /* Touch target minimo */
  min-height: 48px;
  min-width: 140px;

  /* Shadow per visibilità */
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);*/

  transition: all 0.3s ease;
}

.hero-banner__button:hover {
  background-color: #f0f0f0;
  color: #171717;
  /*transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);*/
}

.hero-banner__button:focus {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 767px) {

  .hero-banner {
    min-height: 300px;
    height: 350px;
    border-radius: 8px;
    margin: 1rem 0;
  }

  .hero-banner__content {
    padding: 1.5rem;
  }

  /* Titolo più piccolo */
  .hero-banner__title {
    font-size: 1.75rem;
    max-width: 100%;
  }

  .hero-banner__date {
    font-size: var(--font-size-base);
  }

  /* Pulsante centrato su mobile */
  .hero-banner__cta {
    justify-content: center;
    align-items: center;
  }

  .hero-banner__button {
    width: 100%;
    max-width: 280px;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

  .hero-banner {
    min-height: 250px;
    height: 280px;
  }

  .hero-banner__content {
    padding: 2rem 2.5rem;
  }

  .hero-banner__title {
    font-size: 2rem;
  }

  .hero-banner__date {
    font-size: 1.125rem;
  }

  .hero-banner__button {
    padding: 0.875rem 2.5rem;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

@media (min-width: 1024px) {

  .hero-banner {
    min-height: 280px;
    height: 320px;
  }

  .hero-banner__content {
    padding: 3rem 4rem;
  }

  .hero-banner__title {
    /*font-size: 3rem;*/
  }

  .hero-banner__date {
    font-size: 1.5rem;
  }

  .hero-banner__button {
    padding: 1.125rem 3.5rem;
    font-size: 1.125rem;
  }
}

/* ============================================
   LARGE DESKTOP
   ============================================ */

@media (min-width: 1280px) {

  .hero-banner {
    height: 350px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-banner__title {
    /*font-size: 3rem;*/
    max-width: 700px;
  }
}

/* ============================================
   VARIANTI
   ============================================ */

/* Variante: Hero compatto */
.hero-banner--compact {
  min-height: 180px;
  height: 220px;
}

.hero-banner--compact .hero-banner__title {
  font-size: 2rem;
}

.hero-banner--compact .hero-banner__date {
  font-size: var(--font-size-base);
}

/* Variante: Overlay più scuro */
.hero-banner--dark-overlay .hero-banner__overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.2) 70%
  );
}

/* Variante: Senza border-radius (full bleed) */
.hero-banner--full-bleed {
  border-radius: 0;
  margin: 0;
}

/* Variante: Pulsante nero invece di bianco */
.hero-banner__button--dark {
  background-color: #171717;
  color: #ffffff;
}

.hero-banner__button--dark:hover {
  background-color: #333333;
}

/* ============================================
   ACCESSIBILITÀ
   ============================================ */

/* Contrasto testo su immagine:
 * Bianco (#ffffff) su overlay scuro: ✅ AAA
 * Text-shadow aggiunto per sicurezza
 */

/* Skip to content per screen reader */
.hero-banner__skip {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.hero-banner__skip:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  background: #ffffff;
  color: #171717;
  padding: 1rem;
  border-radius: 4px;
}

/* Touch targets minimi 44px */
.hero-banner__button {
  min-width: 140px;
  min-height: 48px;
}

/* ============================================
   ANIMAZIONI
   ============================================ */

/* Fade-in al caricamento */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-banner__text,
.hero-banner__cta {
  animation: heroFadeIn 0.8s ease-out;
}

.hero-banner__cta {
  animation-delay: 0.3s;
}

/* Pulse animation per pulsante (opzionale) */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

.hero-banner__button {
  animation: pulse 2s ease-in-out infinite;
}

.hero-banner__button:hover {
  animation: none; /* Stop pulse on hover */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .hero-banner {
    height: auto;
    min-height: 150px;
    page-break-inside: avoid;
  }

  .hero-banner__background {
    filter: grayscale(100%);
  }

  .hero-banner__overlay {
    background: rgba(0, 0, 0, 0.5);
  }

  .hero-banner__button {
    display: none; /* Nascondi pulsante in stampa */
  }
}

/* ============================================
   DRUPAL VIEWS INTEGRATION
   ============================================ */

/* Override stili Views di default */
.view-evento-top-home {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

.view-evento-top-home .view-content {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

.view-evento-top-home .views-row {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* Nascondi wrapper Views non necessari nell'hero */
.hero-banner .views-element-container,
.hero-banner .form-item {
  all: unset;
  display: contents;
}

/* Fix per container parent che causano overflow */
.view-evento-top-home,
.view-evento-top-home .view-content,
.view-evento-top-home .views-row,
.hero-banner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Rimuovi margin/padding che causano overflow */
.hero-banner .row {
  margin-left: 0;
  margin-right: 0;
}

.hero-banner .views-field {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================
   FIX SPECIFICI PER BOOTSTRAP/DRUPAL CONTAINER
   ============================================ */

/* Se il hero è dentro un .container Bootstrap, espandi oltre i padding */
.container .hero-banner {
  width: calc(100% + 30px); /* Compensa padding Bootstrap */
  margin-left: -15px;
  margin-right: -15px;
  max-width: none;
}

@media (min-width: 768px) {
  .container .hero-banner {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* Se è in una region con padding, rimuovilo per il hero */
.region .hero-banner,
[class*="region-"] .hero-banner {
  margin-left: calc(-1 * var(--bs-gutter-x, 15px));
  margin-right: calc(-1 * var(--bs-gutter-x, 15px));
  width: calc(100% + (2 * var(--bs-gutter-x, 15px)));
  max-width: none;
}

/* Fix per Flexistyle Bootstrap theme specifico */
.views-element-container.form-item {
  padding: 0;
  margin: 0;
}

/* ============================================
   FALLBACK: PREVIENI OVERFLOW SU BODY
   ============================================ */

/* Aggiungi al body se l'overflow persiste */
body {
  overflow-x: hidden;
  max-width: 100%;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================
   FINE CSS
   ============================================ */
.container.eventoTopHome {
  padding:0 var(--spacing-md)!important;
  width:100%!important;
}
.container .hero-banner {
  margin-left: 0!important;
  margin-right: 0!important;
  width: 100%!important;
  background-color: var(--bs-grey-dark);
}

.hero-banner h2 a {
  text-transform: capitalize!important;
  letter-spacing: -1px!important;
  margin-bottom:1rem;
}
/**
.eventoTopHome {
  margin:var(--spacing-lg) auto;
}
**/
.page-frontpage h2.block-title {
    font-size: var(--font-size-lg)!important;
    margin-top: var(--spacing-3xl)!important;
    margin-bottom: var(--spacing-lg)!important;
}
.block-flexistyle-bootstrap-subtheme-comefunziona {
  margin-bottom: var(--spacing-2xl);
}
.block-flexistyle-bootstrap-subtheme-footerrecapitieiscrizione p {
    font-weight: 700;
    text-transform: uppercase;
    color:var(--bs-light);
}

a.btn-primary {
  background-color: #171717;
  color: #efe1d9;
  border: 2px solid #171717;
  border-radius: 35px;
  text-decoration: none;
  font-size: var(--font-size-base);
}

a.btn-primary:hover {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
/*  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

/* Bottone secondario (Accedi) */
a.btn-secondary {
  background-color: transparent;
  color: #171717;
  border: 2px solid #171717;
}

a.btn-secondary:hover {
  background-color: #171717;
  color: #efe1d9;
/**  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

/* Focus accessibile */
.btn:focus {
  outline: 2px solid #1976D2;
  outline-offset: 2px;
}
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a,
.navbar-expand-lg .navbar-nav .nav-item a {
  font-weight: 700;
}
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li:hover,
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:hover,
.navbar-expand-lg .navbar-nav .nav-item a:hover,
.navbar-expand-lg .navbar-nav .nav-item:hover {
  background: transparent;
  text-decoration:underline;
}

.navbar-expand-lg .navbar-nav .nav-item a:hover {
  color: var(--text-secondary);
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:hover {
  color: var(--text-primary)!important;
}
header#header .container-fluid {
  padding:0;
}
.btn {
	padding:0.75rem 2rem;
	font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 44px;
    min-width: 280px;
    border: 2px solid var(--bg-dark);
    border-radius: 35px !important;
    background: var(--bg-light-beige-ohr-main);
    color: var(--text-primary);
}
.btn:hover {
    background-color: var(--bg-dark);
    color: var(--text-quaternary);
}
ul.nav.primary.nav-tabs {
  border: none;
}
ul.nav.primary.nav-tabs .nav-link {
  padding:0.75rem 2rem;
  font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    min-height: 44px;
    border: 2px solid var(--bg-dark);
    border-radius: 35px !important;
    background: var(--bg-light-beige-ohr-main);
    color: var(--text-primary);
}
ul.nav.primary.nav-tabs .nav-item:hover {
  background-color:initial!important;
}
ul.nav.primary.nav-tabs .nav-link:hover {
  background-color: var(--bg-dark);
  color: var(--text-quaternary);
}
ul.nav.primary.nav-tabs .nav-link.active {
  background-color: var(--bg-light-beige-ohr);
    color: var(--text-primary);
}
.titoloSpeciale {
  width:100%;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing:-4px;
  line-height: 1;
/*  font-size:clamp(46px,15vw,164px)!important;*/
  padding-bottom:20px;
  margin:0;
}
h1.titoloSpeciale {
  font-size: clamp(46px, 15vw,164px);
}
.testoSpeciale {
  width:100%;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing:1px;
  line-height: 1.1;
/*  font-size:clamp(46px,15vw,164px)!important;*/
  padding-bottom:20px;
  margin:0;
}
.sottotitolo {
  text-align: center;
  font-size: var(--font-size-xl);
  line-height: 1;
}
.cta {
	margin:75px auto;
	width: 100%;
	text-align: center;
  font-size: var(--font-size-sm);
}
.accent1 {
	background-color: #72BFFF /*#1f9670*/;
}
.accent2 {
	background-color: #dead50;
}
[class*="bozza"] {
  margin-bottom: 140px;
}
.block-flexistyle-bootstrap-subtheme-home04tabs .wrapperPulsantiTabs {
  display: flex;
  justify-content: center;
}
/**
.block-flexistyle-bootstrap-subtheme-home04tabs ul.nav-tabs {
  border-radius:35px;
  border:2px solid #171717;
}
**/
.block-flexistyle-bootstrap-subtheme-home04tabs li,
.block-flexistyle-bootstrap-subtheme-home04tabs li a p {
  padding: 0;
  margin: 0;
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a {
  display: flex;
  align-items: center;
  padding: 15px 35px;
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a:hover {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a.nav-link:hover,
.block-flexistyle-bootstrap-subtheme-home04tabs li a.nav-link:hover p,
.block-flexistyle-bootstrap-subtheme-home04tabs li a.nav-link.active:hover {
  color: #efe1d9!important;
  background-color: var(--bg-dark);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li:first-child a.nav-link {
  border-left:2px solid #171717;
  border-right:2px solid #171717;
  border-top:2px solid #171717;
  border-bottom:2px solid #171717;
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
  color:var(--bs-btn-color);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li:nth-child(2) a.nav-link {
  color:var(--bs-btn-color);
  border-top:2px solid #171717;
  border-bottom:2px solid #171717;
}
.block-flexistyle-bootstrap-subtheme-home04tabs li:last-child a.nav-link {
  border-left:2px solid #171717;
  border-right:2px solid #171717;
  border-top:2px solid #171717;
  border-bottom:2px solid #171717;
  border-top-right-radius: 35px;
  border-bottom-right-radius: 35px;
  color:var(--bs-btn-color);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li:hover {
  background: none;
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a {
  background: none;
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a.nav-link {
  border:none;
  background-color: var(--bg-light-beige-ohr-main);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a.nav-link.active {
  background-color: var(--bg-light-beige-ohr);
}
.block-flexistyle-bootstrap-subtheme-home04tabs li a svg {
  margin-right: 20px;
  width: 20px;
  height: 20px;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion {
  display: flex;
  flex-direction: column;
  gap:35px;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-item {
  border-radius: var(--bs-border-radius-xl);
  border:2px solid #171717;
  background: none;
}

.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-item,
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-button {
  border-radius: var(--bs-border-radius-xl)!important;
  background: none;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-button.collapsed {
  border-radius: var(--bs-border-radius-xl)!important;
  background: var(--bg-light-beige-ohr-dark);
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-button[aria-expanded="true"] {
  border-radius: var(--bs-border-radius-xl)!important;
  background: var(--bg-light-beige-ohr);
}
/**
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-item:first-of-type,
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: var(--bs-border-radius-xl);
    border-top-right-radius: var(--bs-border-radius-xl);
    background: none;
}
**/
.block-flexistyle-bootstrap-subtheme-home04tabs li br,
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-header br {
  display: none;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-header button {
  font-size:var(--font-size-base);
  text-transform: uppercase;
  font-weight: bold;
  flex-wrap: wrap;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-header button i {
  font-size: var(--font-size-2xl);
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-button {
  justify-content: space-between;
  gap:40px;
  position: relative;
  padding:60px var(--bs-accordion-btn-padding-x);
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .badge-custom {
  border:2px solid #171717;
  border-radius: var(--bs-border-radius-2xl);
  background: #fff4ed;
  color:#171717;
  font-size: var(--font-size-lg);
  font-weight: normal;
  text-transform: uppercase;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco05homepageaccordion .accordion-item .list-group-item {
  background: none;
}
.block-flexistyle-bootstrap-subtheme-home06dona,
.block-flexistyle-bootstrap-subtheme-bozzablocco08homepagelogofooter {
  background: var(--bg-light-beige-ohr-dark);
  border-radius: var(--bs-border-radius-xl);
  padding:30px 40px;
}
.block-flexistyle-bootstrap-subtheme-home06dona .row div
/*.block-flexistyle-bootstrap-subtheme-home07footer .row div*/ {
  align-content: center;
}
.block-flexistyle-bootstrap-subtheme-home07footer {
  background: #171717;
  border-radius: var(--bs-border-radius-xl);
  padding:40px;
  color:#fff4ed;
}
.block-flexistyle-bootstrap-subtheme-home07footer button {
  margin: 10px 0;
}
.block-flexistyle-bootstrap-subtheme-home07footer p {
  color:#fff4ed;
  text-transform: uppercase;
  font-size: var(--font-size-base);
  padding:0;
  margin:0;
}
.block-flexistyle-bootstrap-subtheme-home07footer a {
  color:#fff4ed;
  text-transform: uppercase;
  font-size: 1.2rem;
  text-decoration: underline;
}
.block-flexistyle-bootstrap-subtheme-home07footer a:hover {
  text-decoration: none;
}
.block-flexistyle-bootstrap-subtheme-home07footer a:active {
  border:2px dotted var(--text-quaternary);
}
.block-flexistyle-bootstrap-subtheme-home07footer img.logo {
  width: 100%;
  height: auto;
}
.block-flexistyle-bootstrap-subtheme-home07footer .col-12 {
  padding:60px 0;
}
.block-flexistyle-bootstrap-subtheme-home07footer .col-12 .row .col img{
  width:auto;
  max-height: 80px;
}
/**
.block-flexistyle-bootstrap-subtheme-home07footer .footerLinks a {
  padding:0 10px;
}
*/
.block-flexistyle-bootstrap-subtheme-home07footer .footerLinks {
  display: flex;
  justify-content: end;
  gap: 20px;
  padding: 0;
}
@media (max-width: 767px) {
  .block-flexistyle-bootstrap-subtheme-home07footer .btn-secondary,
  .footer-donation-item__actions a:last-child {
    width: 100%;
    min-width: initial;
  }
  .block-flexistyle-bootstrap-subtheme-home07footer .footerLinks {
    justify-content: center;
  }
}

.accordion-button:not(.collapsed) {
  color:var(--text-primary);
}

.block-flexistyle-bootstrap-subtheme-bozzablocco08homepagelogofooter {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin:0!important;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco08homepagelogofooter p {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  font-weight: bold;
}
.block-flexistyle-bootstrap-subtheme-bozzablocco03homepagepartecipa .col {
  padding-bottom:80px;
}
.block-flexistyle-bootstrap-subtheme-home06dona,
.block-flexistyle-bootstrap-subtheme-home07footer {
  margin-bottom: 35px;
}
.block-flexistyle-bootstrap-subtheme-home07footer {
  margin-top: 70px;
}
.carousel-control-next, .carousel-control-prev {
  color:var(--text-primary);
  width: initial;
  margin:0 -40px;
  opacity: 1;
}
.carousel-control-next:hover, .carousel-control-prev:hover {
  color:var(--bg-light-beige-ohr-dark);
}
.carousel-control-next:focus, .carousel-control-prev:focus {
  color: var(--text-primary);
}
main.my-4 {
  margin-bottom: 0!important;
}
@media (min-width: 768px) {
  .page header {
    padding: 40px 0 80px 0;
  }
  .logo-lg {
    display: block;
  }
  .logo-sm {
    display:none;
  }
}
.block-flexistyle-bootstrap-subtheme-home01titolo,
.block-flexistyle-bootstrap-subtheme-home05newsletter {
  text-align: center;
  text-transform: uppercase;
}

.block-flexistyle-bootstrap-subtheme-home01titolo p,
.block-flexistyle-bootstrap-subtheme-home05newsletter p {
  max-width: 100%;
  /*font-size: var(--font-size-lg);*/
  margin: 0;
  padding: 0;
}
.block-flexistyle-bootstrap-subtheme-home01titolo .cta,
.block-flexistyle-bootstrap-subtheme-home05newsletter .cta {
  margin:70px 0;
}

.block-flexistyle-bootstrap-subtheme-home01titolo {
  margin:0 0 140px 0;
}

.block-flexistyle-bootstrap-subtheme-home02altriprogetti {
  margin:0 0 100px 0;
}

.block-flexistyle-bootstrap-subtheme-home03eventicarousel {
  margin:0 0 150px 0;
}

.block-flexistyle-bootstrap-subtheme-home04tabs {
  margin:0 0 270px 0;
}

.block-flexistyle-bootstrap-subtheme-home05newsletter {
  margin:0 0 130px 0;
}
.block-flexistyle-bootstrap-subtheme-home02altriprogetti .card {
    background: none;
    border:none;
    margin-bottom: 25px;
}
.block-flexistyle-bootstrap-subtheme-home02altriprogetti .card br {
  display: none;
}
.block-flexistyle-bootstrap-subtheme-home02altriprogetti .card .card-body {
  margin:0;
  padding:0;
}
.block-flexistyle-bootstrap-subtheme-home02altriprogetti .card img {
  border-radius: var(--bs-border-radius-xl);
  height: 545px;
  object-fit: cover;
}
.block-flexistyle-bootstrap-subtheme-home02altriprogetti h5 {
  font-size: var(--font-size-lg);
  margin:0;
  padding:0;
}
.block-flexistyle-bootstrap-subtheme-home06dona p {
    font-size: var(--font-size-xl)!important;
  }

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a,
.block-flexistyle-bootstrap-subtheme-menuohr26 span.nav-link,
.navbar-expand-lg .navbar-nav .nav-item a {
  text-decoration: none;
  position: relative;
  transition: 0.4s;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:hover,
.block-flexistyle-bootstrap-subtheme-menuohr26 span.nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-item a:hover,
.navbar-expand-lg .navbar-nav .nav-item:hover {
  text-decoration: none;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a::before,
.block-flexistyle-bootstrap-subtheme-menuohr26 span.nav-link::before,
.navbar-expand-lg .navbar-nav .nav-item a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 4px;
  bottom: 0;
  left: 50%;
  top:40px;
  background-color: var(--bg-dark);
  transition: all 0.4s;
}

.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a:hover::before,
.block-flexistyle-bootstrap-subtheme-menuohr26 span.nav-link:hover::before,
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li a.menu-item--expanded:hover::before,
.navbar-expand-lg .navbar-nav .nav-item a:hover::before {
  width: 100%;
  left: 0;
  top:40px;
}

.videotest {
  position: absolute;
  z-index: -1;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #FFE986 url(/sites/default/files/test_s/bg01.mp4) repeat;
}

.videotest video {

}
.overflow-hidden {
    overflow: hidden;
}
.items-center {
    align-items: center;
}
.w-\[100dvw\] {
    width: 100dvw;
}
.h-\[100dvh\] {
    height: 100dvh;
}
.flex {
    display: flex;
}
.-z-10 {
    z-index: -10;
}
.top-0 {
    top: 0;
}
.left-0 {
    left: 0;
}
.fixed {
    position: fixed;
}
.max-w-full {
    max-width: 100%;
}
.w-auto {
    width: auto;
}
.max-h-full {
    max-height: 100%;
}
.h-auto {
    height: auto;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
video {
    max-width: 100%;
    height: auto;
}
video {
    display: block;
    vertical-align: middle;
  animation-range: cover 0% cover 100%;
  animation: the-animation linear;
  animation-timeline: view();
  animation-iteration-count: 1;
}

@keyframes the-animation {
  to {
    background-size: 500px;
  }
}

/* ============================================
   DROPDOWN - sottovoci su hover di .menu-item--expanded
   Struttura reale generata da menu.html.twig:
     ul.nav > li.menu-item--expanded > ul.menu
   ============================================ */

/* Il li con sottovoci è l'ancora del dropdown */
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded {
  position: relative;
}

/*
  ul.menu figlio: nascosto di default.
  Il CSS esistente fa display:flex su tutti gli ul dentro il block
  (.block-...-menuohr26 div ul { display: flex }).
  Il selettore seguente ha specificità più alta (0,3,4) vs (0,1,2)
  quindi vince senza bisogno di !important.
*/
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded > ul.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown, 1000);
  min-width: 200px;
  background-color: #FFE986;
  border-top: 4px solid var(--bg-dark);
/*  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);*/
  padding: 4px 0;
  margin: 0;
  gap: 0;
  list-style: none;
}

/* Mostra all'hover sul li padre, o al focus-within (navigazione da tastiera) */
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded:hover > ul.menu,
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded:focus-within > ul.menu {
  display: block;
}

/*
  li dentro ul.menu: il CSS esistente applica display:flex a tutti i li
  (.block-...-menuohr26 div ul li { display: flex }).
  Override con specificità (0,4,5) vs (0,1,3).
*/
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded > ul.menu > li.nav-item {
  display: block;
  padding: 0;
  min-height: unset;
  background: none;
  border-radius: 0;
}

/* Link dentro ul.menu: layout e spaziatura */
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded > ul.menu > li.nav-item > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  white-space: nowrap;
}

/*
  Rimuove la linea animata (::before) che il CSS esistente aggiunge
  a tutti i li a. Nei link del dropdown non serve.
*/
/**
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded > ul.menu > li.nav-item > a::before {
  display: none;
}
**/

/* ============================================
   DROPDOWN - mobile (≤ 767px)
   Su mobile scende in linea sotto il link padre
   ============================================ */
@media (max-width: 767px) {
  .border-primary {
    border-color:var(--text-secondary)!important;
  }
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul,
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li {
    flex-flow: column;
    align-items: flex-start;
  }
.block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded,
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded a {
    padding: 0;
  }
  /**
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded span:after,
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded a:after {
    content:'';
    background-image: url('/modules/flexistyle_bootstrap/subtheme/images/icons/icon-dropdown.svg');
    background-size: 16px;
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs);
    position:relative;
    left:10px;
  }
  */
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.nav-item.menu-item--expanded ul li a:after {
    content:'';
  }
  .block-flexistyle-bootstrap-subtheme-menuohr26 div ul li.menu-item--expanded > ul.menu {
    position: static;
    width: 100%;
    border-top: none;
    border-left: 3px solid var(--text-secondary, #A83820);
    box-shadow: none;
    padding: 0 0 0 var(--spacing-md, 16px);
    margin-top: 4px;
    background-color: transparent;
  }
  .logo-lg {
    display: none;
  }
  .logo-sm {
    display:block;
  }
}
.boxStandard {
  background: var(--bg-light-beige-ohr);
  border-radius: var(--bs-border-radius-xl);
  padding: 30px 40px;
  margin-bottom: 75px;
  display: block;
  width: 100%;
}
.boxStandard p {
  font-size: var(--font-size-lg);
}
.boxStandardBordered {
  background: var(--bg-light-beige-ohr);
  border-radius: var(--bs-border-radius-xl);
  border:2px solid var(--bg-dark);
  padding: 30px 10px;
  margin-bottom: 75px;
  display: block;
  width: 100%;
  margin: 40px 0 60px 0;
}
.uppercase {
  text-transform: uppercase;
}
.imgGrande {
  max-width: 100%;
  width: 100%;
  border-radius: var(--bs-border-radius-xl);
}
.imgBorderRadius,
.imgBorderRadius img {
  border-radius: var(--bs-border-radius-xl);
}
.imgBorderRadius img {
  object-fit: cover;
}
.boxStandard div.row > div > div,
.innerBox.row > div {
  border-radius: var(--bs-border-radius-xl);
  /*padding: 30px 40px;*/
}
.boxStandard div.row > div > div p,
.innerBox.row > div p {
  font-size: var(--font-size-base);
}
.bg01 {
  background-color: var(--bg-light-beige-ohr-main);
}
.text-xs {
  font-size: var(--font-size-xs) /* 10px */;
}
.text-sm {
  font-size: var(--font-size-sm) /* 16px */;
}
.text-base {
  font-size: var(--font-size-base) /* 20px */;
}
.text-lg {
  font-size: var(--font-size-lg) /* 24px */;
}
.text-xl {
  font-size: var(--font-size-xl) /* 32px */;
}
.text-2xl {
  font-size: var(--font-size-2xl) /* 46px */;
}
.text-3xl {
  font-size: var(--font-size-3xl) /* 64px */;
}
.text-4xl {
  font-size: var(--font-size-4xl) /* 164px */;
}
.margin-vertical25 {
  margin:25px 0;
}
.w-20 {
  width:20%!important;
}
.footerOHW {
  margin:80px 0 40px 0;
  /*border-top:4px solid var(--bg-dark);*/
  border-radius: var(--bs-border-radius-xl);
  padding:90px 50px 50px 50px;
  background-color: #c49587;
  background-image: url("/sites/default/files/test_s/bg-footer-chi-siamo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
.width-70 {
  width: 70%!important;
  margin: auto;
}
.width-100 {
  width: 100%!important;
  margin: auto;
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}
body.anonymous #block-flexistyle-bootstrap-subtheme-menuohr26 > div > ul > li:last-child > a {
  text-indent: -9999999px;
}
body.anonymous #block-flexistyle-bootstrap-subtheme-menuohr26 > div > ul > li:last-child > a::before {
    /*content: '\f007'; /* Unicode for user icon */
    /*font-family: var(--fa-style-family,"Font Awesome 6 Free"); */     
  display: inline-block;
  content: "";  
  /*background-image:url('data:image/svg+xml,<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.12891 22.2201C1.12891 20.622 1.76376 19.0893 2.89382 17.9592C4.02387 16.8292 5.55656 16.1943 7.15469 16.1943H19.2063C20.8044 16.1943 22.3371 16.8292 23.4671 17.9592C24.5972 19.0893 25.2321 20.622 25.2321 22.2201C25.2321 23.0192 24.9146 23.7855 24.3496 24.3506C23.7846 24.9156 23.0182 25.233 22.2192 25.233H4.1418C3.34273 25.233 2.57639 24.9156 2.01136 24.3506C1.44634 23.7855 1.12891 23.0192 1.12891 22.2201Z" stroke="%23171717" stroke-width="2.25967" stroke-linejoin="round"/><path d="M13.1814 10.1686C15.6774 10.1686 17.7008 8.14519 17.7008 5.64922C17.7008 3.15326 15.6774 1.12988 13.1814 1.12988C10.6855 1.12988 8.66211 3.15326 8.66211 5.64922C8.66211 8.14519 10.6855 10.1686 13.1814 10.1686Z" stroke="%23171717" stroke-width="2.25967"/></svg>');*/
  background-image: url(/modules/flexistyle_bootstrap/subtheme/images/icons/icon-account.png);
  background-size: 27px;
  background-color:initial;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
}
/**
#block-flexistyle-bootstrap-subtheme-menuohr26 > div > ul > li:nth-child(5) > a {
  text-indent: -9999999px;
}
#block-flexistyle-bootstrap-subtheme-menuohr26 > div > ul > li:nth-child(5) > a::before {
    /*content: '\f007'; /* Unicode for user icon */
    /*font-family: var(--fa-style-family,"Font Awesome 6 Free"); */ 
/**    
  display: inline-block;
  content: "";  
  background-image:url('data:image/svg+xml,<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.12891 22.2201C1.12891 20.622 1.76376 19.0893 2.89382 17.9592C4.02387 16.8292 5.55656 16.1943 7.15469 16.1943H19.2063C20.8044 16.1943 22.3371 16.8292 23.4671 17.9592C24.5972 19.0893 25.2321 20.622 25.2321 22.2201C25.2321 23.0192 24.9146 23.7855 24.3496 24.3506C23.7846 24.9156 23.0182 25.233 22.2192 25.233H4.1418C3.34273 25.233 2.57639 24.9156 2.01136 24.3506C1.44634 23.7855 1.12891 23.0192 1.12891 22.2201Z" stroke="%23171717" stroke-width="2.25967" stroke-linejoin="round"/><path d="M13.1814 10.1686C15.6774 10.1686 17.7008 8.14519 17.7008 5.64922C17.7008 3.15326 15.6774 1.12988 13.1814 1.12988C10.6855 1.12988 8.66211 3.15326 8.66211 5.64922C8.66211 8.14519 10.6855 10.1686 13.1814 10.1686Z" stroke="%23171717" stroke-width="2.25967"/></svg>');
  background-color:initial;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
}

*/
.footer-bottom__social-link {
  line-height: 0;
}
.footer-bottom__social-link i {
  font-size: 0;
  color:var(--text-primary);
}
.footer-bottom__social-link i::before {
  font-size: var(--font-size-lg);
  color:var(--text-primary);
}

.footer-bottom__social-link:hover i,
.footer-bottom__social-link:hover i::before {
  color:var(--text-quaternary);
}

/* ==============================
   FORMS
   ============================== */
form.user-login-form,
form.user-pass,
form {
  margin-bottom: 75px;
}

form.user-pass label,
.user-login-form label,
.user-register-form.user-form label,
form label {
  font-size: var(--font-size-base);
  font-weight: bold;
  text-transform: uppercase;
  padding:5px 0 15px;
}

.form-check-label {
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 24px;
    height: 24px;
    background-color: blue;
    border-radius: 3px;
    transition: 0.3s;
  }
}

.user-login-form input[type="text"],
.user-login-form input[type="email"],
.user-login-form input[type="date"],
.user-login-form input[type="tel"],
.user-login-form input[type="password"],
.user-register-form.user-form input[type="text"],
.user-register-form.user-form input[type="email"],
.user-register-form.user-form input[type="date"],
.user-register-form.user-form input[type="tel"],
.user-register-form.user-form select,
.user-register-form.user-form details,
form.user-pass input[type="text"],
form.user-pass input[type="email"],
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="tel"],
form input[type="password"],
form input[type="number"],
form select,
form details {
  border-radius: var(--bs-border-radius-2xl)!important;
  background:none!important;
  border:2px solid var(--bg-dark)!important;
  padding:5px 25px!important;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom:25px!important;
}
form select {
  font-size: var(--font-size-lg)!important;
}
form input[type="checkbox"] {
  width:36px!important;
}
form.user-login-form .description,
form.user-pass .description,
.user-register-form.user-form .description,
form .description {
  font-size: var(--font-size-lg);
  margin-bottom: 60px;
}
#user-login-form .reset-pass a,
form .reset-pass a {
  font-size: var(--font-size-lg)!important;
}
.user-register-form.user-form legend,
form legend {
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin:35px 0 20px;
}
#edit-login-returning-customer-forgot-password {
  font-size: var(--font-size-lg)!important;
  display: block!important;
  padding:25px 0!important;
}
#edit-login-returning-customer-submit,
#edit-login-register-register,
button.delete-order-item,
button.form-submit#edit-checkout {
  background:var(--bg-dark)!important;
  color: var(--text-quaternary)!important;
}
#edit-login-returning-customer-submit:hover,
#edit-login-register-register:hover,
button.delete-order-item:hover,
button.form-submit#edit-checkout:hover {
  background:var(--bg-light-beige-ohr-main)!important;
  color: var(--text-primary)!important;
  border-color: var(--bg-dark);
}
.user-register-form.user-form .form-check-input[type=checkbox],
form .form-check-input[type=checkbox] {
  border-radius: var(--bs-border-radius-2xl);
  border:2px solid var(--bg-dark);
}
button.form-submit#edit-checkout:active,
button.delete-order-item:active,
button.form-submit#edit-submit:active {
  background:var(--bg-light-beige-ohr-dark)!important;
  color: var(--text-primary)!important;
  border-color: var(--bg-light-beige-ohr-dark)!important;
}
.user-register-form.user-form .form-check-input:checked,
form .form-check-input:checked {
  background-color: var(--bg-dark);
}
.user-register-form.user-form {
  margin-bottom: 65px;
}


/*data-bs-interval="5000"*/
.img-wrapper {
  max-width: 100%;
  height: 65vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
img {
  max-width: 100%;
  max-height: 100%;
}
@media screen and (min-width: 576px) {
  .carousel-eventi .carousel-inner,
  .carousel-team .carousel-inner {
    display: flex;
  }
  .carousel-eventi .carousel-item {
    display: block;
    margin-right: 0;
    margin: 0px;
    flex: 0 0 calc(100% / 3);
  }
  .carousel-team .carousel-item {
    display: block;
    /*margin-right: 0;*/
    /*margin: 0px;*/
    flex: 0 0 calc(100% / 3 - 10px);
  }
  .carousel-eventi .carousel-item:last-child {
    margin: 0;
  }
  .carousel-team .carousel-item:last-child {
    /*margin: 0;*/
  }
  .carousel-eventi .img-wrapper,
  .carousel-team .img-wrapper {
    height: 21vw;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .carousel-team .carousel-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}
@media (max-width: 767px) {
  ul.nav.primary.nav-tabs li.nav-item {
    width: 100%;
  }

  ul.nav.primary.nav-tabs .nav-link {
    width: 100%;
    font-size: var(--font-size-sm)!important;
    padding: 0.4em 1em;
  }
}
.carousel-eventi .carousel-control-prev,
.carousel-eventi .carousel-control-next,
.carousel-team .carousel-control-prev,
.carousel-team .carousel-control-next  {
  width: 6vh;
  height: 6vh;
/*  background-color: #e1e1e1;*/
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}
.carousel-eventi .carousel-control-prev:hover,
.carousel-eventi .carousel-control-next:hover,
.carousel-team .carousel-control-prev:hover,
.carousel-team .carousel-control-next:hover {
  opacity: 0.8;
}
.carousel-eventi .carousel-control-prev-icon,
.carousel-team .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--bg-dark)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-eventi .carousel-control-next-icon,
.carousel-team .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--bg-dark)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
a span.addFavorites {
  font-size: var(--font-size-xl);
  text-underline-offset: 0;
  line-height: 0;
  position: relative;
  top:3px;
}
.evento-card__title a:hover,
a:hover span.addFavorites {
  color: var(--text-tertiary);
  text-decoration: none;
}

.btnAuto {
  min-width: 100%;
}
.btnFull {
  width: 100%;
}
h2 small {
  font-size: 70%;
}

.boxShop {
  margin-bottom: 70px;
}
.boxShop img {
  border-radius: var(--radius-xl);
}
a.addToCart::after {
  content:"+";
  text-align: right;
  width: 100%;
}
.addToFavorites:hover svg path {
  fill:var(--brand-orange-accessible);
}
.prodsGrid {
  display: flex;
}
/**
#views-form-commerce-cart-form-default-6 .table>:not(caption)>*>* {
  border-radius: var(--radius-xl);
  border:2px solid var(--bg-dark);
  background-color: var(--bg-light-beige-ohr-main);
}
**/

/**
#views-form-commerce-cart-form-default-6 .table {
  background-color: initial;
}
#views-form-commerce-cart-form-default-6 .table>:not(caption)>*>* {
  border-radius: var(--radius-xl);
  border:2px solid var(--bg-dark);
  background-color: var(--bg-light-beige-ohr-main);
}

#views-form-commerce-cart-form-default-6 .table th,
#views-form-commerce-cart-form-default-6 .table td {
  border:none;
  padding:15px 20px;
}
.block-flexistyle-bootstrap-subtheme-content table,
.block-flexistyle-bootstrap-subtheme-content table td {
  background: none;
  border:none;
}
.block-flexistyle-bootstrap-subtheme-content table tr:hover {
  background-color: var(--bg-light-beige-ohr-main);
}
.block-flexistyle-bootstrap-subtheme-content table tr:nth-child(odd) {
  background-color: var(--bg-light-beige-ohr);
}
*/

.block-flexistyle-bootstrap-subtheme-content table {
 /* Change these properties */
 --border: 2px solid var(--bg-dark);
 border-radius: var(--radius-xl);
 --bs-table-bg:none!important;

 /* Don't change these properties */
 border-spacing: 0;
 border-collapse: separate;
 border: var(--border);
 overflow: hidden;
}

/* Apply a border to the right of all but the last column */
.block-flexistyle-bootstrap-subtheme-content table th:not(:last-child),
.block-flexistyle-bootstrap-subtheme-content table td:not(:last-child) {
 border-right: var(--border);
}
.block-flexistyle-bootstrap-subtheme-content table th {
  background-color: var(--bg-dark);
  color: var(--text-quaternary);
}
.block-flexistyle-bootstrap-subtheme-content table th:not(:last-child) {
  border-right-color: var(--text-quaternary);
}
.block-flexistyle-bootstrap-subtheme-content table tr {
  background-color: var(--bg-light-beige-ohr-main)!important;
}
.block-flexistyle-bootstrap-subtheme-content table th,
.block-flexistyle-bootstrap-subtheme-content table td {
  padding: 20px;
}
.block-flexistyle-bootstrap-subtheme-content table tr:nth-child(odd) {
  background-color: var(--bg-light-beige-ohr)!important;
}
/* Apply a border to the bottom of all but the last row */
.block-flexistyle-bootstrap-subtheme-content table>thead>tr:not(:last-child)>th,
.block-flexistyle-bootstrap-subtheme-content table>thead>tr:not(:last-child)>td,
.block-flexistyle-bootstrap-subtheme-content table>tbody>tr:not(:last-child)>th,
.block-flexistyle-bootstrap-subtheme-content table>tbody>tr:not(:last-child)>td,
.block-flexistyle-bootstrap-subtheme-content table>tfoot>tr:not(:last-child)>th,
.block-flexistyle-bootstrap-subtheme-content table>tfoot>tr:not(:last-child)>td,
.block-flexistyle-bootstrap-subtheme-content table>tr:not(:last-child)>td,
.block-flexistyle-bootstrap-subtheme-content table>tr:not(:last-child)>th,
.block-flexistyle-bootstrap-subtheme-content table>thead:not(:last-child),
.block-flexistyle-bootstrap-subtheme-content table>tbody:not(:last-child),
.block-flexistyle-bootstrap-subtheme-content table>tfoot:not(:last-child) {
 border-bottom: var(--border);
}
.card {
  background-color: var(--bg-light-beige-ohr-main);
  border: 2px solid var(--bg-dark);
  border-radius: var(--radius-xl);
  padding: 1.75rem!important;
}
.card__image-wrapper {
  position: relative;
  width: 100%;
/*  padding: 15px;*/
  overflow: hidden;
}
.card__image-wrapper img {
  border-radius: var(--radius-xl);
}
.card__content {

  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
body {
  /*background-image: url(/modules/flexistyle_bootstrap/subtheme/images/bgs/bg-main01.png);*/
  /*background-image: url(/modules/flexistyle_bootstrap/subtheme/images/bgs/oh26_bkg_sm.gif);*/
  background-image: url(/modules/flexistyle_bootstrap/subtheme/images/bgs/ohr26_bkg.gif);
  background-position: top center;
  background-size: 100%;
  /*background-size: cover;*/
  background-color: #FFE986;
}

@media (max-width: 767px) {
  .btn {
    min-width: initial!important;
  }
  p {
    overflow-wrap: break-word;
  }
  .footerLinks a {
    font-size: var(--font-size-sm);
  }
  .block-flexistyle-bootstrap-subtheme-home07footer .col {
    padding: 0;
  } 
  .block-flexistyle-bootstrap-subtheme-home07footer p {
    font-size: 16px;
  }
}
.displayNone {
  display: none;
}

@media (min-width: 576px) {
    .carousel-eventi .carousel-inner {
      display: flex;
      gap: 10px;
    }
    .carousel-eventi .carousel-item {
      flex: 0 0 calc((100% - 20px) / 3); /* (100% - 2 gap da 10px) / 3 item */
    }
  }


#block-flexistyle-bootstrap-subtheme-home02altriprogetti .card {
    position: relative;
    overflow: hidden;
    padding: 0!important;
    min-height: 0;
  }

  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .card > a:first-child {
    display: flex;
    height: 100%;
  }

  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .card-body {
    position: absolute;
    bottom: 20px;
    left: 1rem;
    right: 1rem;
    background: var(--bg-light-beige-ohr-main);
    border-radius: var(--radius-full);
    padding:0.5rem 1rem;
  }

  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .card-title a {
    text-decoration: none;
    font-size: var(--font-size-base);
    color: var(--bg-dark);
  }
  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .col-lg-4 .card {
    /*flex: 1 1 0 !important;*/
    min-height: 0;
  }
  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .col-lg-4 {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    gap: 8px;
  }
  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .col-lg-4  img {
    height: 260px;
    object-fit: cover;
  }  

@media (max-width:992px) {
  #block-flexistyle-bootstrap-subtheme-home02altriprogetti .col-lg-4  img {
    height: auto!important;
    object-fit: cover;
  }  
}
 @media (min-width: 768px) {

    /* Colonne alla stessa altezza */
    #progetti-grid > .row {
      align-items: stretch;
    }

    /* Colonna destra: flex column */
    #progetti-grid > .row > .col-md-6:last-child {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Inner row destra: CSS Grid con riga superiore auto e inferiore che riempie */
    #progetti-grid > .row > .col-md-6:last-child > .row {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;
      /*gap: 1rem;*/
      flex: 1;
      margin: 0 !important;
    }

    /* Le due immagini in alto: padding reset */
    #progetti-grid > .row > .col-md-6:last-child > .row > .col-md-6 {
      padding: 0;
    }

    /* Immagine grande in basso: occupa tutta la larghezza e riempie lo spazio rimanente */
    #progetti-grid > .row > .col-md-6:last-child > .row > .col-12 {
      grid-column: 1 / 3;
      display: flex;
      padding: 0;
    }

    /* Rimuove il ratio fisso (21x9) dall'immagine in basso e la fa espandere */
    #progetti-grid > .row > .col-md-6:last-child > .row > .col-12 .ratio {
      flex: 1;
    }

    #progetti-grid > .row > .col-md-6:last-child > .row > .col-12 .ratio::before {
      display: none !important;
    }
  }


/** ===========================
 *  Griglia Edizioni Precedenti
 *  =========================== */
.view-id-ed_precedenti .views-view-responsive-grid__item .views-view-responsive-grid__item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.view-id-ed_precedenti .views-view-responsive-grid__item {
  background: var(--bg-light-beige-ohr);
  border-radius: var(--bs-border-radius-xl);
  border:2px solid var(--bg-dark);
  padding: 20px;
  display: block;
  width: 100%;
  margin: 0;
}
.view-id-ed_precedenti .views-view-responsive-grid__item img {
  border-radius: var(--radius-xl);
  margin-bottom: 10px;
  height: 300px;
  object-fit: cover;
}
.view-id-ed_precedenti .views-view-responsive-grid__item .views-field-title {
  flex-grow: 1;
  font-weight: bold;
}
.view-id-ed_precedenti .views-view-responsive-grid__item .views-field-title a {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--bg-dark);
  text-decoration: none;
  margin-bottom: 10px;
}

.views-field-field-allegati-edizione a {
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-dark);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--bg-dark);
  text-decoration: none;
  width:100%;
  padding: 10px 20px;
  margin:10px 0;
  display: block;
  position: relative;
}
/**
.views-field-field-allegati-edizione a:after {
  content:"🠛";
  /*position: absolute;*/
  /*right:20px;*/
/**
  width:100%;
  text-align: right;
}
*/
.views-field-field-allegati-edizione ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-flow: row;
    gap: 20px;
    flex-wrap: wrap;
}

.views-field-field-allegati-edizione ul li {
    flex-grow: 1;
}

.views-field-field-allegati-edizione ul li a {
  font-size: var(--font-size-xs);
  /*display: flex;*/
  text-align: center;
}
.views-field-field-allegati-edizione ul li a:hover  {
  background-color: var(--bg-dark);
  color: var(--text-quaternary);
}
@media (max-width:979px) {
  .views-field-field-allegati-edizione ul {
    gap: 0px;
  }
}
.views-field-field-allegati-edizione li span:nth-child(2) {
  display: none;
}


#pacchettoTogether .evento-card,
#pacchettoGuest .evento-card,
.pacchettoSostieni .evento-card {
  height: 100%;
}

#pacchettoTogether .evento-card__image-wrapper,
#pacchettoGuest .evento-card__image-wrapper,
.pacchettoSostieni .evento-card__image-wrapper  {
  height: auto;
  overflow: auto;
}

#pacchettoTogether .evento-card__image-wrapper img,
#pacchettoGuest .evento-card__image-wrapper img,
.pacchettoSostieni .evento-card__image-wrapper img {
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
#pacchettoTogether h3.evento-card__title,
#pacchettoGuest h3.evento-card__title,
.pacchettoSostieni h3.evento-card__title {
  font-size: var(--font-size-base);
  font-weight: bold;
}
#pacchettoTogether p.evento-card__date,
#pacchettoGuest p.evento-card__date,
.pacchettoSostieni  p.evento-card__date {
  font-size: var(--font-size-sm)!important;
  font-weight: bold;
}
#pacchettoTogether .evento-card__content,
#pacchettoGuest .evento-card__content,
.pacchettoSostieni .evento-card__content {
  padding: 0.5rem 1rem;
}
#pacchettoTogether .evento-card__content p,
#pacchettoGuest .evento-card__content p,
.pacchettoSostieni .evento-card__content p {
  font-size: var(--font-size-sm);
}
#pacchettoTogether .evento-card__meta,
#pacchettoGuest .evento-card__meta,
.pacchettoSostieni .evento-card__meta {
  padding: 0 0 15px 0;
}
#pacchettoTogether .evento-card__meta p,
#pacchettoGuest .evento-card__meta p,
.pacchettoSostieni .evento-card__meta p {
  font-size: var(--font-size-base);
  line-height: 0;
  padding: 0;
  margin: 0;
  flex-grow: 0;
}
.multi-collapse .container-fluid {
  position: relative;
  top: 40px;
}
.pacchettoSostieni {
  padding-bottom: 20px;
}
body.page-edizioni-precedenti h1.page-title {
  width:100%;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing:-4px;
  line-height: 1;
  font-size:clamp(46px,15vw,164px);
  padding-bottom:20px;
  margin:0;
}
@media (max-width: 656px) {
  .view-id-ed_precedenti .views-view-responsive-grid__item img {
    width: 100%;
  }
}