/* ============================================================
   ASSOTURISMO PERLEDO — main.css
   Version: 1.0.0 | Author: Spektrio
   ============================================================ */

/* ── Google Fonts preconnect ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ── Design Tokens (fallbacks — overridden by Customizer) ─── */
:root {
  --asso-primary:       #1B2B4B;
  --asso-secondary:     #C9B99A;
  --asso-bg:            #F0EDE8;
  --asso-text:          #2A2A2A;
  --asso-text-muted:    #7A7A7A;
  --asso-border:        rgba(27, 43, 75, 0.12);
  --asso-white:         #FFFFFF;

  --asso-font-body:     'Inter', sans-serif;
  --asso-font-heading:  'Cormorant Garamond', serif;
  --asso-font-size-base: 16px;

  --asso-h1-size:       clamp(2.5rem, 5vw, 4.5rem);
  --asso-h2-size:       clamp(2rem,   4vw, 3.5rem);
  --asso-h3-size:       clamp(1.5rem, 3vw, 2.5rem);
  --asso-h4-size:       clamp(1.25rem, 2.5vw, 2rem);
  --asso-h5-size:       1.25rem;
  --asso-h6-size:       1rem;

  --asso-h1-color:      #1B2B4B;
  --asso-h2-color:      #1B2B4B;
  --asso-h3-color:      #1B2B4B;
  --asso-h4-color:      #1B2B4B;
  --asso-h5-color:      #1B2B4B;
  --asso-h6-color:      #1B2B4B;
  --asso-p-color:       #2A2A2A;

  --asso-header-height: 80px;
  --asso-header-bg:     rgba(240, 237, 232, 0.95);

  --asso-radius:        2px;
  --asso-radius-md:     4px;

  --asso-space-xs:      0.5rem;
  --asso-space-sm:      1rem;
  --asso-space-md:      2rem;
  --asso-space-lg:      4rem;
  --asso-space-xl:      6rem;
  --asso-space-2xl:     8rem;

  --asso-max-w:         1200px;
  --asso-max-w-narrow:  800px;

  --asso-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --asso-ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);

  --asso-shadow:        0 2px 20px rgba(27, 43, 75, 0.08);
  --asso-shadow-lg:     0 8px 40px rgba(27, 43, 75, 0.14);
}

/* ── Dark Mode ───────────────────────────────────────────── */
body.mode-dark {
  --asso-primary:     #C9B99A;
  --asso-secondary:   #1B2B4B;
  --asso-bg:          #111827;
  --asso-text:        #E8E4DC;
  --asso-text-muted:  #9CA3AF;
  --asso-border:      rgba(201, 185, 154, 0.15);
  --asso-header-bg:   rgba(17, 24, 39, 0.95);
  
  --asso-h1-color:    #C9B99A;
  --asso-h2-color:    #C9B99A;
  --asso-h3-color:    #C9B99A;
  --asso-h4-color:    #C9B99A;
  --asso-h5-color:    #C9B99A;
  --asso-h6-color:    #C9B99A;
  --asso-p-color:     #E8E4DC;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--asso-font-body);
  font-size:        var(--asso-font-size-base);
  font-weight:      400;
  line-height:      1.7;
  color:            var(--asso-p-color);
  background-color: var(--asso-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s var(--asso-ease), color 0.3s var(--asso-ease);
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--asso-font-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--asso-h1-size); color: var(--asso-h1-color); font-weight: 300; }
h2 { font-size: var(--asso-h2-size); color: var(--asso-h2-color); font-weight: 300; }
h3 { font-size: var(--asso-h3-size); color: var(--asso-h3-color); }
h4 { font-size: var(--asso-h4-size); color: var(--asso-h4-color); }
h5 { font-size: var(--asso-h5-size); color: var(--asso-h5-color); }
h6 { font-size: var(--asso-h6-size); color: var(--asso-h6-color); }

em, i { font-style: italic; }

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 300;
  color: var(--asso-primary);
}

p {
  margin-bottom: 1.2em;
  max-width: 65ch;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--asso-primary);
  text-decoration: none;
  transition: color 0.2s var(--asso-ease), opacity 0.2s var(--asso-ease);
}

a:hover { color: var(--asso-secondary); }

strong, b { font-weight: 600; }

small { font-size: 0.8125rem; }

/* Overline label style */
.asso-label {
  font-family:    var(--asso-label-font, var(--asso-font-body));
  font-size:      var(--asso-label-size, 0.6875rem);
  font-weight:    var(--asso-label-weight, 600);
  font-style:     var(--asso-label-style, normal);
  text-decoration: var(--asso-label-decoration, none);
  text-transform: uppercase;
  color:          var(--asso-label-color, var(--asso-secondary));
  letter-spacing: 0.15em;
  display:        block;
  margin-bottom:  0.75rem;
}

/* ── Lists ───────────────────────────────────────────────── */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2em;
}

ul li, ol li {
  margin-bottom: 0.4em;
}

ul.asso-bullets {
  list-style: none;
  padding: 0;
}

ul.asso-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

ul.asso-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--asso-secondary);
}

/* ── Blockquote ──────────────────────────────────────────── */
blockquote {
  font-family: var(--asso-font-heading);
  font-size:   clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  font-style:  italic;
  line-height: 1.4;
  color:       var(--asso-primary);
  text-align:  center;
  padding:     var(--asso-space-lg) var(--asso-space-md);
  max-width:   var(--asso-max-w-narrow);
  margin:      0 auto;
}

