/*
 Theme Name:     Bill & John Theme
 Theme URI:      https://bakeweb.com/
 Description:    Made by Bake Web
 Author:         Bake Web
 Author URI:     https://bakeweb.com/
 Version:        2.0.1
*/

/*------------------------------------------------------------

#RESET

--------------------------------------------------------------*/

:root {
    --font-primary: "Lyon Display LG Web", Georgia, "Times New Roman", serif;
    --font-secondary: "Geologica", "Helvetica Neue", Arial, sans-serif;
    --color-white: #fff;
    --color-black: #171717;
    --Extra-Light-Grey: #fafafa;
    --Light-Grey: #dadada;
    --Medium-Grey: #a6a6a6;
    /* Figma White 100 - the tint behind the destination strip and the card labels. */
    --color-white-100: #f4f4f4;
    /*
     * The sticky header's real height - 24 of padding either side of the logo
     * block, which grows at 992. The hero subtracts it to fill what is left of
     * the viewport, so it has to track the header rather than be guessed at.
     */
    --header-height: 96px;
    --Dark-Grey: #5d5d5d;
    --spacing-small: clamp(20px, 2vw, 32px);
    --spacing-med: clamp(20px, 3vw, 64px);
    --spacing-large: clamp(20px, 6.65vw, 120px);
    --spacing-main: clamp(20px, 8vw, 216px);
    --body-text-large: clamp(18px, 2.5vw, 24px);
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/*
 * bootstrap.min.css is enqueued after style.css (see load_styles() in
 * inc/theme-setup.php), and it both redefines --bs-body-font-family in its
 * own :root and applies it to body. At equal specificity the later sheet
 * wins, so anything inheriting straight from body - section, header, footer,
 * main - fell back to Bootstrap's system-ui stack.
 *
 * Doubling the selector wins on specificity alone, with no !important and
 * without reordering the enqueues. The real fix is to declare the Bootstrap
 * handle as a dependency of style.css so WordPress orders vendor CSS first;
 * that shifts the cascade site-wide and belongs in its own change.
 */
:root:root {
    --bs-body-font-family: var(--font-primary);
}

/*
 * Lyon Display (Commercial Type, licence 2607-LJNZRE), Greek + Latin.
 * Ships as four static faces - 400/700, roman and italic - so any
 * font-weight below 400 renders as 400 and 600 renders as 700.
 */
@font-face {
    font-family: "Lyon Display LG Web";
    src: url("./assets/fonts/LyonDisplay-Regular-Gr-Web.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Display LG Web";
    src: url("./assets/fonts/LyonDisplay-RegularItalic-Gr-Web.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Display LG Web";
    src: url("./assets/fonts/LyonDisplay-Bold-Gr-Web.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lyon Display LG Web";
    src: url("./assets/fonts/LyonDisplay-BoldItalic-Gr-Web.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/*
 * Geologica (SIL Open Font License 1.1), behind --font-secondary. The Figma
 * pairs it with Lyon throughout - Lyon sets headings, Geologica sets body and
 * UI text - and unlike Lyon it has a real 300, which the footer's column
 * headings and newsletter subtitle are specified in.
 *
 * One variable face covers 100-900, so a weight the design asks for is a
 * weight that exists. Rebuilt from the Geologica.ttf that 4f8b6b1 removed
 * (343 KB, all four axes, Cyrillic included) with fontTools 4.63:
 *
 *   fonttools varLib.instancer -o wght.ttf Geologica.ttf CRSV=0 SHRP=0 slnt=0
 *   pyftsubset wght.ttf --flavor=woff2 --layout-features='*' \
 *       --name-IDs='*' --notdef-outline --recommended-glyphs \
 *       --unicodes-file=<every codepoint in the source except U+0400-U+052F>
 *
 * The three pinned axes are at their defaults and nothing here varies them;
 * Cyrillic goes because the site is Greek and English. 343 KB becomes 48 KB,
 * with modern Greek intact - the 77 codepoints of U+0370-U+03FF the source
 * carried all survive.
 *
 * Preloaded alongside the two Lyon faces in header.php: since issue #28 put
 * the header's MENU label and Book Now button back in Geologica, it is an
 * above-the-fold face on every page rather than a footer one.
 */
@font-face {
    font-family: "Geologica";
    src: url("./assets/fonts/Geologica-LatinGreek-VF.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

/*
 * The frame's ground is Off-White, not white - every template sits on #FFFCFC,
 * and only the blog post tints parts of itself (#F4F4F4, `--color-white-100`).
 *
 * `html body` rather than `body`: bootstrap.min.css is enqueued after this
 * sheet and paints `body` from `--bs-body-bg`, so at equal specificity the
 * white won. See the cascade note above `:root:root`.
 */
html body {
    background: var(--color-offwhite);
}

body {
    color: var(--color-black);
    font-family: var(--font-primary);
}

div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
label,
input,
a {
    font-family: var(--font-primary);
}

img {
    max-width: 100%;
    height: auto;
}

/*
 * Anything that acts like a control says so under the cursor. Buttons default
 * to an arrow, and the theme had been adding `cursor: pointer` one component at
 * a time - which is how the listing's view switch, the amenity dialog's close
 * and every `.btn-main` ended up feeling dead to the hand.
 *
 * `:disabled` keeps its arrow, because a disabled control is not clickable.
 */
button:not(:disabled),
summary,
label[for],
[role="button"]:not([aria-disabled="true"]),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="submit"]:not(:disabled),
.btn-main,
.btn-dark {
    cursor: pointer;
}

video {
    max-width: 100%;
}

a {
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
}

button {
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
}

a,
a:hover,
a:focus {
    text-decoration: none !important;
}

.nooverflow {
    overflow: hidden !important;
    touch-action: none;
    -ms-touch-action: none;
}

.center {
    text-align: center;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.align-center {
    display: flex;
    align-items: center;
}

.spacing {
    padding: 60px 0;
}

.nopad {
    padding: 0 !important;
}

.menu {
    margin: 0;
    padding: 0;
}

.h1 {
    font-size: clamp(40px, 4.5vw, 80px) !important;
    font-weight: 200 !important;
}

.h2 {
    font-size: clamp(34px, 4.5vw, 68px) !important;
    font-weight: 200 !important;
}

.h3 {
    font-size: clamp(28px, 3.88vw, 56px) !important;
    font-weight: 200 !important;
    line-height: 105% !important;
}

.h4 {
    font-size: clamp(20px, 3.5vw, 38px) !important;
    font-weight: 200 !important;
    line-height: 110% !important;
}

.h5 {
    font-size: clamp(18px, 3.5vw, 28px) !important;
    font-weight: 200 !important;
}

/*
 * Section heading, Figma `2003:777`. 48 at 1440 down to the frame's 28 mobile
 * H2, always Lyon 400 at 1.1, and every one of them carries an italic run -
 * "A curated collection", "Awards of Excellence", "Our guests speak for us".
 * The emphasis stays inside the string as <em> so a translator can move it.
 */
.section-heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3.334vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
}

.section-heading em {
    font-style: italic;
}

.body-text {
    font-size: clamp(16px, 1.66vw, 20px) !important;
}

.body-text-large {
    font-size: var(--body-text-large) !important;
}

.mi-small {
    margin-inline: var(--spacing-small);
}

.mi-med {
    margin-inline: var(--spacing-med);
}

.mi-large {
    margin-inline: var(--spacing-large);
}

.mi-main {
    margin-inline: var(--spacing-main);
}

.pi-small {
    padding-inline: var(--spacing-small);
}

.pi-med {
    padding-inline: var(--spacing-med);
}

.pi-large {
    padding-inline: var(--spacing-large);
}

.pi-main {
    padding-inline: var(--spacing-main);
}

.pb-small {
    padding-block: var(--spacing-small);
}

.pb-med {
    padding-block: var(--spacing-med);
}

.pb-large {
    padding-block: var(--spacing-large);
}

.pb-main {
    padding-block: var(--spacing-main);
}

.c-white {
    color: var(--color-white);
}

.c-white a {
    color: var(--color-white);
}

.c-black {
    color: var(--color-black);
}

.bgc-white {
    background: var(--color-white);
}

.bgc-black {
    background: var(--color-black);
}

.collapse,
.collapsing {
    opacity: 0;
    overflow: hidden;
    height: 0;
    transition: opacity 0.4s ease;
    height: 100%;
}

.collapse.show {
    opacity: 1;
    height: auto;
}

/*
 * Primary CTA, Figma `2003:730`. One component with two fills - Off-White on
 * dark ground, Shark on light - sharing 18/32 padding, a 1px border of its own
 * fill and Geologica 16/24. It reads the same in every frame it appears in, so
 * it is set once here rather than per section.
 */
.btn-main {
    background: var(--color-offwhite);
    border: 1px solid var(--color-offwhite);
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 18px 32px;
}

.btn-main.bordered {
    border: 2px solid var(--color-black);
}

/*
 * Slider control, Figma `1:1250` (Featured Stays) and `1:1333` (Reviews) - one
 * component in the frame, so one rule here. An 80px disc on the Off-White
 * ground with a Silver hairline, prev and next either side of a small ringed
 * dot, sitting over the rail at the vertical middle of the card images.
 */
.slider-nav-disc {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--color-offwhite);
    border: 1px solid var(--Medium-Grey);
    border-radius: 50%;
    height: 80px;
    width: 80px;
    position: absolute;
    top: calc(50% - 40px);
    left: 62.5%;
    z-index: 5;
}

.slider-nav-disc .slider-nav-btn {
    position: static;
    height: 16px;
    width: 16px;
    margin-top: 0;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.slider-nav-disc .slider-nav-btn::after {
    height: 100%;
    font-size: 0;
}

.slider-nav-disc .swiper-button-prev.slider-nav-btn::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M0.833527 9.9979L6.37144 16.2458L7.30687 15.4167L3.05785 10.6229L19.1687 10.6229V9.3729L3.05785 9.3729L7.30687 4.57913L6.37144 3.75L0.833527 9.9979Z" fill="%23212529"/></svg>');
}

.slider-nav-disc .swiper-button-next.slider-nav-btn::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6306 3.75L19.1685 9.9979L13.6306 16.2458L12.6952 15.4167L16.9442 10.6229H0.833344V9.3729H16.9442L12.6952 4.57913L13.6306 3.75Z" fill="%23212529"/></svg>');
}

.slider-nav-disc .swiper-circle::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4.5" stroke="%235D5D5D"/><circle cx="5" cy="5" r="1.5" stroke="%235D5D5D"/></svg>');
}

.slider-nav-disc .swiper-button-disabled {
    opacity: 0.35;
}

/*
 * Secondary CTA, Figma `2003:733`. Same box as the primary, no fill, a Silver
 * hairline instead - the frame uses it for the card buttons that sit on a
 * tinted ground and should not compete with the heading.
 */
.btn-outline {
    background: transparent;
    border: 1px solid var(--Medium-Grey);
    color: var(--color-shark);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 18px 32px;
}

.btn-dark {
    background: var(--color-shark);
    border: 1px solid var(--color-shark);
    color: var(--color-offwhite);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 18px 32px;
}

.scroll-indicator svg path:nth-child(2) {
    display: none;
}

/*------------------------------------------------------------

#ANIMATION

--------------------------------------------------------------*/

/*
 * main.js wraps every word of the label in a span, and the global `span` rule
 * above would then paint the words in Lyon whatever face the button itself
 * names - which is how nearly every CTA came out serif against a Figma that
 * sets them all in Button CTA. The words take the button's font instead.
 */
.anim-swipe-up span {
    font: inherit;
    display: inline-block;
    position: relative;
    transform: translateY(0);
    opacity: 1;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* Hover effect */
.anim-swipe-up:hover span {
    animation:
        swipe-up-out 0.3s ease forwards,
        swipe-up-in 0.3s ease 0.3s forwards;
}

/* Add delay for the second span */
.anim-swipe-up span:nth-child(2) {
    animation-delay: 0.1s, 0.3s; /* Delay for out and in animations */
}

/* Keyframes for moving out of view */
@keyframes swipe-up-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Keyframes for moving back into view */
@keyframes swipe-up-in {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/*------------------------------------------------------------

#BREADCRUMBS

--------------------------------------------------------------*/

.breadcrumb-wrapper {
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    padding-block: 4px;
}

#crumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#crumbs a {
    color: var(--color-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
}

#crumbs span.current {
    color: var(--Dark-Grey);
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
}

/*------------------------------------------------------------

#HOME ONLY

--------------------------------------------------------------*/

/*
 * The homepage header used to be transparent with the content pulled up 105
 * underneath it, so the hero ran behind the logo and the menu. The frame puts
 * a solid bar above the hero instead, so the overrides that did that are gone
 * and .header-wrapper's own white ground and rule stand on the homepage as
 * they do everywhere else.
 */

/*------------------------------------------------------------

#HEADER

--------------------------------------------------------------*/

.header-wrapper {
    background: var(--color-white);
    padding: 16px 32px;
    border-bottom: 1px solid transparent;
    -webkit-transition: background-color ease-in-out 0.3s, border-color ease-in-out 0.3s;
    -moz-transition: background-color ease-in-out 0.3s, border-color ease-in-out 0.3s;
    -o-transition: background-color ease-in-out 0.3s, border-color ease-in-out 0.3s;
    transition: background-color ease-in-out 0.3s, border-color ease-in-out 0.3s;
}

/* .active-sticky is toggled by bjBindScrollToggle() in assets/js/main.js once
   the page scrolls past 105px - the border only appears then. */
.header-wrapper.active-sticky {
    border-bottom-color: var(--Light-Grey);
}

.header-wrapper .logo.logo-dark {
    display: none;
}

.header-wrapper .logo.logo-light {
    display: block;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1001;
}

.desktop-menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-logo .logo {
    width: clamp(150px, 12.5vw, 250px);
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    margin: 0;
    padding: 0;
}

.navbar-nav.main {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.navbar-nav.main .sub-menu {
    display: none;
}

.navbar-nav.main li.menu-item-has-children {
    position: relative;
}

.navbar-nav.main li.menu-item-has-children .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
}

.navbar-nav.main li.menu-item-has-children:hover .sub-menu {
    display: block;
}

.navbar-nav.main li a {
    color: var(--color-black);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
}

.navbar-nav.main li.menu-item-has-children:hover .sub-menu {
    background: var(--color-white);
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    width: 960px;
    height: 463px;
    padding: 20px;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
}

/* .navbar-nav.main li.menu-item-has-children:hover .sub-menu {
    display: grid !important;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    gap: 20px;
    background: var(--color-white);
    padding: 20px;
    width: 650px;
    height: auto;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    list-style: none;
} */

.navbar-nav.main .sub-menu li {
    color: var(--color-black) !important;
    border-right: 2px solid var(--Light-Grey);
    padding: 10px;
}

.navbar-nav.main .sub-menu li:nth-child(n + 28) {
    border-right: none;
}

.navbar-nav.main .sub-menu li a {
    color: inherit !important;
}

.navbar-nav.main li.menu-item-has-children::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.menu-buttons-wrapper {
    display: flex;
    flex-direction: row-reverse;
    gap: 16px;
}

/*------------------------------------------------------------

#PAGES

--------------------------------------------------------------*/

.page-title {
    font-weight: 200;
    line-height: 100%;
    padding: var(--spacing-small) 0 var(--spacing-med);
    margin: 0 !important;
}

.blog-post-image-wrapper {
    position: relative;
}

.post-bg {
    display: none;
    position: absolute;
    bottom: 0;
}

.post-bg svg {
    width: 100%;
    max-width: 100%;
}

.post-bg svg path {
    fill: var(--color-white);
}

.blog-post:nth-child(3) .post-bg,
.blog-post:nth-child(9) .post-bg {
    display: block;
}

.blog-post:nth-child(2) .post-bg,
.blog-post:nth-child(6) .post-bg {
    display: block;
    transform: rotateY(180deg);
}

body .is-layout-flex .inline-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/*
 * The header stay search lives in big-menu.css, beside the bar that opens it.
 * These two rules only keep the overlay out of the page until it is opened;
 * the rest of the old dark scrim is gone.
 */
.full-overlay-search {
    display: none;
}

.full-overlay-search.active {
    display: flex;
}

/*------------------------------------------------------------

#FOOTER

--------------------------------------------------------------*/

/*
 * Figma: `Footer` (1:1347) and `Last section` (1:1346), the newsletter block
 * that replaced the prefooter title strip.
 *
 * Body and UI text here is Geologica per the frames - see --font-secondary at
 * the top of this file. Lyon sets one thing, the newsletter title.
 *
 * The frame's 115.2px horizontal inset is 8vw at 1440, which is what
 * --spacing-main already produces, so the columns and the lower band keep
 * pi-main rather than hardcoding it. The frame's 223.9px column gap and
 * 195.55px socials-to-copyright gap are auto-layout distributing slack, not
 * measurements to pin: both are space-between with a floor.
 *
 * style.css loads before wpforms-full.min.css, so the rules that reach into the
 * form are written long enough to win on specificity rather than on order.
 */

.footer-wrapper {
    background: var(--color-shark);
    color: var(--color-offwhite);
}

/*------------------------------------------------------------

#FOOTER NEWSLETTER

--------------------------------------------------------------*/

.footer-newsletter {
    /* Frame: 120 top, 72 bottom. */
    padding-block: clamp(64px, 8.33vw, 120px) clamp(40px, 5vw, 72px);
}

.footer-newsletter-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 3.33vw, 48px);
    /* px 250 at 1440 leaves the text 940px to sit in. */
    max-width: 940px;
    margin-inline: auto;
    padding-inline: var(--spacing-small);
}

.footer-newsletter-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    width: 100%;
}

.footer-newsletter-title {
    font-family: var(--font-primary);
    font-size: clamp(32px, 3.33vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-offwhite);
    margin: 0;
}

.footer-newsletter-title em,
.footer-newsletter-title i {
    font-style: italic;
}

.footer-newsletter-subtitle {
    font-family: var(--font-secondary);
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-offwhite);
    margin: 0;
}

/*
 * The form itself is styled in assets/css/bmwp.css, alongside the theme's other
 * WPForms rules and after them in the cascade. Those rules are written against
 * every form on the site with [id^="wpforms-"] selectors and !important on the
 * type, so a footer-only override has to sit downstream of them rather than
 * here.
 */
.footer-newsletter-form {
    width: 100%;
    max-width: 537.81px;
}

/*------------------------------------------------------------

#FOOTER COLUMNS

--------------------------------------------------------------*/

.footer-navigation {
    display: flex;
    justify-content: space-between;
    /* Frame: 223.9 between columns, which is slack rather than a measurement. */
    gap: clamp(32px, 4.44vw, 64px);
    /* Frame: the Footer's own 96 padding-top, below the newsletter's 72. */
    padding-top: clamp(48px, 6.67vw, 96px);
}

.footer-nav-title {
    color: var(--Medium-Grey);
    font-family: var(--font-secondary);
    font-size: clamp(18px, 1.39vw, 20px);
    font-weight: 300;
    line-height: 1.3;
    text-transform: none;
}

.navbar-nav.footer {
    display: flex;
    gap: 8px;
}

.footer-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-info-title {
    color: var(--color-offwhite);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.footer-info-row {
    display: flex;
    gap: 16px;
}

.footer-info-row svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.footer-info-link,
.footer-menu li a {
    color: var(--color-offwhite);
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
}

.footer-bg-wrapper {
    position: relative;
    width: 100%;
    /*
     * Clips the parallax travel - assets/js/footer-parallax.js slides the
     * photograph down from its resting position as the footer comes into view,
     * and without this it would hang below the footer over the page background.
     */
    overflow: hidden;
}

.lower-footer-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 0;
    z-index: 5;
}

.socials {
    display: flex;
    gap: 16px;
    align-items: center;
}

.socials a {
    display: flex;
    align-items: center;
}

/*
 * The frame's icons are 20x22 and then three at 24x24, which is what the
 * uploaded files already are. Bounding rather than setting a size keeps each
 * icon's own geometry and stops a larger upload from setting the row's height.
 */
.socials img {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
}

.copyright-wrapper {
    display: flex;
    justify-content: space-between;
}

.copyright-text {
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.footer-bg-image {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
    will-change: transform;
}

.www-logo {
    display: flex;
    gap: 16px;
}

/*------------------------------------------------------------

#SINGLE ARTICLE

--------------------------------------------------------------*/

/*
 * These are the service posts' - `template-parts/single-service.php`. The blog
 * post shares the `.single-article` wrapper but is styled by single-post.css
 * now, so the title rule is pinned to the `h2` class only the service template
 * puts on it; unpinned, its 32px margin fought the hero's own spacing.
 *
 * The old `.article-date` rule went with the redesign. Its 24px margin-bottom
 * was on a flex item, so the date chip's margin box centred and the chip itself
 * sat 12px high of the reading time beside it.
 */
h1.article-title.h2 {
    margin: 32px 0;
}

img.article-featured-image {
    max-height: 820px;
    width: 100%;
    object-fit: cover;
}

.single-article .is-layout-flex {
    display: flex;
    justify-content: space-between;
}

.wp-block-column p {
    font-size: 20px;
    font-weight: 300;
    line-height: 140%;
}

.single-article .wp-block-image img {
    max-height: 700px;
    width: 100%;
    object-fit: cover;
}

section.more-posts-section {
    background: var(--Light-Grey);
    margin-bottom: var(--spacing-large);
}

.more-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-med);
}

