/*
Theme Name: Pro Pickleball Club
Theme URI: https://propickleballnewlenox.com/
Author: The Loop Marketing
Description: Pro Pickleball Club one-page homepage conversion.
Version: 1.0.0
Text Domain: pro-pickleball
*/

/* Universal Minimum Font Size Enforcement (14px min) */
      html,
      body,
      p,
      span,
      a,
      button,
      li,
      input,
      label,
      div {
        min-font-size: 14px;
      }

      /* Marquee Animation */
      @keyframes marquee {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      .animate-marquee {
        display: flex;
        width: 200%;
        animation: marquee 25s linear infinite;
      }
      .animate-marquee:hover {
        animation-play-state: paused;
      }

      /* Glassmorphism overlays */
      .glass-card {
        background: rgba(16, 35, 60, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      /* Custom scrollbar */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #10233c;
      }
      ::-webkit-scrollbar-thumb {
        background: #f12f20;
        border-radius: 4px;
      }

      /* Dynamic Overhanging Logo Transitions */
      .logo-badge-container {
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform, height, width, box-shadow;
      }

      /* Top State: Oversized Square Overhanging below Header */
      .logo-top {
        width: 10rem;
		height: 10.75rem;
		transform: translateY(2.25rem);
        border-radius: 0 0 0.85rem 0.85rem;
        padding: 0.45rem;
        box-shadow:
          0 20px 25px -5px rgba(0, 0, 0, 0.35),
          0 8px 10px -6px rgba(0, 0, 0, 0.2);
      }

      /* Scrolled State: Compact size inside the Header */
      .logo-scrolled {
        width: 4.25rem;
        height: 4.25rem;
        transform: translateY(0);
        border-radius: 0.5rem;
        padding: 0.3rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }

      @media (max-width: 640px) {
        .logo-top {
          width: 4.75rem;
          height: 5.25rem;
          transform: translateY(0.75rem);
          padding: 0.25rem;
        }
        .logo-scrolled {
          width: 3.25rem;
          height: 3.25rem;
          transform: translateY(0);
          padding: 0.25rem;
        }
      }