/* Rymotel public theme — public catalogue (M4) */
/* Utilities */
.visually-hidden, .booking-visually-hidden, .booking-fieldset[data-role="checkout-coupon"] > .booking-fieldset__legend { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: -.2em; }
[dir="rtl"] .icon--flip-rtl { transform: scaleX(-1); }

/* Buttons */
/* Disabled pills are calm sand (Wow §0: ink, cream and sand only), at rest and under the pointer. */
.button:is([aria-disabled="true"], :disabled), .button:is([aria-disabled="true"], :disabled):is(:hover, :focus-visible) { background-color: var(--rym-color-surface-warm); color: var(--rym-color-text-muted); cursor: not-allowed; }
.button:is([aria-disabled="true"], :disabled) > .icon { opacity: .5; }

/* Form fields */
.field { display: grid; gap: .25rem; min-inline-size: 0; }
.field__label { font-weight: 700; font-size: .875rem; }
.field__control { inline-size: 100%; min-block-size: 44px; padding-block: .5rem; padding-inline: .75rem; border: 1px solid var(--rym-color-border-strong); border-radius: var(--rym-radius); background-color: var(--rym-color-bg); color: var(--rym-color-text); font: inherit; }
.field__control[aria-invalid="true"] { border-color: var(--rym-color-danger-text); border-width: 2px; }
.field__error { color: var(--rym-color-danger-text); font-size: .875rem; font-weight: 700; }
.field__error p { margin: 0; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.field--inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.field--inline .field__control { inline-size: auto; max-inline-size: 100%; }
.choice-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.choice { display: flex; align-items: center; gap: .5rem; min-block-size: 44px; }

/* 24 × 24 CSS px at least (WCAG 2.2 target size), the label row extends the */
.choice input { inline-size: 1.5rem; block-size: 1.5rem; margin: 0; flex: none; accent-color: var(--rym-color-text); }
.choice label { display: inline-flex; align-items: center; gap: .5rem; flex: 1; min-block-size: 44px; cursor: pointer; }
.choice--separated { margin-block-start: .5rem; padding-block-start: .5rem; border-block-start: 1px solid var(--rym-color-border); }

/* Sections */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-block-end: 1.5rem; }
.section-head__title { margin: 0; }
.section-head__link { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; font-size: .9375rem; font-weight: 500; }
.section-note { margin-block: 1rem 0; color: var(--rym-color-text-muted); font-size: .875rem; }
.link-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.link-list a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; }

/* Sections of the neighborhood page: the page rhythm (Wow §0). */
.home-section { padding-block: var(--rym-section-space) 0; }

/* Stay search form (home hero, 404, neighborhood guides) */
.stay-search { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--rym-radius-large); background-color: var(--rym-color-bg); box-shadow: var(--rym-shadow-raised); }
.stay-search__heading { margin: 0; font-size: 1.625rem; }
.stay-search__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: end; }

/* Below the reference phones (320 px, or 400 % zoom) */
@media (max-width: 22.4375rem) {
	.stay-search__fields, .field-row { grid-template-columns: minmax(0, 1fr); }
}
.stay-search__field--city, .stay-search__field--where, .stay-search__submit { grid-column: 1 / -1; }
.stay-search__submit { min-block-size: 3rem; }
.stay-search__hint { margin: 0; color: var(--rym-color-text-muted); font-size: .875rem; }

/* Neighborhood cards */
.neighborhood-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.neighborhood-card { position: relative; display: grid; gap: .5rem; align-content: start; }
.neighborhood-card:hover { background-color: var(--rym-color-surface); }
.neighborhood-card__name { margin: 0; font-family: var(--rym-font-display); font-size: var(--rym-font-size-h2-compact); font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: var(--rym-line-height-display); }
.neighborhood-card__link { color: var(--rym-color-text); text-decoration: none; }
.neighborhood-card__link::after { content: ""; position: absolute; inset: 0; }
.neighborhood-card__link:focus-visible { outline: none; }
.neighborhood-card:focus-within { outline: 3px solid var(--rym-color-focus); outline-offset: 2px; }
.neighborhood-card__description { margin: 0; color: var(--rym-color-text-muted); }
.neighborhood-card__count { margin: 0; font-weight: 700; color: var(--rym-color-accent); }

/* Listing cards */
.listing-grid { display: grid; gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) 2rem; }

/* The listing card itself: components.css (Signature §4.3). */
/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.badge .icon { inline-size: 1em; block-size: 1em; }