blockquote::before {
  content: '"\2019\201C"';
  content: open-quote;
  font-size: 5rem;
  line-height: 0;
  vertical-align: -0.5em;
  color: var(--asso-secondary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

blockquote cite {
  display:        block;
  margin-top:     1.5rem;
  font-size:      0.6875rem;
  font-family:    var(--asso-font-body);
  font-style:     normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
}

/* ── Tables ──────────────────────────────────────────────── */
table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
}

th {
  font-family:    var(--asso-font-body);
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
  text-align:     left;
  padding:        0.75rem 1rem;
  border-bottom:  1px solid var(--asso-border);
}

td {
  padding:       1rem;
  border-bottom: 1px solid var(--asso-border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: rgba(27, 43, 75, 0.03); }

/* ── Buttons ─────────────────────────────────────────────── */
.asso-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.75rem 2rem;
  font-family:     var(--asso-font-body);
  font-size:       0.75rem;
  font-weight:     600;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1px solid currentColor;
  border-radius:   var(--asso-radius);
  cursor:          pointer;
  transition:      all 0.25s var(--asso-ease);
  white-space:     nowrap;
  background:      transparent;
}

.asso-btn--primary {
  color:       var(--asso-white);
  background:  var(--asso-primary);
  border-color: var(--asso-primary);
}

.asso-btn--primary:hover {
  background:  transparent;
  color:       var(--asso-primary);
}

.asso-btn--outline {
  color:        var(--asso-primary);
  border-color: var(--asso-primary);
}

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

.asso-btn--outline-light {
  color:        var(--asso-white);
  border-color: rgba(255,255,255,0.6);
}

.asso-btn--outline-light:hover {
  background:  rgba(255,255,255,0.15);
  border-color: var(--asso-white);
}

.asso-btn--ghost {
  border:     none;
  padding:    0;
  color:      var(--asso-primary);
  font-size:  0.8125rem;
  letter-spacing: 0.08em;
  gap: 0.75rem;
}

.asso-btn--ghost::after {
  content: '→';
  transition: transform 0.2s var(--asso-ease);
}

.asso-btn--ghost:hover { color: var(--asso-secondary); }
.asso-btn--ghost:hover::after { transform: translateX(4px); }

/* ── Forms ───────────────────────────────────────────────── */
input, textarea, select {
  font-family:  var(--asso-font-body);
  font-size:    1rem;
  color:        var(--asso-text);
  background:   var(--asso-bg);
  border:       1px solid var(--asso-border);
  border-radius: var(--asso-radius);
  padding:      0.75rem 1rem;
  width:        100%;
  transition:   border-color 0.2s var(--asso-ease), box-shadow 0.2s var(--asso-ease);
  outline:      none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--asso-primary);
  box-shadow:   0 0 0 3px rgba(27, 43, 75, 0.08);
}

label {
  display:       block;
  font-size:     0.8125rem;
  font-weight:   500;
  margin-bottom: 0.4rem;
  color:         var(--asso-text);
}

/* ── Layout utilities ────────────────────────────────────── */
.asso-container {
  width:     100%;
  max-width: var(--asso-max-w);
  margin:    0 auto;
  padding:   0 var(--asso-space-md);
}

.asso-container--narrow {
  max-width: var(--asso-max-w-narrow);
}

.asso-section {
  padding: var(--asso-space-xl) 0;
}

.asso-section--sm {
  padding: var(--asso-space-lg) 0;
}

.asso-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--asso-space-lg);
  align-items:           center;
}

.asso-grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--asso-space-md);
}

/* ── Images ──────────────────────────────────────────────── */
img {
  max-width:  100%;
  height:     auto;
  display:    block;
}

.asso-img-cover {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ── Hr / Divider ────────────────────────────────────────── */
hr, .asso-divider {
  border:         none;
  border-top:     1px solid var(--asso-border);
  margin:         var(--asso-space-lg) 0;
}

/* ── Skip Link ───────────────────────────────────────────── */
.skip-link {
  position:        absolute;
  top:             -100%;
  left:            0;
  background:      var(--asso-primary);
  color:           var(--asso-white);
  padding:         0.5rem 1.5rem;
  z-index:         9999;
  font-size:       0.875rem;
}
.skip-link:focus { top: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.asso-header {
  position:        fixed;
  top:             0;
  left:            0;
  width:           100%;
  height:          var(--asso-header-height);
  background:      var(--asso-header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--asso-border);
  z-index:         1000;
  transition:      height 0.3s var(--asso-ease), box-shadow 0.3s var(--asso-ease);
}

.asso-header.is-scrolled {
  box-shadow: var(--asso-shadow);
}

/* Scrolled state — only shrink the padding, NOT the height, to avoid nav shimmy */
.asso-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(27, 43, 75, 0.08);
}

.asso-header.is-scrolled .asso-header__inner {
  height: var(--asso-header-height);
  /* Subtle horizontal padding tweak instead of height change */
  padding-top:    0;
  padding-bottom: 0;
}

.asso-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--asso-header-height);
  max-width:       var(--asso-max-w);
  margin:          0 auto;
  padding:         0 var(--asso-space-md);
  transition:      height 0.3s var(--asso-ease);
}

/* Logo */
.asso-logo {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-shrink: 0;
}

.asso-logo a,
.asso-logo__text {
  color:          var(--asso-primary);
  font-family:    var(--asso-font-heading);
  font-size:      1.375rem;
  font-weight:    500;
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  transition:     opacity 0.2s;
}

.asso-logo a:hover { opacity: 0.7; color: var(--asso-primary); }

.asso-logo img {
  max-height:  56px;
  max-width:   160px;
  width:       auto;
  object-fit:  contain;
}

/* Nav */
.asso-nav {
  display:     flex;
  align-items: center;
  gap:         var(--asso-space-md);
}

