/* Rymotel public theme — base styles. */

:root {
	/* Palette (Sunlit modern, 2026-10-09; brand.css folded in) */
	--rym-brand-white: #ffffff;
	--rym-brand-cream: #fffdf8;
	--rym-brand-sand: #f6efe3;
	--rym-brand-sky: #eaf6fc;
	--rym-brand-line: #dceaf3;
	--rym-brand-navy: #1b3a57;
	--rym-brand-slate: #3f5a72;
	--rym-brand-blue: #278cc4;
	--rym-brand-blue-text: #1a74a8;
	--rym-brand-blue-deep: #165f8a;
	--rym-brand-coral: #f28c73;
	--rym-brand-coral-light: #f5a08a;
	--rym-brand-coral-text: #b4513a;

	/* Roles */
	--rym-color-bg: var(--rym-brand-cream);
	--rym-color-surface: var(--rym-brand-sky);
	--rym-color-surface-strong: var(--rym-brand-line);
	--rym-color-surface-warm: var(--rym-brand-sand);
	--rym-color-text: var(--rym-brand-navy);
	--rym-color-text-muted: var(--rym-brand-slate);
	/* Wow §0 (W7d): links and plain buttons in ink, underlined; blue stays the logo's and the Network badge's.
	   Hover lightens them to slate, a visible but quiet cue (navy to deep ink was barely visible). */
	--rym-color-link: var(--rym-brand-navy);
	--rym-color-link-on-warm: var(--rym-brand-navy);
	--rym-color-display: var(--rym-brand-blue);
	--rym-color-accent: var(--rym-brand-navy);
	--rym-color-accent-hover: var(--rym-brand-slate);
	--rym-color-on-accent: var(--rym-brand-cream);
	--rym-color-action: var(--rym-brand-coral);
	--rym-color-action-hover: var(--rym-brand-coral-light);
	--rym-color-on-action: var(--rym-brand-navy);
	--rym-color-coral-text: var(--rym-brand-coral-text);
	--rym-color-border: #c9dbe6;
	--rym-color-border-strong: #6e879c;
	--rym-color-focus: var(--rym-brand-coral-text);
	--rym-color-success-bg: #e3f2ea;
	--rym-color-success-text: #14532d;
	--rym-color-warning-bg: #fdf0dc;
	--rym-color-warning-text: #6a3a00;
	--rym-color-danger-bg: #fbeaea;
	--rym-color-danger-text: #8a1c1c;
	--rym-color-info-bg: var(--rym-brand-sky);
	--rym-color-info-text: var(--rym-brand-navy);
	--rym-color-accent-soft: var(--rym-brand-sky);
	--rym-color-network-bg: var(--rym-brand-sky);
	--rym-color-network-text: var(--rym-brand-blue-deep);
	--rym-color-marketplace-bg: var(--rym-brand-sand);
	--rym-color-marketplace-text: var(--rym-brand-navy);
	--rym-color-label-bg: #fde3db;
	--rym-color-label-text: #8a3a26;
	--rym-color-price: var(--rym-brand-navy);
	--rym-color-pin-bg: #0f2438;
	--rym-color-pin-text: var(--rym-brand-cream);
	--rym-color-pin-active-bg: var(--rym-brand-coral);
	--rym-color-pin-active-text: #0f2438;
	--rym-color-calendar-unavailable: #efece5;
	--rym-color-calendar-range: var(--rym-brand-sand);
	--rym-scrim: linear-gradient(180deg, rgb(27 58 87 / 0%) 35%, rgb(27 58 87 / 75%) 100%);

	/* Signature pass (2026-10-12, spec §3.2): ink band, glass, warm grounds, strong scrim. */
	--rym-color-ink: #0f2438;
	--rym-color-on-ink: var(--rym-brand-cream);
	--rym-color-on-ink-muted: rgb(255 253 248 / 74%);
	--rym-color-ink-line: rgb(255 253 248 / 16%);
	--rym-glass: rgb(255 253 248 / 85%);
	--rym-glass-solid: rgb(255 253 248 / 96%);
	--rym-glass-blur: blur(16px) saturate(1.4);
	--rym-gradient-sun: radial-gradient(120% 90% at 50% 0%, var(--rym-brand-sand) 0%, var(--rym-brand-cream) 72%);
	--rym-scrim-strong: linear-gradient(180deg, rgb(15 36 56 / 0%) 20%, rgb(15 36 56 / 55%) 62%, rgb(15 36 56 / 88%) 100%);

	/* Type */
	--rym-font-latin: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--rym-font-arabic: "Noto Sans Arabic", "Noto Sans Arabic Fallback", "Segoe UI", Tahoma, Arial, sans-serif;
	--rym-font-body: var(--rym-font-latin);
	/* Display face (spec §3.1): Instrument Serif for Latin titles, Noto Sans Arabic for Arabic ones (below). */
	--rym-font-display-latin: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
	--rym-font-display: var(--rym-font-display-latin);
	--rym-font-weight-serif: 400;
	--rym-letter-spacing-serif: -0.01em;
	--rym-line-height-display: 1.08;
	--rym-font-size-eyebrow: 0.8125rem;
	--rym-font-size-base: 1rem;
	--rym-font-size-small: 0.875rem;
	--rym-font-size-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
	--rym-font-size-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
	--rym-font-size-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	--rym-font-size-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
	--rym-font-size-h2-compact: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--rym-font-size-h3: 1.125rem;
	--rym-line-height: 1.6;
	--rym-line-height-tight: 1.15;
	--rym-font-weight-medium: 600;
	--rym-font-weight-bold: 700;
	--rym-font-weight-display: 800;
	--rym-letter-spacing-display: -0.03em;

	/* Space and shape */
	--rym-space-1: 0.25rem;
	--rym-space-2: 0.5rem;
	--rym-space-3: 0.75rem;
	--rym-space-4: 1rem;
	--rym-space-5: 1.5rem;
	--rym-space-6: 2rem;
	--rym-space-7: 3rem;
	--rym-space-8: 4.5rem;
	--rym-radius-small: 0.25rem;
	--rym-radius: 0.5rem;
	--rym-radius-card: 1rem;
	--rym-radius-large: 1.5rem;
	/* W9a: one radius for every photo frame, one for floating panels (popovers, the phone search card). */
	--rym-radius-photo: 0.875rem;
	--rym-radius-panel: 1.25rem;
	--rym-radius-pill: 999px;
	--rym-border-width: 1px;
	--rym-container-max: 80rem;
	--rym-container-wide: 90rem;
	--rym-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
	--rym-measure: 60ch;
	--rym-sidebar-width: 18rem;
	--rym-map-height: 70vh;
	--rym-map-height-mobile: 22rem;
	--rym-sticky-offset: 5.5rem;

	/* Depth (navy-tinted) */
	--rym-shadow-1: 0 1px 2px rgb(27 58 87 / 6%), 0 2px 8px rgb(27 58 87 / 6%);
	--rym-shadow-2: 0 4px 14px rgb(27 58 87 / 10%);
	--rym-shadow-3: 0 12px 32px rgb(27 58 87 / 18%);
	--rym-shadow-4: 0 2px 6px rgb(15 36 56 / 6%), 0 24px 64px -16px rgb(15 36 56 / 30%);
	--rym-shadow-raised: var(--rym-shadow-1);
	--rym-shadow-overlay: var(--rym-shadow-3);
	--rym-z-map-controls: 500;
	--rym-z-sheet: 800;
	--rym-z-booking-bar: 900;
	--rym-z-header: 1000;

	/* Interaction and motion */
	--rym-target-min: 44px;
	--rym-focus-width: 3px;
	--rym-focus-offset: 2px;
	--rym-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--rym-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--rym-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--rym-duration-press: 120ms;
	--rym-duration-small: 160ms;
	--rym-duration-panel: 240ms;
	--rym-duration-sheet: 320ms;
	--rym-transition: var(--rym-duration-small) var(--rym-ease-out);
	/* Signature motion scale (spec §3.3): UI 160/240 ms, reveals 420 ms; long ones named: hero, photo zoom. */
	--rym-dur-1: 160ms;
	--rym-dur-2: 240ms;
	--rym-dur-3: 420ms;
	--rym-dur-hero: 1100ms;
	--rym-dur-hero-rise: 600ms;
	--rym-dur-hero-photo: 1600ms;
	--rym-dur-zoom: 600ms;
	--rym-reveal-distance: 16px;
	--rym-reveal-stagger: 60ms;
	/* Wow pass (2026-10-12 addendum): hero crossfade and Ken Burns drift (named long motions), the one hairline. */
	--rym-dur-slide: 1200ms;
	--rym-dur-drift: 8200ms;
	--rym-hairline: rgb(15 36 56 / 8%);
	--rym-hairline-strong: rgb(15 36 56 / 16%);
	/* W7d: the vertical rhythm of every content page (Wow §0: 128-160 px on desktop, 72-96 px on phones). */
	--rym-section-space: clamp(4.5rem, 2.75rem + 6vw, 9rem);
}

