/* Custom properties. Every colour in the project is defined here and nowhere else. */

:root {
	--color-page-background: #f4f5f6;
	--color-surface: #ffffff;
	--color-text: #1b1d1e;
	--color-text-muted: #5f6567;
	--color-border: #d7dade;
	--color-accent: #2f6f62;
	--color-accent-hover: #24564b;
	--color-accent-text: #ffffff;
	--color-accent-soft: #dfeae7;
	--color-error: #b3261e;
	--color-error-background: #fdecea;
	--color-shadow: rgba(27, 29, 30, 0.08);

	--space-tiny: 0.25rem;
	--space-small: 0.5rem;
	--space-medium: 1rem;
	--space-large: 1.5rem;
	--space-huge: 2.5rem;

	--font-family-base: 'Heebo', sans-serif;
	--font-size-small: 0.875rem;
	--font-size-base: 1rem;
	--font-size-large: 1.125rem;
	--font-size-section-title: 1.375rem;
	--font-size-page-title: 1.75rem;
	--font-size-hero: 2.25rem;

	--radius-small: 4px;
	--radius-medium: 10px;
	--page-width: 1100px;
	--filter-sidebar-width: 16rem;
	--listing-card-min-width: 17rem;
	--detail-panel-width: 18rem;
	--detail-photo-width: 30rem;
}

/* Reset and base typography */

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

body {
	margin: 0;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-page-background);
}

h1,
h2,
h3 {
	margin: 0 0 var(--space-medium);
	line-height: 1.3;
	font-weight: 700;
}

h1 {
	font-size: var(--font-size-page-title);
}

h2 {
	font-size: var(--font-size-section-title);
}

h3 {
	font-size: var(--font-size-large);
}

p {
	margin: 0 0 var(--space-medium);
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	margin: 0 0 var(--space-medium);
	padding-inline-start: var(--space-large);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Page container, header, footer */

.page-container {
	width: 100%;
	max-width: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--space-large);
}

.page-main {
	flex: 1;
	padding-block: var(--space-huge);
}

.page-header {
	background-color: var(--color-surface);
	border-block-end: 1px solid var(--color-border);
}

.page-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-medium);
	padding-block: var(--space-medium);
}

.site-name {
	font-size: var(--font-size-large);
	font-weight: 700;
	color: var(--color-text);
}

.site-name:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.header-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-medium);
}

.header-link {
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--color-text);
}

.header-link:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.header-logout-form {
	margin: 0;
	display: flex;
}

.header-logout-button {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.page-footer {
	background-color: var(--color-surface);
	border-block-start: 1px solid var(--color-border);
	padding-block: var(--space-large);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-large);
}

.footer-link {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.footer-link:hover {
	color: var(--color-accent);
	text-decoration: none;
}

/* Forms, labels, validation errors, buttons */

form section {
	margin-block-end: var(--space-huge);
}

label {
	display: block;
	margin-block-end: var(--space-tiny);
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--color-text);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='file'],
select,
textarea {
	display: block;
	width: 100%;
	max-width: 32rem;
	margin-block-end: var(--space-medium);
	padding: var(--space-small);
	font-family: inherit;
	font-size: var(--font-size-base);
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input[type='checkbox'] {
	margin-inline-end: var(--space-tiny);
	accent-color: var(--color-accent);
}

.errorlist,
.error-message {
	max-width: 32rem;
	margin: calc(-1 * var(--space-small)) 0 var(--space-medium);
	padding: var(--space-small) var(--space-medium);
	list-style: none;
	font-size: var(--font-size-small);
	color: var(--color-error);
	background-color: var(--color-error-background);
	border-radius: var(--radius-small);
}

.errorlist:empty {
	display: none;
}

.notice {
	padding: var(--space-medium);
	color: var(--color-text-muted);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

button,
.button {
	display: inline-block;
	padding: var(--space-small) var(--space-large);
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-accent-text);
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-small);
	cursor: pointer;
	transition: background-color 0.15s;
}

button:hover,
.button:hover {
	color: var(--color-accent-text);
	background-color: var(--color-accent-hover);
	text-decoration: none;
}

