/*
 * HawaiiGuide site-shell pilot (glass-v1)
 *
 * The filtered/tinted layer is a grid sibling behind page content, never an
 * ancestor. That keeps fixed drawers, dialogs, and FABs viewport-positioned.
 */

body.hg-site-shell-page {
  background: #071d1b;
  overflow-x: clip;
}

.hg-site-shell-wallpaper {
  --hgos-wallpaper-current: url("https://cdn.hawaiiguide.io/cdn-cgi/image/width=1600,quality=80,format=auto/all-os/night.PNG");
  --hgos-wallpaper-next: var(--hgos-wallpaper-current);
  --hgos-wallpaper-progress: 0;
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #071d1b;
  transform: scale(1.015);
}

.hg-site-shell-wallpaper::before,
.hg-site-shell-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(3, 13, 20, 0.18), rgba(3, 13, 20, 0.30) 42%, rgba(3, 13, 20, 0.56)),
    var(--hgos-wallpaper-current);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hg-site-shell-wallpaper::after {
  background-image:
    linear-gradient(180deg, rgba(3, 13, 20, 0.18), rgba(3, 13, 20, 0.30) 42%, rgba(3, 13, 20, 0.56)),
    var(--hgos-wallpaper-next);
  opacity: var(--hgos-wallpaper-progress);
}

.hg-site-shell-wallpaper.hgos-wallpaper-ready::after {
  transition: opacity 60s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hg-site-shell-wallpaper.hgos-wallpaper-ready::after {
    transition: none;
  }
}

body.hg-site-shell-page .goUS-header {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  /* Match the compact cover-page masthead used by /go. The header include
     carries a legacy pb15 utility class, which otherwise leaves a 15px navy
     band above the app frame on non-cover tool pages such as Weather. */
  padding-bottom: 0 !important;
  margin-top: -3px !important;
}

body.hg-site-shell-page .goUS-header.is-sticky {
  background: rgba(6, 26, 24, 0.90);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

body.hg-site-shell-page .goUS-header .nav-inline-block span,
body.hg-site-shell-page .goUS-header.is-sticky .nav-inline-block span,
body.hg-site-shell-page .goUS-header.is-sticky .nav-inline-block.nav-inline-islands span,
body.hg-site-shell-page .goUS-header.is-sticky .nav-inline-block.search-icon span,
body.hg-site-shell-page .goUS-header.is-sticky .nav-inline-block.menu-icon span,
body.hg-site-shell-page .goUS-header .goUS-nav-item.chat-sm .chat-icon span i {
  color: #fff !important;
  text-shadow: none;
}

/* The legacy desktop nav keeps an 83px row even after it becomes sticky.
   That reads as an oversized empty band above the framed app surface. Keep
   the full navigation comfortable, but compact its shell-page footprint and
   align the sticky progress bar with the shorter row. */
@media screen and (min-width: 1024px) {
  body.hg-site-shell-page .goUS-header .goUS-nav-main {
    height: 72px !important;
  }

  body.hg-site-shell-page .goUS-header.is-sticky .goUS-nav-main {
    height: 64px !important;
  }

  body.hg-site-shell-page .goUS-header.is-sticky .progress-container {
    top: 60px;
    margin-top: 0 !important;
  }

  body.hg-site-shell-page .hg-site-shell-frame {
    margin-top: 12px;
  }
}

.hg-site-shell-frame {
  --hg-shell-frame-max: 1436px;
  --hg-shell-radius: 32px;
  --hg-shell-content-pad: 14px;
  --hg-shell-edge: 1px;
  --hg-shell-hero-surface: #fffdf9;
  display: grid;
  width: min(var(--hg-shell-frame-max), calc(100% - 24px));
  min-width: 0;
  margin: 18px auto 40px;
}

body.hg-site-shell--reading-long .hg-site-shell-frame {
  --hg-shell-frame-max: 1308px;
}

/* One terminal AdSense slot may appear after the complete OS frame. It is
   deliberately outside the tool surface so filters, results, and supporting
   content remain uninterrupted. */
.hg-os-end-ad {
  float: none;
  width: min(970px, calc(100% - 24px));
  margin: -12px auto 44px;
}

.hg-os-end-ad .hgads {
  box-sizing: border-box;
  float: none;
  width: 100%;
  min-height: 280px;
  margin: 0;
  padding: 14px 12px 12px;
  overflow: hidden;
  border-radius: 22px;
}

.hg-os-end-ad-label {
  display: block;
  margin-bottom: 6px;
  color: #68736d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .hg-os-end-ad {
    margin-top: -16px;
    margin-bottom: 36px;
  }

  .hg-os-end-ad .hgads {
    min-height: 250px;
    border-radius: 18px;
  }
}

