/*
	Hideaway Hill extras (added 2026-10-08)
	1. Small mobile fixes shared by the older template pages
	2. Check Availability form (markup is built by js/availability.js),
	   step 1 checks the calendar, step 2 is the inquiry (2026-10-16)

	Loaded with a plain <link> on both the Tapestry/skel pages and the
	standalone paid landing pages. Sizes are in px on purpose: the mobile
	stylesheet sets the body to 9pt, and inputs under 16px make iOS zoom in.

	Layout idea: the form sits directly on the page (no card), fenced by the
	template's own hairline rule, and on wide screens its four columns line
	up with the four rental columns on the homepage.
*/

/* ---------- 1. Mobile fixes ---------- */

/* Images with width/height attributes keep their shape when they shrink */
#content img,
#marketing img,
#banner img {
	max-width: 100%;
	height: auto;
}

/* "Check Availability" jump button near the top of the property pages */
a.hh-av-jump {
	display: inline-block;
	margin: 0 0 22px;
	padding: 11px 22px;
	background: #6f6037;
	border-radius: 3px;
	font-family: 'Oswald', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
}

a.hh-av-jump:hover {
	background: #574a29;
}

/* Contact page: the property map sits under the form, centered */
#content .post > img.hh-contact-map {
	display: block;
	float: none;
	margin: 0 auto;
}

/* ---------- 2. Check Availability form ---------- */

/* The host is the size container, so the form lays itself out by the room it is given */
.hh-availability {
	container-type: inline-size;
	clear: both;
	margin: 0;
	padding: 0;
}

/* Where the host sits decides which side gets the template's hairline rule */
.hh-availability.hh-av-rule-below {
	margin-bottom: 8px;
	padding-bottom: 44px;
	background: url(images/img02.jpg) repeat-x left bottom;
}

.hh-availability.hh-av-rule-above {
	margin-top: 36px;
	padding-top: 40px;
	background: url(images/img02.jpg) repeat-x left top;
}

.hh-av {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #4a4025;
	text-align: left;
}

.hh-av *,
.hh-av *:before,
.hh-av *:after {
	box-sizing: border-box;
}

.hh-av .hh-av-heading {
	margin: 0 0 20px;
}

/* #content h2 in the template outranks a class selector, so both are listed */
.hh-av .hh-av-title,
#content .hh-av .hh-av-title {
	margin: 0 0 6px;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	text-align: left;
	color: #887644;
}

/* Georgia italic is what the template uses under each rental name */
.hh-av .hh-av-intro,
.hh-av .hh-av-summary {
	margin: 0;
	max-width: 75ch;
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 16px;
	font-style: italic;
	line-height: 1.5;
	color: #675830;
}

.hh-av .hh-av-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
	align-items: end;
}

/* Narrow layout: everything is full width except the two dates, which share a row */
.hh-av .hh-av-fields > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
}

.hh-av .hh-av-stay > :nth-child(2),
.hh-av .hh-av-stay > :nth-child(3) {
	grid-column: auto;
}

.hh-av .hh-av-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: end;
}

.hh-av .hh-av-pair > * {
	min-width: 0;
}

.hh-av label {
	display: block;
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	color: #675830;
}

.hh-av select,
.hh-av input[type="date"],
.hh-av input[type="text"],
.hh-av input[type="email"],
.hh-av input[type="tel"],
.hh-av textarea {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	background-color: #fff;
	border: 1px solid #b3a47c;
	border-radius: 3px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 46px;
	color: #2e2716;
	-webkit-appearance: none;
	appearance: none;
}

.hh-av textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 12px;
	line-height: 1.4;
	resize: vertical;
}

