/*
 * v2 room page — No Zebra's design, Figma "D - Room+booking flow" (398:8947) and
 * "M - Room+booking flow" (398:9206). The booking section's own styles live in the booking plugin
 * (assets/css/rhb-v2.css); this file is the page around it.
 *
 * No Astra, no Elementor and no WooCommerce stylesheet is loaded on these pages (room-v2.php), so
 * everything the page needs is here, starting from a small reset.
 */

:root {
    --rh-obsidian: #0f1318;
    --rh-pergament: #ece5d6;
    --rh-pergament-tint: #ded3bc;
    --rh-evergreen: #243a30;
    --rh-paprika: #d6552b;
    --rh-paprika-light: #ebaa95;
    --rh-brass: #c89b51;
    --rh-peach: #e8ce8f;
    --rh-serif: "Instrument Serif", Georgia, serif;
    --rh-display: "Fraunces", Georgia, serif;
    --rh-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rh-gutter: 56px;
    --rh-content: 1328px;
}

/* ---- Base ------------------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body.rh-v2-page {
    /* The side padding of a section whose content is laid out on the section itself: the gutter, or
       on a screen wider than the design whatever centres the content at --rh-content, in line with
       the header. */
    --rh-edge: max(var(--rh-gutter), calc((100% - var(--rh-content)) / 2));
    margin: 0;
    background: var(--rh-obsidian);
    font: 400 16px/1.4 var(--rh-sans);
    color: var(--rh-obsidian);
    -webkit-font-smoothing: antialiased;
}

/* :where() keeps the reset at zero specificity, so every component rule below wins over it. */
:where(.rh-v2-page) img {
    max-width: 100%;
    height: auto;
}

:where(.rh-v2-page) :where(h1, h2, h3, p, figure, blockquote, dl, dd) {
    margin: 0;
}

:where(.rh-v2-page) a {
    color: inherit;
}

.rh-v2-page .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rh-visually-hidden,
.rh-skip:not(:focus) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rh-skip:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    background: var(--rh-pergament);
}

/* Printed in wp_footer by Astra-addon (scroll-to-top) and WooCommerce (the product gallery's
   lightbox), neither of which this page uses, and neither of which unhooks cleanly. */
#ast-scroll-top,
.pswp {
    display: none !important;
}

.rh-flip {
    transform: scaleX(-1);
}

/* Each section rises 16px into the one above with rounded top corners, as the design stacks them. */
.rh-main > section {
    position: relative;
    margin-top: -16px;
    border-radius: 16px 16px 0 0;
}

.rh-main > section:first-child {
    margin-top: 0;
    border-radius: 0;
}

/* ---- Buttons ---------------------------------------------------------------------------------- */

.rh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid var(--rh-paprika);
    border-radius: 8px;
    background: var(--rh-paprika);
    font: 600 16px/1.2 var(--rh-sans);
    color: var(--rh-pergament);
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s, background-color .15s, color .15s;
}

.rh-btn:hover {
    filter: brightness(1.08);
}

.rh-btn--outline {
    background: transparent;
    color: var(--rh-obsidian);
}

.rh-btn--outline-light {
    background: transparent;
    color: var(--rh-pergament);
}

/* On a transparent button the brightness above shows nothing; it fills with its border colour. */
.rh-btn--outline:hover,
.rh-btn--outline-light:hover {
    background: var(--rh-paprika);
    color: var(--rh-pergament);
    filter: none;
}

.rh-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.rh-square-btn,
.rh-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--rh-pergament-tint);
    cursor: pointer;
}

.rh-square-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.rh-round-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rh-pergament);
}

.rh-square-btn:hover:not(:disabled),
.rh-round-btn:hover:not(:disabled) {
    background: var(--rh-peach);
}

.rh-square-btn:disabled,
.rh-round-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* ---- Header ----------------------------------------------------------------------------------- */

.rh-nav--overlay {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 50;
}

.rh-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: var(--rh-content);
    margin: 0 auto;
}

.rh-nav-logo {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
}

