:root {
	--brand: #cfb680;
	--brandlite: #f0e9d8;
	--accent: #2a2a2a;
	/* neutral dark */
	--ink: #222;
	--muted: #6c757d;
	--sand: #f6f5f3;
	/* page background */
	--card: #ffffff;
	--line: #e6e4e1;
	--link: #cfb680;
	/* bootstrap primary as subtle accent */
	--shadow: 0 10px 30px rgba(0, 0, 0, .07);
	--radius: 1rem;
}

html,
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: var(--ink);
	background: var(--sand);
}

.alert {
	margin-bottom: 0;
	border-radius: 0;
}

/* Navigation */
.navbar {
	background: rgba(255, 255, 255, .8) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.navbar .nav-link {
	font-weight: 500;
	color: #111 !important;
}

.navbar .nav-link.active {
	color: var(--link) !important;
}

.navbar-brand {
	height: 60px;
}

section a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px #666 dotted;
}

section p.subtle a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px #666 dotted;
}

section a:hover {
	color: var(--brand);
	text-decoration: none;
	border-bottom: 1px solid var(--brand);
}

section p.subtle a:hover {
	color: var(--brand);
	text-decoration: none;
	border-bottom: 1px solid var(--brand);
}

/* Hero */
.hero {
	position: relative;
	min-height: 70vh;
	display: grid;
	align-items: end;
	justify-items: stretch;
	background-color: #649ec3;
}

.hero .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .12) 60%, rgba(0, 0, 0, 0));
	z-index: 1;
}

.hero .caption {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 3;
	color: #fff;
	padding: clamp(1rem, 3vw, 2rem);
	max-width: min(1100px, 92vw);
	margin: 0;
}

.hero h1 {
	font-family: "Playfair Display", serif;
	font-size: clamp(2rem, 4vw + 1rem, 4rem);
	line-height: 1.05;
}

.hero p {
	font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
	opacity: .95;
}

.hero h1 {
	font-family: "Playfair Display", serif;
	font-size: clamp(2rem, 4vw + 1rem, 4rem);
	line-height: 1.05;
}

.hero p {
	font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
	opacity: .95;
}

/* Hero image should always fill behind caption */
.hero .carousel, .hero .carousel-inner, .hero .carousel-item{ height:70vh; }
.hero .carousel-item img{ width:100%; height:100%; object-fit:cover; }

/* Responsive tweaks for smaller screens */
@media (max-width: 768px){
  .hero{ min-height:60vh; }
  .hero .carousel, .hero .carousel-inner, .hero .carousel-item{ height:60vh; }
  .hero .caption{ bottom:6%; padding:1rem; }
  .hero h1{ font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .hero p{ font-size: clamp(.95rem, 3.2vw, 1.05rem); }
  .hero .btn { font-size: clamp(.95rem, 3.2vw, 1.05rem); }
}
@media (max-width: 576px){
  .hero{ min-height:56vh; }
  .hero .carousel, .hero .carousel-inner, .hero .carousel-item{ height:56vh; }
  .hero .caption{ bottom:5%; }
}

/* keep CTAs on one line */
.hero .caption .cta-row{
  display:flex;
  flex-wrap:nowrap;      /* don't wrap */
  gap:.5rem;
  justify-content:center;
}

/* buttons shouldn’t stretch; keep them to their content width */
.hero .caption .cta-row .btn{
  flex:0 0 auto;
  white-space:nowrap;    /* prevent text wrapping inside the button */
}

/* on ultra-small screens, make them a touch smaller so they still fit */
@media (max-width: 400px){
  .hero .caption .cta-row{ gap:.4rem; }
  .hero .caption .cta-row .btn{
    padding:.45rem .8rem;
    font-size:.9rem;
  }
}

/* Map: ensure visible height on small screens */
section.map { background-color: var(--brandlite); }
@media (max-width: 576px){ #map{ height:320px; } }
@media (min-width: 577px) and (max-width: 768px){ #map{ height:360px; } }

/* Section shells */
section.section {
	padding: clamp(3rem, 6vw, 6rem) 0;
}

.section-title {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	font-size: clamp(1.6rem, 2.2vw + .6rem, 2.4rem);
	margin-bottom: 1.5rem;
}

.subtle {
	color: var(--muted);
}

/* Quote / testimonial */
.quote-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

blockquote {
	font-family: "Playfair Display", serif;
	font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
	line-height: 1.5;
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
	content: open-quote;
	font-size: 3rem;
	line-height: 0;
	vertical-align: -.5rem;
	opacity: .25;
	margin-right: .25rem;
}

/* Gallery */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 12vw;
	gap: .75rem;
}

@media (max-width: 992px) {
	.gallery-grid {
		grid-auto-rows: 24vw;
	}
}

@media (max-width: 576px) {
	.gallery-grid {
		grid-auto-rows: 36vw;
	}
}

.tile {
	position: relative;
	overflow: hidden;
	border-radius: .75rem;
	background: #ddd;
}

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.tile:hover img {
	transform: scale(1.04);
}

/* Lightbox sizing so images never exceed viewport */
#galleryModal .modal-dialog {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

#galleryModal .modal-content {
	background: #000;
}

#galleryModal .btn-close {
	z-index: 5;
}

#galleryModal .modal-body {
	padding: 0;
}