.header-link.header-logout-button,
.header-link.header-logout-button:hover {
	color: var(--color-text);
	background: none;
	border: 0;
	font-size: var(--font-size-small);
}

.header-link.header-logout-button:hover {
	color: var(--color-accent);
}

.feature-list,
.photo-list,
.availability-list {
	list-style: none;
	padding-inline-start: 0;
}

.feature-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-small) var(--space-large);
}

.feature-list label {
	font-weight: 400;
}

.photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-medium);
}

.photo-list li {
	max-width: 20rem;
}

.availability-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-medium);
	margin-block-end: var(--space-small);
}

.availability-list input[type='date'] {
	width: auto;
	margin-block-end: 0;
}

.availability-list label {
	margin-block-end: 0;
}

/* Date range field, and the overrides the vendored calendar needs to read as Hebrew */

.date-range-trigger {
	cursor: pointer;
}

.availability-list .date-range-native,
.availability-list .date-range-combined {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-small) var(--space-medium);
}

/* An author display rule outranks the browser's own [hidden], so say it again here. */
.date-range-native[hidden],
.date-range-combined[hidden] {
	display: none;
}

.availability-list .date-range-trigger {
	width: auto;
	min-width: 14rem;
	margin-block-end: 0;
}

/* The calendar hardcodes direction: ltr, so the day grid has to be flipped back. */
.flatpickr-calendar {
	direction: rtl;
	font-family: inherit;
}

/*
	Flipping the grid does not move the arrows, which are pinned to the bar's edges.
	Previous belongs on the right in Hebrew, and both chevrons have to point the other
	way. The doubled class matches the library's own, which is how it wins.
*/
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
	left: auto;
	right: 0;
}

.flatpickr-calendar .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
	right: auto;
	left: 0;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
	transform: scaleX(-1);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--color-accent);
}

.flatpickr-current-month,
.flatpickr-weekday {
	color: var(--color-text);
}

/*
	The month dropdown and year box are a select and a number input, so the project's
	own form-field styling lands on them and stretches them across the header.
*/
.flatpickr-calendar .flatpickr-current-month .numInput,
.flatpickr-calendar .flatpickr-monthDropdown-months {
	display: inline-block;
	width: auto;
	max-width: none;
	margin-block-end: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

/*
	Every day rule below is prefixed with .flatpickr-calendar on purpose. The library
	styles its own days in the focused and hovered states too, and those selectors
	outrank a bare .flatpickr-day.selected - without the prefix a clicked day keeps
	the library's blue for as long as it holds focus.
*/

/* The two ends of the range, solid. */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
	color: var(--color-accent-text);
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

/* Everything between them, and the same band while the second end is being chosen. */
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange:focus,
.flatpickr-calendar .flatpickr-day.inRange:hover,
.flatpickr-calendar .flatpickr-day:focus,
.flatpickr-calendar .flatpickr-day:hover {
	color: var(--color-text);
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent-soft);
}

/* The library draws the band's continuity with a side shadow, not with a width. */
.flatpickr-calendar .flatpickr-day.inRange {
	box-shadow: -5px 0 0 var(--color-accent-soft), 5px 0 0 var(--color-accent-soft);
}

/* The one-cell gap the library paints between two touching ends. */
.flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)) {
	box-shadow: -10px 0 0 var(--color-accent);
}

.flatpickr-calendar .flatpickr-day.today {
	border-color: var(--color-accent);
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
	color: var(--color-text-muted);
	background-color: transparent;
	border-color: transparent;
	opacity: 0.4;
}

/* Search and browse page */

.search-tagline {
	margin-block-end: var(--space-huge);
	font-size: var(--font-size-hero);
}

.search-layout {
	display: grid;
	grid-template-columns: var(--filter-sidebar-width) 1fr;
	gap: var(--space-huge);
	align-items: start;
}