.rh-nav-menu {
    margin-left: auto;
}

.rh-menu,
.rh-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-menu {
    display: flex;
    gap: 32px;
}

.rh-menu > li {
    position: relative;
}

/* Astra's menu walker still decorates the items (arrows, a toggle button); this menu needs none. */
.rh-menu .ast-icon,
.rh-menu .sub-arrow,
.rh-menu .ast-menu-toggle,
.rh-menu .dropdown-menu-toggle {
    display: none;
}

.rh-menu a {
    display: block;
    font: 600 16px/1.2 var(--rh-sans);
    color: var(--rh-pergament);
    text-decoration: none;
    white-space: nowrap;
}

.rh-menu a:hover {
    color: var(--rh-peach);
}

.rh-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 60;
    min-width: 240px;
    padding: 16px;
    border-radius: 8px;
    background: var(--rh-obsidian);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.rh-menu > li:hover > .sub-menu,
.rh-menu > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(12px);
}

.rh-menu .sub-menu a {
    padding: 8px 0;
    font-weight: 400;
}

/* The last items open toward the left, so their panel cannot run off the screen. */
.rh-menu > li:nth-last-child(-n+2) > .sub-menu {
    left: auto;
    right: -16px;
}

/* The panel (rh_v2_menu_shape() in room-v2.php): a column per group — a location and its rooms —
   and the remaining links stacked in a last column, as on the old site. --rh-groups and --rh-leaves
   are set on the item from the menu's own structure. */
.rh-menu > .rh-menu-mega > .sub-menu {
    display: grid;
    grid-template-columns: repeat(var(--rh-groups, 1), max-content) max-content;
    grid-template-rows: repeat(var(--rh-leaves, 1), auto) 1fr;
    column-gap: 48px;
    padding: 24px 32px;
}

.rh-menu-mega .rh-menu-group {
    grid-row: 1 / -1;
}

.rh-menu-mega .rh-menu-leaf {
    grid-column: -2;
}

.rh-menu-mega .rh-menu-group > a,
.rh-menu-mega .rh-menu-leaf > a {
    font: 600 14px/1.2 var(--rh-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* The third level stands open inside its column. */
.rh-menu-mega .sub-menu .sub-menu {
    position: static;
    min-width: 0;
    margin-top: 4px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    visibility: inherit;
    opacity: 1;
    transform: none;
    transition: none;
}

/* The fold button is for the burger menu only. */
.rh-sub-toggle {
    display: none;
}

.rh-nav-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 48px;
}

.rh-nav-lang {
    display: flex;
    gap: 4px;
    font-size: 16px;
    color: var(--rh-brass);
}

.rh-nav-lang a {
    text-decoration: none;
    opacity: .3;
}

.rh-nav-lang a.is-active {
    opacity: 1;
}

.rh-nav-divider {
    color: var(--rh-brass);
    opacity: .3;
}

.rh-nav-phone {
    font-size: 16px;
    color: var(--rh-pergament);
    text-decoration: none;
    white-space: nowrap;
}

.rh-cart {
    position: relative;
    display: inline-flex;
    padding: 8px;
    border-radius: 50%;
    background: var(--rh-paprika);
}

/* A fixed size: the reset's max-width: 100% inside this shrink-to-fit button resolves to nothing, and
   the icon vanished, leaving an empty orange dot. */
.rh-cart img {
    width: 24px;
    max-width: none;
    height: 24px;
}

.rh-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--rh-pergament);
    font: 700 12px/20px var(--rh-sans);
    color: var(--rh-obsidian);
    text-align: center;
}

.rh-nav-toggle {
    display: none;
}

/* ---- Hero ------------------------------------------------------------------------------------- */

.rh-hero {
    display: flex;
    flex-direction: column;
    gap: 46px;
    padding: 144px 0;
    background: var(--rh-obsidian);
    color: var(--rh-pergament);
    overflow: hidden;
}

.rh-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: calc(var(--rh-content) + 2 * var(--rh-gutter));
    margin: 0 auto;
    padding: 0 var(--rh-gutter);
}

