/* ==========================================================================
   FUNSIZE TOURS — NAV STYLES & HOVER FLASH EFFECTS
   Easy-edit guide at the bottom of this file ↓
   ========================================================================== */


/* ── 1. FLASH COLORS ────────────────────────────────────────────────────────
   These are the ONLY values you need to change to recolor the flash effect.
   Each button has its own set so you can tweak them independently.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── HOW THE FLASH WORKS ──────────────────────────────────────────────────
     Each button flashes between white (#ffffff) and black (#000000).
     - [button]-text   = the color the text flashes TO at peak
     - [button]-glow   = tight glow around the letters
     - [button]-accent = wider outer bloom
     To change: swap #000000 for any hex color you like.
     ───────────────────────────────────────────────────────────────────────── */

  /* Tours button */
  --flash-tours-text:   #000000;   /* flashes white → black */
  --flash-tours-glow:   #000000;
  --flash-tours-accent: #000000;

  /* About button */
  --flash-about-text:   #000000;   /* flashes white → black */
  --flash-about-glow:   #000000;
  --flash-about-accent: #000000;

  /* Contact button */
  --flash-contact-text:   #000000; /* flashes white → black */
  --flash-contact-glow:   #000000;
  --flash-contact-accent: #000000;

  /* WhatsApp button */
  --flash-wa-text:   #ccffdd;
  --flash-wa-glow:   #25D366;
  --flash-wa-accent: #1aad52;
}


/* ── 2. NAV CONTAINER ───────────────────────────────────────────────────── */

.nav {
  background: var(--fun-dark);
  padding: 0 64px;
  height: 64px;               /* ★ fixed — logo can never push this taller    */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;          /* lets logo spill above/below without resizing  */

  /* ── GLASSY WHITE BORDER LINE along the bottom of the nav ─────────────
     A single clean line the full width of the bar.
     The logo sits above it (z-index 101) so it naturally appears to
     pass behind the logo — no arch needed, just a straight ruled line.
     ───────────────────────────────────────────────────────────────────── */
  border-bottom: 3.5px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0  1px  4px  0px rgba(255,255,255,0.90),   /* tight bright edge    */
    0  1px 12px  2px rgba(255,255,255,0.75),   /* soft mid bloom       */
    0  1px 28px  6px rgba(255,255,255,0.40);   /* wide outer glow      */
    0  1px 28px  6px rgba(255,255,255,0.18);   /* wide outer glow      */


}


/* ── 3. LOGO ─────────────────────────────────────────────────────────────── */

.logo-text {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0;
}

/* =====================================================================
   ★ TO RESIZE THE LOGO — change the number below. That's it.
     The nav bar height will NEVER change no matter what size you pick.
   ★ TO SWAP THE LOGO IMAGE — go to index.html and find the two lines
     that say "LOGO — change the src filename here" and update the
     filename to match your new image file.
   ===================================================================== */
.logo-gif {
  height: 210px;              /* ← change this number to resize the logo       */
  width: auto;
  display: block;
  position: relative;
  z-index: 101;               /* sits above the nav border line                */
  animation: none !important; /* keeps the logo completely still               */
  margin-top: 110px;

  /* No white-out filter — logo shows its true colors clearly            */
  filter: none;
}

/* Footer logo size — change independently if needed */
footer .logo-gif {
  height: 125px;              /* ← change this to resize the footer logo       */
  position: static;
}


/* ── 4. NAV LINKS WRAPPER ───────────────────────────────────────────────── */

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Shared base for all nav links */
.nav-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.25s ease,
              background 0.25s ease;
}


/* ── 5. BUTTON BASE STYLES ──────────────────────────────────────────────── */

.nav-links a.explore-btn {
  background: linear-gradient(135deg, var(--fun-lime), var(--fun-green));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-links a.about-btn {
  background: linear-gradient(135deg, #00d2ff, #0077cc);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-links a.book-btn {
  background: linear-gradient(135deg, var(--fun-yellow), var(--fun-orange));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wa-btn {
  background: #25D366;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 0.25s ease;
}


/* ── 6. HOVER — LIFT & FLASH ────────────────────────────────────────────── */
/* Each button lifts up and triggers its own named flash animation.          */
/* The animation names (flashTours, flashAbout, etc.) link to section 7.    */

.nav-links a.explore-btn:hover,
.nav-links a.explore-btn:active {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(92, 184, 92, 0.3);
  animation: flashTours 0.35s infinite alternate ease-in-out;
}

.nav-links a.about-btn:hover,
.nav-links a.about-btn:active {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 210, 255, 0.3);
  animation: flashAbout 0.35s infinite alternate ease-in-out;
}

.nav-links a.book-btn:hover,
.nav-links a.book-btn:active {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(232, 119, 34, 0.35);
  animation: flashContact 0.35s infinite alternate ease-in-out;
}

.wa-btn:hover,
.wa-btn:active {
  transform: translateY(-2px);
  animation: flashWhatsApp 0.35s infinite alternate ease-in-out;
}


/* ── 7. FLASH KEYFRAMES ─────────────────────────────────────────────────── */
/* Each button has its own @keyframes block.                                 */
/* To change a flash color: edit the matching CSS variable in section 1 ↑   */

/* Tours button flash */
@keyframes flashTours {
  0%   { color: #ffffff; text-shadow: none; }
  100% { color: var(--flash-tours-text);
         text-shadow: 0 0 6px var(--flash-tours-glow),
                      0 0 18px var(--flash-tours-accent); }
}

/* About button flash */
@keyframes flashAbout {
  0%   { color: #ffffff; text-shadow: none; }
  100% { color: var(--flash-about-text);
         text-shadow: 0 0 6px var(--flash-about-glow),
                      0 0 18px var(--flash-about-accent); }
}

/* Contact button flash */
@keyframes flashContact {
  0%   { color: #ffffff; text-shadow: none; }
  100% { color: var(--flash-contact-text);
         text-shadow: 0 0 6px var(--flash-contact-glow),
                      0 0 18px var(--flash-contact-accent); }
}

/* WhatsApp button flash */
@keyframes flashWhatsApp {
  0%   { color: #ffffff; text-shadow: none; }
  100% { color: var(--flash-wa-text);
         text-shadow: 0 0 6px var(--flash-wa-glow),
                      0 0 18px var(--flash-wa-accent); }
}


/* ── 8. RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .nav { padding: 0 16px; height: 56px; }
  .nav-links { display: none; }
  .hamburger { display: flex !important; }
  .logo-gif { height: 70px; }
  footer .logo-gif { height: 36px; }
  .guide-nav-btn { display: none; }
}


/* ==========================================================================
   HOW TO CUSTOMIZE THE FLASH COLORS
   ============================================================================
   All flash colors live in the :root block at the very top (section 1).
   Each button has 3 variables:

     --flash-[button]-text     → the text color at peak brightness
     --flash-[button]-glow     → the tight inner glow (usually same hue)
     --flash-[button]-accent   → the wider outer glow

   Example — make the Tours button flash hot pink:
     --flash-tours-text:   #ff66cc;
     --flash-tours-glow:   #ff66cc;
     --flash-tours-accent: #cc0077;

   To REMOVE the flash from a button, just delete its :hover animation line.
   For example, to stop the WhatsApp button flashing, remove this line:
     animation: flashWhatsApp 0.35s infinite alternate ease-in-out;
   ========================================================================== */