/**
 * GoCamp responsive design system — loaded after the legacy public styles.
 * Bootstrap 5 is the underlying component API. Keep a single set of size,
 * color, radius and interaction rules instead of page-specific button shapes.
 */
:root {
  --ui-radius: 0.75rem;
  --ui-radius-sm: 0.55rem;
  --ui-control-height: 2.875rem;
  --ui-nav-height: 5.375rem;
  --ui-content-max: 1200px;
  --ui-focus: 0 0 0 0.25rem rgba(0, 164, 192, 0.22);
}
html {
  scroll-padding-top: calc(var(--ui-nav-height) + 0.75rem);
}
body {
  min-width: 0;
  overflow-x: clip;
}
#main-content, .page-content, .page-content > *, .container, .container-fluid,
.row, [class*="col-"] { min-width: 0; }
.page-content img, .page-content video, .modal img, .card img { max-width: 100%; }
.page-content .container, .page-content .container-lg { max-width: var(--ui-content-max); }
:where(.page-content, .modal-body) :where(p, li, h1, h2, h3, h4, h5, h6, a) {
  overflow-wrap: break-word;
}
/* Large copy scales between phone and desktop rather than jumping at 768px. */
.page-content h1, .page-content .display-1, .page-content .display-3,
.page-content .display-4 { font-size: clamp(1.9rem, 3.2vw + 0.9rem, 3.75rem); line-height: 1.14; }
.page-content .display-5, .page-content .section-title,
.page-content h2 { font-size: clamp(1.5rem, 1.55vw + 0.95rem, 2.6rem); line-height: 1.25; }
.page-content .lead { font-size: clamp(1rem, 0.45vw + 0.9rem, 1.22rem); }
.page-content .section-padding { padding-block: clamp(2.5rem, 4.5vw, 5rem); }

/* One predictable button geometry for cards, forms, hero CTAs and modals.
   The palette still follows the existing GoCamp brand tokens. */