.rh-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 763px;
}

.rh-breadcrumb {
    font: 600 12px/19.2px var(--rh-sans);
    color: var(--rh-brass);
}

.rh-breadcrumb a {
    text-decoration: none;
}

.rh-breadcrumb a:hover {
    text-decoration: underline;
}

.rh-hero-title {
    font: 400 80px/88px var(--rh-serif);
}

.rh-hero-lead {
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.25;
}

.rh-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rh-rating-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rh-rating-number {
    font: 700 24px var(--rh-display);
    color: var(--rh-brass);
}

.rh-rating-source {
    font: 600 12px/19.2px var(--rh-sans);
    color: var(--rh-brass);
}

.rh-stars {
    display: inline-flex;
}

/* Inside the content column like every other section, so a wide screen is not empty on the left and
   full on the right. The next image shows at the column's right edge: there is more. */
.rh-hero-gallery {
    padding: 0 var(--rh-edge);
}

.rh-hero-gallery .rh-slider-track {
    height: 421px;
}

.rh-hero-img {
    flex: 0 0 min(789px, 70vw);
    width: min(789px, 70vw);
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
}

.rh-hero-gallery .rh-slider-nav {
    margin-top: 32px;
}

/* ---- Facts ------------------------------------------------------------------------------------ */

.rh-facts {
    display: flex;
    gap: 80px;
    padding: 80px var(--rh-edge);
    background: var(--rh-evergreen);
    color: var(--rh-brass);
}

.rh-facts-list {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-right: 80px;
    border-right: 1px solid var(--rh-peach);
}

.rh-facts-list:only-child {
    border-right: 0;
}

.rh-fact {
    display: flex;
    gap: 24px;
}

.rh-fact-icon {
    flex: 0 0 32px;
}

.rh-fact-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rh-fact-value {
    font: 700 25.2px/1.2 var(--rh-display);
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.rh-fact-text {
    font: 600 12px/19.2px var(--rh-sans);
}

.rh-ghosts {
    display: inline-flex;
}

.rh-icon--inset {
    padding: 5px;
    object-fit: contain;
}

.rh-facts-media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.rh-facts-media .rh-slider-track {
    gap: 0;
    height: 475px;
    border-radius: 8px;
}

.rh-facts-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.rh-facts-nav {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    gap: 12px;
}

/* ---- Booking ---------------------------------------------------------------------------------- */

.rh-booking {
    padding: 120px var(--rh-edge);
    background: var(--rh-pergament-tint);
    scroll-margin-top: 0;
}

.rh-booking-head,
.rh-booking-form {
    max-width: var(--rh-content);
    margin: 0 auto;
}

.rh-booking-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 64px;
}

.rh-booking-title {
    font: 400 64px/72px var(--rh-serif);
}

.rh-notices:empty,
.rh-notices .woocommerce-notices-wrapper:empty {
    display: none;
}

.rh-notices ul,
.rh-notices .woocommerce-error,
.rh-notices .woocommerce-message,
.rh-notices .woocommerce-info {
    margin: 0 0 24px;
    padding: 16px 24px;
    border-left: 4px solid var(--rh-paprika);
    border-radius: 8px;
    background: var(--rh-pergament);
    list-style: none;
}

.rh-booking-form form.cart {
    margin: 0;
}

/* ---- Story ------------------------------------------------------------------------------------ */

.rh-story {
    display: flex;
    gap: 80px;
    padding: 120px var(--rh-edge);
    background: var(--rh-pergament);
}

.rh-story-media {
    flex: 1 1 0;
    min-width: 0;
}

.rh-story-img {
    width: 100%;
    height: 624px !important;
    object-fit: cover;
    border-radius: 8px;
}

.rh-story-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.rh-story-title {
    font: 400 72px/72px var(--rh-serif);
}

.rh-story-sub {
    margin-top: 8px;
    font: 400 40px/40px var(--rh-serif);
}

.rh-prose p {
    margin: 0 0 24px;
}

.rh-prose p:last-child {
    margin-bottom: 0;
}