body.hg-site-shell--browse .hg-site-shell-frame {
  --hg-shell-frame-max: 1248px;
}

.hg-site-shell-glass,
.hg-site-shell-content {
  grid-area: 1 / 1;
  min-width: 0;
}

.hg-site-shell-glass {
  position: relative;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: var(--hg-shell-radius);
  background: linear-gradient(155deg, rgba(255, 253, 249, 0.975), rgba(244, 249, 246, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 24px 70px rgba(0, 20, 25, 0.34);
}

/* App tools use a single opaque surface so the hero wave and body meet with
   no color seam on high-density displays. */
body.hg-site-shell--app .hg-site-shell-glass {
  background: var(--hg-shell-hero-surface);
}

body.hg-site-shell--reading-long .hg-site-shell-glass {
  background: linear-gradient(155deg, rgba(255, 253, 249, 0.98), rgba(250, 248, 243, 0.955));
}

body.hg-site-shell--reading-rail .hg-site-shell-glass {
  background: linear-gradient(155deg, rgba(251, 253, 250, 0.97), rgba(238, 247, 242, 0.94));
}

body.hg-site-shell--browse .hg-site-shell-glass {
  background: linear-gradient(155deg, rgba(239, 249, 246, 0.90), rgba(220, 240, 238, 0.82));
}

.hg-site-shell-content {
  position: relative;
  z-index: 1;
  padding: var(--hg-shell-content-pad, 14px);
}

/* Bleed only the pilot heroes to the inner edge of the glass border. Article
   controls and copy retain the shell's normal readable padding. */
body.hg-site-shell-page .hg-site-shell-content > .hero-top,
body.hg-site-shell-page .hg-site-shell-content > #hawaii-top.hero-top {
  width: auto;
  margin:
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    0 !important;
}

body.hg-site-shell-page .hg-site-shell-content > #type-entry-page,
body.hg-site-shell-page .hg-site-shell-content > #type-custom-page,
body.hg-site-shell-page .hg-site-shell-content > #type-feature-page {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Tool pages can opt a direct hero into the same app-shell edge used by the
   planning hubs while keeping the readable content below in its own wrapper. */
body.hg-site-shell--app
  .hg-site-shell-content > #type-entry-page > .hg-site-shell-hero-edge,
body.hg-site-shell--app
  .hg-site-shell-content > #type-custom-page > .hg-site-shell-hero-edge,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .hg-site-shell-hero-edge,
body.hg-site-shell--app
  .hg-site-shell-content > #type-entry-page > .hg-site-shell-app-canvas,
body.hg-site-shell--app
  .hg-site-shell-content > #type-custom-page > .hg-site-shell-app-canvas,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .hg-site-shell-app-canvas {
  width: auto;
  max-width: none !important;
  box-sizing: border-box;
  margin:
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad) - 10px)
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    0 !important;
  border-radius:
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    0 0 !important;
  clip-path: inset(
    0 round
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    0 0
  ) !important;
}

/* One visual format for app-tool heroes. Keep the compact mobile stage, then
   let the hero gain vertical presence with larger screens instead of becoming
   an increasingly wide, shallow strip inside the 1436px app frame. */
body.hg-site-shell--app {
  --hg-app-hero-height: 420px;
}

@media (min-width: 768px) {
  body.hg-site-shell--app {
    --hg-app-hero-height: clamp(440px, calc(320px + 14vw), 540px);
  }
}

body.hg-site-shell--app .hg-site-shell-hero-edge {
  height: var(--hg-app-hero-height);
  min-height: var(--hg-app-hero-height) !important;
}