.btn,
.page-content a.hero-cta-btn,
.page-content .btn-cta,
.page-content .btn-submit-landing {
  --bs-btn-border-radius: var(--ui-radius);
  min-height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
  padding: 0.675rem 1.25rem;
  border-radius: var(--ui-radius) !important;
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.93rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  transform: none;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.btn::before, .btn::after { content: none !important; }
.btn.btn-sm, .btn-group-sm > .btn {
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.84rem;
  border-radius: var(--ui-radius-sm) !important;
}
.btn.btn-lg, .btn-group-lg > .btn {
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
}
.btn.rounded-pill, .btn.rounded-3, .btn.rounded {
  border-radius: var(--ui-radius) !important;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary:focus-visible {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-color: #fff;
}
.btn-primary, .page-content .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-primary:is(:hover,:focus-visible), .page-content .btn-primary:is(:hover,:focus-visible) {
  background: #00889f; border-color: #00889f; color: #fff;
}
.btn-warning, .page-content .btn-warning,
.page-content a.hero-cta-btn, .page-content .btn-cta,
.page-content .btn-submit-landing, .page-content .hero-section .btn-warning {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #222e34;
}
.btn-warning:is(:hover,:focus-visible), .page-content .btn-warning:is(:hover,:focus-visible),
.page-content a.hero-cta-btn:is(:hover,:focus-visible),
.page-content .btn-cta:is(:hover,:focus-visible),
.page-content .btn-submit-landing:is(:hover,:focus-visible),
.page-content .hero-section .btn-warning:is(:hover,:focus-visible) {
  background: #efae00;
  border-color: #efae00;
  color: #17242c;
}
.btn-secondary, .page-content .btn-secondary {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #17242c;
}
.btn-outline-primary { background: transparent; border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline-primary:is(:hover,:focus-visible) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-outline-secondary { border-color: #718096; color: #415167; }
.btn-outline-light { border-color: rgba(255,255,255,.75); color: #fff; }
.btn-outline-light:is(:hover,:focus-visible) { background: #fff; color: #243548; }
.btn-link {
  min-height: 2.5rem;
  padding-inline: 0.35rem;
  border-color: transparent;
  background: none;
  text-decoration: underline;
}
.btn:where(:not(:disabled)):active, .btn:hover, .page-content a.hero-cta-btn:hover,
.page-content .btn-cta:hover, .page-content .btn-submit-landing:hover {
  transform: none;
  box-shadow: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):hover, .page-content a.hero-cta-btn:hover,
  .page-content .btn-cta:hover, .page-content .btn-submit-landing:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 44, 55, 0.12);
  }
}
:where(.btn, .hero-cta-btn, .btn-cta, .btn-submit-landing, .nav-link, .form-control, .form-select):focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: var(--ui-focus);
}
.btn:disabled, .btn.disabled { opacity: 0.6; transform: none; cursor: not-allowed; }
.btn-close {
  padding: 0.5rem !important;
  min-height: auto;
  min-width: auto;
  border: 0;
  box-shadow: none;
}
.btn-group { flex-wrap: wrap; }
.btn-group > .btn { flex: 1 1 auto; }

/* Fixed header is also the tablet menu. The page-specific CSS's desktop
   breakpoint (992px) is too early with 6 links + 2 dropdowns + the CTA. */
.navbar.fixed-top {
  min-height: var(--ui-nav-height);
  height: auto !important;
  padding-block: 0.55rem;
}
.navbar .navbar-brand img { width: auto; height: 3.5rem; max-width: min(50vw, 220px); object-fit: contain; }
.navbar .nav-link { padding: 0.7rem 0.75rem; }
.navbar .dropdown-menu { max-height: min(65vh, 380px); overflow-y: auto; }
.navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--ui-radius-sm);
  min-width: 2.75rem;
  min-height: 2.75rem;
  box-shadow: none;
}
.navbar .navbar-toggler:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
@media (max-width: 1199.98px) {
  :root { --ui-nav-height: 4.5rem; --navbar-height: 4.5rem; }
  body { padding-top: var(--ui-nav-height); }
  .navbar .navbar-brand img { height: 2.75rem; }
  .navbar .navbar-collapse {
    width: 100%;
    max-height: calc(100dvh - var(--ui-nav-height) - 1rem);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 0.75rem !important;
    margin-top: 0.35rem !important;
    border-radius: var(--ui-radius) !important;
    background: var(--brand-primary) !important;
  }
  .navbar .navbar-collapse .navbar-nav { align-items: stretch !important; }
  .navbar .navbar-collapse .nav-link { padding: 0.75rem; }
  .navbar .navbar-collapse .dropdown-menu {
    position: static;
    width: 100%;
    max-height: 30vh;
    overflow-y: auto;
    margin-block: 0.35rem;
  }
  .navbar .navbar-collapse > .btn { margin: 0.75rem 0 0; width: 100%; }
  .navbar-nav .nav-link::after { display: none; }
  .destination-hero [style*="background-attachment: fixed"],
  .hero-section[style*="background-attachment: fixed"] { background-attachment: scroll !important; }
}
@media (min-width: 1200px) {
  :root { --ui-nav-height: 5.375rem; }
  body { padding-top: var(--ui-nav-height); }
}