.more-posts-content {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.more-posts-content article.blog-post {
    background: var(--color-white);
    display: flex;
    flex: 1 0 calc(33% - 32px);
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    max-width: none;
}

.more-posts-content.yachts-content article.blog-post {
    background: none;
    box-shadow: none;
    justify-content: flex-start;
}

img.blog-featured-image {
    object-fit: cover;
    width: 100%;
}

.yachts-content img.blog-featured-image {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 576 / 367;
}

.blog-post-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: clamp(12px, 2.25vw, 40px);
}

.yachts-content .blog-post-content {
    flex-direction: column;
    gap: 10px;
    padding: clamp(12px, 2.25vw, 24px);
}

.yacht-details {
    display: flex;
    gap: 24px;
}

.yacht-details span {
    color: var(--Dark-Grey);
    font-size: 16px;
    font-weight: 300;
    line-height: 140%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.yacht-details span strong {
    color: var(--color-black);
    font-weight: bold;
}

p.blog-title {
    font-size: var(--body-text-large) !important;
    font-weight: 400;
    line-height: 140%;
    margin: 0;
}

p.blog-title a {
    color: var(--color-black);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

p.blog-excerpt {
    color: var(--Dark-Grey);
    font-size: 16px;
    font-weight: 300;
    line-height: 140%;
    margin: 0;
}

.blog-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.load-more-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: var(--spacing-small);
}

/*
 * A hidden button still has a wrapper, and the wrapper still has its margins -
 * so hiding the last page's Load more left the gap it used to sit in. The
 * wrapper holds nothing else, so it goes with it.
 */
.load-more-wrapper:has(> [hidden]) {
    display: none;
}

/*------------------------------------------------------------

#SINGLE ACCOMMODATION

--------------------------------------------------------------*/

.accommodation-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-small);
}