/* Travel Alerts keeps its three actions stacked through 680px. Let that brief
   grow with the stacked controls in the narrow 641-680px handoff instead of
   clipping the final action beneath the wave. */
@media (min-width: 641px) and (max-width: 680px) {
  body.hg-site-shell--app.travel-alerts-page .ta-hero.hg-site-shell-hero-edge {
    height: auto;
    min-height: 420px !important;
  }
}

/* Cache refresh: 2026-07-17. */
/* /chat owns a taller 520px tablet baseline. Let it join the shared fluid
   scale only once that scale becomes taller, and keep its inner grid matched
   to the outer photo stage. Its <=640px layout deliberately keeps a taller
   content-driven minimum, so do not replace that mobile rule. */
@media (min-width: 641px) {
  body.hg-site-shell--app
    .hg-site-shell-content > #type-feature-page > .hg-ai-hub > .hg-site-shell-hero-edge {
    height: max(520px, var(--hg-app-hero-height));
    min-height: max(520px, var(--hg-app-hero-height)) !important;
  }

  body.hg-site-shell--app .hg-ai-hero-inner {
    min-height: max(520px, var(--hg-app-hero-height));
  }
}

/* The itinerary's two-column starter grid needs a 520px desktop canvas even
   before the general fluid scale reaches that height. Its <=700px compact
   layout remains governed by the page-specific mobile rule. */
@media (min-width: 701px) {
  body.hg-site-shell--app .ig-landing-hero.hg-site-shell-hero-edge {
    height: max(520px, var(--hg-app-hero-height));
    min-height: max(520px, var(--hg-app-hero-height)) !important;
  }
}

/* The trip-cost bridge has a compact copy block over a wide scenic image.
   Center it within the added desktop height so the new space reads as an
   intentional cinematic stage rather than an empty lower half. */
@media (min-width: 1024px) {
  body.hg-site-shell--app.trip-cost-page .tcc-hero-copy {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
  }
}

/* Dense interactive surfaces such as Maps and voice Q&A use the same shell
   edge and wave without inheriting the standard 420px hero-stage height. */
body.hg-site-shell--app .hg-site-shell-app-canvas {
  max-width: none;
  overflow: hidden;
}

/* App/OS video heroes retain a compact, keyboard-operable motion control.
   Auto heroes sit beneath translucent desktop chrome, while direct tool
   heroes start below the masthead and use the standard corner inset. */
body.hg-site-shell--app .hg-hero-video-toggle {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(7, 31, 42, 0.76);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.hg-site-shell--app .hg-hero-video-toggle[hidden] {
  display: none;
}

body.hg-site-shell--app .hg-hero-video-toggle:hover,
body.hg-site-shell--app .hg-hero-video-toggle:focus-visible {
  border-color: #fff;
  background: #0d2b3e;
}

body.hg-site-shell--app .hg-hero-video-toggle:focus-visible {
  outline: 3px solid rgba(112, 214, 181, 0.7);
  outline-offset: 3px;
}

body.hg-site-shell--app #hawaii-top.hero-top .hg-hero-video-toggle {
  top: 104px;
}

/* One shared safe area for custom hero copy. The wave overlaps the bottom of
   the image, so legacy overlays need enough room to remain fully readable. */
body.hg-site-shell--app .hg-site-shell-hero-copy {
  box-sizing: border-box;
  padding-bottom: 52px !important;
}

/* Travel Alerts carries a four-card live-status rail. Keep that rail below
   the shared wave so neither the curve nor a dense mobile stack obscures it. */
body.hg-site-shell--app .ta-status-strip.ta-status-strip--shell {
  position: relative;
  z-index: 4;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(1180px, 100%);
  margin: 12px auto 24px;
  padding: 0 18px;
  box-sizing: border-box;
}

@media (min-width: 681px) {
  body.hg-site-shell--app .ta-hero-inner {
    padding-top: 42px;
  }

  body.hg-site-shell--app .ta-hero-meta,
  body.hg-site-shell--app .ta-hero-actions {
    margin-top: 12px;
  }
}