/* Responsive visual components, including inline category CSS. */
.destination-hero, .destination-hero > .container {
  min-height: clamp(440px, 72svh, 760px) !important;
}
.destination-hero h1 { font-size: clamp(2.2rem, 4.4vw + 1rem, 5.2rem); }
.page-content .hero-section { min-height: clamp(420px, 64svh, 760px); }
.page-content .hero-section .hero-content {
  width: min(100%, 900px);
  padding: clamp(1rem, 3vw, 2rem);
}
.page-content .hero-section .hero-cta-btn { margin-block: 0.75rem 0; }
.page-content .intro-section, .page-content .section-content,
.page-content .gallery-section { padding-block: clamp(2.25rem, 5vw, 5rem); }
.page-content .intro-card, .page-content .content-card {
  padding: clamp(1.15rem, 2.8vw, 3rem);
  border-radius: var(--ui-radius);
}
.page-content .content-card h2 { font-size: clamp(1.45rem, 1.4vw + 1rem, 2.4rem); }
.page-content .content-image, .page-content .intro-image {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--ui-radius);
}
.program-card-modern { width: 100%; min-width: 0; }
.program-card-modern .card { width: 100%; border-radius: var(--ui-radius) !important; }
.program-card-modern .program-card-media { flex-shrink: 0; }
.program-card-modern .card-body { padding: clamp(1rem, 2vw, 1.5rem) !important; }
.program-card-modern .card-title { font-size: clamp(1.12rem, 0.55vw + 1rem, 1.4rem) !important; }
.program-card-modern .program-card-image { object-fit: cover; }
.program-card-home { min-height: 215px; }
.card:not(.program-card-home) { max-width: 100%; }
.modal-dialog { margin-inline: auto; max-width: min(calc(100vw - 2rem), var(--bs-modal-width, 800px)); }
.modal-dialog.modal-xl { max-width: min(calc(100vw - 2rem), 1100px); }
.modal-body { overflow-wrap: anywhere; }
.form-control, .form-select, .input-group, textarea, select, input[type="text"], input[type="email"] {
  max-width: 100%;
}
textarea { resize: vertical; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#mobileCtaBar { align-items: center; }
#mobileCtaBar .btn { flex: 1 1 0; min-width: 0; }

/* Tablets, both portrait (768/820) and landscape (1024/1180). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .page-content .section-padding { padding-block: 3.25rem; }
  .page-content .program-card-home { min-height: 260px; }
  .program-card-modern .card-body { padding: 1rem !important; }
  .page-content .content-card h2 { margin-bottom: 1.25rem; }
  .modal-dialog.modal-xl { max-width: calc(100vw - 3rem); }
  .page-content .hero-section { min-height: 60svh !important; }
}
/* Phone screens 320–767px */
@media (max-width: 767.98px) {
  :root { --ui-nav-height: 4.25rem; }
  .navbar .navbar-brand img { height: 2.45rem; }
  body { padding-top: var(--ui-nav-height); }
  .page-content .section-padding { padding-block: 2.25rem; }
  .page-content .container, .page-content .container-fluid { padding-inline: 1rem; }
  .page-content .hero-section { min-height: 62svh !important; }
  .page-content .hero-section .container { min-height: 0 !important; }
  .destination-hero, .destination-hero > .container { min-height: 65svh !important; }
  .destination-hero .row > [class*="col-"] { width: 100%; }
  .destination-hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .destination-hero .btn, .hero-content .btn { max-width: 100%; }
  .page-content .hero-section .hero-cta-btn { width: min(100%, 330px); }
  #home-hero-slider .carousel-item .hero-section { min-height: 60svh; }
  .page-content .hero-section h1, .page-content .hero-section h2 {
    font-size: clamp(1.9rem, 8vw, 2.7rem) !important;
  }
  .page-content .intro-card, .page-content .content-card { padding: 1.25rem; }
  .page-content .content-card h2 { margin-bottom: 1rem; }
  .page-content .program-card-home { min-height: 220px; }
  .program-card-modern .card > .position-relative[style*="height: 280px"] { height: 225px !important; }
  .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl {
    max-width: calc(100vw - 1rem); margin: 0.5rem auto;
  }
  .modal-dialog-scrollable { height: calc(100dvh - 1rem); }
  .modal-content .modal-header[style*="height: 300px"] { height: 190px !important; }
  .modal-body { padding: 1rem !important; }
  .btn.btn-lg { min-height: 3rem; padding: 0.75rem 1rem; font-size: 0.95rem; }
  #mobileCtaBar { padding-inline: 0.75rem; }
  #mobileCtaBar .btn { min-height: 2.65rem; padding-inline: 0.5rem; font-size: 0.82rem; }
  .carousel-control-prev, .carousel-control-next { min-width: 2.5rem; }
}
@media (max-width: 380px) {
  .page-content .container { padding-inline: 0.75rem; }
  .page-content h1 { font-size: 1.9rem; }
  .page-content .section-padding { padding-block: 1.75rem; }
  .navbar .navbar-brand img { height: 2.2rem; }
  #mobileCtaBar .btn { font-size: 0.75rem; }
}
@media (hover: none) {
  .card:hover, .card:hover .card-img-top,
  .page-content .content-card:hover, .page-content .intro-image:hover {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn, .page-content .btn-cta, .page-content a.hero-cta-btn,
  .page-content .btn-submit-landing { transition: none; transform: none !important; }
}

/* Landing page: its own inline stylesheet previously forced different-sized CTAs
   and a two-column form onto small phones. Specificity beats that legacy CSS. */
.page-content .hero-landing {
  padding-top: clamp(6rem, 10vh, 9rem);
  min-height: min(100svh, 1000px);
}
.page-content .hero-headline {
  font-size: clamp(2rem, 3.1vw + 1rem, 3.5rem);
  line-height: 1.16;
}
.page-content .hero-subheadline {
  font-size: clamp(1.02rem, .65vw + 0.9rem, 1.3rem);
}
.page-content .lead-form-card {
  padding: clamp(1.25rem, 2.7vw, 2.5rem);
  border-radius: var(--ui-radius);
  max-width: 100%;
}
.page-content .interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-content .interest-label {
  height: 100%;
  overflow-wrap: anywhere;
  border-radius: var(--ui-radius);
}
.page-content .form-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.page-content .form-trust .trust-item { margin: 0; }
.page-content .hero-stats { padding: clamp(.75rem, 2vw, 1.5rem); }
.page-content .hero-stats .stat-number { font-size: clamp(1.25rem, 2vw + 0.5rem, 2.5rem); }
.page-content .hero-stats .stat-label {
  font-size: clamp(0.65rem, 0.5vw + 0.5rem, 0.9rem);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.page-content .benefit-card { padding: clamp(1.25rem, 3vw, 2.2rem); border-radius: var(--ui-radius); }
.page-content .why-section, .page-content .testimonial-section { padding-block: clamp(2.5rem, 5vw, 5rem); }
@media (max-width: 991.98px) {
  .page-content .hero-landing { min-height: auto; }
  .page-content .lead-form-card { position: static; margin-top: 1rem; }
}
@media (max-width: 575.98px) {
  .page-content .hero-landing { padding-top: calc(var(--ui-nav-height) + 1.25rem); }
  .page-content .hero-headline { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
  .page-content .hero-usp-list li { align-items: flex-start; font-size: .95rem; }
  .page-content .hero-stats .row { --bs-gutter-x: .35rem; }
  .page-content .hero-stats .stat-item { padding-inline: .25rem; }
  .page-content .lead-form-card { padding: 1rem; }
  .page-content .form-header { margin-bottom: 1.25rem; }
  .page-content .interest-grid { gap: .5rem; }
  .page-content .interest-label { padding: .75rem .4rem; font-size: .85rem; }
  .page-content .btn-submit-landing { width: 100%; }
}
@media (max-width: 360px) {
  .page-content .interest-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Wide Bootstrap gutters exceed the 12–16px container padding below 1200px
   (especially g-5/gx-lg-5); keep rows fully inside their containers. */
@media (max-width: 1199.98px) {
  #main-content .row.g-5,
  #main-content .row.gx-lg-5 {
    --bs-gutter-x: 1.5rem;
  }
}
/* Facebook SDK writes fixed iframe widths; let the embed fit its column. */
.page-content .fb-page,
.page-content .fb-page > span,
.page-content .fb_iframe_widget,
.page-content .fb_iframe_widget span,
.page-content .fb_iframe_widget iframe {
  max-width: 100% !important;
}
.page-content .fb-page,
.page-content .fb_iframe_widget { min-width: 0; display: block; }
@media (max-width: 767.98px) {
  #main-content .row.g-5, #main-content .row.gx-lg-5 {
    --bs-gutter-x: 1.25rem;
  }
}

/* All memories remain in a keyboard- and touch-scrollable photo slider. */
.camp-memories [hidden] { display: none !important; }
.camp-memories-slider { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .5rem; align-items: center; }
.camp-memories-slider .camp-memories-track { grid-column: 2; grid-row: 1; }
.camp-memories-slider .camp-memories-arrow { grid-row: 1; padding: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; }
.camp-memories-arrow[data-memories-direction="-1"] { grid-column: 1; }
.camp-memories-arrow[data-memories-direction="1"] { grid-column: 3; }
.camp-memories-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  padding: .25rem .25rem 1rem;
}
.camp-memory { flex: 0 0 calc((100% - 1.25rem) / 2); min-width: 0; overflow: hidden; border-radius: 1rem; scroll-snap-align: start; }
.camp-memory a { display: block; background: #f2f4f5; }
.camp-memory a:focus-visible { outline: 3px solid var(--brand-primary, #005c72); outline-offset: -3px; }
.camp-memory img { display: block; width: 100%; height: 320px; object-fit: contain; }
.camp-memory figcaption { font-size: .95rem; font-weight: 600; }
@media (max-width: 575.98px) {
  .camp-memory { flex-basis: 100%; }
  .camp-memory img { height: 280px; }
}
.camp-country-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.camp-country-group h2 { scroll-margin-top: 120px; }
.camp-gallery-photo { overflow: hidden; border-radius: 1rem; }
.camp-gallery-photo a { display: block; background: #f2f4f5; }
.camp-gallery-photo img { display: block; width: 100%; height: 260px; object-fit: contain; }
.camp-gallery-photo figcaption { font-weight: 600; }
@media (max-width: 991.98px) { .camp-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .camp-country-grid { grid-template-columns: minmax(0, 1fr); } }

/* Home image-carousel captions: centered low on the photo with compact,
   responsive typography. Overrides legacy hero/layout declarations. */
#home-hero-slider .carousel-item .hero-section {
  min-height: clamp(420px, 65svh, 680px) !important;
  align-items: stretch;
}
#home-hero-slider .carousel-item .home-hero-caption {
  min-height: clamp(420px, 65svh, 680px) !important;
  justify-content: flex-end !important;
  padding-bottom: clamp(1.75rem, 5svh, 3.75rem);
  padding-inline: 1.25rem;
}
#home-hero-slider .home-hero-caption h1,
#home-hero-slider .home-hero-caption h2 {
  font-size: clamp(1.55rem, 3vw, 2.65rem) !important;
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 760px;
  margin-bottom: 0.6rem !important;
}
#home-hero-slider .home-hero-caption .lead {
  font-size: clamp(0.9rem, 1.15vw, 1.08rem) !important;
  line-height: 1.5;
  max-width: 650px;
}
@media (max-width: 767.98px) {
  #home-hero-slider .carousel-item .hero-section,
  #home-hero-slider .carousel-item .home-hero-caption {
    min-height: 60svh !important;
  }
  #home-hero-slider .carousel-item .home-hero-caption {
    padding-bottom: clamp(4rem, 9svh, 5.25rem);
  }
  #home-hero-slider .home-hero-caption h1,
  #home-hero-slider .home-hero-caption h2 {
    font-size: clamp(1.4rem, 5.1vw, 1.9rem) !important;
  }
}

/* Destination and program-category banners: readable, modest side-aligned titles,
   with photographs free from extra copy or action buttons. */
.destination-hero .destination-hero-caption {
  min-height: clamp(440px, 72svh, 760px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.destination-hero .destination-hero-caption h1,
.page-content .hero-section .category-hero-caption h1 {
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 3.25rem) !important;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  max-width: 18ch;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.page-content .hero-section:has(.category-hero-caption) {
  justify-content: flex-start;
}
.page-content .hero-section .category-hero-caption {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: inherit;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .destination-hero .destination-hero-caption { min-height: 65svh; }
  .destination-hero .destination-hero-caption h1,
  .page-content .hero-section .category-hero-caption h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
  }
}