/*
 * Sundial Address.
 *
 * The suggestion list, the note and the postal code message go on any form.
 * The layout of the plugin's own boxes (sundial_address_fields_html()) is
 * written with :where(), so it weighs nothing and the form's own styles for
 * labels, boxes and spacing always win.
 */

/* ---- the plugin's own boxes ---- */

:where(.sundial-address) {
	container-type: inline-size;
}

:where(.sundial-address) :where(.sa-row) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 16px;
}

:where(.sundial-address) :where(.sa-field) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 0 16px;
}

:where(.sundial-address) :where(label) {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

:where(.sundial-address) :where(.sa-optional) {
	font-weight: 400;
	opacity: 0.75;
}

:where(.sundial-address) :where(input, select) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 44px;
	margin: 0;
}

:where(.sundial-address) :where(.sa-hint) {
	margin: 4px 0 0;
	font-size: 0.82rem;
	opacity: 0.8;
}

:where(.sundial-address) :where(.sa-err) {
	margin: 4px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b3261e;
}

/* Province and postal code side by side from 260px (every phone), street
   and unit from 440px (room for "Unit or suite (optional)"), the place row
   in three from 600px (every label stays whole on one line). */
@container (min-width: 440px) {
	:where(.sundial-address) :where(.sa-row-street.sa-n2) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

@container (min-width: 260px) {
	:where(.sundial-address) :where(.sa-row-place.sa-n2),
	:where(.sundial-address) :where(.sa-row-place.sa-n3) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	:where(.sundial-address) :where(.sa-row-place.sa-n3 > .sa-f-city) {
		grid-column: 1 / -1;
	}
}

@container (min-width: 600px) {
	:where(.sundial-address) :where(.sa-row-place.sa-n3) {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
	}
	:where(.sundial-address) :where(.sa-row-place.sa-n3 > .sa-f-city) {
		grid-column: auto;
	}
}

/* ---- the City box's suggestions (on any form) ---- */

.sa-anchor {
	position: relative;
}

.sa-list {
	position: absolute;
	z-index: 60;
	box-sizing: border-box;
	max-height: 16.75rem;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	text-align: left;
	background: #fff;
	color: #1f1a17;
	border: 1px solid rgba(40, 30, 20, 0.2);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(40, 30, 20, 0.16);
}

.sa-list[hidden] {
	display: none;
}

.sa-list .sa-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	min-height: 40px;
	margin: 0;
	padding: 6px 12px;
	list-style: none;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.25;
	cursor: pointer;
}

.sa-list .sa-opt::before,
.sa-list .sa-opt::marker {
	content: none;
}

.sa-list .sa-opt:hover {
	background: #f6f1ea;
}

.sa-list .sa-opt.is-active {
	background: #efe6da;
	box-shadow: inset 3px 0 0 #9c5031;
}

.sa-list .sa-opt-hint {
	flex: none;
	font-size: 0.82rem;
	color: #6b625b;
	white-space: nowrap;
}

/* Fingers need room: 44px rows on phones and touch screens. */
@media (pointer: coarse), (max-width: 600px) {
	.sa-list .sa-opt {
		min-height: 44px;
	}
}

/* ---- the note and the postal code message ---- */

.sa-reveal {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.22s ease, margin-top 0.22s ease, visibility 0s linear 0.22s;
}

.sa-reveal.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.22s ease, margin-top 0.22s ease, visibility 0s;
}

.sa-reveal.sa-instant {
	transition: none;
}

.sa-reveal-in {
	min-height: 0;
	overflow: hidden;
}

.sa-reveal .sa-reveal-text {
	margin: 0;
	padding: 6px 0 0;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
}

.sa-note .sa-reveal-text {
	color: #5a4a36;
}

.sa-msg .sa-reveal-text {
	color: #8a4b00;
}

@media (prefers-reduced-motion: reduce) {
	.sa-reveal,
	.sa-reveal.is-open {
		transition: none;
	}
}

/* Read out, not shown. */
.sa-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}