/* ---- finishing touches ---- */
:root {
  --lattice-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%2523b58f51' stroke-width='1'%3E%3Cpath d='M32 4l9.9 14.1L56 28 41.9 37.9 32 52 22.1 37.9 8 28l14.1-9.9z'/%3E%3Cpath d='M0 32h8M56 32h8M32 0v4M32 52v12'/%3E%3C/svg%3E");
  --lattice-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%2523e3c78f' stroke-width='1'%3E%3Cpath d='M32 4l9.9 14.1L56 28 41.9 37.9 32 52 22.1 37.9 8 28l14.1-9.9z'/%3E%3Cpath d='M0 32h8M56 32h8M32 0v4M32 52v12'/%3E%3C/svg%3E");
}

/* a quiet lattice, drawn from the screen in the hero photo, fading out toward the content */
.hero-band { position: relative; isolation: isolate; }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--lattice-light); background-size: 64px; opacity: 0.1; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--lattice-dark); background-size: 64px; opacity: 0.1; pointer-events: none; }

/* gold ornament between sections: a hairline with a small diamond */
.ornament { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin-block: 0.5rem; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: min(18vw, 7rem); background: linear-gradient(to var(--towards, right), transparent, var(--gold)); }
.ornament::after { background: linear-gradient(to var(--towards-end, left), transparent, var(--gold)); }
.ornament i { width: 9px; height: 9px; rotate: 45deg; border: 1px solid var(--gold); background: var(--ivory); display: block; }
[dir="rtl"] .ornament::before { --towards: left; }
[dir="rtl"] .ornament::after { --towards-end: right; }

/* titles of the inner pages get the same gold rule as the sections */
.page-title { position: relative; padding-block-end: 0.875rem; }
.page-title::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 3rem; height: 2px; background: var(--gold); }
.home-hero h1::after { content: none; }

/* photos: a hairline inside the edge, like a mounted print */
.room__media, .teaser__media, .stay__media, .gallery__item { position: relative; }
.room__media::after, .teaser__media::after, .stay__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); pointer-events: none; }
.stay__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(20 17 13 / 0.28), transparent 45%); pointer-events: none; }

/* header: a soft shadow appears once the page is scrolled */
.site-header { transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgb(60 40 10 / 0.45); background: rgb(252 250 245 / 0.97); }

/* the gold buttons catch the light once on hover */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.38) 50%, transparent 65%); translate: -120% 0; transition: translate 600ms var(--ease-out); pointer-events: none; }
@media (hover: hover) { .btn:hover::after { translate: 120% 0; } }

/* home sections rise gently into view, once */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); }
  .reveal-ready [data-reveal].is-in { opacity: 1; translate: 0 0; }
  .reveal-ready .features [data-reveal]:nth-child(2), .reveal-ready .stays__grid [data-reveal]:nth-child(2) { transition-delay: 90ms; }
  .reveal-ready .features [data-reveal]:nth-child(3), .reveal-ready .stays__grid [data-reveal]:nth-child(3) { transition-delay: 180ms; }
  .reveal-ready .features [data-reveal]:nth-child(4) { transition-delay: 270ms; }
}

/* browser surfaces in the same palette */
html { scrollbar-color: var(--gold) var(--ivory); }
input, select, textarea { caret-color: var(--gold-ink); accent-color: var(--gold); }

/* today in the calendars: a gold ring and a small dot, so the visitor knows where "now" is */
.cal__day.is-today span, .pd.is-today span { box-shadow: inset 0 0 0 2px var(--gold); font-weight: 800; position: relative; }
.cal__day.is-today span::after, .pd.is-today span::after { content: ""; position: absolute; inset-block-end: 4px; inset-inline-start: 50%; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-ink); }
[dir="rtl"] .cal__day.is-today span::after, [dir="rtl"] .pd.is-today span::after { translate: 50% 0; }
.cal__day.is-today.is-off span, .pd.is-today:disabled span { box-shadow: inset 0 0 0 2px rgb(181 143 81 / 0.45); }
.cal__day.is-today.is-start span, .cal__day.is-today.is-end span, .pd.is-today.is-start span, .pd.is-today.is-end span { box-shadow: 0 0 0 3px var(--ivory), 0 0 0 5px var(--gold); }
.cal__day.is-today.is-start span::after, .cal__day.is-today.is-end span::after, .pd.is-today.is-start span::after, .pd.is-today.is-end span::after { background: var(--ink); }