body.hg-site-shell--app .cn-hero-overlay,
body.hg-site-shell--app .wf-hero-overlay,
body.hg-site-shell--app .or-hero-overlay,
body.hg-site-shell--app .wc-hero-overlay,
body.hg-site-shell--app .ce-hero-overlay,
body.hg-site-shell--app .rc-hero-overlay,
body.hg-site-shell--app .jf-hero-overlay,
body.hg-site-shell--app .ts-hero-overlay,
body.hg-site-shell--app .itin-hero-overlay,
body.hg-site-shell--app .bf-hero-panel,
body.hg-site-shell--app .hf-hero-panel,
body.hg-site-shell--app .lf-hero-panel,
body.hg-site-shell--app .ssf-hero-panel {
  padding-bottom: 52px;
}

/* Auto-injected legacy heroes are still used by a few App/OS pages. Normalize
   their internal 16:9 stage to the same dimensions as explicit tool heroes. */
body.hg-site-shell--app
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top,
body.hg-site-shell--app
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top > .image-container-main {
  height: var(--hg-app-hero-height) !important;
  min-height: var(--hg-app-hero-height);
  aspect-ratio: auto !important;
}

/* Route-tour metadata sits over photography. Give the compact pills a
   dependable dark substrate instead of relying on the image beneath them. */
body.hg-site-shell--app .ph-hero .ph-trust span {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

/* Keep the secondary route action readable over bright sand, sky, and surf.
   The old translucent-white fill could leave white text with almost no
   contrast on light hero photography. */
body.hg-site-shell--app .ph-hero .ph-btn-move {
  background: rgba(13, 43, 62, 0.92);
  border-color: rgba(255, 255, 255, 0.78);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

body.hg-site-shell--app .ph-hero .ph-btn-move:hover,
body.hg-site-shell--app .ph-hero .ph-btn-move:focus-visible {
  background: #0d2b3e;
  border-color: #fff;
  color: #fff;
}

body.hg-site-shell--app .hg-route-stat-label {
  color: #555d6b;
}

/* The alert-card accent stays on the icon and border; a common dark CTA
   color keeps every text link AA-readable on the white cards. */
body.hg-site-shell--app.travel-alerts-page .tph-card-cta {
  color: #173547 !important;
}

/* The itinerary generator writes its first-step heading and hint directly into
   #ig-step-content, not inside the historical .gm-step wrapper. Target the
   rendered structure so the helper copy stays body-sized and the island cards
   remain visible near the first mobile fold. */
body.hg-site-shell--app .ig-wizard #ig-step-content > h2 {
  margin: 0 0 6px;
  color: #1a1a2e;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

body.hg-site-shell--app .ig-wizard #ig-step-content > .ig-hint {
  margin: 0 0 20px;
  color: #535e69;
  font-size: 15px;
  line-height: 1.5;
}

/* These four summaries are the scan-first part of Travel Alerts on desktop.
   Give their titles body-sized type instead of compressing priority updates
   into caption text. */
@media (min-width: 981px) {
  body.hg-site-shell--app.travel-alerts-page .ta-status-item {
    min-height: 82px;
    padding: 15px 16px;
  }

  body.hg-site-shell--app.travel-alerts-page .ta-status-item strong {
    font-size: 16px;
    line-height: 1.3;
  }
}

@media (max-width: 640px) {
  body.hg-site-shell--app .ig-wizard #ig-step-content > h2 {
    font-size: 19px;
  }

  body.hg-site-shell--app .ig-wizard #ig-step-content > .ig-hint {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.45;
  }

  /* Preserve one unmistakable Chat action, then present Voice and Itinerary as
     equal compact alternatives. All three controls retain a 44px tap target. */
  body.hg-site-shell--app .hg-ai-hero-copy > .hg-ai-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.hg-site-shell--app .hg-ai-hero-copy > .hg-ai-actions .hg-ai-btn-primary {
    grid-column: 1 / -1;
  }

  body.hg-site-shell--app .hg-ai-hero-copy > .hg-ai-actions .hg-ai-btn-secondary,
  body.hg-site-shell--app .hg-ai-hero-copy > .hg-ai-actions .hg-ai-btn-light {
    min-width: 0;
    min-height: 44px;
    padding: 9px 8px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Shared transition for app-shell tool heroes. Keep the divider aligned to
   the one-pixel inner frame edge and overlap it with the bottom of the photo. */
body.hg-site-shell--app
  .hg-site-shell-content > #type-entry-page > .hg-site-shell-hero-wave,
body.hg-site-shell--app
  .hg-site-shell-content > #type-custom-page > .hg-site-shell-hero-wave,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .hg-site-shell-hero-wave {
  position: relative;
  z-index: 3;
  width: auto;
  margin:
    -32px
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    0;
  color: var(--hg-shell-hero-surface);
  line-height: 0;
  pointer-events: none;
}

