/* ═══ other.css | Vocabolario Calitrano ═══ */

/* ════ SCROLL REVEAL ════ */

    /* Base state: invisible, shifted down */
    [data-reveal] {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity  .55s cubic-bezier(.4,0,.2,1),
        transform .55s cubic-bezier(.4,0,.2,1);
    }

    /* Visible state (class added by IntersectionObserver) */
    [data-reveal].revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger delays for children */
    [data-reveal-delay="1"] { transition-delay: .08s; }
    [data-reveal-delay="2"] { transition-delay: .16s; }
    [data-reveal-delay="3"] { transition-delay: .24s; }
    [data-reveal-delay="4"] { transition-delay: .32s; }
    [data-reveal-delay="5"] { transition-delay: .40s; }
    [data-reveal-delay="6"] { transition-delay: .48s; }
    [data-reveal-delay="7"] { transition-delay: .56s; }
    [data-reveal-delay="8"] { transition-delay: .64s; }

    /* Slide from left variant */
    [data-reveal="left"] {
      opacity: 0;
      transform: translateX(-18px);
    }
    [data-reveal="left"].revealed {
      opacity: 1;
      transform: translateX(0);
    }

    /* Fade only (no shift) */
    [data-reveal="fade"] {
      opacity: 0;
      transform: none;
    }
    [data-reveal="fade"].revealed {
      opacity: 1;
    }

    /* row-visible removed — not needed without preview table */

    /* prefers-reduced-motion: skip all reveals */
    @media (prefers-reduced-motion: reduce) {
      [data-reveal],
      [data-reveal="left"],
      [data-reveal="fade"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

    }

    /* Visually hidden — accessibile a screen reader */
    .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;
    }

    .voc-breadcrumb {
      margin-bottom: .75rem;
    }
    .voc-breadcrumb ol {
      display: flex; align-items: center; gap: .35rem;
      list-style: none; padding: 0; margin: 0;
      font-family: 'Raleway', sans-serif;
      font-size: .72rem; letter-spacing: .06em;
      text-transform: uppercase;
    }
    .voc-bc-link {
      background: none; border: none; cursor: pointer;
      font-family: inherit; font-size: inherit;
      letter-spacing: inherit; text-transform: inherit;
      color: var(--muted); padding: 0;
      transition: color .2s;
    }
    .voc-bc-link:hover { color: var(--rosso); text-decoration: underline; }
    .voc-bc-sep { color: var(--carta3); font-size: .8rem; }
    .voc-breadcrumb [aria-current="page"] {
      color: var(--rosso); font-weight: 600;
    }




    /* ── Nav overlay: transizione al tap nel drawer ── */
    /* ════ PAGINATION ════ */
    .pagination {
      display: flex;
      flex-wrap: nowrap;        /* never wrap — all items stay on one line */
      align-items: center;
      justify-content: center;
      gap: clamp(.4rem, 2vw, 1rem);
      padding: .8rem 1rem .7rem 1.2rem;
      background: var(--carta2);
      border-top: 1px solid var(--carta3);
      margin-top: 1rem;
      /* prevent the container itself from overflowing its parent */
      min-width: 0;
    }

    #border-span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      font-family: 'Raleway', sans-serif;
      font-size: clamp(.78rem, 2vw, .88rem);
      letter-spacing: .1em;
      color: var(--muted);
      /* allow the number cell to shrink if space is tight */
      flex-shrink: 1;
      min-width: 0;
    }

    .page-input {
      /* unified height with buttons — clamp(30px, 6vw, 36px) at desktop */
      height: clamp(30px, 6vw, 36px);
      width: clamp(32px, 8vw, 40px);
      padding: .3rem .4rem;
      border: 1px solid var(--carta3);
      border-radius: var(--r-sm);
      font-family: inherit;
      font-size: inherit;
      text-align: center;
      background: var(--carta);
      color: var(--ink);
      /* shrink with the container but never overflow */
      flex-shrink: 1;
      min-width: 0;
    }
    .page-input:focus { outline: none; border-color: var(--rosso); }

    /* Read-only page number for search results (no editable input) */
    .page-input.non-editable {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: clamp(30px, 6vw, 36px);
      width: clamp(32px, 8vw, 40px);
      border: 1px solid var(--carta3);
      border-radius: var(--r-sm);
      background: var(--carta);
      color: var(--ink);
      padding: .3rem .4rem;
      font-family: inherit;
      font-size: inherit;
      text-align: center;
      flex-shrink: 1;
      min-width: 0;
      cursor: default;
    }

    .pagination button[type="button"] {
      /* unified height with input — clamp(30px, 6vw, 36px) at desktop */
      width: clamp(30px, 6vw, 36px);
      height: clamp(30px, 6vw, 36px);
      border-radius: var(--r-sm);
      background: var(--carta);
      border: 1px solid var(--carta3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted);
      font-size: clamp(.85rem, 2.5vw, 1rem);
      font-weight: 600;
      transition: background .15s, color .15s;
      /* … but the tap target stays ≥44px via an ::after pseudo-element */
      position: relative;
      flex-shrink: 0;   /* buttons don't compress — input/number cell absorbs pressure */
    }
    /* Invisible tap-target expansion — does not affect layout */
    .pagination button[type="button"]::after {
      content: '';
      position: absolute;
      inset: 50% 50%;
      transform: translate(-50%, -50%);
      min-width: 44px;
      min-height: 44px;
    }
    .pagination button[type="button"]:hover:not(:disabled) {
      background: var(--rosso-deep);
      color: var(--argento);
      border-color: var(--rosso-deep);
    }
    .pagination button[type="button"]:disabled { opacity: .3; cursor: not-allowed; }
    .pagination button[type="button"]:focus-visible {
      outline: 2px solid var(--rosso);
      outline-offset: 2px;
    }
    .pagination button[type="button"]:active:not(:disabled) {
      background: var(--rosso);
      color: var(--argento);
      border-color: var(--rosso);
      transform: scale(.94);
    }

    @media (min-width: 601px) and (max-width: 1023px) {
      /* ── Pagination: tablet breakpoint ── */
      .pagination {
        gap: clamp(.6rem, 1.5vw, .9rem);
        padding: .8rem 1.2rem;
      }
      .pagination button[type="button"] {
        width: 34px;
        height: 34px;
        font-size: .9rem;
      }
      .page-input {
        width: 36px;
        height: 34px;
        font-size: .84rem;
      }
      #border-span {
        font-size: .84rem;
      }
    }

    @media (max-width: 600px) {
      /* ── Pagination: compact, visually balanced on mobile ── */
      .pagination {
        padding: .7rem .9rem;
        gap: clamp(.5rem, 2.5vw, .9rem);
        background: var(--carta2);
        border-top: 2px solid var(--carta3);
        box-shadow: 0 -2px 8px rgba(26, 21, 16, .08);
      }

      /* Buttons: visual size matches the input/border-span height (~32-34px).
         Touch target stays ≥44px via the ::after pseudo-element. */
      .pagination button[type="button"] {
        width:  clamp(28px, 8vw, 34px);
        height: clamp(28px, 8vw, 34px);
        font-size: clamp(.85rem, 2.6vw, 1rem);
        background: var(--carta);
        border: 1px solid var(--carta3);
        box-shadow: 0 1px 3px rgba(26, 21, 16, .08);
        border-radius: var(--r-sm);
      }

      /* page-input: sized to match button height */
      .page-input {
        width: clamp(28px, 8vw, 34px);
        height: clamp(28px, 8vw, 34px);
        padding: .3rem .3rem;
        font-size: clamp(.82rem, 2.6vw, .96rem);
      }

      /* border-span text: same scale as input */
      #border-span {
        font-size: clamp(.82rem, 2.6vw, .96rem);
        gap: .4rem;
      }
    }

    /* ── Nav overlay: transizione al tap nel drawer ── */
    .nav-overlay {
      position: fixed; inset: 0; z-index: 700;
      background: rgba(20, 8, 4, 0);
      pointer-events: none;
      transition: background .22s ease;
    }
    .nav-overlay.flash {
      background: rgba(20, 8, 4, .35);
      pointer-events: auto;
    }