.accommodation-title {
    margin-bottom: 0 !important;
}

.accommodation-buttons {
    display: flex;
    gap: 16px;
}

.accommodation-data {
    display: flex;
    align-items: center;
    /* gap: 32px; */
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 300;
    line-height: 140%;
    padding: 25px 0 5px;
}

.accommodation-data.is-hotel {
    padding: 25px var(--spacing-main) var(--spacing-med) var(--spacing-main);
}

.accommodation-data span {
    color: var(--Dark-Grey);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 16px;
}

.accommodation-data span strong {
    color: var(--color-black);
    font-weight: bold;
}

.accommodation-address {
    display: flex;
    gap: 5px;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    color: var(--Dark-Grey);
    padding-bottom: 5px;
}
.accommodation-address a {
    color: var(--Dark-Grey);
}
.accommodation-gallery {
    display: flex;
    gap: 12px;
    position: relative;
}

.accommodation-galleries .layout-title.follows-accomodation-data {
    padding-bottom: 0;
}

.thumb-image {
    height: 100%;
    object-fit: cover;
}

.swiper-container-accommodation {
    flex: 1 0 80%;
}

.swiper-container-accommodation .gallery-image {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.swiper-container-layout {
    padding-left: var(--spacing-med) !important;
}

.layout-gallery img.gallery-image {
    aspect-ratio: 288 / 233;
    object-fit: cover;
    cursor: grab;
}

.swiper-container-thumb .swiper-wrapper {
    max-height: clamp(500px, 5vw, 700px);
}

.gallery-button-wrapper {
    position: absolute;
    z-index: 5;
    bottom: 20px;
    right: 20px;
}

.show-gallery-btn {
    background: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gallery-modal {
    display: none;
}

.gallery-modal.active {
    background: rgba(0, 0, 0, 0.7);
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
}

.modal-wrapper {
    background: var(--Extra-Light-Grey);
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 40px;
    right: 40px;
    border-radius: 16px;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: flex-end !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--Light-Grey) !important;
}

.gallery-modal-close {
    cursor: pointer;
}

.gallery-modal-content {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 80px) !important;
}