.hg-site-shell-hero-wave svg {
  display: block;
  width: 100%;
  height: 32px;
}

.hg-site-shell-hero-wave path {
  fill: currentColor;
}

@media (max-width: 640px) {
  body.hg-site-shell--app .hg-site-shell-hero-edge {
    height: auto;
    min-height: 340px !important;
  }

  body.hg-site-shell--app .hg-site-shell-hero-wave {
    margin-top: -24px !important;
  }

  body.hg-site-shell--app .hg-site-shell-hero-copy {
    padding-bottom: 44px !important;
  }

  /* The injected + My OS chip occupies the upper-right hero corner. Reserve
     that first row on the alerts brief so its kicker never runs underneath
     the chip at 320px. */
  body.hg-site-shell--app.travel-alerts-page .ta-hero-inner {
    padding-top: 66px !important;
  }

  /* Route source notes sometimes contain a visible canonical URL. Let those
     unbroken strings wrap inside the card instead of widening the whole app
     shell on narrow phones. */
  body.hg-site-shell--app .hg-myna-segments,
  body.hg-site-shell--app .hg-myna-segment,
  body.hg-site-shell--app .hg-myna-segment-notes {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.hg-site-shell--app .hg-myna-segment-notes {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.hg-site-shell--app
    .hg-site-shell-content > #hawaii-top.hero-top
    > .single-slide-top > .bg-image-top,
  body.hg-site-shell--app
    .hg-site-shell-content > #hawaii-top.hero-top
    > .single-slide-top > .bg-image-top > .image-container-main {
    height: 340px !important;
    min-height: 340px;
  }

  .hg-site-shell-hero-wave svg {
    height: 24px;
  }
}

@media (max-width: 480px) {
  body.hg-site-shell--app #hawaii-top.hero-top .hg-hero-video-toggle {
    top: 84px;
  }
}

/* The shell's narrow-phone inset leaves less room than the legacy full-bleed
   page. Let route-corridor cards and booking suggestions shrink with it. */
@media (max-width: 360px) {
  body.hg-site-shell--app #hawaii-top.hero-top .hg-hero-video-toggle,
  body.hg-site-shell--app #hawaii-top.hero-top .hgos-hero-add {
    top: 64px;
  }

  body.hg-site-shell--app .hg-rc {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.hg-site-shell--app .hg-rc .hg-rc-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.hg-site-shell--app .hg-rc .hg-rc-link {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.hg-site-shell--app .hg-viator-end-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.hg-site-shell--app .hg-viator-end-card > div {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }

  body.hg-site-shell--app .hg-viator-end-card a {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
  }
}

/* Planning Hub, TripStart, Start Anywhere, Routes, and Go all use the same
   app-shell hero edge. Go has one extra page wrapper; establish a formatting
   context there so the hero's negative margin cannot pull the wrapper's square
   background into the rounded corners. */
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .go-hub,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .book-hub,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .pack-hub {
  display: flow-root;
}

body.hg-site-shell--app
  .hg-site-shell-content > :is(#type-entry-page, #type-custom-page, #type-feature-page) > .ph-hero,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .go-hub > .vh-hero,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .book-hub > .vh-hero,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .pack-hub > .vh-hero {
  width: auto;
  margin:
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad) - 10px)
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    0;
  border-radius:
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    0 0;
}

/* Book, Pack, and Go use their own hero component rather than the shared
   hero-edge class. Give those desktop stages the same responsive presence so
   the four trip phases remain visually balanced with Plan. */
@media (min-width: 768px) {
  body.hg-site-shell--app .vh-page > .vh-hero {
    min-height: var(--hg-app-hero-height);
  }
}