.asso-nav__list {
  display:     flex;
  align-items: center;
  gap:         2.5rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.asso-nav__link {
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--asso-primary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom:  2px solid transparent;
  transition:     border-color 0.2s var(--asso-ease), color 0.2s var(--asso-ease);
}

.asso-nav__link:hover,
.asso-nav__item.current-menu-item .asso-nav__link {
  border-color: var(--asso-secondary);
  color:        var(--asso-primary);
}

.asso-nav__cta {
  margin-left: 0.5rem;
}

/* ── Dropdown Submenus ───────────────────────────────────── */
.asso-nav__item {
  position: relative;
}

.asso-nav__sub-menu {
  position:         absolute;
  top:              calc(100% + 1rem);
  left:             50%;
  transform:        translateX(-50%);
  min-width:        200px;
  background:       var(--asso-bg);
  border:           1px solid var(--asso-border);
  border-radius:    var(--asso-radius-md);
  box-shadow:       var(--asso-shadow-lg);
  list-style:       none;
  margin:           0;
  padding:          0.5rem 0;
  opacity:          0;
  visibility:       hidden;
  pointer-events:   none;
  transform:        translateX(-50%) translateY(-6px);
  transition:       opacity 0.2s var(--asso-ease),
                    transform 0.2s var(--asso-ease),
                    visibility 0.2s;
  z-index:          1001;
  white-space:      nowrap;
}

/* Caret pointer */
.asso-nav__sub-menu::before {
  content:        '';
  position:       absolute;
  top:            -6px;
  left:           50%;
  transform:      translateX(-50%);
  border-left:    6px solid transparent;
  border-right:   6px solid transparent;
  border-bottom:  6px solid var(--asso-border);
}

.asso-nav__sub-menu::after {
  content:        '';
  position:       absolute;
  top:            -5px;
  left:           50%;
  transform:      translateX(-50%);
  border-left:    5px solid transparent;
  border-right:   5px solid transparent;
  border-bottom:  5px solid var(--asso-bg);
}

/* Open state */
.asso-nav__item:hover > .asso-nav__sub-menu,
.asso-nav__item:focus-within > .asso-nav__sub-menu {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
}

.asso-nav__sub-menu .asso-nav__item {
  width: 100%;
}

.asso-nav__sub-menu .asso-nav__link {
  display:        block;
  padding:        0.6rem 1.25rem;
  font-size:      0.7rem;
  border-bottom:  none;
  letter-spacing: 0.1em;
  color:          var(--asso-text);
  transition:     background 0.15s, color 0.15s;
}

.asso-nav__sub-menu .asso-nav__link:hover {
  background: rgba(27, 43, 75, 0.04);
  color:      var(--asso-primary);
  border-color: transparent;
}

/* Parent item indicator */
.asso-nav__link.has-children::after {
  content:        ' ↓';
  font-size:      0.55rem;
  line-height:    1;
  opacity:        0.5;
  letter-spacing: 0;
}

/* ── Hamburger (mobile) ──────────────────────────────────── */
.asso-hamburger {
  display:          none;
  flex-direction:   column;
  justify-content:  center;
  gap:              5px;
  width:            36px;
  height:           36px;
  cursor:           pointer;
  background:       none;
  border:           none;
  padding:          4px;
  z-index:          1100;
}

.asso-hamburger__bar {
  display:          block;
  width:            100%;
  height:           1.5px;
  background:       var(--asso-primary);
  transition:       transform 0.3s var(--asso-ease), opacity 0.3s var(--asso-ease);
  transform-origin: center;
}

.asso-hamburger.is-open .asso-hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.asso-hamburger.is-open .asso-hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.asso-hamburger.is-open .asso-hamburger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile panel ────────────────────────────────────────── */
.asso-mobile-nav {
  display:          none;
  position:         fixed;
  top:              0;
  right:            0;
  width:            min(320px, 85vw);
  height:           100vh;
  background:       var(--asso-bg);
  z-index:          1050;
  transform:        translateX(100%);
  transition:       transform 0.4s var(--asso-ease-out);
  padding:          calc(var(--asso-header-height) + var(--asso-space-md)) var(--asso-space-md) var(--asso-space-md);
  overflow-y:       auto;
  box-shadow:       -4px 0 30px rgba(27, 43, 75, 0.15);
}

.asso-mobile-nav.is-open {
  transform: translateX(0);
}

.asso-mobile-nav__list {
  list-style:  none;
  margin:      0;
  padding:     0;
}

.asso-mobile-nav__item {
  border-bottom: 1px solid var(--asso-border);
}

.asso-mobile-nav__link {
  display:     block;
  padding:     1rem 0;
  font-family: var(--asso-font-heading);
  font-size:   1.5rem;
  font-weight: 300;
  color:       var(--asso-primary);
}

.asso-mobile-nav__overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.4);
  z-index:    1040;
  opacity:    0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.asso-mobile-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s;
}

/* ── Main content offset ─────────────────────────────────── */
.asso-main {
  padding-top: var(--asso-header-height);
}

.asso-main--no-offset {
  padding-top: 0;
}

/* ── WP Admin Bar compatibility ──────────────────────────── */
body.admin-bar .asso-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .asso-header {
    top: 46px;
  }
}

/* ── Nav alignment (header) ─────────────────────────────── */
/* Default: logo left, nav+CTA right (space-between) */

/* Left: nav+CTA immediately after logo */
.asso-header--nav-left .asso-header__inner {
  justify-content: flex-start;
  gap:             var(--asso-space-md);
}

.asso-header--nav-left .asso-nav {
  margin-right: auto;
}

/* Center: true center using absolute trick */
.asso-header--nav-center .asso-header__inner {
  position: relative;
}

.asso-header--nav-center .asso-nav {
  position:  absolute;
  left:      50%;
  transform: translateX(-50%);
  /* Prevent overlap on small screens */
  max-width: 60%;
}

