/* ==========================================================================
   Site header — slim info strip (34px, scrolls away) + sticky bar (64px)
   Layout "C" chosen on home-4, shared by home-1 (index) and home-4.
   Needs nav.css (.masthead, .mainnav, dropdowns, drawer nav).
   Behaviour (dropdowns, search panel): assets/js/nav.js
   ≥1100px: logo · menu · search icon · ♡ · Tailor-Made Trip
   <1100px: logo · search icon · ♡ · CTA (≥640px) · burger — bar 60px, strip hidden <768px
   ========================================================================== */

:root {
  --bar-h: 60px;
  --strip-h: 0px;
  --hdr-dark: var(--c-primary-dark);
  --hdr-dark-2: var(--c-primary);
  --hdr-line: #E3E7EA;
  --hdr-gray: #F4F6F7;
  --hdr-muted: #4B5563;
}
@media (min-width: 768px) { :root { --strip-h: 34px; } }
@media (min-width: 1100px) { :root { --bar-h: 64px; } }
/* anchor jumps and focus scrolling stop below the sticky bar instead of under it */
html { scroll-padding-top: calc(var(--bar-h) + var(--s-2)); }

.oz-hdr {
  top: calc(var(--strip-h) * -1); /* sticky: the info strip scrolls away, the bar stays */
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--hdr-line);
}

/* slim info strip */
.oz-strip { display: none; height: var(--strip-h); background: var(--hdr-dark); color: rgba(255, 255, 255, .85); font-size: .75rem; }
@media (min-width: 768px) { .oz-strip { display: block; } }
.oz-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); height: 100%; }
.oz-strip__list { display: flex; align-items: center; gap: 20px; }
.oz-strip a,
.oz-strip span { position: relative; display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.oz-strip a::after { content: ""; position: absolute; inset: -5px -4px; } /* enlarged hit area (~28px tall: the strip is only 34px) */
.oz-strip a:hover { color: #fff; }
.oz-strip b { color: #fff; }
.oz-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rating); box-shadow: 0 0 0 2px rgba(0, 170, 108, .3); }
.oz-strip__promise .icon { color: var(--c-accent); }
.oz-strip__md,
.oz-strip__lg { display: none !important; }
@media (min-width: 1024px) { .oz-strip__md { display: inline-flex !important; } }
@media (min-width: 1280px) { .oz-strip__lg { display: inline-flex !important; } }

/* main bar */
.oz-bar { display: flex; align-items: center; gap: var(--s-2); height: var(--bar-h); }
.oz-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--hdr-dark);
  text-decoration: none;
}
.oz-logo img { width: 32px; height: auto; }
/* text logo: VIETNAM (orange) on top · BACKSTREET (brown) TOURS (orange) below */
.oz-logo__txt { display: grid; gap: 3px; line-height: 1; white-space: nowrap; }
.oz-logo__txt small { font-size: .5625rem; font-weight: 800; letter-spacing: .42em; color: var(--c-logo-orange); }
.oz-logo__txt > span { font-size: .9375rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-logo-brown); }
.oz-logo__txt b { font-weight: 800; color: var(--c-logo-orange); }
@media (min-width: 640px) {
  .oz-logo img { width: 36px; }
  .oz-logo__txt small { font-size: .625rem; }
  .oz-logo__txt > span { font-size: 1.125rem; }
}
@media (min-width: 1280px) {
  .oz-logo img { width: 40px; }
  .oz-logo__txt small { font-size: .6875rem; }
  .oz-logo__txt > span { font-size: 1.3125rem; }
}

.oz-bar .mainnav { margin-inline: auto; }
.oz-bar .mainnav__list { gap: 2px; }
.oz-bar .mainnav__link { padding: 0 12px; font-size: .9375rem; }
@media (min-width: 1280px) { .oz-bar .mainnav__link { padding: 0 16px; } }

.oz-bar__actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
.oz-bar .mainnav + .oz-bar__actions { margin-left: 0; }
@media (min-width: 1100px) { .oz-burger { display: none; } }
/* phones narrower than 375px: logo + 3 icon buttons only just fit — tighten (360px Android),
   then drop the logo mark and keep the wordmark (320px) */
@media (max-width: 374px) {
  .oz-bar { gap: 8px; }
  .oz-bar__actions { gap: 0; }
  .oz-logo__txt > span { font-size: .875rem; }
}
@media (max-width: 359px) {
  .oz-bar .oz-logo img { display: none; }
}

/* CTA pill (Tailor-Made Trip) — colour follows the page's --c-cta */
.oz-bar__book {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  margin-left: 6px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--c-cta);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.oz-bar__book:hover { background: var(--c-cta-hover); }
.oz-bar__book:active { transform: scale(.98); }
@media (min-width: 640px) { .oz-bar__book { display: inline-flex; } }

.oz-search-toggle[aria-expanded="true"] { background: var(--hdr-gray); color: var(--c-cta); }

/* search drop-down panel */
.oz-sp {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--hdr-line);
  background: #fff;
  box-shadow: 0 16px 30px rgba(16, 24, 40, .1);
}
.oz-hdr.is-search-open .oz-sp { display: block; animation: oz-drop .22s var(--ease-out); }
@keyframes oz-drop { from { opacity: 0; transform: translateY(-6px); } }
.oz-sp__inner { max-width: calc(760px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.oz-sp__hint { margin-top: 10px; font-size: .8125rem; color: var(--hdr-muted); }
.oz-sp__hint a { display: inline-block; padding-block: 12px; color: var(--hdr-dark); font-weight: 600; text-decoration: none; }
.oz-sp__hint a:hover { text-decoration: underline; text-underline-offset: 3px; }

.oz-search {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 5px 0 8px;
  border: 1.5px solid #D5DBDF;
  border-radius: 999px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.oz-search:focus-within { border-color: var(--hdr-dark); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.oz-search__dest {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 8px;
  border-right: 1px solid var(--hdr-line);
  color: var(--hdr-dark);
}
.oz-search select {
  height: 36px;
  padding-right: 18px;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%230A3A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right center;
  appearance: none;
  -webkit-appearance: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hdr-dark);
}
.oz-search select:focus { outline: none; }
.oz-search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-size: 1rem;
}
.oz-search input:focus { outline: none; }
.oz-search button {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--hdr-dark);
  color: #fff;
}
.oz-search button:hover { background: var(--hdr-dark-2); }
@media (min-width: 640px) { .oz-search__dest { display: inline-flex; } }