/*
 * A set width rather than a max-width: an image that has not loaded yet has no
 * width to cap, so Masonry measured every tile at zero or at full size and the
 * grid shuffled itself as the photos came in. Four columns, three 10px gutters.
 *
 * Masonry positions the tiles absolutely, so their 100% is the container's
 * padding box while it counts columns in the content box - the 20px either
 * side comes off too, or the fourth column misses by a few pixels.
 */
.gallery-modal-content .gallery-image {
    width: calc((100% - 40px - 30px) / 4);
    height: auto;
    margin-bottom: 10px;
    /* The reserved box shows as a placeholder until its photo arrives. */
    background: var(--Light-Grey);
}

.lg-backdrop {
    z-index: 1350 !important;
}

.lg-outer {
    width: 100%;
    height: 100%;
    z-index: 1350 !important;
}

.lg-outer .lg-img-wrap .lg-object.lg-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: scale-down;
}

.accommodation-amenities.pb-large.mb-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background-repeat: repeat;
    background-image: url("./images/BG.png");
}

/* Amenities - Figma 1:3817.
   Two columns of four, filled column-first so the reading order down a column
   matches the order the dialog lists them in. grid-auto-flow: column with a
   fixed four-row track is what produces that; row-first flow would interleave
   the two columns. */
.amenities-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 24px;
    width: 100%;
    max-width: 640px;
    margin-top: var(--spacing-small);
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* One box for every icon, whatever it is made of. The font icons size by
   font-size, the SVGs are <img> and size by width/height - the uploaded files
   range from 24px to 800px intrinsic, so they need pinning, and the old
   `.amenity-item svg` rule stopped matching when they became images. */