/* Right: default (logo left, nav right via space-between) */
/* no override needed */

/* ── Footer nav alignment ────────────────────────────────── */
.asso-footer--align-left  .asso-footer__inner { justify-content: flex-start; }
.asso-footer--align-center .asso-footer__inner { justify-content: center; }
.asso-footer--align-right  .asso-footer__inner { justify-content: space-between; }

.asso-footer--align-left  nav,
.asso-footer--align-center nav,
.asso-footer--align-right  nav { text-align: inherit; }

/* ============================================================
   HERO — Front Page
   ============================================================ */
.asso-hero {
  position:   relative;
  width:      100%;
  height:     100vh;
  overflow:   hidden;
  background: var(--asso-primary);
}

/* Slider */
.asso-hero__slides {
  position: absolute;
  inset:    0;
}

.asso-hero__slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 1.2s var(--asso-ease);
}

.asso-hero__slide.is-active { opacity: 1; }

.asso-hero__slide img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Overlay — pointer-events:none so clicks reach hero content */
.asso-hero__overlay {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(27, 43, 75, 0.3) 0%,
    rgba(27, 43, 75, 0.5) 100%
  );
}

/* Content */
.asso-hero__content {
  position:    absolute;
  inset:       0;
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:  center;
  color:       var(--asso-white);
  padding:     var(--asso-space-md);
  z-index:     2;
}

.asso-hero__label {
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
  margin-bottom:  1.5rem;
  animation:      fadeInUp 0.8s 0.2s both;
}

.asso-hero__title {
  font-family: var(--asso-font-heading);
  font-size:   clamp(3rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1;
  color:       var(--asso-white);
  animation:   fadeInUp 0.8s 0.4s both;
}

.asso-hero__title em {
  font-style: italic;
  color:      var(--asso-white);
}

.asso-hero__scopri {
  position:       absolute;
  bottom:         2.5rem;
  left:           0;
  right:          0;
  margin:         0 auto;
  width:          fit-content;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  color:          var(--asso-white);
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor:         pointer;
  animation:      fadeInUp 0.8s 0.8s both;
  transition:     opacity 0.2s;
}

.asso-hero__scopri:hover { opacity: 0.7; }

.asso-hero__scopri-arrow {
  width:     2px;
  height:    36px;
  /* Use currentColor so it follows the inline color set by PHP/JS */
  background: currentColor;
  opacity:   0.8;
  animation:  scrollBounce 2s infinite;
}

/* Dots nav */
.asso-hero__dots {
  position:   absolute;
  bottom:     2.5rem;
  right:      2rem;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
  z-index:    3;
}

.asso-hero__dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   rgba(255,255,255,0.4);
  cursor:       pointer;
  transition:   background 0.3s, transform 0.3s;
}

.asso-hero__dot.is-active {
  background: var(--asso-white);
  transform:  scale(1.4);
}

/* ============================================================
   SECTIONS — Home
   ============================================================ */

/* Mission */
.asso-mission {
  padding:    var(--asso-space-xl) 0;
  background: var(--asso-bg);
}

.asso-mission__grid {
  display:               grid;
  grid-template-columns: 1fr 1.5fr;
  gap:                   var(--asso-space-xl);
  align-items:           start;
}

.asso-mission__heading {
  position: sticky;
  top: calc(var(--asso-header-height) + 2rem);
}

.asso-mission__title {
  font-size:   clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1.25; /* Increased from 1.05 for mobile wrapping */
}

.asso-mission__body p {
  font-size:   1.0625rem;
  line-height: 1.8;
  color:       var(--asso-text);
  max-width:   55ch;
}

/* Territory image */
.asso-territory {
  position:   relative;
  width:      100%;
  height:     60vh;
  overflow:   hidden;
}

.asso-territory img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 8s var(--asso-ease);
}

.asso-territory:hover img {
  transform: scale(1.03);
}

.asso-territory__caption {
  position:    absolute;
  bottom:      1.5rem;
  right:       1.5rem;
  background:  rgba(240, 237, 232, 0.9);
  padding:     0.5rem 1rem;
  font-size:   0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:       var(--asso-primary);
}

/* Services */
.asso-services {
  padding:    var(--asso-space-xl) 0;
  background: var(--asso-bg);
}

.asso-services__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   var(--asso-space-lg);
}

.asso-services__title {
  font-size:   clamp(1.5rem, 3vw, 2.5rem);
}

.asso-card {
  padding:       var(--asso-space-md);
  border:        1px solid var(--asso-border);
  border-radius: var(--asso-radius-md);
  background:    var(--asso-white);
  transition:    transform 0.3s var(--asso-ease), box-shadow 0.3s var(--asso-ease);
}

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

.asso-card__icon {
  font-size:     1.5rem;
  margin-bottom: 1rem;
  color:         var(--asso-secondary);
}

.asso-card__title {
  font-size:     1.375rem;
  margin-bottom: 0.75rem;
}

.asso-card__text {
  font-size:  0.9375rem;
  color:      var(--asso-text-muted);
  line-height: 1.7;
  max-width:  none;
}

/* ============================================================
   HEADER — inner pages (sticky left-nav style)
   ============================================================ */
.asso-page-header {
  padding:    var(--asso-space-xl) 0 var(--asso-space-lg);
  border-bottom: 1px solid var(--asso-border);
}

.asso-page-title {
  font-size:   clamp(3rem, 6vw, 5rem);
  line-height: 1.05;
  font-weight: 300;
}

.asso-page-subtitle {
  font-family: var(--asso-font-heading);
  font-size:   clamp(1.25rem, 2.5vw, 1.75rem);
  font-style:  italic;
  font-weight: 300;
  color:       var(--asso-text-muted);
  margin-top:  0.75rem;
  max-width:   70ch;
}