.rh-prose h2,
.rh-prose h3,
.rh-prose h4 {
    margin: 0 0 16px;
    font: 400 32px/1.1 var(--rh-serif);
}

.rh-story .rh-btn-row {
    margin-top: 8px;
}

/* ---- Section heads (reviews, related) --------------------------------------------------------- */

.rh-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.rh-section-title {
    font: 400 80px/88px var(--rh-serif);
    color: var(--rh-pergament);
}

/* ---- Sliders ---------------------------------------------------------------------------------- */

.rh-slider-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.rh-slider-track::-webkit-scrollbar {
    display: none;
}

.rh-slider-item {
    scroll-snap-align: start;
}

/* Dragged with the mouse (room-v2.js). */
@media (hover: hover) and (pointer: fine) {
    .rh-slider.is-scrollable .rh-slider-track {
        cursor: grab;
    }
}

.rh-slider-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.rh-slider-nav--bar {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-top: 40px;
}

.rh-slider-nav[hidden] {
    display: none;
}

.rh-progress {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 8px;
    background: #314a3f;
    overflow: hidden;
}

.rh-progress-bar {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: #3e594d;
    transition: margin-left .2s, width .2s;
}

.rh-slider-arrows {
    display: flex;
    gap: 24px;
}

/* ---- Reviews ---------------------------------------------------------------------------------- */

.rh-reviews {
    padding: 120px var(--rh-edge) 136px;
    background: var(--rh-evergreen);
}

.rh-reviews .rh-section-head {
    margin-bottom: 40px;
}

.rh-reviews-slider .rh-slider-track {
    gap: 1px;
    border-radius: 8px;
}

.rh-review {
    flex: 0 0 calc(50% - .5px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: 64px 24px 40px;
    background: var(--rh-pergament);
}

.rh-review-mark {
    height: 27px;
    font: 400 120px/80px var(--rh-serif);
}

.rh-review-title {
    font-weight: 600;
    font-size: 20px;
}

.rh-review-text {
    font-style: italic;
    line-height: 21px;
}

.rh-review-author {
    font-weight: 600;
    line-height: 21px;
}

/* ---- Related rooms ---------------------------------------------------------------------------- */

.rh-related {
    padding: 120px var(--rh-edge);
    background: var(--rh-obsidian);
}

/* On the dark background the design's bar is light, with the position in brass. */
.rh-hero .rh-progress,
.rh-related .rh-progress {
    background: rgba(236, 229, 214, .85);
}

.rh-hero .rh-progress-bar,
.rh-related .rh-progress-bar {
    background: var(--rh-brass);
}

.rh-related .rh-section-title {
    margin-bottom: 56px;
}

.rh-card {
    position: relative;
    flex: 0 0 calc((100% - 32px) / 3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 681px;
    padding: 316px 24px 32px;
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
    color: var(--rh-pergament);
}

/* Picture and shade sit below the card's own stacking context, so the body and tags can stay
   unpositioned and the title's link stretches over the whole card (see .rh-card-title a::after). */
.rh-card-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.rh-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
}

/* The design's frame lines: brass bottom-left, peach top-right. */
.rh-card-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(var(--rh-brass), var(--rh-brass)) left 35px bottom 148px / 2.4px 302px no-repeat,
        linear-gradient(var(--rh-brass), var(--rh-brass)) left 72px bottom 110px / 204px 2.4px no-repeat,
        linear-gradient(var(--rh-peach), var(--rh-peach)) right 72px top 35px / 125px 2.4px no-repeat,
        linear-gradient(var(--rh-peach), var(--rh-peach)) right 35px top 72px / 2.4px 262px no-repeat;
}

/* The room's theme icon where the frame lines meet the card's corners (rh_v2_card_icon()). */
.rh-card-icon {
    position: absolute;
    z-index: 1;
    width: 28.8px;
    height: 28.8px;
    pointer-events: none;
}

.rh-card-icon--top {
    top: 24px;
    right: 24px;
}

.rh-card-icon--bottom {
    bottom: 99.6px;
    left: 24px;
}