.hh-av select {
	padding-right: 32px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23675830' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

.hh-av select:focus-visible,
.hh-av input:focus-visible,
.hh-av textarea:focus-visible,
.hh-av .hh-av-textbutton:focus-visible,
.hh-av .hh-av-button:focus-visible,
.hh-av a:focus-visible {
	outline: 3px solid #2e2716;
	outline-offset: 2px;
}

.hh-av .hh-av-invalid {
	border-color: #a3261c;
	box-shadow: inset 0 0 0 1px #a3261c;
}

/* Honeypot field: out of sight and out of the tab order */
.hh-av .hh-av-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hh-av .hh-av-button {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	background: #6f6037;
	border: 1px solid #6f6037;
	border-radius: 3px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 46px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}

.hh-av .hh-av-button:hover {
	background: #574a29;
	border-color: #574a29;
}

.hh-av .hh-av-button[disabled] {
	background: #a09472;
	border-color: #a09472;
	cursor: default;
}

.hh-av .hh-av-button.hh-av-quiet {
	background: transparent;
	color: #574a29;
}

.hh-av .hh-av-button.hh-av-quiet:hover {
	background: rgba(111, 96, 55, 0.12);
}

.hh-av .hh-av-hint,
.hh-av .hh-av-error {
	margin: 14px 0 0;
	padding: 0 0 0 12px;
	max-width: 75ch;
	font-size: 15px;
	line-height: 1.45;
}

.hh-av .hh-av-hint {
	border-left: 3px solid #b3a47c;
	color: #4a4025;
}

.hh-av .hh-av-error {
	border-left: 3px solid #a3261c;
	color: #8a1f16;
	font-weight: 400;
}

.hh-av .hh-av-note {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #675830;
}

.hh-av a:not(.hh-av-button) {
	color: #574a29;
	font-weight: 400;
	text-decoration: underline;
}

.hh-av .hh-av-result:focus {
	outline: none;
}

.hh-av .hh-av-result p {
	margin: 0 0 16px;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.5;
}

.hh-av .hh-av-result .hh-av-summary {
	margin-bottom: 10px;
}

.hh-av .hh-av-result .hh-av-button {
	display: inline-block;
	width: auto;
	min-width: 200px;
}

.hh-av .hh-av-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hh-av [hidden] {
	display: none !important;
}

/* Step 2 (inquiry): heading block, optional rental choice, contact fields */
.hh-av .hh-av-inquiry > .hh-av-heading:focus {
	outline: none;
}

.hh-av .hh-av-textbutton {
	margin: 8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: #574a29;
	text-decoration: underline;
	cursor: pointer;
}

.hh-av .hh-av-choice {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.hh-av .hh-av-choice legend {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	color: #675830;
}

.hh-av .hh-av-choice label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 10px 0;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #b3a47c;
	border-radius: 3px;
	font-size: 16px;
	font-weight: 300;
	color: #2e2716;
	cursor: pointer;
}

.hh-av .hh-av-choice input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #6f6037;
}

.hh-av .hh-av-contact .hh-av-message textarea {
	min-height: 96px;
}

/* Wide layout: stay details on the first row, contact details and the button on the second */
@container (min-width: 700px) {
	.hh-av .hh-av-fields {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px 20px;
	}

	.hh-av .hh-av-fields > *,
	.hh-av .hh-av-stay > :nth-child(2),
	.hh-av .hh-av-stay > :nth-child(3) {
		grid-column: auto;
	}

	/* Step 1: the button sits under the Guests and Dogs column */
	.hh-av .hh-av-stay > .hh-av-action {
		grid-column: 4;
	}

	/* Step 2: name, email, phone on one row, message and button on the next */
	.hh-av .hh-av-contact > .hh-av-message {
		grid-column: 1 / span 3;
	}

	.hh-av .hh-av-contact > .hh-av-action {
		grid-column: 4;
		align-self: end;
	}

	.hh-av .hh-av-heading {
		margin-bottom: 24px;
	}
}

/* Full page width: match the template's 50px gutters so each column sits over a rental column */
@container (min-width: 1100px) {
	.hh-av .hh-av-fields {
		column-gap: 50px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hh-av .hh-av-button {
		transition: background-color 0.15s ease;
	}
}