.amenity-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

img.amenity-icon {
    object-fit: contain;
}

/* The icon font draws on the pseudo-element, and milenia-font.css sizes that
   at 50px with a 12px margin - sizing the <i> alone does nothing. That
   stylesheet is enqueued after this one, so the override has to out-specify
   its `[class^="milenia-font-icon-"]:before` rather than merely follow it. */
.amenity-item i.amenity-icon::before {
    font-size: 20px;
    margin: 0;
}

/* Geologica, as node 1:3817 has it - `span` is one of the elements the global
   rule near the top of this file pins to Lyon. */
.amenity-name {
    min-width: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
}

/*
 * The rule underlines the label and not the whole control. `text-decoration`
 * on the button drew through the "+" as well and broke across the flex gap, so
 * it read as two stray dashes rather than one link.
 */
.amenities-show-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-secondary);
    font-size: 16px;
    /* Button CTA is Geologica Regular, not Light - node 1:3898. */
    font-weight: 400;
    line-height: 24px;
    color: var(--color-black);
    cursor: pointer;
}

/*
 * The label and the "+" are spans, so the global rule near the top of this file
 * pins them to Lyon and the button's own Geologica never reaches the only text
 * it has. Same trap `.amenity-name` documents just above.
 */
.amenities-show-all-label,
.amenities-show-all-plus {
    font-family: inherit;
}

