/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* --- Risum Resort text logo -------------------------------------------------
   Matches the original website: the wordmark "Risum Resort" set in Poppins.
   Brand colour is the deep maroon #530302 used across the old site.
----------------------------------------------------------------------------- */
.logo_normal,
.logo_sticky {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 1.5px;
  line-height: 45px;
  white-space: nowrap;
  text-decoration: none !important;
  display: inline-block;
}
.logo_normal { color: #ffffff; }          /* over the hero (transparent header) */
.logo_sticky { color: #530302; }           /* on the white sticky header */
.logo_normal:hover,
.logo_sticky:hover { text-decoration: none !important; }

/* Wordmark inside the slide-out hamburger panel (light cream background) */
.site-logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #530302;
  text-decoration: none !important;
}

/* Wordmark on the "Menu of the Day" splash intro */
.day-logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 1.5px;
  color: #530302;
  display: inline-block;
}

/* --- Fix: hamburger (slide-out) panel should flow & scroll, not overlap the
   contact footer. The template pins .panel_footer to bottom:0 and makes the
   menu <ul> absolute; with more menu items that overlaps the last links.
   Lay the panel out as a flex column so the list scrolls and the footer sits
   neatly after it. -------------------------------------------------------- */
.nav_panel .sidebar-navigation {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav_panel .sidebar-navigation nav {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.nav_panel .sidebar-navigation nav > ul {
  position: static;
  height: auto;
  flex: 1 0 auto;
}
.nav_panel .panel_footer {
  position: static;
  margin-top: auto;
}
/* continue the entrance stagger for menu items 6-10 */
.nav_panel #mainNav nav ul > li:nth-child(6)  { transition-delay: 0.70s; }
.nav_panel #mainNav nav ul > li:nth-child(7)  { transition-delay: 0.76s; }
.nav_panel #mainNav nav ul > li:nth-child(8)  { transition-delay: 0.82s; }
.nav_panel #mainNav nav ul > li:nth-child(9)  { transition-delay: 0.88s; }
.nav_panel #mainNav nav ul > li:nth-child(10) { transition-delay: 0.94s; }

/* --- Floating social button (bottom-left), mirrors the back-to-top button.
   Pure-CSS toggle: a hidden checkbox reveals the buttons fanning upward. ---- */
.social_fab {
  position: fixed;
  left: 30px;
  bottom: 30px;
  width: 46px;
  height: 46px;
  z-index: 999;
}
.social_fab input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.social_fab .fab_toggle {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  background: #530302;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s;
}
.social_fab .fab_toggle:hover { background: #6d0403; }
.social_fab .fab_toggle i {
  font-size: 20px;
  transition: transform 0.35s ease;
}
.social_fab .soc {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(0) scale(0.4);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease;
}
.social_fab .soc:hover { color: #fff; filter: brightness(1.08); }
.social_fab .soc-wa   { background: #25d366; }
.social_fab .soc-ig   { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social_fab .soc-fb   { background: #1877f2; }
.social_fab .soc-mail { background: #978667; }
.social_fab input:checked ~ .fab_toggle { background: #6d0403; }
.social_fab input:checked ~ .fab_toggle i { transform: rotate(90deg); }
.social_fab input:checked ~ .soc { opacity: 1; pointer-events: auto; }
.social_fab input:checked ~ .soc-wa   { transform: translateY(-56px)  scale(1); transition-delay: 0.05s; }
.social_fab input:checked ~ .soc-ig   { transform: translateY(-108px) scale(1); transition-delay: 0.10s; }
.social_fab input:checked ~ .soc-fb   { transform: translateY(-160px) scale(1); transition-delay: 0.15s; }
.social_fab input:checked ~ .soc-mail { transform: translateY(-212px) scale(1); transition-delay: 0.20s; }

/* --- Gallery masonry: give every tile a fixed aspect ratio so the grid has
   known heights before images load. This stops the isotope items from
   overlapping when images lazy-load, while keeping a tidy, uniform gallery. */
.isotope-wrapper .item-img { aspect-ratio: 4 / 3; }
.isotope-wrapper .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}