/* The buttons stay above the stretched link; everything else on the card opens the room. */
.rh-card-actions {
    position: relative;
    z-index: 2;
}

/* Body, tags, buttons. The tags stand just above the brass line (bottom 110px), in the room between
   the facts and the buttons; without tags that room is the design's 80px. */
.rh-card-body + .rh-card-actions {
    margin-top: 80px;
}

.rh-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 40px;
}

.rh-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 43px;
    padding: 0 40px;
    list-style: none;
}

.rh-card-tags li {
    padding: 4px;
    border: 1px solid var(--rh-brass);
    font: 600 12px var(--rh-sans);
    color: var(--rh-brass);
}

.rh-card-title {
    font: 400 40px/1.1 var(--rh-serif);
}

.rh-card-title a {
    text-decoration: none;
}

.rh-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 8px;
}

.rh-card-title a:focus-visible {
    outline: none;
}

.rh-card-title a:focus-visible::after {
    outline: 2px solid var(--rh-peach);
    outline-offset: -4px;
}

.rh-card-teaser {
    font-size: 16px;
}

.rh-card-facts {
    display: flex;
    gap: 24px;
}

.rh-card-facts div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.rh-card-facts dd {
    font: 700 25.2px/1.2 var(--rh-display);
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.rh-card-facts dt {
    font: 600 10.8px/19.2px var(--rh-sans);
}

.rh-card-actions {
    display: flex;
    gap: 24px;
}

.rh-card-actions .rh-btn:first-child {
    flex: 1 1 auto;
}

/* ---- Footer ----------------------------------------------------------------------------------- */

.rh-footer {
    position: relative;
    margin-top: -16px;
    padding: 120px var(--rh-gutter) 40px;
    border-radius: 16px 16px 0 0;
    background: var(--rh-pergament);
}

.rh-footer-box {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: var(--rh-content);
    margin: 0 auto;
    padding: 80px 80px 40px;
    border-radius: 8px;
    background: var(--rh-obsidian);
    color: var(--rh-peach);
}

.rh-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.rh-footer-intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 379px;
}

.rh-footer-title {
    font: 400 48px/1.15 var(--rh-serif);
}

.rh-footer-lead {
    font-size: 20px;
}

.rh-footer-cols {
    display: flex;
    gap: 40px;
}

.rh-footer-cols > div {
    width: 270px;
}

.rh-footer-head {
    margin-bottom: 16px;
    font-weight: 700;
}

.rh-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-footer-links li + li {
    margin-top: 12px;
}

.rh-footer-links a,
.rh-footer-sub a {
    text-decoration: underline dotted;
    text-underline-position: from-font;
}

.rh-footer-divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--rh-peach);
}

.rh-footer-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rh-footer-contact .rh-footer-head {
    margin-bottom: 8px;
}

.rh-footer-contact a {
    text-decoration: none;
}

.rh-footer-sub {
    display: flex;
    justify-content: space-between;
    margin-top: -40px;
    font-size: 10px;
}

/* ---- Narrower screens ------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    :root {
        --rh-gutter: 32px;
    }

    .rh-nav-inner {
        padding: 0 var(--rh-gutter);
    }
}

/* ---- Header as a burger --------------------------------------------------------------------------
   The menu as a panel behind a button. On a narrow screen — and on a wide one whenever the menu, the
   language switch, the phone and the cart do not fit on one line (a long menu, an English page):
   parts/header.php sets .rh-nav--burger before the page is painted, so the cart is never pushed off
   the screen. */

/* While parts/header.php measures the row: no fades, so switching layout cannot be seen. */
.rh-nav--fitting,
.rh-nav--fitting * {
    transition: none !important;
}

/* No JavaScript, no burger: the row wraps rather than push the cart off the screen. */
.rh-nav:not(.rh-nav--js) .rh-nav-inner {
    flex-wrap: wrap;
}

.rh-nav--burger .rh-nav-cta {
    margin-left: 0;
}