/* Notices (empty, error, placeholder) */
/* A quiet tinted card with a hairline (Wow §0): the tone tells the state, no heavy side bar. */
.notice { display: flex; gap: .875rem; padding: 1.25rem 1.5rem; border: 1px solid var(--rym-hairline); border-radius: var(--rym-radius-card); background-color: var(--rym-color-info-bg); color: var(--rym-color-info-text); }
.notice--warning { border-color: rgb(106 58 0 / 16%); }
.notice--error { border-color: rgb(138 28 28 / 16%); }
.notice--warning { background-color: var(--rym-color-warning-bg); color: var(--rym-color-warning-text); }
.notice--error { background-color: var(--rym-color-danger-bg); color: var(--rym-color-danger-text); }
.notice__icon { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .1875rem; }
.notice__body > * { margin: 0; max-inline-size: none; }
.notice__body > * + * { margin-block-start: .5rem; }
.notice__title { font-weight: 700; }
.notice__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Search page */
/* Pagination */
.pagination { margin-block-start: 1.5rem; }
.pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pagination__link { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-block-size: 44px; min-inline-size: 44px; padding-inline: .5rem; border-radius: 999px; color: var(--rym-color-text-muted); font-variant-numeric: tabular-nums; text-decoration: none; transition: color var(--rym-transition), box-shadow var(--rym-transition); }
.pagination__link[aria-current="page"] { color: var(--rym-color-text); font-weight: 600; text-decoration: underline 1px; text-underline-offset: .45em; }
.pagination__link--step { padding-inline: 1.125rem; box-shadow: inset 0 0 0 1px var(--rym-hairline-strong); color: var(--rym-color-text); }
@media (hover: hover) and (pointer: fine) { a.pagination__link:hover { color: var(--rym-color-text); box-shadow: inset 0 0 0 1px var(--rym-color-text); } }
.pagination__gap { padding-inline: .5rem; color: var(--rym-color-text-muted); }

/* Maps */
.map-note { margin: 0; padding: .25rem .75rem; border-radius: 99rem; background-color: var(--rym-glass-solid); color: var(--rym-color-text); font-family: var(--rym-font-body); font-size: .75rem; }

.leaflet-container { font-family: var(--rym-font-body); }
.leaflet-container .leaflet-control-attribution { font-size: .75rem; color: var(--rym-color-text); }
.leaflet-container .leaflet-control-attribution a { color: var(--rym-color-accent); }
/* Brand-tinted tiles (Wow §2.4): calmer, warmer streets; labels stay legible; attribution and controls untouched.
   A sand ground while tiles load or when there are none. */
.leaflet-tile-pane { filter: saturate(.42) sepia(.16) brightness(1.03) contrast(.94); }
:is(.search-map__canvas, .listing-location__map).leaflet-container { background-color: var(--rym-brand-sand); }
/* Zoom: one hairline pill (leaflet.css loads later, hence the container prefix). */
.leaflet-container .leaflet-bar.leaflet-control-zoom { overflow: hidden; border: 0; border-radius: 99rem; box-shadow: 0 0 0 1px var(--rym-hairline), var(--rym-shadow-2); }
/* 44 px targets (Leaflet's default is 30 px). */
.leaflet-container .leaflet-control-zoom.leaflet-bar a { inline-size: 44px; block-size: 44px; border-color: var(--rym-hairline); background-color: var(--rym-glass-solid); color: var(--rym-color-text); font-size: 1.375rem; font-weight: 400; line-height: 44px; }
.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover { background-color: var(--rym-brand-white); }
.listing-unavailable { display: grid; gap: 1rem; padding-block-start: 2rem; }

/* Neighborhood guide (Signature W5) */
.neighborhood-guide__layout { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start; padding-block-start: clamp(3rem, 1.5rem + 4vw, 6rem); }
.neighborhood-guide__content { color: var(--rym-color-text-muted); font-size: 1.0625rem; line-height: 1.75; }
/* The first paragraph opens the guide in the display face (Wow §0: strong type contrast). */
:is(.neighborhood-guide__content, .guide-article__content) > p:first-child { margin-block-end: 1.5rem; color: var(--rym-color-text); font-family: var(--rym-font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.35; }
:lang(ar) :is(.neighborhood-guide__content, .guide-article__content) > p:first-child { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); font-weight: 600; line-height: 1.8; }

/* Final fixes: the search pill rises over the hero's foot, the guide text follows on one centred measure. */
.neighborhood-guide__layout { justify-items: center; }
/* The hero keeps the pill's overlap free under its title. */
.site-main--neighborhood .page-hero__content { padding-block-end: calc(clamp(1.75rem, 1rem + 4vw, 4.5rem) + 2.5rem); }
.neighborhood-guide__layout .search-pill { position: relative; inline-size: min(100%, 60rem); margin-block-start: calc(-1 * clamp(3rem, 1.5rem + 4vw, 6rem) - 2.5rem); }
.neighborhood-grid--index .neighborhood-card--cover { min-block-size: clamp(24rem, 16rem + 18vw, 36rem); padding: 2.25rem 2rem 2rem; }

/* The neighbourhoods index: tall cover cards, three across on wide screens. */
.neighborhood-grid--index { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, .75rem + 1.5vw, 2rem); }