.search-filters {
	position: sticky;
	top: var(--space-large);
	padding: var(--space-large);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

.search-filters-title,
.search-results-title {
	font-size: var(--font-size-small);
	font-weight: 700;
	color: var(--color-text-muted);
}

.search-filter-group {
	margin: 0 0 var(--space-large);
	padding: 0;
	border: 0;
}

.search-filter-group legend {
	padding: 0;
	font-size: var(--font-size-small);
	font-weight: 500;
}

.search-filter-group label {
	margin-block-start: var(--space-small);
}

.search-filter-choice {
	display: flex;
	align-items: center;
	gap: var(--space-tiny);
	margin-block-start: var(--space-tiny);
}

.search-filter-choice label {
	margin: 0;
	font-weight: 400;
}

.search-more-filters {
	margin-block-end: var(--space-large);
}

.search-more-filters summary {
	font-size: var(--font-size-small);
	font-weight: 500;
	cursor: pointer;
}

.search-more-filters .search-filter-group {
	margin-block-start: var(--space-medium);
}

.search-filter-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-medium);
}

.search-filters input[type='date'],
.search-filters input[type='number'],
.search-filters select {
	margin-block-end: 0;
}

.search-count {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.search-pagination {
	display: flex;
	gap: var(--space-large);
	margin-block-start: var(--space-huge);
}

.search-empty {
	padding: var(--space-huge) var(--space-large);
	text-align: center;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

.search-empty p {
	color: var(--color-text-muted);
}

.search-empty-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-large);
}

/* Listing card */

.listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--listing-card-min-width), 1fr));
	gap: var(--space-large);
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}

.listing-card {
	overflow: hidden;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	box-shadow: 0 1px 3px var(--color-shadow);
	transition: box-shadow 0.15s, transform 0.15s;
}

.listing-card:hover {
	box-shadow: 0 6px 16px var(--color-shadow);
	transform: translateY(-2px);
}

.listing-card:has(.listing-card-link:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.listing-card-link {
	display: block;
	color: var(--color-text);
}

.listing-card-link:hover {
	text-decoration: none;
}

.listing-card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--color-border);
}

.listing-card-body {
	padding: var(--space-medium);
}

.listing-card-city {
	margin: 0 0 var(--space-tiny);
	font-size: var(--font-size-large);
	font-weight: 700;
}

.listing-card-summary {
	margin: 0 0 var(--space-tiny);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.listing-card-dates {
	margin: 0;
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.listing-card-features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-tiny);
	list-style: none;
	margin: var(--space-small) 0 0;
	padding-inline-start: 0;
}

.listing-card-feature {
	padding: 0 var(--space-small);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
}

/* Listing detail page */

.listing-detail-photos {
	display: flex;
	gap: var(--space-small);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	list-style: none;
	margin: 0 0 var(--space-large);
	padding-inline-start: 0;
	padding-block-end: var(--space-small);
	scrollbar-color: var(--color-border) transparent;
}

.listing-detail-photo-slide {
	flex: 0 0 var(--detail-photo-width);
	scroll-snap-align: start;
}

.listing-detail-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--color-border);
	border-radius: var(--radius-medium);
}

.listing-detail-header {
	margin-block-end: var(--space-large);
}

.listing-detail-title {
	margin-block-end: var(--space-tiny);
}

.listing-detail-region {
	margin: 0;
	color: var(--color-text-muted);
}

.listing-detail-layout {
	display: grid;
	grid-template-columns: 1fr var(--detail-panel-width);
	gap: var(--space-huge);
	align-items: start;
}

.listing-detail-main section {
	margin-block-end: var(--space-huge);
}

.listing-detail-main section:last-child {
	margin-block-end: 0;
}

.listing-detail-attributes {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-tiny) var(--space-large);
	margin: 0;
}

.listing-detail-attributes dt {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.listing-detail-attributes dd {
	margin: 0;
	font-weight: 500;
}

.listing-detail-features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-small);
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}

.listing-detail-feature {
	padding: 0 var(--space-medium);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
}

.listing-detail-dates {
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}

.listing-detail-date {
	padding-block: var(--space-small);
	border-block-end: 1px solid var(--color-border);
}

.listing-detail-date:last-child {
	border-block-end: 0;
}

.listing-detail-no-dates {
	margin: 0;
	color: var(--color-text-muted);
}