/* ============================================================
   ASSOCIAZIONE PAGE
   ============================================================ */
.asso-assoc {
  display:               grid;
  grid-template-columns: 200px 1fr;
  gap:                   var(--asso-space-xl);
  padding:               var(--asso-space-xl) 0;
}

.asso-assoc__sidebar {
  position: sticky;
  top: calc(var(--asso-header-height) + 2rem);
  height: fit-content;
}

.asso-sidenav {
  list-style:  none;
  margin:      0;
  padding:     0;
}

.asso-sidenav__item { margin-bottom: 0.25rem; }

.asso-sidenav__link {
  display:        block;
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
  padding:        0.4rem 0;
  transition:     color 0.2s;
}

.asso-sidenav__link:hover,
.asso-sidenav__link.is-active {
  color: var(--asso-primary);
}

/* Numbers block */
.asso-numbers {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--asso-space-md);
  padding:               var(--asso-space-lg) 0;
  border-top:            1px solid var(--asso-border);
  border-bottom:         1px solid var(--asso-border);
  margin:                var(--asso-space-lg) 0;
}

.asso-number__value {
  font-family: var(--asso-font-heading);
  font-size:   clamp(4rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1;
  color:       var(--asso-primary);
}

.asso-number__label {
  font-size:   0.875rem;
  font-weight: 500;
  margin-top:  0.5rem;
  color:       var(--asso-text-muted);
  line-height: 1.4;
}

.asso-number__sublabel {
  font-size:  0.8125rem;
  color:      var(--asso-text-muted);
  margin-top: 0.25rem;
}

/* Quote */
.asso-quote-block {
  padding:    var(--asso-space-xl) 0;
  text-align: center;
}

.asso-quote-icon {
  font-size:   3rem;
  line-height: 1;
  color:       var(--asso-secondary);
  margin-bottom: 1.5rem;
}

.asso-quote-text {
  font-family: var(--asso-font-heading);
  font-size:   clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  font-style:  italic;
  line-height: 1.4;
  color:       var(--asso-primary);
  max-width:   60ch;
  margin:      0 auto;
}

.asso-quote-cite {
  display:        block;
  margin-top:     1.5rem;
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
}

/* Organigramma */
.asso-org__title {
  font-size:     1.5rem;
  margin-bottom: 0.5rem;
}

.asso-org__subtitle {
  font-size:  0.8125rem;
  color:      var(--asso-text-muted);
  letter-spacing: 0.06em;
}

.asso-org__list {
  list-style:  none;
  padding:     0;
  margin-top:  var(--asso-space-md);
}

.asso-org__item {
  display:       flex;
  align-items:   baseline;
  gap:           0.75rem;
  padding:       1rem 0;
  border-bottom: 1px solid var(--asso-border);
  font-size:     1.125rem;
}

.asso-org__name { font-weight: 500; }
.asso-org__dash { color: var(--asso-text-muted); }
.asso-org__role {
  font-family: var(--asso-font-heading);
  font-style:  italic;
  color:       var(--asso-secondary);
}

/* CTA Banner */
.asso-cta-banner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--asso-space-md) var(--asso-space-lg);
  border:          1px solid var(--asso-border);
  border-radius:   var(--asso-radius-md);
  margin:          var(--asso-space-lg) 0;
  gap:             var(--asso-space-md);
  flex-wrap:       wrap;
}

.asso-cta-banner__text p { color: var(--asso-text-muted); margin: 0; font-size: 0.875rem; }

/* ============================================================
   TERRITORI / PROGETTI PAGE
   ============================================================ */
.asso-projects {
  padding: var(--asso-space-xl) 0;
}

.asso-project-block {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--asso-space-xl);
  align-items:           center;
  padding:               var(--asso-space-xl) 0;
  border-bottom:         1px solid var(--asso-border);
}

.asso-project-block--reverse { direction: rtl; }
.asso-project-block--reverse > * { direction: ltr; }

.asso-project-block__tag {
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
  margin-bottom:  0.5rem;
}

.asso-project-block__title {
  font-size:     clamp(2rem, 3.5vw, 3rem);
  margin-bottom: var(--asso-space-sm);
  font-weight:   300;
}

.asso-project-block__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: var(--asso-radius-md);
}

.asso-project-block__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s var(--asso-ease);
}

.asso-project-block:hover .asso-project-block__img img {
  transform: scale(1.04);
}

.asso-project-block__img-caption {
  position:    absolute;
  bottom:      1rem;
  left:        1rem;
  background:  rgba(240, 237, 232, 0.9);
  padding:     0.25rem 0.75rem;
  font-size:   0.75rem;
  font-weight: 500;
  color:       var(--asso-primary);
}

/* Schedule table (Varenna Express) */
.asso-schedule {
  margin:        var(--asso-space-sm) 0;
  border:        1px solid var(--asso-border);
  border-radius: var(--asso-radius-md);
  overflow:      hidden;
}

.asso-schedule table { margin: 0; }
.asso-schedule th, .asso-schedule td { padding: 0.625rem 1rem; }
.asso-schedule__title {
  padding:       0.75rem 1rem;
  font-size:     0.6875rem;
  font-weight:   600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:         var(--asso-text-muted);
  border-bottom: 1px solid var(--asso-border);
}

/* Map placeholder */
.asso-map-placeholder {
  background:    var(--asso-border);
  aspect-ratio:  1;
  border-radius: var(--asso-radius-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--asso-text-muted);
  font-size:     0.875rem;
}

/* Projects CTA quote */
.asso-projects-quote {
  padding:    var(--asso-space-xl) 0;
  text-align: center;
  border-top: 1px solid var(--asso-border);
}

/* ============================================================
   ARCHIVIO PAGE
   ============================================================ */
