/* Alps Family Campground palette, from the Squarespace theme.
   Cream #eae6e1, brown #583b1f, olive #7e7b46.
   Loaded after booking.css. Shadow components read the --lb-* variables. */

:root,
#lunaria-booking {
  --lb-accent: #583b1f;
  --lb-accent-2: #7e7b46;
  --lb-accent-hover: #3e2915;
  --lb-accent-fg: #eae6e1;
  --lb-success: #7e7b46;
  --lb-success-fg: #583b1f;
  --lb-success-bg: #f4f1e6;
  --lb-success-line: #d9d3b8;
  --lb-success-soft: #efece0;
  --lb-available: #7e7b46;
  --lb-available-fill: rgba(126, 123, 70, 0.9);
  --lb-available-stroke: #583b1f;
  --lb-available-soft: #efece0;
  --lb-available-soft-hover: #e4dfc8;
  --lb-range: #cfc89a;
  --lb-range-soft: rgba(126, 123, 70, 0.22);
  --lb-today-bg: rgba(88, 59, 31, 0.12);
  --lb-selection-bg: #efece0;
  --lb-surface: #fffdfb;
  --lb-surface-2: #f4f1e6;
  --lb-text: #583b1f;
  --lb-muted: #6b5344;
  --lb-line: #e0d8ce;
  --lb-line-strong: #c4b6a4;
  --lb-weekend-bg: rgba(88, 59, 31, 0.06);
  --lb-heading-font: "Sorts Mill Goudy", Georgia, serif;
  --primary-color: #583b1f;
  --primary-color-dark: #3e2915;
  --wizard-accent: #583b1f;
  --wizard-accent-hover: #3e2915;
  --wizard-summary-bg: #f4f1e6;
  --wizard-summary-label: #583b1f;
  --wizard-summary-border: #d9d3b8;
  --vt-active-bg: #583b1f;
  --vt-active-fg: #eae6e1;
  --vt-focus-ring: #583b1f;
}

#lunaria-booking {
  background: #eae6e1;
  color: #583b1f;
}

#lunaria-booking h1,
#lunaria-booking h2,
#lunaria-booking h3,
#lunaria-booking .results-title,
#lunaria-booking .step-label {
  color: #583b1f;
  font-family: "Sorts Mill Goudy", Georgia, serif;
}

#lunaria-booking .progress-container,
#lunaria-booking .search-section,
#lunaria-booking .map-card,
#lunaria-booking .info-card,
#lunaria-booking .results-header,
#lunaria-booking .unit-card,
#lunaria-booking .map-view-container,
#lunaria-booking .grid-view-container {
  background: #fffdfb;
  border: 1px solid #e0d8ce;
}

#lunaria-booking .progress-container {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

#lunaria-booking .step-number {
  border-color: #cfc4b6;
  color: #8a7360;
  background: transparent;
}

#lunaria-booking .progress-step.active .step-number,
#lunaria-booking .progress-step.completed .step-number {
  background: #583b1f;
  border-color: #583b1f;
  color: #eae6e1;
}

#lunaria-booking .progress-step.active .step-label {
  color: #583b1f;
}

#lunaria-booking .progress-step.completed .step-label,
#lunaria-booking .step-label {
  color: #6b5344;
}

#lunaria-booking .progress-step.active .step-label {
  color: #583b1f;
}

#lunaria-booking .progress-connector {
  background: #d4cdc3;
}

#lunaria-booking .progress-connector.completed {
  background: #583b1f;
}

#lunaria-booking .filter-label,
#lunaria-booking .results-title,
#lunaria-booking .map-card h3,
#lunaria-booking .info-card h3,
#lunaria-booking .unit-name {
  color: #583b1f;
}

#lunaria-booking .filter-select,
#lunaria-booking .filter-input,
#lunaria-booking guest-search-bar .filter-select,
#lunaria-booking guest-search-bar .filter-input {
  background: #fffdfb;
  color: #583b1f;
  border-color: #d4cdc3;
}

#lunaria-booking .filter-select:focus,
#lunaria-booking .filter-input:focus,
#lunaria-booking guest-search-bar .filter-select:focus,
#lunaria-booking guest-search-bar .filter-input:focus {
  border-color: #583b1f;
  box-shadow: 0 0 0 3px rgba(88, 59, 31, 0.15);
}