/* Help centre */
.page-head--help .help-search { inline-size: min(100%, 40rem); margin-block-start: .5rem; }
.help-search--pill { display: grid; gap: .5rem; }
.help-search--pill .help-search__input { min-block-size: 3.5rem; padding-inline: 1.5rem; border: 1px solid var(--rym-color-border-strong); border-radius: 999px; background-color: #fff; box-shadow: var(--rym-shadow-1); font-size: 1rem; }
.help-search__status { min-block-size: 1.5em; margin: 0; color: var(--rym-color-text-muted); font-size: .875rem; }
.help-centre { display: grid; gap: var(--rym-section-space); }
.help-centre__body { display: grid; gap: 2rem; align-items: start; }

/* Topics */
.help-topics { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.help-topics__item { flex: none; }
.help-topics__item .stay-tile__link { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 1rem; border: 1px solid var(--rym-color-border); border-radius: 999px; background-color: #fff; color: var(--rym-color-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	.help-topics__item .stay-tile__link:hover { border-color: var(--rym-color-text); }
}
@media (min-width: 64rem) {
	.help-centre__body--topics { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); }
	.help-topics { position: sticky; inset-block-start: var(--rym-sticky-offset); flex-direction: column; gap: 0; overflow: visible; border-inline-start: 1px solid var(--rym-color-border); }
	.help-topics__item .stay-tile__link { display: flex; margin-inline-start: -1px; padding-inline: 1rem 0; border: 0; border-inline-start: 2px solid transparent; border-radius: 0; background: none; white-space: normal; }
	.help-topics__item .stay-tile__link:hover { border-inline-start-color: var(--rym-color-text); }
}
.faq { max-inline-size: 48rem; }
.faq .wp-block-heading, .faq h2 { margin-block: 3rem .75rem; font-size: var(--rym-font-size-h2-compact); }
.faq > :first-child { margin-block-start: 0; }
.faq details { border-block-end: 1px solid var(--rym-color-border); }
.faq details + details { margin-block-start: 0; }
.faq details summary { display: flex; align-items: center; gap: 1rem; min-block-size: 44px; padding-block: 1.125rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.faq details summary::-webkit-details-marker { display: none; }

/* A plus in a ring that turns into a cross when the answer is open. */
.faq details summary::after { content: "+" / ""; display: grid; flex: none; place-items: center; inline-size: 2rem; block-size: 2rem; margin-inline-start: auto; border: 1px solid var(--rym-color-border-strong); border-radius: 50%; font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform var(--rym-dur-2) var(--rym-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { margin-block: 0 1.5rem; max-inline-size: 62ch; color: var(--rym-color-text-muted); line-height: 1.7; }

/* The answer fades in when it opens */
.faq details::details-content { opacity: 0; transition: opacity var(--rym-dur-2) var(--rym-ease-out), content-visibility var(--rym-dur-2) allow-discrete; }
.faq details[open]::details-content { opacity: 1; }

/* Contact and next steps: two cards side by side from 64 rem. */
.help-centre__more { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) {
	.help-centre__more { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.help-contact__intro { color: var(--rym-color-text-muted); }
.help-centre__next { padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); border-radius: 1.5rem; background-color: var(--rym-color-surface-warm); }
.help-centre__next-title { margin-block-end: .5rem; font-size: 1.125rem; }
.help-centre__next .link-list { gap: 0; }

/* Legal placeholders and 404 */
.legal-placeholder { max-inline-size: var(--rym-measure); margin-block-end: 2rem; }

/* 404: a sunlit band with the display title, the search pill and three ways on. */
.not-found { padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem); background: var(--rym-gradient-sun); }
.not-found__inner { display: grid; justify-items: center; gap: 2rem; text-align: center; }
.not-found__head { display: grid; justify-items: center; gap: 1rem; }
.not-found__head > * { margin: 0; }
.not-found__eyebrow { color: var(--rym-color-text-muted); }
.not-found__title { font-size: var(--rym-font-size-display); animation: rym-reveal var(--rym-dur-3) var(--rym-ease-out) 80ms backwards; }
.not-found__lead { max-inline-size: 52ch; color: var(--rym-color-text-muted); font-size: var(--rym-font-size-lead); }
.not-found .search-pill { inline-size: 100%; max-inline-size: 72rem; text-align: start; }
.not-found__links .link-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; }

/* Motion */
@keyframes rym-spin {
	to { transform: rotate(360deg); }
}

/* The neighbourhood's listings: three large cards across, as on the home page. */
@media (min-width: 64rem) {
	.site-main--neighborhood .listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Wider screens */
@media (min-width: 40rem) {
	.stay-search__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.listing-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
@media (min-width: 64rem) { .neighborhood-guide__content { max-inline-size: var(--rym-measure); } }