.asso-archive {
  padding: var(--asso-space-xl) 0;
}

/* Tabs */
.asso-tabs {
  display:     flex;
  gap:         2rem;
  border-bottom: 1px solid var(--asso-border);
  margin-bottom: var(--asso-space-lg);
}

.asso-tab {
  font-size:      0.9375rem;
  font-weight:    400;
  color:          var(--asso-text-muted);
  padding-bottom: 0.75rem;
  cursor:         pointer;
  border-bottom:  2px solid transparent;
  margin-bottom:  -1px;
  background:     none;
  border-left:    none;
  border-right:   none;
  border-top:     none;
  transition:     color 0.2s, border-color 0.2s;
}

.asso-tab:hover { color: var(--asso-primary); }

.asso-tab.is-active {
  color:        var(--asso-primary);
  font-weight:  500;
  border-bottom-color: var(--asso-primary);
}

/* Documents table */
.asso-docs-table {
  width: 100%;
}

.asso-docs-table [data-doc] {
  opacity:    1;
  transition: opacity 0.3s;
}

.asso-docs-table [data-doc].is-hidden {
  display: none;
}

.asso-doc__name {
  font-size:  1.0625rem;
  font-weight: 400;
  color:      var(--asso-primary);
}

.asso-doc__type-content {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.8125rem;
  color:       var(--asso-text-muted);
}

.asso-doc__dl-btn {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1px solid var(--asso-border);
  background:      none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background 0.2s, border-color 0.2s;
  color:           var(--asso-primary);
  text-decoration: none;
  font-size:       0.875rem;
}

.asso-doc__dl-btn:hover {
  background:   var(--asso-primary);
  border-color: var(--asso-primary);
  color:        var(--asso-white);
}

/* Pagination */
.asso-pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     var(--asso-space-md);
  margin-top:      var(--asso-space-md);
  border-top:      1px solid var(--asso-border);
  font-size:       0.8125rem;
}

.asso-pagination__info { color: var(--asso-text-muted); }

.asso-pagination__prev,
.asso-pagination__next {
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--asso-text-muted);
  cursor:         pointer;
  background:     none;
  border:         none;
  transition:     color 0.2s;
}

.asso-pagination__prev:hover,
.asso-pagination__next:hover { color: var(--asso-primary); }

.asso-pagination__prev.is-disabled,
.asso-pagination__next.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ============================================================
   DIVENTA SOCIO / SOSTIENI PAGE
   ============================================================ */
.asso-membership {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            calc(100vh - var(--asso-header-height));
}

.asso-membership__left {
  background: var(--asso-primary);
  color:      var(--asso-white);
  padding:    var(--asso-space-xl);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

.asso-membership__left .asso-label {
  color:   rgba(201, 185, 154, 0.8);
}

.asso-membership__left h1 {
  color:       var(--asso-white);
  font-size:   clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--asso-space-sm);
}

.asso-membership__left p {
  color:   rgba(255,255,255,0.75);
  font-size: 1.0625rem;
  max-width: 40ch;
}

/* Download button */
.asso-download-btn {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1rem 1.25rem;
  border:        1px solid rgba(255,255,255,0.25);
  border-radius: var(--asso-radius-md);
  color:         var(--asso-white);
  text-decoration: none;
  margin-top:    var(--asso-space-md);
  transition:    background 0.2s, border-color 0.2s;
  width:         fit-content;
}

.asso-download-btn:hover {
  background:  rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color:       var(--asso-white);
}

.asso-download-btn__icon {
  width:           48px;
  height:          48px;
  background:      rgba(255,255,255,0.1);
  border-radius:   var(--asso-radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.25rem;
  flex-shrink:     0;
}

.asso-download-btn__title {
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.asso-download-btn__meta {
  font-size: 0.75rem;
  opacity:   0.6;
}

/* Dropzone */
.asso-dropzone {
  border:        2px dashed rgba(255,255,255,0.2);
  border-radius: var(--asso-radius-md);
  padding:       var(--asso-space-lg);
  text-align:    center;
  cursor:        pointer;
  margin-top:    var(--asso-space-md);
  transition:    border-color 0.2s, background 0.2s;
}

.asso-dropzone:hover,
.asso-dropzone.is-dragover {
  border-color: rgba(201, 185, 154, 0.5);
  background:   rgba(201, 185, 154, 0.05);
}

.asso-dropzone__icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; }

.asso-dropzone__text {
  font-family: var(--asso-font-heading);
  font-size:   1.25rem;
  font-style:  italic;
  color:       rgba(255,255,255,0.6);
}

.asso-dropzone__sub {
  font-size:      0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-top:     0.35rem;
}

.asso-dropzone__ssl {
  font-size:  0.75rem;
  color:      rgba(255,255,255,0.35);
  margin-top: var(--asso-space-sm);
  display:    flex;
  align-items: center;
  justify-content: center;
  gap:        0.375rem;
}

/* Right column */
.asso-membership__right {
  background: var(--asso-bg);
  padding:    var(--asso-space-xl);
  display:    flex;
  flex-direction: column;
  justify-content: center;
}

.asso-membership__right .asso-label { color: var(--asso-secondary); }

.asso-membership__right h2 {
  font-size:     clamp(2.5rem, 4vw, 3.5rem);
  line-height:   1.05;
  margin-bottom: var(--asso-space-sm);
}

/* IBAN */
.asso-iban {
  margin:     var(--asso-space-md) 0;
  cursor:     pointer;
  transition: opacity 0.2s;
}

.asso-iban:hover { opacity: 0.7; }

.asso-iban__label {
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--asso-secondary);
  margin-bottom:  0.5rem;
}

.asso-iban__code {
  font-family: var(--asso-font-heading);
  font-size:   clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color:       var(--asso-primary);
  letter-spacing: 0.04em;
}

