/* Riad Jona - header: large logo at the top of the home page with a fine line under the header;
   on scroll the bar shrinks, the line rises with it and the logo takes back its place in the bar.
   Pure CSS, no dependency. It relies on the site's own classes: body.is-home (home page) and
   nav.scrolled (added by the site's script after 40 px of scrolling). Delete this file to undo.
   Sizes (visible logo, the drawing without its transparent margins / bar, line included):
     wide screens   top of home: logo 162 px in a 181 px bar - scrolled and other pages: 88 / 101 px
     phones (<=900) top of home: logo  90 px in a 105 px bar - scrolled and other pages: 64 /  77 px
   logo.png is 448 px with transparent margins (drawing = 56 % of its height, starting at 20.5 %):
   the image heights below are those visible sizes divided by 0.56. */
html body nav{
  --hv-bar:101px; --hv-logo:157px; --hv-logo-top:-26px;
  box-sizing:border-box !important;
  min-height:var(--hv-bar) !important;
  padding-top:0 !important; padding-bottom:0 !important;
  align-items:center !important;
  transition:background .35s, border-color .35s, min-height .35s !important;
}
html body.is-home nav:not(.scrolled):not(.jv-menu-on):not(.menu-open){
  --hv-bar:181px; --hv-logo:289px; --hv-logo-top:-50px;
  border-bottom:1px solid rgba(255,255,255,.55) !important;
}
@media (max-width:900px){
  html body nav{ --hv-bar:77px; --hv-logo:114px; --hv-logo-top:-17px; }
  html body.is-home nav:not(.scrolled):not(.jv-menu-on):not(.menu-open){ --hv-bar:105px; --hv-logo:161px; --hv-logo-top:-25px; }
}
/* the logo's box spans the whole bar; the image is centred in it */
html body nav .logo{
  position:relative !important; align-self:stretch !important; height:auto !important;
}
html body nav .logo img{
  position:absolute !important; left:50% !important; top:var(--hv-logo-top) !important;
  height:var(--hv-logo) !important; width:auto !important; max-height:none !important; max-width:none !important;
  transform:translateX(-50%) !important;
  transition:top .35s, height .35s, filter .35s !important;
  pointer-events:none; /* the logo is not a link: never in the way of a tap */
}
/* Once scrolled, and on the other pages: a fine warm line under the white bar */
nav.scrolled, body:not(.is-home) nav{ border-bottom:1px solid color-mix(in srgb, var(--accent, #9C7C46) 22%, #fff) !important; }
@media (prefers-reduced-motion:reduce){ html body nav, html body nav .logo img{ transition:none !important; } }
/* Other pages (wide screens): the photo at the top starts under the 101 px bar */
@media (min-width:901px){ body:not(.is-home) .page-hero{ margin-top:101px !important; } }
/* Promo drawer, closed: only its tab catches taps (its invisible 281 x 32 px box covered the
   bottom of the page on phones, e.g. the footer links) */
#promoDrawer.collapsed{ pointer-events:none; }
#promoDrawer.collapsed .promo-tab{ pointer-events:auto; }