#galleryModal .carousel,
#galleryModal .carousel-inner,
#galleryModal .carousel-item {
	height: 100vh;
}

#galleryModal .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Split featre blocks (narrow) */
.feature {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.feature .media {
	height: 100%;
	min-height: 200px;
	background: #ddd;
}

.feature .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sign up band */
#signup { 
	background-color: var(--brandlite); 
	border-top:1px solid var(--line); 
	border-bottom:1px solid var(--line);
}
#signup h3 {
	font-family: 'Playfair Display', serif;
}
#signup .subtle {
}


footer, footer .subtle {
	background-color: var(--brand);
	color: #efefef;
}	

/* Side-by-side feature blocks (larger) */
.feature2{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items:center; }
.feature2:nth-child(even){ grid-template-columns: 1fr 1.1fr; }
.feature2 .img-wrap{ border-radius:1rem; overflow:hidden; }
.feature2 img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3; }
.feature2 .copy{ padding: .5rem 0; }
@media (max-width: 991px){
  /* Ensure even features also collapse to 1 column (specificity fix) */
  .feature2,
  .feature2:nth-child(even){ grid-template-columns: 1fr; }

  /* Make both blocks span full width in the single-column layout */
  .feature2 .img-wrap,
  .feature2 .copy{ grid-column: 1 / -1; }
}

/* Map */
#map {
	height: 420px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: var(--shadow);
	filter: grayscale(1) contrast(1.05) brightness(1.05);
	filter: sepia(20%) hue-rotate(-10deg) saturate(110%) brightness(102%);
	/*pointer-events: none;*/
}


/* Calendar */
.calendar {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--line);
}

.cal-header h5 {
	margin: 0;
	font-weight: 600;
}

.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	padding: .75rem;
}

.cal-cell {
	position: relative;
	padding: .65rem 0;
	text-align: center;
	border-radius: 0;
	cursor: pointer;
	font-size: .95rem;
	line-height: 1;
}

.cal-cell.muted {
	color: #adb5bd;
	cursor: default;
}

.cal-cell.weekday {
	font-size: .75rem;
	color: var(--muted);
	cursor: default;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cal-cell.unavailable {
	background: transparent;
	color: #c0c4c8;
	cursor: not-allowed;
}

.cal-cell.unavailable > span {
	text-decoration: line-through;
}

.cal-cell.checkout-only:hover,
.cal-cell.available:hover {
	background: #efefef;
}

.cal-cell.checkout-only span::after {
	content: "\f1c3";
	font-family: "bootstrap-icons";
	margin-left: 4px;
	vertical-align: middle;
}

.cal-cell.selected {
	color: #fff;
}

.cal-cell.in-range {
	background: var(--brandlite);
	color: #000;
}

/* Form */
.form-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* Footer */
footer {
	border-top: 1px solid var(--line);
}

/* Utilities */
.btn-outline-dark {
	border-color: #bbb;
	color: #333;
}

.btn-outline-dark:hover {
	background: #333;
	color: #fff;
}

.billing-total {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

/* Input focus state to show active target */
.form-control.is-active {
	outline: 2px solid #0d6efd33;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);
}

/* Server-side error helpers */
.error-text {
	color: #b42318;
}
	
.has-error .form-label {
	color: #c00;
	font-weight: 900;
}

.has-error input,
.has-error select,
.has-error textarea {
	background-color: #fff6f6;
}

.form-error {
	color: #b42318;
	font-size: .875rem;
	margin-top: .25rem;
}

.has-error .form-control {
	border-color: #b42318;
}

/* Calendar circles + connecting bar */
.cal-cell>span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: .35rem .55rem;
}

.cal-cell.start::after,
.cal-cell.end::after {
	content: "";
	position: absolute;
	width: 2.9rem;
	height: 2.9rem;
	background: var(--brand);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.cal-cell.start>span,
.cal-cell.end>span {
	color: #fff;
}

/* Mode buttons active */
.mode-btn.active {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}

.hero>.carousel {
	width: 100%;
}

/* Start/End half-cell joins to create continuous bar */
.cal-cell.start::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	right: 0;
	height: 100%;
	background: var(--brandlite);
	z-index: 0;
}

.cal-cell.end::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 50%;
	height: 100%;
	background: var(--brandlite);
	z-index: 0;
}

/* Keep hover from washing out endpoints */
.cal-cell.start.available:hover,
.cal-cell.end.available:hover {
	background: transparent;
}

    /* ATTRACTIONS */
    .attractions .section-title { margin-bottom:.5rem; }
    .card-attr{ background:#fff; border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.02); }
    .card-attr .thumb{ position:relative; width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#e9ecef,#f8f9fa); }
    .card-attr .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .card-attr .badge-thematic{ position:absolute; top:.5rem; left:.5rem; background:#111; color:#fff; font-weight:600; }
    .card-attr .body{ padding:1rem 1.25rem; }
    .card-attr h4{ margin:0 0 .25rem; font-family:'Playfair Display', serif; }
    .card-attr .kicker{ text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--muted); margin-bottom:.25rem; }
    .card-attr p{ color:var(--muted); }
    .card-attr .meta{ font-size:.85rem; color:var(--muted); margin-top:.5rem; }

    @media (min-width: 992px){
      .card-attr .row{ align-items:stretch; }
      .card-attr .thumb{ height:100%; aspect-ratio:auto; }
    }