body.hg-site-shell--app
  .hg-site-shell-content > :is(#type-entry-page, #type-custom-page, #type-feature-page) > .ph-wave,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .go-hub > .vh-wave,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .book-hub > .vh-wave,
body.hg-site-shell--app
  .hg-site-shell-content > #type-feature-page > .pack-hub > .vh-wave {
  width: auto;
  margin-right: calc(var(--hg-shell-edge) - var(--hg-shell-content-pad));
  margin-left: calc(var(--hg-shell-edge) - var(--hg-shell-content-pad));
}

/* The shared planning divider predates the shell and hard-codes pure white.
   Match its filled curve to the warm app-glass surface so the wave flows into
   the content instead of ending in a visible white-to-cream rectangle. */
body.hg-site-shell--app
  .hg-site-shell-content > :is(#type-entry-page, #type-custom-page, #type-feature-page) > .ph-wave path {
  fill: #fffdf9;
}

/* The itinerary builder's custom hero sits one wrapper level deeper and its
   legacy `.main` container adds 1% top padding. Remove both that inherited
   inset and the hero's own 12px side gutter at the shell edge while retaining
   its rounded lower corners above the disclosures. */
body.hg-site-shell--app
  .hg-site-shell-content
  > #type-custom-page
  #hawaii-top.ig-landing-hero {
  width: auto;
  max-width: none;
  margin:
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad) - 10px - 1%)
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    22px !important;
  border-radius:
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    24px 24px;
}

body.hg-site-shell--reading-long .hg-site-shell-hero-inline {
  width: auto;
  margin:
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad) - 10px)
    calc(var(--hg-shell-edge) - var(--hg-shell-content-pad))
    0 !important;
}

body.hg-site-shell-page .hg-site-shell-inline-hero-wrap {
  margin-top: 0 !important;
}

body.hg-site-shell-page
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top,
body.hg-site-shell--reading-long
  .hg-site-shell-hero-inline
  > .single-slide-top > .bg-image-top {
  overflow: hidden;
  border-radius:
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    calc(var(--hg-shell-radius) - var(--hg-shell-edge))
    0 0 !important;
}

/* The wrapper above owns the only corner curve. Keep every media layer square
   so no second anti-aliased edge or exposed corner wedge can appear beneath it. */
body.hg-site-shell-page
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top > .image-container-main,
body.hg-site-shell-page
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top > .image-container-main > .hero-img,
body.hg-site-shell-page
  .hg-site-shell-content > #hawaii-top.hero-top
  > .single-slide-top > .bg-image-top > .image-container-main > .hero-video,
body.hg-site-shell--reading-long
  .hg-site-shell-hero-inline
  > .single-slide-top > .bg-image-top > .image-container-main,
body.hg-site-shell--reading-long
  .hg-site-shell-hero-inline
  > .single-slide-top > .bg-image-top > .image-container-main > video {
  border-radius: 0 !important;
}

/* The legacy wave asset is solid white because it normally lands on a white
   page. On the browse shell that creates a straight white bar beneath the
   curve before the blue-green glass resumes. Reuse the asset as a mask so the
   curve keeps its exact shape while its fill meets the browse surface. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  body.hg-site-shell--browse
    .hg-site-shell-content > #hawaii-top.hero-top
    > .single-slide-top > .wave {
    --hg-shell-wave-fill: #dae5e6;
  }

  body.hg-site-shell--app
    .hg-site-shell-content > #hawaii-top.hero-top
    > .single-slide-top > .wave {
    --hg-shell-wave-fill: #fffdf9;
  }

  body:is(.hg-site-shell--app, .hg-site-shell--browse)
    .hg-site-shell-content > #hawaii-top.hero-top
    > .single-slide-top > .wave {
    background: var(--hg-shell-wave-fill);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='57' viewBox='0 0 1920 57'%3E%3Cpath fill='white' d='M987.667 15.371C405.75 62.455 0 16.205 0 16.205V57h1920V16.205C1920 16.205 1421.042-19.694 987.667 15.371z'/%3E%3C/svg%3E") repeat-x 0 0 / auto 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='57' viewBox='0 0 1920 57'%3E%3Cpath fill='white' d='M987.667 15.371C405.75 62.455 0 16.205 0 16.205V57h1920V16.205C1920 16.205 1421.042-19.694 987.667 15.371z'/%3E%3C/svg%3E") repeat-x 0 0 / auto 100%;
  }
}

/* Pilot heroes still need deterministic title contrast when their source
   image/video places clouds or sun behind white type. These scrims sit above
   media but below the existing title layers. */