#lunaria-booking .search-btn,
#lunaria-booking guest-search-bar .search-btn {
  background: #583b1f;
  color: #eae6e1;
}

#lunaria-booking .search-btn:hover,
#lunaria-booking guest-search-bar .search-btn:hover {
  background: #3e2915;
}

#lunaria-booking .filter-hint,
#lunaria-booking .map-view-hint,
#lunaria-booking .price-label,
#lunaria-booking .unit-type {
  color: #6b5344;
}

#lunaria-booking .info-list,
#lunaria-booking .info-list li {
  color: #583b1f;
}

#lunaria-booking .info-list li::before {
  color: #7e7b46;
}

#lunaria-booking .results-subtitle {
  background: #efece0;
  color: #583b1f;
}

#lunaria-booking .view-toggle {
  border-color: #d4cdc3;
}

#lunaria-booking .view-toggle button {
  background: #fffdfb;
  color: #583b1f;
}

#lunaria-booking .view-toggle button:not(:last-child) {
  border-right-color: #d4cdc3;
}

#lunaria-booking .view-toggle button:hover:not(.active) {
  background: #f4f1e6;
}

#lunaria-booking .view-toggle button.active {
  background: #583b1f;
  color: #eae6e1;
}

#lunaria-booking .unit-card:hover {
  border-color: #c4b6a4;
  box-shadow: 0 4px 14px rgba(88, 59, 31, 0.12);
}

#lunaria-booking .badge-available,
#lunaria-booking guest-units-list .badge-available {
  background: #efece0;
  color: #583b1f;
}

#lunaria-booking .price-amount,
#lunaria-booking guest-units-list .price-amount {
  color: #583b1f;
}

#lunaria-booking .amenity-tag,
#lunaria-booking guest-units-list .amenity-tag {
  background: #f4f1e6;
  color: #583b1f;
  border: 1px solid #e0d8ce;
}

#lunaria-booking .btn-view,
#lunaria-booking guest-units-list .btn-view {
  background: #efece0;
  color: #583b1f;
}

#lunaria-booking .btn-view:hover,
#lunaria-booking guest-units-list .btn-view:hover {
  background: #e4dfc8;
}

#lunaria-booking .btn-select,
#lunaria-booking guest-units-list .btn-select {
  background: #583b1f;
  color: #eae6e1;
}

#lunaria-booking .btn-select:hover,
#lunaria-booking guest-units-list .btn-select:hover {
  background: #3e2915;
}

#lunaria-booking date-range-picker {
  --drp-field-bg: #fffdfb;
  --drp-field-border: #d4cdc3;
  --drp-field-border-hover: #583b1f;
  --drp-primary: #583b1f;
  --drp-primary-text: #eae6e1;
  --drp-range-bg: #efece0;
  --drp-range-preview-bg: #f7f4ee;
  --drp-selecting-bg: #e7e2d6;
  --drp-text-color: #583b1f;
  --drp-text-muted: #6b5344;
  --drp-text-placeholder: #8a7360;
  --drp-dropdown-bg: #fffdfb;
  --drp-dropdown-border: #d4cdc3;
  --drp-button-bg-hover: #f4f1e6;
  --drp-button-border: #d4cdc3;
  --drp-separator-color: #e0d8ce;
}

#lunaria-booking date-range-picker:focus-within {
  --drp-field-border: #583b1f;
}

/* The campground header is fixed, and #lunaria-booking is padded 120px
   to clear it. The unit dialog overlay is position:fixed inside its
   shadow root, so this variable is how the page sets its top. */
unit-detail-dialog#unit-dialog {
  /* --lb-overlay-top: 120px; */
}

/* Squarespace image cards start at opacity 0 and wait for imageLayout
   visitor.js to add animation-loaded. This static copy does not run that
   script, so the photo and caption stay invisible. */
.sqs-block-image .image-inset,
.sqs-block-image .image-block-wrapper,
.sqs-block-image .image-caption-wrapper,
.sqs-block-image .sqs-dynamic-text-container,
[data-animation-role="image"] {
  opacity: 1 !important;
  transform: none !important;
}

