/* --- Header.vue --- */

@layer components {
  /* --- Navigation Links --- */
  .navbar-link-desktop {
    /* Hover effect: Underlined with medium thickness */
    @apply px-2 pb-2 hover:text-primary-color hover:underline-offset-4 hover:underline hover:decoration-2;
  }

  .navbar-link-mobile {
    @apply block py-4 hover:text-primary-color;
  }

  #router-links-grid > li {
    /* Large screens: Allow navbar links to fill up space */
    /* X-Large: Remove flex grow */
    @apply self-center flex lg:flex-1 xl:flex-initial flex-col text-center duration-300; /* Align links vertically with logo */
  }

  #router-links-grid > li:not(:first-child) {
    /* Large screens: Add margin for better spacing; skip first link ('Home') */
    @apply lg:ml-5 xl:ml-0;
  }

  /* --- Mobile Nav Icons --- */
  #mobile-nav-socials svg:hover {
    @apply fill-[#087bb4]; /* Hover color for social icons */
  }

  /* --- Mobile Nav Button --- */
  #nav-btn-item button:hover {
    @apply text-primary-color; /* Text color hover for hamburger button */
  }

  /* --- Profile Icon --- */
  .navbar-profile-desktop {
    @apply w-6 h-6 rounded-full xl:ml-2; /* Google or default avatar */
  }

  /* --- Game Zone & Account Buttons --- */
  .base-navbar-btn-flex {
    /* Shared flex button layout */
    /* NOTE:
     * - Mobile to medium screens: Display Hamburger Menu Icon only
     * - Large+ only: Display account (login / logout) button with links
    */
    @apply page-button flex justify-center items-center;
  }

  .base-login-btn,
  .base-game-zone-btn {
    @apply base-navbar-btn-flex blue-button;
  }

  .base-logout-btn {
    /* RWD Layout:
     * - Large (column): 'logout' text (top) & profile (bottom) 
     * - X-Large (row): 'logout' (left) & profile (right) 
     */
    @apply base-navbar-btn-flex lg:flex-col xl:flex-row orange-button;
  }
}
