/* BUILD 04: Header and hero refinements approved from mobile review.
   - Full seven-link navigation in a two-row compact bar on narrow phones.
   - Larger hero slogan, still alongside image.
   - Hero yellow greebling stops roughly 5/6 down the photo; white photo edge
     continues beyond yellow, over the black background.
   - Original site pages and data are not changed. */

/* Yellow texture ends before the photograph: give the photo a true overhang. */
.rbh-hero { background:#050505; isolation:isolate; }
.rbh-hero::before { content:""; position:absolute; left:0;right:0;top:0;bottom:auto; height:calc(100% - 72px); z-index:0; pointer-events:none; background:#ffdf00 url('/assets/yellow-texture.webp') center/950px auto; opacity:1; }
.rbh-hero .rbh-hero-inner {position:relative;z-index:1;}
.rbh-hero .rbh-hero-frame { z-index:1; }

/* No large Book an Event button on the homepage; navigation stays primary. */
.rbh-header .rbh-header-book { display:none !important; }

/* Don't place a solid-yellow character image over a real Rove travel photo. */
.rbh-rove-photo .rbh-rove-landscape { object-position:center; }

@media (max-width:920px) {
  /* A single thin header holding all seven real links. Two clear rows are more
     readable on a 390px phone than one microscopic row or collapsed nav. */
  .rbh-header {height:66px; min-height:66px;}
  .rbh-header-inner {
    display:grid;grid-template-columns:67px minmax(0,1fr);
    grid-template-rows:66px;gap:7px;
    height:66px;align-items:stretch;
    width:calc(100% - 14px);
  }
  .rbh-logo {grid-column:1;grid-row:1;align-self:start;width:65px;height:66px;z-index:6;}
  .rbh-header .rbh-logo img.brand-logo {top:6px;left:0;width:65px;height:auto;}
  .rbh-header .rbh-menu {display:none!important;}
  .rbh-header .rbh-nav,
  .rbh-header.menu-open .rbh-nav {
    display:grid!important;position:relative;top:auto;left:auto;right:auto;
    grid-column:2;grid-row:1;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,26px);
    align-items:center;justify-items:center;align-content:center;
    width:100%;min-width:0;height:66px;max-height:none;overflow:visible;
    margin:0;padding:0;background:transparent;border:0;box-shadow:none;
    column-gap:2px;row-gap:1px;
  }
  .rbh-nav>a,.rbh-nav .nav-drop {
    display:inline-flex;width:auto;max-width:100%;align-items:center;justify-content:center;
    margin:0;padding:5px 1px;
    color:#f8f8f8;text-align:center;white-space:nowrap;
    font:900 clamp(10px,2.85vw,13px)/1.1 var(--display);
    letter-spacing:-.018em;text-transform:none;
  }
  .rbh-header .rbh-nav-home {
    display:inline-block;width:auto;border-radius:999px;
    background:#ffe400;color:#070707!important;
    padding:6px 9px;line-height:1;
  }
  .rbh-nav .dropdown {position:relative;width:auto;max-width:100%;height:auto;}
  .rbh-nav .nav-drop {width:auto;text-align:center;}
  .rbh-nav .nav-drop span {margin-left:3px;}
  .rbh-nav .drop-panel {
    position:absolute;top:calc(100% + 6px);left:0;
    width:min(285px,calc(100vw - 92px));min-width:0;max-height:65vh;
    overflow-y:auto;z-index:80;
    margin:0;padding:8px 12px 12px;
    background:#111;border:2px solid #ffe400;
    box-shadow:0 10px 24px #000d;
  }
  .rbh-nav .drop-panel strong{font-size:11px;}
  .rbh-nav .drop-panel a{font-size:14px;padding:7px;}

  /* Enlarge slogan by about one-third, while it stays beside the photo. */
  .rbh-hero-inner {
    height:226px;min-height:226px;padding:10px 0 10px;
    width:calc(100% - 22px);
    grid-template-columns:49% 51%;
  }
  .rbh-hero h1 {
    font-size:clamp(25px,7.65vw,35px);
    line-height:.91;letter-spacing:-.052em;
  }
  .rbh-hero h1 span {text-shadow:2px 3px 0 #050505,-1.5px -1px 0 #050505,2px -1px 0 #050505;}
  .rbh-hero h1 em {text-shadow:2px 3px 0 #050505,-1.5px -1px 0 #050505,2px -1px 0 #050505;}
  .rbh-swoosh {margin-top:7px;height:7px;width:94%;}
  .rbh-burst {left:100%;top:0;}
  .rbh-hero-frame {height:190px;margin:6px 2px 0 7px;}
  /* Photo occupies roughly y=18–208. The yellow ends near y=177,
     leaving the lower ~31px (one sixth) of the photo over black. */
  .rbh-hero::before {height:177px;background-size:auto 280px;}
  .rbh-brick{bottom:3px;}
}

@media(max-width:370px){
  .rbh-header-inner{grid-template-columns:57px minmax(0,1fr);gap:3px;}
  .rbh-logo{width:56px;}
  .rbh-header .rbh-logo img.brand-logo{width:56px;}
  .rbh-nav>a,.rbh-nav .nav-drop{font-size:clamp(9px,2.75vw,11px);}
  .rbh-hero-inner{height:212px;min-height:212px;}
  .rbh-hero h1{font-size:clamp(24px,7.45vw,28px);}
  .rbh-hero-frame{height:176px;}
  .rbh-hero::before{height:167px;}
}


/* BUILD 05 tweaks from Safari review:
   - remove Home link from homepage header
   - raise hero slogan
   - remove red accent burst beside slogan */
.rbh-burst{display:none !important;}
@media (max-width:920px) {
  .rbh-header-inner {
    grid-template-columns:67px minmax(0,1fr);
  }
  .rbh-header .rbh-nav,
  .rbh-header.menu-open .rbh-nav {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,26px);
    column-gap:5px;
    row-gap:2px;
  }
  .rbh-nav>a,.rbh-nav .nav-drop {
    font:900 clamp(11px,3.05vw,14px)/1.1 var(--display);
    padding:4px 2px;
  }
  .rbh-header .rbh-nav-home{display:none!important;}
  .rbh-hero-inner {
    align-items:start;
    height:226px; min-height:226px;
    padding-top:6px;
  }
  .rbh-hero-text {
    align-self:start;
    padding-top:16px;
  }
  .rbh-hero h1 { margin:0; }
  .rbh-swoosh { margin-top:10px; }
  .rbh-hero-frame { margin-top:0; }
}
@media(max-width:370px){
  .rbh-header .rbh-nav, .rbh-header.menu-open .rbh-nav { column-gap:2px; }
}