/* Search icon + dropdown, shared across every page's topbar. */
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.search-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border-radius:6px;
  background:none; border:1px solid var(--line); color:var(--grey-light);
  cursor:pointer; flex:0 0 auto; align-self:center;
}
.search-toggle:hover{ border-color:var(--grey-mid); color:var(--white); }
.search-toggle.active{ border-color:var(--ember); color:var(--ember); background:var(--bg-elevated); }
.search-toggle svg{ display:block; }

.search-panel{
  display:none; position:absolute; top:calc(100% + 8px); right:20px;
  width:min(360px, calc(100vw - 40px)); max-height:min(420px, calc(100vh - 100px));
  overflow-y:auto; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; padding:12px; box-shadow:0 12px 28px rgba(0,0,0,0.4); z-index:40;
}
.search-panel.open{ display:block; }
.search-input{
  width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line);
  border-radius:7px; color:var(--white); font-size:14px; font-family:inherit;
  padding:10px 12px;
}
.search-input:focus, .search-input:focus-visible{ outline:none; border-color:var(--ember); }
.search-results{ margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.search-result{
  display:flex; flex-direction:column; gap:1px; text-decoration:none;
  padding:9px 10px; border-radius:7px; color:var(--white);
}
.search-result:hover{ background:var(--bg); }
.search-result-name{ font-size:13.5px; font-weight:500; }
.search-result-file{ font-size:11.5px; color:var(--grey-mid); }
.search-empty{ padding:10px 2px; font-size:13px; color:var(--grey-mid); }

@media (max-width: 480px){
  .search-panel{ right:14px; width:min(320px, calc(100vw - 28px)); }
}

/* "Resort guides" menu in every page's topbar: every resort and area guide, grouped by region.
   The links are in each page's own HTML; <details> opens and closes it with no script needed. */
.guide-menu{ display:flex; align-self:center; }
.guide-menu-toggle{
  display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px; background:none; color:var(--grey-light);
  font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; list-style:none;
  -webkit-user-select:none; user-select:none;
}
.guide-menu-toggle::-webkit-details-marker{ display:none; }
.guide-menu-toggle::marker{ content:''; }
.guide-menu-toggle:hover{ border-color:var(--grey-mid); color:var(--white); }
.guide-menu[open] .guide-menu-toggle{ border-color:var(--ember); color:var(--ember); background:var(--bg-elevated); }
.guide-menu-chevron{ display:block; transition:transform 0.15s ease; }
.guide-menu[open] .guide-menu-chevron{ transform:rotate(180deg); }
.guide-menu-short{ display:none; }

.guide-menu-panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:min(1100px, calc(100vw - 40px)); max-height:calc(100vh - 110px); overflow-y:auto; box-sizing:border-box;
  display:grid; grid-template-columns:1fr 1fr 2fr; gap:28px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px;
  padding:22px 26px 24px; box-shadow:0 12px 28px rgba(0,0,0,0.4); z-index:40; text-align:left;
}
.guide-menu-region-name{
  display:block; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:0.01em;
  color:var(--white); text-decoration:none; padding-bottom:6px; margin-bottom:4px;
  border-bottom:2px solid var(--frost);
}
.guide-menu-region--northern-honshu .guide-menu-region-name{ border-bottom-color:var(--c-northern, #E2A54D); }
.guide-menu-region--central-honshu .guide-menu-region-name{ border-bottom-color:var(--c-central, #8FA37A); }
.guide-menu-region-name:hover{ color:var(--frost); }
.guide-menu-label{
  margin:14px 0 6px; font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-mid);
}
.guide-menu-list, .guide-menu-sub{ list-style:none; margin:0; padding:0; }
.guide-menu-list > li{ break-inside:avoid; -webkit-column-break-inside:avoid; padding:3px 0; }
.guide-menu-region--central-honshu .guide-menu-list{ column-count:2; column-gap:28px; }
.guide-menu-list a{ color:var(--grey-light); text-decoration:none; font-size:13.5px; line-height:1.35; }
.guide-menu-list a:hover{ color:var(--white); text-decoration:underline; }
.guide-menu-list a[aria-current="page"], .guide-menu-region-name[aria-current="page"]{ color:var(--frost); }
.guide-menu-sub{ margin:4px 0 2px 2px; padding-left:10px; border-left:1px solid var(--line); }
.guide-menu-sub li{ padding:2px 0; }
.guide-menu-sub a{ font-size:12.5px; color:var(--grey-mid); }

@media (max-width: 900px){
  .guide-menu-panel{ grid-template-columns:1fr 1fr; }
  .guide-menu-region--central-honshu{ grid-column:1 / -1; }
}
/* Phones: the topbar has no room for another button, so the "Resorts" tab in the bottom tab bar opens the menu
   (assets/site-search.js), and the panel fills the space between the topbar and the tab bar. */
@media (max-width: 700px){
  .guide-menu-toggle{ display:none; }
  .guide-menu-panel{
    left:0; right:0; transform:none; width:auto; top:100%;
    grid-template-columns:1fr; gap:22px; border-radius:0; border-left:none; border-right:none;
    padding:18px var(--gutter, 16px) 22px;
    max-height:none; height:calc(100vh - 56px); padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }   /* runs on under the tab bar (which sits above it), so no strip of page shows between the two */
  .guide-menu-list{ column-count:2; column-gap:20px; }
  .guide-menu-tab{ background:none; border:none; font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .guide-menu-tab[aria-expanded="true"]{ color:var(--ember); }
}