:root:lang(ar) {
	--rym-font-body: var(--rym-font-arabic);
	--rym-font-size-eyebrow: 0.875rem;
	--rym-line-height: 1.8;
	--rym-line-height-tight: 1.35;
	--rym-font-weight-display: 700;
	--rym-letter-spacing-display: 0;
}

/* Arabic words on a Latin page (the « العربية » language link, French fallbacks marked lang="ar") */
[lang|="ar"] {
	font-family: var(--rym-font-arabic);
}

/* Latin pages (W9b): the Arabic brand face is downloaded on Arabic pages only. The language name keeps its look in a
   5 kB face of just its letters (fonts.css); any other Arabic word takes the system's Arabic face whole (a word never
   mixes two faces). */
:root:not(:lang(ar)) {
	--rym-font-arabic: "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
}
:root:not(:lang(ar)) :is(.language-switcher, .footer-languages) [lang|="ar"] {
	font-family: "Noto Sans Arabic Label", var(--rym-font-arabic);
}

/* The Latin display face never reaches Arabic text, wherever it sits (spec §2). */
:lang(ar) {
	--rym-font-display: var(--rym-font-arabic);
	--rym-font-weight-serif: 800;
	--rym-letter-spacing-serif: 0;
	--rym-line-height-display: 1.4;
}

