/* VisitBHV v5 — final responsive and page-template repair layer */

:root {
  --v5-header-height: 76px;
  --v5-page-gutter: clamp(14px, 3vw, 28px);
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
}

#main {
  flex: 1 0 auto;
}

.vbhv-official-footer,
.footer {
  flex: 0 0 auto;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

/* Stable header colours on inner pages. */
body:not(.home) .site-header {
  background: rgba(13, 27, 42, .98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

body:not(.home) .site-header .nav-menu a,
.site-header.scrolled .nav-menu a,
.site-header.open .nav-menu a,
.site-header .nav-menu.open a {
  color: rgba(255, 255, 255, .92) !important;
}

body:not(.home) .site-header .nav-menu a:hover,
body:not(.home) .site-header .nav-menu a:focus-visible,
.site-header.open .nav-menu a:hover,
.site-header.open .nav-menu a:focus-visible {
  color: #55c9c1 !important;
}

body.home .site-header:not(.scrolled):not(.open) .logo span,
body.home .site-header:not(.scrolled):not(.open) .nav-menu a {
  color: #0d1b2a !important;
}

body.home .site-header:not(.scrolled):not(.open) .menu-btn span {
  background: #0d1b2a !important;
}

.site-header.scrolled .logo span,
.site-header.open .logo span,
body:not(.home) .site-header .logo span {
  color: #fff !important;
}

.site-header.scrolled .menu-btn span,
.site-header.open .menu-btn span,
body:not(.home) .site-header .menu-btn span {
  background: #fff !important;
}

/* Generic inner pages: remove the double-screen blank gap. */
.inner-hero.section {
  min-height: 0 !important;
  padding: calc(var(--v5-header-height) + 2.25rem) 0 2rem !important;
}

.inner-hero .section-head {
  margin-bottom: 0 !important;
}

.inner-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.75rem) !important;
}

.inner-content.section {
  min-height: 0 !important;
  padding: 2rem 0 clamp(4rem, 7vw, 6rem) !important;
}

.inner-content .content-wrap,
.content-wrap {
  width: min(calc(100% - (2 * var(--v5-page-gutter))), 1180px) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.inner-content .content-wrap.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* The planner supplies its own visual hierarchy. Keep the page shell compact. */
.visitbhv-trip-hero.inner-hero.section {
  padding-bottom: 1.25rem !important;
}

.visitbhv-trip-section.section {
  min-height: 0 !important;
  padding: 1.25rem 0 clamp(3.5rem, 6vw, 5rem) !important;
}

.visitbhv-trip-section > .container {
  width: min(calc(100% - (2 * var(--v5-page-gutter))), 1180px) !important;
}

/* Student Life owns its hero; the theme must not add another one. */
.visitbhv-student-template {
  width: 100%;
  min-height: 0;
  padding-top: var(--v5-header-height);
}

.visitbhv-student-template .vbhv-student-page {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.visitbhv-student-template .vbhv-student-hero,
.visitbhv-student-template .vbhv-student-note,
.visitbhv-student-template .vbhv-student-nav,
.visitbhv-student-template .vbhv-student-start,
.visitbhv-student-template .vbhv-student-sections,
.visitbhv-student-template .vbhv-student-faq,
.visitbhv-student-template .vbhv-student-source-index {
  width: min(calc(100% - (2 * var(--v5-page-gutter))), 1180px) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.visitbhv-student-template .vbhv-student-hero {
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem) !important;
}

.visitbhv-student-template .vbhv-student-hero h1 {
  max-width: 960px !important;
  font-size: clamp(3.2rem, 7vw, 6.8rem) !important;
}

/* Put each description beside its number instead of inside the number column. */
.vbhv-student-start li::before {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.vbhv-student-start li > strong,
.vbhv-student-start li > span {
  grid-column: 2 !important;
  min-width: 0 !important;
}

.vbhv-student-start li > strong { grid-row: 1 !important; }
.vbhv-student-start li > span {
  grid-row: 2 !important;
  margin-top: 0 !important;
  line-height: 1.5 !important;
}

.vbhv-student-nav a,
.vbhv-student-source-chip a,
.vbhv-student-source-index a {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Homepage hero: readable scale without a full screen of headline. */
@media (max-width: 860px) {
  :root { --v5-header-height: 72px; }

  .nav-wrap {
    min-height: var(--v5-header-height) !important;
  }

  .nav-menu {
    inset: var(--v5-header-height) 0 auto !important;
    max-height: calc(100dvh - var(--v5-header-height));
    overflow-y: auto;
  }

  .nav-menu a,
  body.home .site-header.open .nav-menu a,
  body.home .site-header .nav-menu.open a {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .hero,
  .visitbhv-managed-hero {
    min-height: 680px !important;
    height: auto !important;
    align-items: start !important;
    padding: 0 !important;
  }

  .hero-content,
  .visitbhv-managed-hero__content {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(8.25rem, 18vh, 10rem) var(--v5-page-gutter) 4rem !important;
  }

  .hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    padding: 0 !important;
  }

  .hero h1,
  .visitbhv-managed-hero h1 {
    max-width: 100% !important;
    font-size: clamp(3.1rem, 11vw, 5rem) !important;
    line-height: .94 !important;
    letter-spacing: -.055em !important;
  }

  .hero-lead,
  .visitbhv-managed-hero .hero-lead {
    max-width: 560px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .hero-quickbar,
  .hero-routebar {
    position: static !important;
    width: calc(100% - (2 * var(--v5-page-gutter))) !important;
    margin: 0 auto 1rem !important;
    transform: none !important;
    border-radius: 18px !important;
  }

  .visitbhv-student-template .vbhv-student-start {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .visitbhv-student-template .vbhv-student-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .visitbhv-managed-grid,
  .visitbhv-managed-attractions,
  .visitbhv-guides-grid,
  .visitbhv-related-grid,
  .cards-grid,
  .path-grid,
  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  :root { --v5-page-gutter: 14px; }

  .inner-hero.section {
    padding-top: calc(var(--v5-header-height) + 1.4rem) !important;
    padding-bottom: 1rem !important;
  }

  .inner-content.section {
    padding-top: 1rem !important;
  }

  .hero,
  .visitbhv-managed-hero {
    min-height: 620px !important;
  }

  .hero-content,
  .visitbhv-managed-hero__content {
    padding-top: 7.25rem !important;
    padding-bottom: 3rem !important;
  }

  .hero h1,
  .visitbhv-managed-hero h1 {
    font-size: clamp(2.85rem, 12vw, 3.75rem) !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem !important;
    margin-top: 1.25rem !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
  }

  .section {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .visitbhv-student-template .vbhv-student-hero {
    padding: 1.5rem 0 2rem !important;
  }

  .visitbhv-student-template .vbhv-student-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.5rem) !important;
  }

  .visitbhv-student-template .vbhv-student-note,
  .visitbhv-student-template .vbhv-student-card,
  .visitbhv-student-template .vbhv-student-columns,
  .visitbhv-student-template .vbhv-student-faq__grid,
  .visitbhv-student-template .vbhv-student-source-index__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .visitbhv-student-template .vbhv-student-card {
    gap: .8rem !important;
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  .visitbhv-student-template .vbhv-student-card__number {
    width: 48px !important;
    height: 48px !important;
  }

  .visitbhv-student-template .vbhv-student-card h2 {
    font-size: clamp(2rem, 9.5vw, 2.7rem) !important;
  }

  .vbhv-student-nav {
    top: calc(var(--v5-header-height) + 6px) !important;
    padding: .5rem !important;
    border-radius: 16px !important;
  }

  .vbhv-student-nav a {
    min-height: 40px !important;
    padding: 0 .8rem !important;
    font-size: .88rem !important;
  }

  .vbhv-student-start {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  .vbhv-student-start h2 {
    font-size: clamp(2.4rem, 12vw, 3.25rem) !important;
  }

  .vbhv-student-start li {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: .7rem !important;
    padding: .85rem !important;
  }

  .vbhv-student-source-chip,
  .vbhv-student-source-chip a {
    max-width: 100% !important;
  }

  .vbhv-student-source-chip a {
    height: auto !important;
    min-height: 38px !important;
    padding: .45rem .7rem !important;
    white-space: normal !important;
  }

  .visitbhv-managed-grid,
  .visitbhv-managed-attractions,
  .visitbhv-guides-grid,
  .visitbhv-related-grid,
  .cards-grid,
  .path-grid,
  .guide-grid,
  .student-grid-cards,
  .info-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .filter-tabs,
  .visitbhv-attraction-filters,
  .visitbhv-guide-filters,
  .vbhv-student-nav {
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .filter-tabs::-webkit-scrollbar,
  .visitbhv-attraction-filters::-webkit-scrollbar,
  .visitbhv-guide-filters::-webkit-scrollbar,
  .vbhv-student-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}