#lunaria-booking searchable-select {
  --ss-field-bg: #fffdfb;
  --ss-field-border: #d4cdc3;
  --ss-field-border-focus: #583b1f;
  --ss-text-color: #583b1f;
  --ss-text-muted: #6b5344;
  --ss-text-placeholder: #8a7360;
  --ss-primary: #583b1f;
  --ss-dropdown-bg: #fffdfb;
  --ss-dropdown-border: #d4cdc3;
  --ss-option-hover-bg: #f4f1e6;
  --ss-option-selected-bg: #583b1f;
  --ss-option-selected-text: #eae6e1;
  --ss-group-bg: #f4f1e6;
  --ss-group-text: #6b5344;
}

/* Squarespace puts 3vw of padding under the header bar. The bar has no
   announcement, so that gap is empty space. The header stays fixed and
   the bar sticks with it, including on a phone. */
header.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

.header .header-announcement-bar-wrapper {
  position: sticky;
  z-index: 2;
  width: 100%;
  padding: 2vw;
}

/* Squarespace writes display:block on the logo image. That attribute
   wins over a normal rule, so this has to be important. */
.header-title-logo img {
  display: inline !important;
}

/* site.css caps the phone logo at 30px, on both the link and the image. */
@media screen and (max-width: 767px) {
  .header-title-logo a,
  .header-title-logo img {
    max-height: 100vh !important;
  }
}

/* Mobile menu. The Squarespace burger is visible under 800px, and this
   panel is what it opens. */
.alps-drawer {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  flex-direction: column;
  background: #eae6e1;
  color: #583b1f;
  transform: translateY(-100%);
  visibility: hidden;
  overflow: auto;
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 480ms;
}

.alps-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

body.alps-drawer-open {
  overflow: hidden;
}

.alps-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #583b1f;
  cursor: pointer;
  transform: rotate(-90deg) scale(0.8);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
    opacity 280ms ease 80ms;
}

.alps-drawer.is-open .alps-drawer-close {
  transform: none;
  opacity: 1;
}

.alps-drawer-close span,
.alps-drawer-close span::before {
  position: absolute;
  left: 12px;
  top: 21px;
  width: 20px;
  height: 2px;
  background: #eae6e1;
  content: "";
}

.alps-drawer-close span {
  transform: rotate(45deg);
}

.alps-drawer-close span::before {
  left: 0;
  top: 0;
  transform: rotate(90deg);
}

.alps-drawer-brand {
  display: flex;
  justify-content: center;
  padding: 64px 64px 18px;
}

.alps-drawer-brand img {
  width: min(280px, 78vw);
  height: auto;
}

.alps-drawer-rule {
  height: 1px;
  margin: 0 28px 6px;
  background: #7e7b46;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 140ms;
}

.alps-drawer.is-open .alps-drawer-rule {
  transform: scaleX(1);
}

.alps-drawer-links {
  list-style: none;
  margin: 0;
  padding: 8px 0 40px;
}

.alps-drawer-links a {
  display: block;
  padding: 18px 28px;
  color: #583b1f;
  text-decoration: none;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.2;
  border-bottom: 1px solid rgba(88, 59, 31, 0.14);
  opacity: 0;
  transform: translateY(-14px);
  transition:
    background 160ms ease,
    color 160ms ease,
    opacity 400ms ease,
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alps-drawer.is-open .alps-drawer-links a {
  opacity: 1;
  transform: none;
}

.alps-drawer.is-open .alps-drawer-links li:nth-child(1) a { transition-delay: 90ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(2) a { transition-delay: 130ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(3) a { transition-delay: 170ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(4) a { transition-delay: 210ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(5) a { transition-delay: 250ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(6) a { transition-delay: 290ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(7) a { transition-delay: 330ms; }
.alps-drawer.is-open .alps-drawer-links li:nth-child(8) a { transition-delay: 370ms; }

.alps-drawer-links a:hover,
.alps-drawer-links a:focus-visible {
  background: rgba(88, 59, 31, 0.08);
}

.alps-drawer-links a[aria-current="page"] {
  background: #583b1f;
  color: #eae6e1;
}