/* Base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Anchors and keyboard focus stop below the sticky header (76 px), never under it (WCAG 2.4.11). */
	scroll-padding-block-start: 5.5rem;
}

body {
	margin: 0;
	background-color: var(--rym-color-bg);
	color: var(--rym-color-text);
	font-family: var(--rym-font-body);
	font-size: var(--rym-font-size-base);
	line-height: var(--rym-line-height);
	overflow-wrap: break-word;
}

/* A Latin name in a block <bdi> aligns with its Arabic label. */
bdi { text-align: -webkit-match-parent; text-align: match-parent; }

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

h1,
h2,
h3 {
	margin-block: 0 var(--rym-space-4);
	line-height: var(--rym-line-height-tight);
	font-weight: var(--rym-font-weight-bold);
}

h1 {
	font-size: var(--rym-font-size-h1);
}

h2 {
	font-size: var(--rym-font-size-h2);
}

/* Display titles (spec §3.1) */
h1,
h2,
.display {
	font-family: var(--rym-font-display);
	font-weight: var(--rym-font-weight-serif);
	letter-spacing: var(--rym-letter-spacing-serif);
	line-height: var(--rym-line-height-display);
	text-wrap: balance;
}

h1 em,
h2 em,
.display em {
	font-style: italic;
}

:lang(ar) :is(h1, h2, .display) em {
	font-style: normal;
}