.amenities-show-all-label {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.amenities-show-all:hover {
    opacity: 0.7;
}

.amenities-show-all-plus {
    font-size: 16px;
    text-decoration: none;
}

/*
 * Between five and eight amenities the dialog is there for the phone's sake -
 * the desktop grid is already showing every one of them, so offering to show
 * them all would open a dialog onto the same list.
 */
@media (min-width: 992px) {
    .amenities-show-all.is-mobile-only {
        display: none;
    }
}

.amenities-dialog[hidden] {
    display: none;
}

/* Above the sticky header (1001) and the Big Menu and search sheets (1002).
   At 1000 the header sat on top of it, which on mobile - where the dialog is
   the whole viewport, node 1:4854 - meant the sheet opened underneath the
   site's own logo and Book Now button instead of replacing them. */
.amenities-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-small);
}

/* Same reason as the Big Menu's rule in big-menu.css - a fixed overlay ignores
   the margin the admin bar puts on <html> - but only where the bar is actually
   fixed. Below 601px WordPress switches it to position:absolute, so it scrolls
   away with the page while an offset here would not: the gap left at the top
   of a scrolled page showed the sticky site header straight through the
   full-screen sheet. Under 601px the sheet covers the bar instead, which is
   what a page of its own should do. */
@media (min-width: 601px) {
    body.admin-bar .amenities-dialog {
        top: 46px;
    }
}

@media (min-width: 783px) {
    body.admin-bar .amenities-dialog {
        top: 32px;
    }
}

.amenities-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 23, 23, 0.4);
}

.amenities-dialog-panel {
    position: relative;
    background: var(--color-white);
    width: min(760px, 100%);
    max-height: min(80vh, 720px);
    overflow-y: auto;
    padding: 48px;
    text-align: left;
}

.amenities-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.amenities-dialog-title {
    margin: 0;
}

.amenities-dialog-close {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-black);
    cursor: pointer;
}

/* Two closes in the markup, one shown at a time: the panel over the page keeps
   its glyph, the full-screen sheet takes the Big Menu's 24px icon, which is
   what node 1:4854 draws. */
.amenities-dialog-logo,
.amenities-dialog-close-icon {
    display: none;
}

/* Two columns, filled column-first like the eight-item grid outside. Multicol
   rather than grid because the dialog holds however many amenities the stay
   has: `columns` balances an unknown count across two columns on its own,
   where a column-flow grid would need its row count computed in PHP. Multicol
   has no gap property, so the row rhythm is margin on the items. */
.amenities-dialog-list {
    columns: 2;
    column-gap: 48px;
}

.amenities-dialog-list .amenity-item {
    break-inside: avoid;
    margin-bottom: 24px;
}

.amenities-dialog-list .amenity-item:last-child {
    margin-bottom: 0;
}

.similar-properties-title {
    margin-bottom: var(--spacing-small) !important;
}

.similar-properties-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

























/* SWIPER */

.accommodation-swiper {
    overflow: hidden;
}

.accommodation-swiper .swiper-wrapper {
    max-width: 0px;
}

.accommodation-swiper .swiper-slide img {
    aspect-ratio: 192 / 135;
    max-height: 420px;
    object-fit: cover;
    width: 100%;
    transition: aspect-ratio 0.5s ease;
}

.stay-card:hover .swiper-slide img {
    aspect-ratio: 192 / 115;
}

.accommodation-swiper .swiper-pagination-bullet {
    background: var(--color-black) !important;
    opacity: 20%;
}

.accommodation-swiper .swiper-pagination-bullet-active {
    opacity: 100%;
}

.styled-swiper {
    background: var(--color-black);
    height: 20px !important;
    padding: 26px;
}

.styled-swiper.swiper-button-prev {
    left: 0 !important;
}

.styled-swiper.swiper-button-next {
    right: 0 !important;
}

.styled-swiper::after {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: initial !important;
}

.swiper-button-prev.styled-swiper::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22%3E%3Cpath d%3D%22M0.833527 9.9979L6.37144 16.2458L7.30687 15.4167L3.05785 10.6229L19.1687 10.6229V9.3729L3.05785 9.3729L7.30687 4.57913L6.37144 3.75L0.833527 9.9979Z%22 fill%3D%22%23FFFFFF%22/%3E%3C/svg%3E");
}

.swiper-button-next.styled-swiper::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13.6306 3.75L19.1685 9.9979L13.6306 16.2458L12.6952 15.4167L16.9442 10.6229H0.833344V9.3729H16.9442L12.6952 4.57913L13.6306 3.75Z%22 fill%3D%22%23FFFFFF%22/%3E%3C/svg%3E");
}

.acc-swiper-btn {
    display: none !important;
    padding: 14px !important;
    height: 16px !important;
    width: 16px !important;
}

.stay-card:hover .acc-swiper-btn {
    display: flex !important;
}

.accommodation-content {
    display: flex;
}

.scrolling-title {
    flex: 0 0 33%;
}

.accommodation-map {
    margin-top: var(--spacing-small);
}

#mapAll {
    width: 100%;
    height: 100%;
}

/* FILTERS */

/*
 * The search bar carries its own card and shadow (stay-search.css), so this is
 * only where it sits: over the bottom of the hero above it, as nodes 1:3051
 * and 1:2345 draw it. The rules for the old row of selects went with them.
 */
