/* Java Tipis header: fixed white bar with the stacked logo (home link) on the left
   and the menu on the right. site.js adds .jt-scrolled after 40px of scrolling
   (header tightens) and .jt-menu-open while the mobile menu is open. */

/* Bar: 14px + 78px logo + 14px + 1px border = 107px */
#jt-header{padding:calc(14px + env(safe-area-inset-top, 0px)) 20px 14px;transition:padding .25s ease}
#jt-header-spacer{height:107px}
.jt-logo-link{display:block;flex-shrink:0;line-height:0}
.jt-logo-img{display:block;height:78px;width:auto;transition:height .25s ease}

/* Scrolled: 10px + 56px + 10px + 1px = 77px. The spacer keeps the full height
   so the page doesn't jump (site.js measures the unscrolled header). */
#jt-header.jt-scrolled{padding-top:calc(10px + env(safe-area-inset-top, 0px));padding-bottom:10px}
#jt-header.jt-scrolled .jt-logo-img{height:56px}

/* Full menu on one line: 20px between items. The row needs 1183px
   (71px logo + 32px gap + 1080px nav) + 40px padding + 17px for a scrollbar = 1240px.
   Below that, show the MENU button (keep in step with site.js). */
#jt-header nav[aria-label="Main"]{flex-wrap:nowrap !important;column-gap:20px !important;white-space:nowrap}
@media (max-width:1239.98px){
  #jt-header .jt-wide-only{display:none !important}
  #jt-header .jt-narrow-only{display:contents !important}
  #jt-header #mobile-menu:not([hidden]){display:flex !important}
}

/* Phones: 10px + 60px + 10px + 1px = 81px; scrolled 8px + 48px + 8px + 1px = 65px */
@media (max-width:699.98px){
  #jt-header{padding-top:calc(10px + env(safe-area-inset-top, 0px));padding-bottom:10px}
  #jt-header-spacer{height:81px}
  .jt-logo-img{height:60px}
  #jt-header.jt-scrolled{padding-top:calc(8px + env(safe-area-inset-top, 0px));padding-bottom:8px}
  #jt-header.jt-scrolled .jt-logo-img{height:48px}
}

/* Photos are wrapped in <picture> (WebP + JPEG sizes); the wrapper takes no space,
   so each <img> lays out exactly as it did before */
picture{display:contents}
picture>source{display:none}

/* Links like /#brochure: stop the section landing underneath the fixed header
   (77px once scrolled on desktop, 65px on phones, plus a little breathing room) */
[id]{scroll-margin-top:92px}
@media (max-width:699.98px){[id]{scroll-margin-top:80px}}

/* Menu open: let the header scroll if the menu is taller than the screen */
#jt-header.jt-menu-open{max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* site.js adds .jt-measuring for an instant while it measures the full height */
#jt-header.jt-measuring,#jt-header.jt-measuring .jt-logo-img{transition:none !important}
@media (prefers-reduced-motion:reduce){#jt-header,.jt-logo-img{transition:none}}