.asso-iban__copy {
  font-size:  0.75rem;
  color:      var(--asso-text-muted);
  margin-top: 0.25rem;
}

/* Donation */
.asso-donation {
  display:     flex;
  align-items: flex-start;
  gap:         var(--asso-space-md);
  margin-top:  var(--asso-space-md);
}

.asso-donation__info { flex: 1; }

.asso-donation__qr {
  width:         100px;
  height:        100px;
  background:    var(--asso-primary);
  border-radius: var(--asso-radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  overflow:      hidden;
  flex-shrink:   0;
}

.asso-donation__qr img { width: 100%; height: 100%; object-fit: cover; }

.asso-donation__btns {
  display: flex;
  gap:     0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.asso-footer {
  background:  var(--asso-bg);
  border-top:  1px solid var(--asso-border);
  padding:     var(--asso-space-lg) 0 var(--asso-space-md);
}

.asso-footer__inner {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   var(--asso-space-lg);
  align-items:           end;
  max-width:             var(--asso-max-w);
  margin:                0 auto;
  padding:               0 var(--asso-space-md);
}

.asso-footer__brand { font-size: 1.25rem; font-weight: 500; }
.asso-footer__brand a { color: var(--asso-primary); }

.asso-footer__address {
  font-family: var(--asso-ftxt-font, var(--asso-font-body));
  font-size:   var(--asso-ftxt-size, 0.875rem);
  font-weight: var(--asso-ftxt-weight, 400);
  font-style:  var(--asso-ftxt-style, normal);
  text-decoration: var(--asso-ftxt-decoration, none);
  color:       var(--asso-ftxt-color, var(--asso-text-muted));
  line-height: 1.7;
  margin-top:  0.5rem;
}

.asso-footer__brand-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

.asso-footer__social-wrap {
  display: flex;
  gap:     1.5rem;
  margin:  1rem 0;
}

.asso-footer__social a {
  color:      var(--asso-ftxt-color, var(--asso-text-muted));
  transition: color 0.2s var(--asso-ease);
}

.asso-footer__social a:hover {
  color: var(--asso-primary);
}

.asso-footer__social svg {
  width:  var(--asso-social-size, 20px);
  height: var(--asso-social-size, 20px);
}

.asso-footer__bottom {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  max-width:       var(--asso-max-w);
  margin:          var(--asso-space-md) auto 0;
  padding:         var(--asso-space-sm) var(--asso-space-md) 0;
  border-top:      1px solid var(--asso-border);
  gap:             1rem;
}

.asso-footer__social {
  display: flex;
  gap:     1.5rem;
  margin:  0.5rem 0;
}

.asso-footer__social a {
  color:      var(--asso-text-muted);
  transition: color 0.2s var(--asso-ease);
}

.asso-footer__social a:hover {
  color: var(--asso-primary);
}

.asso-footer__copyright {
  font-size: 0.8125rem;
  color:     var(--asso-text-muted);
}

.asso-footer__links {
  display:   flex;
  gap:       1.5rem;
  list-style: none;
  margin:    0;
  padding:   0;
}

.asso-footer__links a {
  font-size:      0.8125rem;
  color:          var(--asso-text-muted);
  letter-spacing: 0.05em;
}

.asso-footer__links a:hover { color: var(--asso-primary); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1);   opacity: 0.6; }
  50%       { transform: scaleY(1.3); opacity: 1; }
}

/* Footer logo — smaller than header logo */
.asso-footer .asso-logo img {
  max-height: var(--asso-footer-logo-height, 48px);
  max-width:  140px;
}

/* Footer inner — always flex for alignment control */
.asso-footer__inner {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--asso-space-xl);
  flex-wrap:       wrap;
}

/* ── Page content (front-page the_content) ──────────────────── */
.asso-page-content {
  padding:    var(--asso-space-xl) 0;
  background: var(--asso-bg);
}

.asso-prose {
  max-width:   72ch;
  margin:      0 auto;
  font-size:   1.0625rem;
  line-height: 1.8;
  color:       var(--asso-text);
}

.home .asso-page-content .asso-prose,
.page-template-page-home .asso-page-content .asso-prose {
  max-width: 100%;
}

.asso-prose h2, .asso-prose h3, .asso-prose h4 {
  font-family: var(--asso-font-heading);
  color:       var(--asso-primary);
  margin:      2rem 0 0.75rem;
}

.asso-prose p { margin-bottom: 1.25rem; }

.asso-prose a {
  color:           var(--asso-secondary);
  text-decoration: underline;
}

.asso-prose ul, .asso-prose ol {
  margin:      0 0 1.25rem 1.5rem;
  line-height: 1.75;
}

.asso-prose img {
  max-width:    100%;
  border-radius: 2px;
  margin:       1.5rem 0;
}

/* ── Scroll reveal ───────────────────────────────────────────── */
.asso-reveal {
  opacity:    0;
  transform:  translateY(32px);
  transition: opacity 0.7s var(--asso-ease), transform 0.7s var(--asso-ease);
}

.asso-reveal.is-visible {
  opacity:   1;
  transform: none;
}

.asso-reveal--delay-1 { transition-delay: 0.1s; }
.asso-reveal--delay-2 { transition-delay: 0.2s; }
.asso-reveal--delay-3 { transition-delay: 0.3s; }

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

