/* Sitewide header + menus (tools/site-header.py writes the markup).

   Built on divs, not <header>/<nav>: the WordPress theme styles those tags
   directly (fixed heights, floats) and its script toggles every <nav> on
   phones. Nothing here depends on the theme.

   Desktop (>1100px): bar with logo, links, See Dates. Tours opens a photo
   panel on hover or keyboard focus, and the word itself links to the tours page.
   Phones/tablets: burger opens a full-screen menu (pattern from the
   Digital Guidebooks guest menu and Katy Mickelson's site).
   .bh--overlay (home only): clear over the hero, white logo, turns solid
   yellow once the visitor scrolls. */

.bh { --bh-y: #f29d23; --bh-ink: #141414; --bh-h: 76px; position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--bh-y); font-family: 'Lato', sans-serif; transition: background-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.4,0,.2,1); }
.bh--hidden { transform: translateY(-100%); }
.bh-spacer { height: 76px; }
:root.bh-pinned .bh:not(.bh--overlay) { box-shadow: 0 6px 24px -12px rgba(0,0,0,.35); }
/* Tour pages: the sticky booking card moves down while the header is showing. */
.bt-book { transition: top .35s cubic-bezier(.4,0,.2,1); }
:root.bh-pinned .bt-book { top: calc(76px + 28px); }
.bh *, .bh-menu * { box-sizing: border-box; }
.bh__bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; height: var(--bh-h); max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.bh__logo { display: block; flex: 0 0 auto; line-height: 0; }
.bh__logo img { display: block; width: 196px; height: auto; transition: filter .35s ease; }

.bh__nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.bh__item { display: flex; align-items: stretch; }
.bh__link { display: flex; align-items: center; gap: 6px; padding: 0 16px; font: 700 13px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--bh-ink) !important; text-decoration: none !important; white-space: nowrap; position: relative; transition: color .25s ease; }
.bh__link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.bh__link:hover::after, .bh__link:focus-visible::after, .bh__link[aria-current="page"]::after, .bh__item--mega:hover > .bh__link::after { transform: scaleX(1); }
.bh__chev { width: 10px; height: 10px; transition: transform .25s ease; }
.bh__item--mega:hover .bh__chev, .bh__item--mega:focus-within .bh__chev { transform: rotate(180deg); }
.bh__cta { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; background: var(--bh-ink); color: #fff !important; font: 700 12px/1 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important; transition: background-color .25s ease, color .25s ease; }
.bh__cta:hover { background: #000; }

/* Tours panel */
.bh__mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 30px 60px -30px rgba(20,20,20,.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.bh__item--mega:hover .bh__mega, .bh__item--mega:focus-within .bh__mega, .bh__item--mega.is-open .bh__mega { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.bh__item--mega.is-closed .bh__mega { opacity: 0; visibility: hidden; }
.bh__mega-inner { display: grid; grid-template-columns: 1fr 220px; gap: 40px; max-width: 1440px; margin: 0 auto; padding: 32px 32px 36px; }
.bh__tours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.bh__tours li { margin: 0; padding: 0; }
.bh__tour { display: block; color: var(--bh-ink) !important; text-decoration: none !important; }
.bh__tour-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #eee; margin-bottom: 14px; }
.bh__tour-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bh__tour:hover .bh__tour-img img { transform: scale(1.05); }
.bh__tour-sub { display: block; font: 700 10px/1.3 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #b06f10; margin-bottom: 6px; }
.bh__tour-name { display: block; font: 400 17px/1.3 'Lato', sans-serif; margin-bottom: 6px; }
.bh__tour-meta { display: block; font: 400 13px/1.3 'Lato', sans-serif; color: #767676; }
.bh__plan { border-left: 1px solid #e6e0d6; padding-left: 32px; display: flex; flex-direction: column; gap: 14px; }
.bh__plan-k { font: 700 10px/1.3 'Lato', sans-serif !important; letter-spacing: .2em; text-transform: uppercase; color: #767676 !important; margin: 0 0 4px !important; }
.bh__plan a { font: 400 16px/1.3 'Lato', sans-serif; color: var(--bh-ink) !important; text-decoration: none !important; }
.bh__plan a:hover { color: #b06f10 !important; }
.bh__plan a.bh__plan-all { font-weight: 700; }

/* Burger (phones/tablets) */
.bh__burger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; z-index: 1001; }
.bh__burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--bh-ink); transition: transform .4s cubic-bezier(.68,0,.18,1), opacity .2s ease, background-color .3s ease; }
.bh__burger span:nth-child(1) { top: 15px; } .bh__burger span:nth-child(2) { top: 22px; } .bh__burger span:nth-child(3) { top: 29px; }

/* Home: clear over the hero until scroll */
.bh--overlay { position: fixed; top: 0; left: 0; right: 0; background: transparent; }
.bh--overlay::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(180deg, rgba(12,10,8,.55), rgba(12,10,8,0)); pointer-events: none; transition: opacity .35s ease; }
.bh--overlay:not(.bh--solid):not(.bh--panel) .bh__logo img { filter: brightness(0) invert(1); }
.bh--overlay:not(.bh--solid):not(.bh--panel) .bh__link { color: #fff !important; }
.bh--overlay:not(.bh--solid):not(.bh--panel) .bh__cta { background: var(--bh-y); color: var(--bh-ink) !important; }
.bh--overlay:not(.bh--solid):not(.bh--panel) .bh__burger span { background: #fff; }
.bh--overlay.bh--solid, .bh--overlay.bh--panel { background: var(--bh-y); box-shadow: 0 6px 24px -12px rgba(0,0,0,.35); }
.bh--overlay.bh--solid::before, .bh--overlay.bh--panel::before { opacity: 0; }

@media (max-width: 1100px) {
  .bh { --bh-h: 64px; }
  .bh-spacer { height: 64px; }
  .bh__bar { padding: 0 12px 0 20px; gap: 12px; }
  .bh__logo img { width: 252px; }
  .bh__nav, .bh__cta { display: none; }
  .bh__burger { display: block; }
}

/* Full-screen menu */
.bh-menu { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #141414; color: #fff; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .62s cubic-bezier(.68,0,.18,1), visibility 0s linear .62s; font-family: 'Lato', sans-serif; }
.bh-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 80% at 100% 0, rgba(242,157,35,.30), transparent 58%); }
.bh-open .bh-menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.bh-open { overflow: hidden; }
.bh-open .bh__burger span { background: #fff !important; }
.bh-open .bh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bh-open .bh__burger span:nth-child(2) { opacity: 0; }
.bh-open .bh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.bh-open .bh { z-index: 1002; background: transparent !important; box-shadow: none !important; }
.bh-open .bh::before { opacity: 0; }
.bh-open .bh__logo { opacity: 0; }
.bh-menu__body { position: relative; flex: 1 0 auto; width: 100%; max-width: 520px; margin: 0 auto; padding: 22px 24px 36px; }
.bh-menu__logo { display: block; width: 252px; height: auto; filter: brightness(0) invert(1); margin: 0 0 34px; }
.bh-menu__k { font: 700 11px/1 'Lato', sans-serif !important; letter-spacing: .28em; text-transform: uppercase; color: #f29d23 !important; margin: 0 0 14px !important; }
.bh-menu__tours, .bh-menu__links { list-style: none; margin: 0; padding: 0; }
.bh-menu__tours li, .bh-menu__links li { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.bh-menu__tour { display: flex; align-items: center; gap: 16px; padding: 12px 0; color: #fff !important; text-decoration: none !important; }
.bh-menu__tour img { flex: 0 0 auto; width: 76px; height: 54px; object-fit: cover; display: block; }
.bh-menu__tour b { display: block; font: 400 18px/1.25 'Lato', sans-serif; }
.bh-menu__tour small { display: block; font: 700 10px/1.3 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f29d23; margin-bottom: 5px; }
.bh-menu__all { display: block; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.12); font: 700 12px/1 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f29d23 !important; text-decoration: none !important; margin-bottom: 36px; }
.bh-menu__links a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font: 300 clamp(26px, 7.4vw, 34px)/1.15 'Lato', sans-serif; color: #fff !important; text-decoration: none !important; }
.bh-menu__links a span { font: italic 400 14px/1 'Lato', sans-serif; color: rgba(255,255,255,.45); min-width: 26px; }
.bh-menu__links li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.bh-menu__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 36px; margin: 30px 0 0; background: #f29d23; color: #141414 !important; font: 700 13px/1 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important; }
.bh-menu__foot { position: relative; width: 100%; background: rgba(0,0,0,.28); }
.bh-menu__foot-in { max-width: 520px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bh-menu__contact a { display: block; font: 400 14px/1.7 'Lato', sans-serif; color: rgba(255,255,255,.78) !important; text-decoration: none !important; }
.bh-menu__social { display: flex; gap: 10px; }
.bh-menu__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff !important; }
.bh-menu__social svg { width: 18px; height: 18px; fill: currentColor; }
.bh-menu__legal { position: relative; width: 100%; background: rgba(0,0,0,.36); }
.bh-menu__legal-in { max-width: 520px; margin: 0 auto; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1.4 'Lato', sans-serif; color: rgba(255,255,255,.45); }
.bh-menu__legal a { color: rgba(255,255,255,.45) !important; }
/* Rows rise in one after another as the menu unrolls */
.bh-menu [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.bh-open .bh-menu [data-rise] { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i, 0) * .04s); }
@media (min-width: 1101px) { .bh-menu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bh, .bh-menu, .bh-menu [data-rise], .bh__mega, .bh__burger span { transition: none !important; }
}

/* Home hero (clear header, before scrolling): the logo is larger on desktop and
   as wide as fits beside the menu button on phones. It eases back to the
   normal size once the visitor scrolls. Opening the Tours panel changes only
   the colour, never the size, so hovering the menu doesn't make the bar jump. */
.bh__logo img { transition: filter .35s ease, width .35s ease; }
.bh--overlay:not(.bh--solid) .bh__logo img { width: min(440px, 32vw); }
@media (min-width: 1101px) {
  .bh__bar { transition: height .35s ease; }
  .bh--overlay:not(.bh--solid) .bh__bar { height: 116px; }
}
@media (max-width: 1100px) { .bh--overlay:not(.bh--solid) .bh__logo img { width: min(296px, calc(100vw - 94px)); } }
/* Phone menu, third tier: the remaining pages, small, on one line. */
.bh-menu__minor { display: flex; flex-wrap: wrap; gap: 6px 28px; list-style: none; margin: 22px 0 0; padding: 0; }
.bh-menu__minor li { margin: 0; padding: 0; border: 0; }
.bh-menu__minor a { font: 700 12px/1 'Lato', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72) !important; text-decoration: none !important; padding: 8px 0; display: inline-block; }
.bh-menu__minor a:hover, .bh-menu__minor a[aria-current="page"] { color: #fff !important; }
.bh-menu__minor .bh-menu__break { flex-basis: 100%; height: 0; }