/* Small uppercase label above a display title (Latin only: Arabic has no case and keeps its letter spacing). */
.eyebrow {
	margin-block: 0 var(--rym-space-3);
	font-family: var(--rym-font-body);
	font-size: var(--rym-font-size-eyebrow);
	font-weight: var(--rym-font-weight-bold);
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

:lang(ar) .eyebrow {
	letter-spacing: 0;
	text-transform: none;
}

p {
	margin-block: 0 var(--rym-space-4);
	max-inline-size: var(--rym-measure);
}

a {
	color: var(--rym-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--rym-color-accent-hover);
}

/* Focus: always visible for keyboard users. */

:focus-visible {
	outline: var(--rym-focus-width) solid var(--rym-color-focus);
	outline-offset: var(--rym-focus-offset);
}

#main:focus {
	outline: none;
}

/* Layout helpers */

.container {
	inline-size: 100%;
	max-inline-size: var(--rym-container-max);
	margin-inline: auto;
	padding-inline: var(--rym-gutter);
}

.stack > * + * {
	margin-block-start: var(--rym-space-6);
}

/* Skip link: hidden until focused. */

.skip-link {
	position: absolute;
	inset-inline-start: var(--rym-space-4);
	inset-block-start: calc(-1 * var(--rym-space-8));
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--rym-target-min);
	padding-block: var(--rym-space-2);
	padding-inline: var(--rym-space-4);
	background-color: var(--rym-color-accent);
	color: var(--rym-color-on-accent);
	border-radius: var(--rym-radius);
	font-weight: var(--rym-font-weight-bold);
	text-decoration: none;
}

.skip-link:focus {
	inset-block-start: var(--rym-space-4);
	color: var(--rym-color-on-accent);
}

/* Header (the bar itself: components.css) */

.site-brand {
	display: inline-flex;
	align-items: center;
	color: var(--rym-color-text);
	font-size: 1.375rem;
	font-weight: var(--rym-font-weight-bold);
	text-decoration: none;
}

.primary-menu__list,
.language-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rym-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu__list a,
.language-switcher__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--rym-target-min);
	min-inline-size: var(--rym-target-min);
	padding-inline: var(--rym-space-3);
	border-radius: var(--rym-radius);
	text-decoration: none;
}

.language-switcher__list a:hover {
	background-color: var(--rym-color-surface);
}

.language-switcher__list a[aria-current] {
	background-color: var(--rym-color-surface-strong);
	color: var(--rym-color-text);
	font-weight: var(--rym-font-weight-bold);
}

/* Buttons */

/* Plain .button colours (shape: components.css). */
.button {
	padding-block: var(--rym-space-2);
	background-color: var(--rym-color-accent);
	color: var(--rym-color-on-accent);
}

.button:hover {
	background-color: var(--rym-color-accent-hover);
	color: var(--rym-color-on-accent);
}

/* Health widget (rymotel-core, M0): a footnote (W9a), the dot and message only; the rest for screen readers. */
.rymotel-health { display: flex; justify-content: flex-start; min-block-size: calc(2.5rem + 1lh); padding-block: 1.25rem; border-block-start: 1px solid var(--rym-hairline); color: var(--rym-color-text-muted); font-size: .8125rem; }
.rymotel-health[hidden] { display: none; }
.rymotel-health__title, .rymotel-health__details { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rymotel-health__message { display: inline-flex; align-items: center; gap: var(--rym-space-2); margin: 0; }
.rymotel-health__message::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background-color: var(--rym-color-success-text); }
:is(.rymotel-health__message--degraded, .rymotel-health__message--unavailable)::before { background-color: var(--rym-color-warning-text); }

/* Entries */

.entry__content > * {
	max-inline-size: var(--rym-measure);
}

.entry__content > * + * {
	margin-block-start: var(--rym-space-4);
}

/* Motion preferences */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}