body.hg-site-shell--reading-long .hg-site-shell-content .image-container-main.has-overlay-title::after {
  height: 72%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.40) 66%, transparent 100%);
}

body.hg-site-shell--browse .hg-site-shell-content > .hero-top .image-container-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.30) 58%, transparent 82%);
}

/* The header utility bar already exposes the master-FAB tools, and the shell
   itself is the variable this pilot is measuring. Suppress overlapping global
   prompts so they cannot cover forms, article controls, or body copy. */
body.hg-site-shell-page .hg-mfab {
  display: none !important;
}

body.hg-site-shell-page .hg-whippoorwill-banner-sub {
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 48, 84, 0.58);
}

/* Raptive appends its required disclosure after <main>, outside the patterned
   footer. Paint only that disclosure and its reserved sticky-ad clearance so
   neither transparent area exposes the scenic wallpaper. */
body.hg-site-shell-page > .adthrive-comscore.adthrive-footer-message {
  --hg-raptive-tail-clearance: 100px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  background: #fff url("https://cdn.hawaiiguide.com/files/images/backgrounds/gous5.png") repeat !important;
  box-shadow: 0 -6px 0 #fff;
}

body.hg-site-shell-page.adthrive-device-phone > .adthrive-comscore.adthrive-footer-message {
  --hg-raptive-tail-clearance: 60px;
}

body.hg-site-shell-page > .adthrive-comscore.adthrive-footer-message::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: var(--hg-raptive-tail-clearance);
  background: #fff;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  body.hg-site-shell--reading-long .hg-site-shell-content .btn-hawaii,
  body.hg-site-shell--reading-long .hg-site-shell-content .hg-itinerary-btn {
    min-height: 44px;
    color: #fff !important;
  }

  body.hg-site-shell--reading-long .hg-site-shell-content .btn-hawaii {
    background: #006238 !important;
  }

  body.hg-site-shell--reading-long .hg-site-shell-content .hg-itinerary-btn {
    border-color: #0c6b44 !important;
    background: #fff !important;
    color: #0c6b44 !important;
  }

  body.hg-site-shell--reading-long .hg-site-shell-content .hg-itinerary-btn:hover,
  body.hg-site-shell--reading-long .hg-site-shell-content .hg-itinerary-btn:focus-visible,
  body.hg-site-shell--reading-long .hg-site-shell-content .hg-itinerary-btn.is-added {
    background: #0c6b44 !important;
    color: #fff !important;
  }

  body.hg-site-shell--reading-rail .hg-status-pills {
    gap: 10px 8px;
  }

  body.hg-site-shell--reading-rail .hg-status-pills button {
    min-height: 44px;
  }

  body.hg-site-shell--reading-rail .hg-status-pills .hg-dt-wrap {
    flex: 1 1 100%;
    margin: 0;
  }

  body.hg-site-shell--reading-rail .hg-status-pills .hg-dt-btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }

  body.hg-site-shell--reading-rail .hg-status-pills .hg-dt-text {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  body.hg-site-shell--reading-rail .hg-whippoorwill-action-row > .text-right.clearfix {
    row-gap: 16px;
  }

  body.hg-site-shell--reading-rail .hg-whippoorwill-action-row > .text-right.clearfix .btn-sm,
  body.hg-site-shell--reading-rail .hg-whippoorwill-action-row > .text-right.clearfix .hg-itinerary-btn {
    min-height: 44px;
  }

  body.hg-site-shell--reading-rail .hg-itinerary-btn {
    border-color: #0c6b44 !important;
    background: #fff !important;
    color: #0c6b44 !important;
  }

  body.hg-site-shell--reading-rail .hg-itinerary-btn:hover,
  body.hg-site-shell--reading-rail .hg-itinerary-btn:focus-visible,
  body.hg-site-shell--reading-rail .hg-itinerary-btn.is-added {
    background: #0c6b44 !important;
    color: #fff !important;
  }

  /* Keep Waimea's compact author metadata readable without turning it into a
     full-width panel. The original publication date is redundant beside the
     more useful updated date at this width. */
  body.hg-site-shell--reading-rail .hero-overlay-byline {
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.hg-site-shell--reading-rail .hero-overlay-byline > span {
    white-space: nowrap;
  }

  body.hg-site-shell--reading-rail .hero-overlay-byline > span:nth-of-type(2) {
    display: none;
  }

  body.hg-site-shell--reading-rail .hero-overlay-byline .hero-overlay-updated {
    opacity: 1 !important;
  }
}

body.hg-site-shell--reading-rail #sidebar-signup-btn {
  background: #147a4e !important;
}