.filter-wrapper {
    position: relative;
    z-index: 20;
    /* Node 1:2345: the card starts at 314 over a band that ends at 496. */
    margin-top: -182px;
}

.taxonomy-page .filter-wrapper {
    margin-top: -182px;
}

@media (min-width: 992px) {
    .filter-wrapper,
    .taxonomy-page .filter-wrapper {
        margin-top: -86px;
    }
}

/*------------------------------------------------------------

#SINGLE YACHT

--------------------------------------------------------------*/

.yacht-title-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 32px 0 24px;
}

.yacht-featured-image {
    width: 100%;
    max-height: 820px;
    object-fit: cover;
}

.swiper-container-yacht {
    padding-left: var(--spacing-med) !important;
}

/*------------------------------------------------------------

#GALLERY WITH NAVIGATION

--------------------------------------------------------------*/

.gallery-nav-section {
    padding-bottom: var(--spacing-large);
    padding-right: 0;
}

.gallery-swiper-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--color-black);
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 40px);
    left: 62.5%;
    height: 80px;
    width: 80px;
    z-index: 5;
}

.gallery-nav-section .gallery-swiper-btn {
    position: static;
    height: 16px;
    width: 16px;
    margin-top: 0;
}

.gallery-nav-section .swiper-button-prev.gallery-swiper-btn::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M0.833527 9.9979L6.37144 16.2458L7.30687 15.4167L3.05785 10.6229L19.1687 10.6229V9.3729L3.05785 9.3729L7.30687 4.57913L6.37144 3.75L0.833527 9.9979Z" fill="%23FFFFFF"/></svg>');
    height: 100%;
    font-size: 0;
}

.gallery-nav-section .swiper-button-next.gallery-swiper-btn::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6306 3.75L19.1685 9.9979L13.6306 16.2458L12.6952 15.4167L16.9442 10.6229H0.833344V9.3729H16.9442L12.6952 4.57913L13.6306 3.75Z" fill="%23FFFFFF"/></svg>');
    height: 100%;
    font-size: 0;
}

.swiper-circle::after {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4.5" stroke="%23FFFFFF"/><circle cx="5" cy="5" r="1.5" stroke="%23FFFFFF"/></svg>');
}

.gallery-nav-section .swiper-slide img {
    aspect-ratio: 288 / 233;
    object-fit: cover;
}

/*------------------------------------------------------------

#SEARCH

--------------------------------------------------------------*/

.searcht-title {
    text-transform: capitalize;
}

/* #search-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 32px;
} */

#search-wrapper article.blog-post {
    display: flex;
    flex: 1 0 calc(33% - 32px);
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    max-width: calc(33% - 32px);
}

#search-wrapper img.blog-featured-image {
    object-fit: cover;
    width: 100%;
}

#search-wrapper .blog-post-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
}

#search-wrapper p.blog-title {
    font-size: var(--body-text-large) !important;
    font-weight: 400;
    line-height: 140%;
    margin: 0;
}

#search-wrapper p.blog-title a {
    color: var(--color-black);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

#search-wrapper p.blog-excerpt {
    color: var(--Dark-Grey);
    font-size: 16px;
    font-weight: 300;
    line-height: 140%;
    margin: 0;
}

#search-wrapper .blog-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#search-wrapper .filter-wrapper {
    display: none;
}

/*------------------------------------------------------------

#CONTACT FORM

--------------------------------------------------------------*/

/*------------------------------------------------------------

#EXTERNALS

--------------------------------------------------------------*/

.gsb-button-list {
    display: flex;
    flex-direction: column;
}

.gsb-button-list .chat-button:nth-child(1) {
    -webkit-transform: none !important;
    transform: none !important;
    bottom: 80px;
}