/* The menu becomes a panel behind a button. */
.rh-nav--burger .rh-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.rh-nav--burger .rh-nav-toggle-bar,
.rh-nav--burger .rh-nav-toggle-bar::before,
.rh-nav--burger .rh-nav-toggle-bar::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--rh-pergament);
}

.rh-nav--burger .rh-nav-toggle-bar {
    position: relative;
}

.rh-nav--burger .rh-nav-toggle-bar::before,
.rh-nav--burger .rh-nav-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.rh-nav--burger .rh-nav-toggle-bar::before {
    top: -7px;
}

.rh-nav--burger .rh-nav-toggle-bar::after {
    top: 7px;
}

.rh-nav--burger .rh-nav-cta {
    margin-left: auto;
}

.rh-nav--burger .rh-nav-menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    margin: 0;
    padding: 112px var(--rh-gutter) 40px;
    background: var(--rh-obsidian);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, visibility .2s;
}

.rh-menu-open .rh-nav--burger .rh-nav-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.rh-nav--burger .rh-menu {
    flex-direction: column;
    gap: 24px;
}

.rh-nav--burger .rh-menu a {
    font-size: 24px;
}

.rh-nav--burger .rh-menu .sub-menu {
    position: static;
    min-width: 0;
    margin-top: 8px;
    padding: 0 0 0 16px;
    box-shadow: none;
    /* INHERIT, not visible: a visible child of the hidden panel stays clickable, and the closed
       menu's sub-links then lay invisibly over the page and caught clicks meant for the calendar. */
    visibility: inherit;
    opacity: 1;
    transform: none;
}

.rh-nav--burger .rh-menu .sub-menu a {
    font-size: 16px;
    /* A room or a location can be longer than a phone is wide. */
    white-space: normal;
}

/* Folded: a top-level item with a sub menu opens with its own button (rh_v2_menu_toggle()), so
   the panel starts as a short list. display:none, not visibility — a closed sub menu must not
   catch taps, for the reason above. */
.rh-nav--burger .rh-menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.rh-nav--burger .rh-menu > li > .sub-menu,
.rh-nav--burger .rh-menu > .rh-menu-mega > .sub-menu {
    flex-basis: 100%;
    display: none;
    padding: 0 0 0 16px;
}

.rh-nav--burger .rh-menu > li.is-open > .sub-menu {
    display: block;
}

.rh-nav--burger .rh-menu-mega .rh-menu-group {
    margin-top: 8px;
}

.rh-nav--burger .rh-menu-mega .sub-menu .sub-menu {
    padding-left: 16px;
}

.rh-nav--burger .rh-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--rh-pergament);
    cursor: pointer;
}

.rh-nav--burger .rh-sub-toggle::before {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .15s;
}

.rh-nav--burger .rh-menu > li.is-open > .rh-sub-toggle::before {
    transform: translateY(3px) rotate(-135deg);
}