body.hg-site-shell--reading-rail .sidebar-email-signup > p:last-child {
  color: #e2f4e7 !important;
}

.hg-site-shell-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  max-width: 820px;
  margin: 28px auto 20px;
  padding: 16px 18px;
  border: 1px solid rgba(20, 85, 79, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 24px rgba(4, 43, 43, 0.08);
}

.hg-site-shell-feedback-copy p,
.hg-site-shell-feedback-status {
  margin: 0;
}

.hg-site-shell-feedback-label {
  color: #35736e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hg-site-shell-feedback-question {
  margin-top: 3px !important;
  color: #173d3a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.hg-site-shell-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hg-site-shell-vote {
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(20, 85, 79, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #174c47;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.hg-site-shell-vote:hover,
.hg-site-shell-vote:focus-visible,
.hg-site-shell-vote[aria-pressed="true"] {
  border-color: #1d9771;
  background: #e4f5ee;
  color: #0c654f;
}

.hg-site-shell-vote:focus-visible {
  outline: 3px solid rgba(29, 151, 113, 0.34);
  outline-offset: 2px;
}

.hg-site-shell-vote:disabled {
  cursor: default;
  opacity: 0.68;
}

.hg-site-shell-vote[aria-pressed="true"]:disabled {
  opacity: 1;
}

.hg-site-shell-feedback-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  color: #35736e;
  font-size: 13px;
  line-height: 1.2;
}

@media screen and (min-width: 1024px) {
  body.hg-site-shell-page {
    --hg-shell-day-image: url("https://cdn.hawaiiguide.io/cdn-cgi/image/width=1600,quality=85,format=auto/all-hawaiiguide-os/hawaiiguide-travel-trip-os-day.jpg");
    --hg-shell-twilight-image: url("https://cdn.hawaiiguide.io/cdn-cgi/image/width=1600,quality=85,format=auto/all-hawaiiguide-os/hawaiiguide-travel-trip-os.jpg");
  }

  body.hg-site-shell--browse .hg-site-shell-glass {
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.hg-site-shell--browse .hg-site-shell-glass {
    background: linear-gradient(155deg, rgba(239, 249, 246, 0.97), rgba(226, 243, 240, 0.95));
  }
}

@media screen and (max-width: 767px) {
  .hg-site-shell-frame {
    --hg-shell-radius: 22px;
    --hg-shell-content-pad: 6px;
    width: calc(100% - 10px);
    margin: 8px auto 24px;
  }

  .hg-site-shell-feedback {
    grid-template-columns: 1fr;
    margin: 20px 6px 12px;
    padding: 15px;
  }

  .hg-site-shell-feedback-actions {
    width: 100%;
  }

  .hg-site-shell-vote {
    flex: 1 1 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-site-shell-wallpaper::before {
    transition: none;
  }

  body.hg-site-shell--app [data-hg-hero-video],
  body.hg-site-shell--app .hg-hero-video-toggle {
    display: none !important;
  }
}

@media print {
  body.hg-site-shell-page {
    background: #fff !important;
  }

  .hg-site-shell-wallpaper,
  .hg-site-shell-glass {
    display: none !important;
  }

  .hg-site-shell-frame {
    display: block;
    width: 100%;
    margin: 0;
  }

  .hg-site-shell-content {
    padding: 0;
  }
}