/* ── Tablet (≤ 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  .asso-grid-2 { gap: var(--asso-space-md); }
  .asso-mission__grid { gap: var(--asso-space-lg); }

  /* Disable sticky heading on tablet downwards */
  .asso-mission__heading {
    position:      static !important;
    margin-bottom: 3rem !important;
  }
  .asso-mission__title {
    font-size:   clamp(2.2rem, 8vw, 3rem);
    line-height: 1.3;
  }

  .asso-assoc { grid-template-columns: 160px 1fr; }
  .asso-membership { grid-template-columns: 1fr; }
  .asso-membership__left,
  .asso-membership__right { padding: var(--asso-space-lg); }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --asso-header-height: 64px;
    --asso-space-xl:      3rem;
    --asso-space-lg:      2rem;
    --asso-space-md:      1.25rem; /* Increase side spacing for mobile: 20px instead of inheriting 32px? wait, standard was 2rem. */
  }

  .asso-container { padding: 0 1.5rem !important; }

  .asso-archivio { padding: 3rem 1.5rem 6rem; }

  /* Header mobile */
  .asso-nav         { display: none !important; }
  .asso-hamburger   { display: flex !important; z-index: 110000; }

  /*
   * Mobile nav — ALWAYS display:block so the CSS transform transition works.
   * Visibility is controlled via transform:translateX(100%) (hidden) vs
   * translateX(0) (visible, set by JS adding .is-open).
   */
  .asso-mobile-nav {
    display: block !important;
    z-index: 100000;
    transform: translateX(100%);
    transition: transform 0.4s var(--asso-ease-out);
  }

  .asso-mobile-nav.is-open {
    transform: translateX(0);
  }

  /* Overlay — hidden by default, shown with .is-open */
  .asso-mobile-nav__overlay {
    display: block !important;
    z-index: 10000; /* Under the hamburger (110000 in header? Wait, hamburger is 1100). Needs to be under hamburger. Hamburger needs to be above overlay. Mobile nav needs to be above overlay. */
  }
  body.admin-bar .asso-mobile-nav {
    padding-top: calc(46px + var(--asso-header-height) + var(--asso-space-md));
  }

  /* Grids → 1 col */
  .asso-grid-2,
  .asso-grid-3,
  .asso-mission__grid,
  .asso-assoc,
  .asso-project-block,
  .asso-project-block--reverse,
  .asso-numbers,
  .asso-footer__inner {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  #asso-footer-nav { display: none !important; }

  /* Center footer bottom credits (Image 3) */
  .asso-footer__bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
  }

  /* Mission heading already handled in 1024px query, just ensuring grid is 1 col here */
  .asso-assoc__sidebar { position: static; }

  /* Numbers */
  .asso-numbers { grid-template-columns: repeat(3, 1fr); }

  /* Hero */
  .asso-hero { height: 85vh; }
  .asso-hero__title { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* Membership */
  .asso-membership { grid-template-columns: 1fr; }
  .asso-membership__left,
  .asso-membership__right { padding: var(--asso-space-lg) var(--asso-space-md); }

  /* Tabs */
  .asso-tabs { gap: 1rem; overflow-x: auto; }

  /* Docs table → hide columns */
  .asso-docs-table .asso-doc__type {
    display: none;
  }

  /* CTA banner → stack */
  .asso-cta-banner {
    flex-direction: column;
    text-align:     center;
    padding:        var(--asso-space-md);
  }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .asso-numbers { grid-template-columns: 1fr; }
  .asso-number__value { font-size: 4rem; }
  .asso-pagination {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  .asso-donation { flex-direction: column; }
}

/* ── Utilities ───────────────────────────────────────────── */
.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;
}

.text-center { text-align: center; }
.text-muted  { color: var(--asso-text-muted); }
.mb-0        { margin-bottom: 0; }
.mt-auto     { margin-top: auto; }

/* ==========================================================================
   Archivio / Layout Griglia a due colonne
   ========================================================================== */
.asso-archivio {
	background-color: var(--asso-surface);
	padding: 4rem 1rem 8rem 1rem;
}
.asso-archivio__grid {
	max-width: var(--asso-max-width, 1400px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}
@media (min-width: 992px) {
	.asso-archivio__grid {
		grid-template-columns: 2fr 1fr;
		gap: 6rem;
		align-items: start;
	}
}
.asso-archivio__main {
	width: 100%;
}
.asso-archivio__sidebar {
	width: 100%;
	padding-left: 0;
}
@media (min-width: 992px) {
	.asso-archivio__sidebar {
		border-left: 1px solid rgba(0,0,0,0.08);
		padding-left: 4rem;
	}
}
.asso-sidebar__section {
	margin-bottom: 2.5rem;
}
.asso-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0 0;
}
.asso-sidebar__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 1.125rem;
}
.asso-sidebar__list li:last-child {
	border-bottom: none;
}
.asso-sidebar__item-name {
	color: var(--asso-text);
}
.asso-sidebar__item-val {
	font-weight: 500;
	color: var(--asso-text);
}
.asso-sidebar__item-info {
	display: flex;
	flex-direction: column;
}
.asso-sidebar__item-meta {
	font-size: 0.875rem;
	color: var(--asso-text-muted);
	margin-top: 0.25rem;
	text-decoration: none;
}
.asso-sidebar__item-meta:hover, .asso-sidebar__item-link:hover {
	color: var(--asso-text);
}
.asso-sidebar__item-link {
	color: var(--asso-text);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

@media (max-width: 768px) {
  /* Contact Form 7 Emergency Padding Fix */
  .wpcf7 {
    padding: 0 0.5rem !important;
    margin:  1.5rem 0;
  }
  .wpcf7-form-control-wrap {
    display:       block;
    margin-bottom: 1.25rem;
  }
  .wpcf7-form-control {
    width:         100% !important;
    max-width:     100% !important;
    padding:       12px 16px !important;
    border:        1px solid var(--asso-border) !important;
    border-radius: 4px !important;
    font-size:     1rem !important;
  }
  .wpcf7-submit {
    width: 100% !important;
    margin-top: 1rem;
  }
}