@media (max-width: 1099px) {
    .rh-booking-head {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rh-card {
        flex-basis: calc((100% - 16px) / 2);
    }

    .rh-footer-top {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    :root {
        --rh-gutter: 16px;
    }

    .rh-nav--overlay {
        top: 16px;
    }

    .rh-nav-logo {
        width: 40px;
        height: 40px;
    }

    .rh-nav-divider,
    .rh-nav-phone {
        display: none;
    }

    /* The language switch stays, beside the cart — the only way to change language on a phone. */
    .rh-nav-cta {
        gap: 12px;
    }

    /* A finger-sized target without making the letters any bigger; the slash stays on their line. */
    .rh-nav-lang {
        align-items: center;
    }

    .rh-nav-lang a {
        padding: 10px 4px;
    }

    .rh-hero {
        gap: 40px;
        padding: 160px 0 80px;
    }

    .rh-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    .rh-hero-title {
        font-size: 64px;
        line-height: 72px;
    }

    .rh-hero-lead {
        font-size: 20px;
    }

    .rh-hero-content .rh-btn {
        width: 100%;
    }

    .rh-rating {
        align-self: center;
    }

    .rh-hero-gallery .rh-slider-track {
        gap: 8px;
        height: 220px;
    }

    /* The next image shows a sliver at the right, so it is clear there is more. */
    .rh-hero-img {
        flex-basis: calc(100vw - 2 * var(--rh-gutter) - 24px);
        width: calc(100vw - 2 * var(--rh-gutter) - 24px);
    }

    .rh-hero-gallery .rh-slider-nav {
        gap: 24px;
        margin-top: 24px;
    }

    .rh-facts {
        flex-direction: column;
        gap: 40px;
        padding: 80px var(--rh-gutter);
    }

    .rh-facts-list {
        padding-right: 0;
        border-right: 0;
    }

    .rh-facts-nav {
        left: auto;
        right: 16px;
        bottom: 16px;
    }

    .rh-facts-nav .rh-square-btn {
        width: 48px;
        height: 48px;
    }

    .rh-booking {
        padding: 80px var(--rh-gutter);
    }

    .rh-booking-head {
        margin-bottom: 40px;
    }

    .rh-booking-title {
        font-size: 48px;
        line-height: 56px;
    }

    .rh-story {
        flex-direction: column;
        gap: 40px;
        padding: 80px var(--rh-gutter);
    }

    .rh-story-img {
        height: auto !important;
        aspect-ratio: 1;
    }

    .rh-story-title {
        font-size: 48px;
        line-height: 52px;
    }

    .rh-story .rh-btn-row {
        flex-direction: column;
        gap: 16px;
    }

    .rh-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .rh-section-title {
        font-size: 48px;
        line-height: 56px;
    }

    .rh-reviews,
    .rh-related {
        padding: 80px var(--rh-gutter);
    }

    .rh-review,
    .rh-card {
        flex-basis: 90%;
    }

    .rh-reviews-slider .rh-slider-track {
        gap: 8px;
        border-radius: 0;
    }

    .rh-review {
        border-radius: 8px;
    }

    .rh-card {
        min-height: 431px;
        padding: 120px 16px 24px;
    }

    .rh-card-body {
        padding: 0 32px;
    }

    /* Above the brass line, which sits at bottom 80px here. */
    .rh-card-tags {
        margin: 12px 0 21px;
        padding: 0 32px;
    }

    .rh-card-body + .rh-card-actions {
        margin-top: 24px;
    }

    .rh-card-frame {
        background:
            linear-gradient(var(--rh-brass), var(--rh-brass)) left 22px bottom 100px / 2px 200px no-repeat,
            linear-gradient(var(--rh-brass), var(--rh-brass)) left 50px bottom 80px / 120px 2px no-repeat,
            linear-gradient(var(--rh-peach), var(--rh-peach)) right 50px top 22px / 100px 2px no-repeat,
            linear-gradient(var(--rh-peach), var(--rh-peach)) right 22px top 50px / 2px 160px no-repeat;
    }

    .rh-card-icon {
        width: 22px;
        height: 22px;
    }

    .rh-card-icon--top {
        top: 12px;
        right: 12px;
    }

    .rh-card-icon--bottom {
        bottom: 70px;
        left: 12px;
    }

    .rh-card-title {
        font-size: 28px;
    }

    .rh-slider-nav--bar {
        gap: 40px;
    }

    .rh-footer {
        padding: 80px var(--rh-gutter) 40px;
    }

    .rh-footer-box {
        gap: 40px;
        padding: 40px 24px;
    }

    .rh-footer-cols {
        flex-direction: column;
        gap: 12px;
    }

    .rh-footer-cols > div {
        width: auto;
    }

    .rh-footer-cols > div + div .rh-footer-head {
        display: none;
    }

    .rh-footer-contact {
        grid-template-columns: 1fr;
    }

    .rh-footer-sub {
        flex-direction: column;
        gap: 8px;
        margin-top: 0;
    }
}

/* The booking's mobile bar sits at the bottom of the screen; keep the footer's last line reachable. */
@media (max-width: 767px) {
    body.rh-v2-page:has(.rhb-v2-bar:not([hidden])) {
        padding-bottom: 80px;
    }
}