.gsb-button-list .chat-button a {
    background: var(--color-black) !important;
    width: 64px !important;
    height: 64px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gsb-button-list .chat-button-icon {
    width: 32px !important;
    height: 32px !important;
}

/*------------------------------------------------------------

#MEDIA QUERIES

--------------------------------------------------------------*/

/*
// Mobile First
*/

/*
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

/*
// Desktop First
*/

@media (max-width: 1720px) {
    .navbar-nav.main {
        gap: 14px;
    }

    .navbar-nav.main li a {
        font-size: 16px;
    }
}

@media (max-width: 1600px) {
    .navbar-nav.main {
        gap: 10px;
    }

    .navbar-nav.main li a {
        font-size: 16px;
    }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1400px) {
    .menu-wrapper {
        padding: 0;
    }

    .mobile-menu-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 32px;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-menu-item:first-child {
        margin-right: auto;
    }

    .mobile-menu-item:not(:first-child) {
        margin-left: 0;
    }

    .navbar-toggle .burger {
        display: block;
    }

    .navbar-toggle {
        background: none;
        border: none;
    }

    .navbar-toggle svg {
        width: 25px;
        height: 25px;
    }

    .navbar-toggle svg path {
        fill: var(--color-black);
    }

    .burger path {
        transition:
            transform 0.5s ease,
            opacity 0.5s ease;
        transform-origin: center;
    }

    .nooverflow .burger path:nth-child(1) {
        opacity: 0;
    }

    .nooverflow .burger path:nth-child(2) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nooverflow .burger path:nth-child(3) {
        opacity: 0;
    }

    .nooverflow .closed {
        display: block !important;
    }

    #mobile-menu-container {
        position: absolute;
        top: 78px;
        right: 0;
        left: 0;
        bottom: 0;
        background: var(--color-white);
        height: 100vh;
    }

    .nav.mobile {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: center;
        margin-top: 2em;
    }

    .nav.mobile li a {
        color: var(--color-black);
        font-size: 26px;
        font-weight: bold;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {
    .footer-navigation {
        padding-inline: var(--spacing-small) !important;
    }

    .socials-wrapper {
        padding-inline: var(--spacing-small) !important;
    }

    .copyright-wrapper {
        padding-inline: var(--spacing-small) !important;
    }

    .blog-featured-image {
        min-height: 220px;
    }


    #search-wrapper article.blog-post {
        flex: 1 0 calc(50% - 32px);
        max-width: calc(50% - 32px);
        justify-content: flex-start;
    }

    #search-wrapper .blog-post-content {
        justify-content: space-between;
        height: 100%;
    }

    .accommodation-gallery {
        flex-direction: column;
    }

    .swiper-container-accommodation {
        max-width: 100%;
    }

    .swiper-container-thumb .swiper-slide {
        width: calc(100% / 3) !important;
    }

    img.thumb-image {
        aspect-ratio: 16 / 12;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
    .gallery-swiper-nav {
        display: none;
    }

    /* One column: two columns of amenity names wrap badly on a phone, and the
       eight-item grid has to stop forcing four rows for that to work. */
    .amenities-list {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Four of them, per the frame. In one column the eight the desktop grid
     * shows ran most of a screen before the page got to the booking card, so
     * the rest go behind "Show all N facilities" - which amenities-list.php
     * makes sure is on the page from the fifth amenity up.
     */
    .amenities-list > :nth-child(n + 5) {
        display: none;
    }

    /*
     * Node 1:4854: on a phone the dialog is not a panel over the page but a
     * page of its own - the site's logo and a close in a bar across the top,
     * the heading under it, then the whole list in one column. So the dialog
     * loses its padding and backdrop and the panel fills the viewport.
     */
    .amenities-dialog {
        padding: 0;
    }

    .amenities-dialog-backdrop {
        display: none;
    }

    .amenities-dialog-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        padding: 0 24px 32px;
    }

    /* The bar wraps: logo and close on the first row, the heading on the
       second. One DOM, ordered by CSS, so the desktop panel keeps its own
       single row. */
    .amenities-dialog-head {
        position: sticky;
        top: 0;
        z-index: 1;
        flex-wrap: wrap;
        gap: 0;
        align-items: center;
        margin: 0 -24px 8px;
        padding: 0 24px;
        background: var(--color-white);
    }

    .amenities-dialog-logo {
        display: block;
        order: 1;
        width: auto;
        max-width: 180px;
        height: auto;
        padding: 20px 0;
    }

    .amenities-dialog-close {
        order: 2;
        margin-left: auto;
    }

    .amenities-dialog-close-times {
        display: none;
    }

    .amenities-dialog-close-icon {
        display: inline-flex;
    }

    .amenities-dialog-close-icon svg {
        width: 24px;
        height: 24px;
    }

    .amenities-dialog-title {
        order: 3;
        flex: 0 0 100%;
        padding: 24px 0 8px;
    }

    .amenities-dialog-list {
        columns: 1;
    }

    .accommodation-content.pi-main.pb-large {
        flex-direction: column;
        gap: var(--spacing-med);
    }

    .modal-wrapper {
        left: 20px;
        right: 20px;
    }

    .gallery-modal-content {
        padding: 14px;
    }

    .gallery-modal-content .gallery-image {
        /* 14px of padding either side, one 10px gutter. */
        width: calc((100% - 28px - 10px) / 2);
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 768px) {
    .nav.mobile li {
        text-align: center;
    }

    .btn-main {
        padding: 16px 20px;
    }

    .newsletter-form input {
        max-width: 100%;
    }

    .more-posts-content {
        flex-direction: column;
    }

    .accommodation-title-wrapper {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .accommodation-data {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0px;
        padding: 16px 0 8px 0;
        row-gap: 8px;
    }

    .accommodation-data span {
        padding-right: 8px;
    }

    .swiper-container-thumb {
        display: none !important;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .breadcrumb-wrapper {
        display: none;
    }



    .amenities-list {
        gap: 12px;
        flex-direction: column;
    }

    #search-wrapper {
        flex-direction: column;
    }

    #search-wrapper article.blog-post {
        max-width: 100%;
    }

    .yacht-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .yacht-details {
        gap: 12px;
        flex-direction: column;
    }

    .more-posts-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-navigation {
        flex-direction: column;
    }

    .copyright-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .footer-bg-image {
        display: none;
    }

    .lower-footer-wrapper {
        position: relative;
    }

    /*
     * The newsletter, the columns and the lower band each carry their own
     * block padding, so the wrapper adds none - it only loses its inline
     * margin so the footer runs to the edge of a phone screen.
     */
    .footer-wrapper {
        margin: 0;
    }

    .footer-nav-item {
        margin-block: 12px;
    }

    .lower-footer-wrapper {
        gap: 20px;
    }

    .gallery-button-wrapper {
        bottom: 0;
        right: 0;
    }
}

/*
 * The header takes more padding from 992 up, so --header-height follows it -
 * see the hero, which sizes itself against what the header leaves.
 */
@media (min-width: 992px) {
    :root {
        --header-height: 108px;
    }
}

/*------------------------------------------------------------

#CHAT WIDGET

--------------------------------------------------------------*/

/*
 * The floating chat stack belongs to the sticky-chat-widget plugin. It fixes
 * itself 25px off the bottom right and positions its buttons upward from that
 * anchor, so where the stack sits is the one thing this sheet can move.
 *
 * On a phone the bottom right is where the stay's own fixed booking bar is
 * (node 1:2326): the WhatsApp button was sitting on top of "Book This
 * Property", covering the end of the page's primary call to action. The anchor
 * is raised clear of the bar, which is 163px tall plus its shadow.
 */
@media (max-width: 992px) {
    .single-accommodation .gsb-buttons {
        bottom: 190px;
    }
}