/* language menu: a search box that stays on top while the list scrolls, and a divider after the most used languages */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang-menu__list { min-width: 15rem; max-height: min(72dvh, 30rem); padding-block-start: 0; }
.lang-menu__item { list-style: none; }
.lang-menu__search { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; gap: 0.5rem; margin: 0 -0.375rem 0.375rem; padding: 0.5rem 0.75rem; list-style: none; background: var(--ivory); border-block-end: 1px solid var(--line); }
.lang-menu__search svg { color: var(--gold-ink); flex: none; }
.lang-menu__search input { flex: 1; min-width: 0; min-height: 36px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.lang-menu__search:focus-within { box-shadow: inset 0 -2px 0 var(--gold); }
.lang-menu__sep { border-block-start: 1px solid var(--line); margin-block-start: 0.375rem; padding-block-start: 0.375rem; }
.lang-menu__empty { list-style: none; padding: 1rem 0.75rem; text-align: center; color: rgb(23 19 12 / 0.6); }
.lang-menu__list a[aria-current] span { font-weight: 800; color: var(--gold-ink); }
.lang-menu__sep.is-plain { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }

/* footer: the phone is a round handset button, the number is not written out */
.footer__call { display: flex; align-items: center; justify-content: center; padding: 0; width: 52px; height: 52px; margin-block-start: 0.5rem; border-radius: 50%; border: 1px solid rgb(227 199 143 / 0.55); background: rgb(227 199 143 / 0.1); color: #e3c78f; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out); }
.footer__contact a.footer__call { min-height: 52px; }
.footer__call:hover { background: #e3c78f; color: #14110d; border-color: #e3c78f; }
.footer__call:active { transform: scale(0.95); }
.footer__call:focus-visible { outline: 2px solid #e3c78f; outline-offset: 3px; }
.footer__call svg { display: block; margin: 0; flex: none; rotate: -15deg; transition: rotate 300ms var(--ease-out); }
@media (hover: hover) { .footer__call:hover svg { rotate: -28deg; } }
@media (prefers-reduced-motion: reduce) { .footer__call, .footer__call svg { transition: none; } }

/* the main menu: one dropdown on every screen, in groups with fine dividers */
.main-nav { display: none !important; }
.nav-menu { display: block !important; }
.nav-menu summary { width: auto; min-width: 44px; padding-inline: 0.5rem 0.875rem; grid-auto-flow: column; gap: 0.5rem; }
.nav-menu__label { display: none; font-weight: 700; }
@media (min-width: 48rem) { .nav-menu__label { display: inline; } }
.nav-menu[open] summary { color: var(--gold-ink); background: var(--gold-soft); }
.nav-menu__panel { min-width: min(18rem, calc(100vw - 2rem)); padding: 0.5rem; background: var(--ivory); border-color: var(--line); box-shadow: 0 18px 40px -14px rgb(60 40 10 / 0.35); transform-origin: top; animation: nav-in 160ms var(--ease-out); }
[dir="rtl"] .nav-menu__panel { transform-origin: top right; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.nav-menu__panel a { border-radius: 0.625rem; }
.nav-menu__panel a[aria-current] { background: var(--gold-soft); color: var(--gold-ink); box-shadow: none; }
.nav-menu__sep { margin: 0.375rem 0.5rem; border: 0; border-block-start: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .nav-menu__panel { animation: none; } }

/* the home title stays on one line: its size follows the width of its column, from small phones to wide screens */
.home-hero__copy { container-type: inline-size; width: 100%; min-width: 0; }
.home-hero h1 { white-space: nowrap; text-wrap: nowrap; line-height: 1.2; font-size: clamp(1rem, 1rem + 1.6vw, 3.25rem); }
@supports (font-size: 1cqi) {
  .home-hero h1 { font-size: clamp(1rem, 8.4cqi, 3.25rem); }
}

/* footer: "Contact us" is a link to the contact page, and the email lines up with the reading side (right in Arabic) */
.footer__contact { justify-items: start; }
.footer__contact a.footer__contact-link { display: inline-flex; min-height: 44px; align-items: center; gap: 0.375rem; text-decoration: none; }
.footer__contact a.footer__contact-link strong { color: #e3c78f; transition: color 160ms var(--ease-out); }
.footer__contact a.footer__contact-link::after { content: ""; width: 0.5rem; height: 0.5rem; border-block-start: 2px solid #e3c78f; border-inline-end: 2px solid #e3c78f; rotate: 45deg; translate: -2px 0; transition: translate 200ms var(--ease-out); }
[dir="rtl"] .footer__contact a.footer__contact-link::after { rotate: -135deg; translate: 2px 0; }
@media (hover: hover) { .footer__contact a.footer__contact-link:hover strong { color: #fff; } .footer__contact a.footer__contact-link:hover::after { translate: 1px 0; } [dir="rtl"] .footer__contact a.footer__contact-link:hover::after { translate: -1px 0; } }
.footer__contact a.footer__contact-link:focus-visible { outline: 2px solid #e3c78f; outline-offset: 3px; border-radius: 0.25rem; }
.footer__contact .footer__mail { justify-self: start; text-align: start; }
.footer__contact .footer__mail bdi { display: inline-block; text-align: start; }
@media (prefers-reduced-motion: reduce) { .footer__contact a.footer__contact-link::after { transition: none; } }