/* ==================================================
   VRIS Holidays — Global Style.css (Poppins Only)
   - Config-driven fonts: --font-body / --font-heading (set in head.php)
   - Clean reset + typography + header nav + utilities + responsive
================================================== */

/* =========================
   RESET (Light + Safe)
========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

/* Reset HTML5 semantic elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary{
  display:block;
  margin:0;
  padding:0;
}

body{
  margin:0;
  padding:0;

  /* Poppins everywhere via config tokens */
  font-family: var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.65;

  color:#111827;
  background:#ffffff;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font: inherit;
}

:focus-visible{
  outline:2px solid rgba(17, 24, 39, .35);
  outline-offset:2px;
}

/* =========================
   TYPOGRAPHY (Poppins Only)
========================= */
html, body{
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0 0 .6em;
  color:inherit;
}

h1{ font-size:40px; }
h2{ font-size:32px; }
h3{ font-size:24px; }
h4{ font-size:20px; }
h5{ font-size:18px; }
h6{ font-size:16px; }

p{
  margin:0 0 1.2em;
  color:inherit;
}

small{ font-size: .875em; }

/* =========================
   LAYOUT UTILITIES
========================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.text-center{ text-align:center; }
.text-uppercase{ text-transform:uppercase; }

/* =========================
   BUTTON BASE (Optional)
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 22px;
  border-radius:10px;

  font-family: var(--font-body);
  font-weight:600;
  line-height:1;

  cursor:pointer;
  border:0;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.btn:active{ transform: translateY(1px); }

/* =========================
   HEADER NAV TYPOGRAPHY (Poppins)
   - Clean, premium travel header look
========================= */
.site-header a{
  text-decoration:none;
}

.site-header .brand{
  font-family: var(--font-heading);
  font-weight:700;
}

.site-header .nav-row,
.site-header .bottombar{
  display:flex;
  align-items:center;
}

.site-header .nav{
  display:flex;
  align-items:center;
  gap:30px;
  height:100%;
}

.site-header .nav a{
  display:flex;
  align-items:center;
  height:100%;
  padding:0 4px;

  font-family: var(--font-body);
  font-weight:600;
  font-size:13px;

  /* Poppins: less tracking than Roboto */
  letter-spacing:0.08em;
  text-transform:uppercase;

  color:#4b5563;
  line-height:1;

  border:0;
  outline:0;
  transition: color .2s ease, opacity .2s ease, transform .15s ease;
}

.site-header .nav a:hover{
  color:#111827;
}

.site-header .nav a:active{
  transform: translateY(1px);
}

/* =========================
   MOBILE NAV FIX (prevent double menu)
   - Desktop nav hidden on mobile
   - Hamburger shown on mobile
   - Mobile panel shown only when toggled
========================= */
@media (max-width: 980px){
  .site-header .bottombar .nav{
    display:none !important;
  }

  .site-header .hamburger{
    display:inline-flex !important;
  }

  .site-header .search-btn{
    display:inline-flex !important;
  }
}

/* Desktop: never show mobile panel by default */
@media (min-width: 981px){
  .site-header .mobile-panel{
    display:none !important;
  }
}

.site-header .mobile-panel{ display:none; }
.site-header .mobile-panel.is-open{ display:block; }

/* =========================
   RESPONSIVE TYPE SCALE
========================= */

/* ── Laptop / small desktop (up to 1380px) ── */
@media (max-width: 1380px){
  h1{ font-size:36px; }
  h2{ font-size:28px; }
}

@media (max-width: 1024px){
  h1{ font-size:32px; }
  h2{ font-size:26px; }
}

@media (max-width: 768px){
  body{ font-size:15px; }

  h1{ font-size:28px; }
  h2{ font-size:24px; }

  .site-header .nav a{
    font-size:12.5px;
    letter-spacing:0.10em;
  }
}


/* ============================================================
   HERO PACKAGES NAV BAR  — shared across all hero sections
   .hvnbar-wrap / .hvnbar-inner / .hvnbar-label / .hvnbar-nav /
   .hvnbar-link / .hvnbar-hint
============================================================ */
.hvnbar-wrap{
  margin-bottom: 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hvnbar-wrap::-webkit-scrollbar{ display: none; }
.hvnbar-inner{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}
.hvnbar-inner::-webkit-scrollbar{ display: none; }
.hvnbar-label{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 4px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.hvnbar-nav{
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
}
.hvnbar-link{
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: rgba(255,255,255,.88);
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
  transition: color .15s ease, opacity .15s ease;
}
.hvnbar-link:hover{
  color: #fff;
  opacity: 1;
}
.hvnbar-hint{
  opacity: .60;
  font-weight: 400;
  font-size: 13px;
}
.hvnbar-link.is-active{
  color: #fff;
  opacity: 1;
}
/* Orange underline — collapsed at center by default, expands outward on hover/active */
.hvnbar-link::after{
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 2px;
  background: #ff7a18;
  border-radius: 99px;
  transition: left .25s ease, right .25s ease;
}
.hvnbar-link:hover::after,
.hvnbar-link.is-active::after{
  left: 0;
  right: 0;
}
/* Responsive: hide hints on small screens */
@media (max-width: 640px){
  .hvnbar-inner{ gap: 14px; padding: 10px 14px; }
  .hvnbar-nav{ gap: 14px; }
  .hvnbar-hint{ display: none; }
  .hvnbar-label{ font-size: 10px; }
}



/* ============================================================
   COPY PROTECTION — disable image drag + text selection
   on content areas across all pages
   ============================================================ */

/* ── Block image dragging site-wide ── */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* Re-enable pointer events on clickable images (links, buttons) */
a img, button img, .slick-slide img, .gallery img {
  pointer-events: auto;
}

/* ── Disable text selection on key content sections ── */
/* Destination pages */
.dg-section, .dg-tip-card, .dg-fact-item,
/* Balinese cuisine pages */
.vc-section, .vc-ing-card, .vc-card,
/* Port details, before-you-travel, health, travel-updates */
.pd-section, .pd-card, .pd-check,
.byt-section, .byt-card, .byt-check,
.hw-section, .hw-card, .hw-check,
.tu-section, .tu-card, .tu-check,
/* Blog */
.bp-card, .bp-faq-item,
/* Package / tour content */
.pkg-section, .tour-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ── Always allow selection in forms and inputs ── */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}