.listing-detail-panel {
	position: sticky;
	top: var(--space-large);
	padding: var(--space-large);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

.listing-detail-panel-title {
	font-size: var(--font-size-large);
}

.listing-detail-panel form {
	margin: var(--space-small) 0 0;
}

.listing-detail-panel .button,
.listing-detail-panel button {
	display: block;
	width: 100%;
	text-align: center;
}

.listing-detail-panel .notice {
	margin-block-end: var(--space-medium);
	font-size: var(--font-size-small);
}

/* Requests page. One list, one row per request or match, told apart by its icon colour and its edge. */

.request-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-medium);
}

.request-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--space-medium);
	padding: var(--space-medium) var(--space-large);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-inline-start: 4px solid var(--color-border);
	border-radius: var(--radius-medium);
}

.request-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background-color: var(--color-page-background);
	color: var(--color-text-muted);
}

.request-row-glyph {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.request-row-body {
	min-inline-size: 0;
}

.request-row-heading {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-small);
}

.request-row-kind {
	font-weight: 700;
}

.request-row-status {
	padding: 0 var(--space-small);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	background-color: var(--color-page-background);
	border-radius: var(--radius-small);
}

.request-row-link {
	display: inline-block;
	margin-block-start: var(--space-tiny);
	font-weight: 500;
}

.request-row-gone,
.request-row-hint,
.request-row-date {
	margin: var(--space-tiny) 0 0;
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.request-row-contact {
	margin: var(--space-small) 0 0;
	padding: var(--space-small) var(--space-medium);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-tiny) var(--space-medium);
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-small);
}

.request-row-contact dt {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.request-row-contact dd {
	margin: 0;
	font-weight: 700;
}

.request-row-actions {
	margin: 0;
}

.request-row-actions button {
	white-space: nowrap;
}

/* The five states, drawn only from the existing palette. */

.request-row-received {
	border-inline-start-color: var(--color-accent);
}

.request-row-received .request-row-icon {
	color: var(--color-accent-text);
	background-color: var(--color-accent);
}

.request-row-matched {
	border-inline-start-color: var(--color-accent);
	background-color: var(--color-surface);
}

.request-row-matched .request-row-icon {
	color: var(--color-accent);
	background-color: var(--color-accent-soft);
}

.request-row-sent .request-row-icon {
	color: var(--color-text);
}

.request-row-declined {
	border-inline-start-color: var(--color-error);
}

.request-row-declined .request-row-icon {
	color: var(--color-error);
	background-color: var(--color-error-background);
}

.request-row-declined .request-row-status {
	color: var(--color-error);
	background-color: var(--color-error-background);
}

.request-row-withdrawn,
.request-row-declined {
	color: var(--color-text-muted);
}

.request-row-withdrawn .request-row-kind,
.request-row-declined .request-row-kind {
	font-weight: 500;
}

.request-empty {
	padding: var(--space-huge) var(--space-large);
	text-align: center;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

.request-empty p {
	margin-block-end: var(--space-large);
	color: var(--color-text-muted);
}

/* Responsive. Desktop first, so a phone visit is not broken. */

@media (max-width: 720px) {
	.page-container {
		padding-inline: var(--space-medium);
	}

	.page-main {
		padding-block: var(--space-large);
	}

	.page-header-inner {
		align-items: flex-start;
		gap: var(--space-small);
	}

	.header-links {
		gap: var(--space-small) var(--space-medium);
	}

	.footer-links {
		gap: var(--space-small) var(--space-medium);
	}

	.listing-grid {
		grid-template-columns: 1fr;
	}

	.search-tagline {
		margin-block-end: var(--space-large);
		font-size: var(--font-size-page-title);
	}

	.search-layout {
		grid-template-columns: 1fr;
		gap: var(--space-large);
	}

	.search-filters {
		position: static;
	}

	.listing-detail-layout {
		grid-template-columns: 1fr;
		gap: var(--space-large);
	}

	.listing-detail-panel {
		position: static;
	}

	.listing-detail-photo-slide {
		flex-basis: 85%;
	}

	.request-row {
		grid-template-columns: auto 1fr;
		padding: var(--space-medium);
	}

	.request-row-actions {
		grid-column: 1 / -1;
	}

	.request-row-actions button {
		inline-size: 100%;
	}
}

/* Motion is opt-in. Anyone who asked for stillness gets it. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}

	.listing-card:hover {
		transform: none;
	}
}